[WPF] 동영상 파일을 오디오 파일로 변환하기 : Version 2. 다운로드 폴더 선택 모드

개발 배경

Windows Forms 를 이용하여 간단하게 동영상 파일을 오디오 파일로 변환하는 프로그램을 만들 수 있었습니다. 다만, 개발 지식이 없는 사용자들에게 배포하기에는 설명이 길어지겠다 싶었습니다. 사용자가 사용법을 숙지하게 한다는 건 개발적으로 아쉬움이 있기 때문이다. 아쉬움을 해결하기 위해서 실제 사용자를 위한 프로그램을 만들자 결심하였습니다. 프레임워크로 WPF를 선택한 이유는 WPF의 기본 컨트롤 MediaElement을 사용하기 위해서였는데 만들다 보니 필요가 없어져서 삭제했습니다.

 

그래도, 레이아웃 배치와 스타일, 리소스 설정하는 것이 재미있어서 계속 이어서 만들었습니다. 

 

Version 1의 사용 후기에서 다운로드 폴더를 직접 설정하고 싶다는 의견에 공감하여 Version 2를 만들었습니다.

 

2023.08.04 - [개발/Windows] - [WPF] 동영상 파일을 오디오 파일로 변환하기 : Version 1. 다운로드 폴더 고정 모드

[WPF] 동영상 파일을 오디오 파일로 변환하기 : Version 1. 다운로드 폴더 고정 모드

 

완성된 프로그램 디자인

프로그램의 목표

• 동영상 파일 필터
  동영상 확장자가 아닌 다른 확장자를 선택하지 않게 파일 선택 상자에서 기본 검색 필터를 추가하고 조회할 수 있게 하고 싶었습니다.
  
  
• 사용자 액션 표시하기
  Version 1도 제가 사용했을 때는 직관적이라고 생각했는데 어떻게 진행되고 있는 건가요?라는 질문을 받으니 당황스러웠습니다. 버튼 클릭했을 때 기능이 정상적으로 이루어져도 사용자에게 피드백이 있어야 한다는 것을 다시 한번 깨닫습니다. 버튼을 클릭하고 정상적으로 이루어지면 색깔이 변하도록 추가하였습니다.
  
  
• 다운로드 폴더 선택하기
  사용자가 직접 다운로드할 폴더를 선택합니다. 
  
  
• 파일명에 현재 일시 추가하기
  파일명 중복에 대해서 알림 메시지를 띄워 덮어 쓰거나, 새로 만들도록 하는 옵션도 있겠지만 사용자 별로 어떤 것을 선호할지 몰라서 파일명에 현재 시간 정보를 추가하자로 목표를 정했습니다.

프로그램의 사용 방법

1. [Video 파일 열기] 버튼을 클릭하여 변환할 동영상 파일을 선택합니다.    

2. [Audio 파일(.mp3) 변환하기] 버튼을 클릭하여 저장할 폴더를 선택합니다.

Version 1에서는 다운로드 폴더가 고정되어 있기 때문에 클립보드로 복사하는 기능을 추가했었습니다. 사용자가 원하는 저장공간에 저장하기 때문에 유용한 기능은 아니겠지만 그래도 있으면 좋을 것 같아 유지하였습니다.

 

알림창 확인 메시지는 [취소]를 클릭하면 변한 색깔이 그대로 유지되고 [확인] 버튼을 클릭하면 원래 색깔로 바뀝니다. 프로그램적으로는 변수값을 초기화할 것이냐? 말 것이냐?입니다.

3. 선택한 로컬 드라이브/audio/downloads/선택한 동영상 파일명_yyyyMMddHHmmss.mp3 형식으로 변환됩니다.

동영상 파일 오디오 변환

Winodws Forms에서 사용했던 NAudio NuGet 패키지를 사용하여 동영상 파일을 오디오 파일로 변환하였습니다.

 

2023.08.04 - [개발/Windows] - [Windows Forms] NAudio NuGet 패키지를 사용하여 동영상 파일을 오디오 파일로 변환하기

[Windows Forms] NAudio NuGet 패키지를 사용하여 동영상 파일을 오디오 파일로 변환하기

목표 2 : 사용자 액션 표시하기

화면

<Button x:Name="btnFindVideo" Grid.Row="0" Content="Video 파일 열기" HorizontalAlignment="Center" VerticalAlignment="Top"  Click="btnFindVideo_Click" Grid.Column="1" Grid.RowSpan="2" Width="379" Height="30" Margin="10,10,10,0">
            <Button.Style>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="Foreground" Value="White" />
                    <!-- 테두리 색상을 설정 -->
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Border x:Name="borderBtnFindVideo" CornerRadius="5" Background="#FFF2BE80" BorderBrush="{TemplateBinding BorderBrush}">
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" ContentTemplate="{TemplateBinding ContentTemplate}" />
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Style>
        </Button>
        <Button x:Name="btnSave" Grid.Row="1" Content="Audio 파일(.mp3) 변환하기" HorizontalAlignment="Center" VerticalAlignment="Top"  Click="btnSave_Click" Grid.Column="1" Grid.RowSpan="2" Width="379" Height="30" Margin="10,10,10,0">
            <Button.Style>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="Foreground" Value="White" />
                    <!-- 테두리 색상을 설정 -->
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Border x:Name="borderBtnSave" CornerRadius="5" Background="#F29580" BorderBrush="{TemplateBinding BorderBrush}">
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" ContentTemplate="{TemplateBinding ContentTemplate}" />
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Style>
        </Button>

클릭 이벤트

버튼을 클릭했을 때 Border object로 Template에 있는 버튼을 찾아서 찾은 object에게 버튼 색상을 변경하라는 메서드를 호출합니다.

// 버튼 색깔 바꾸기
Border? borderSave = btnSave.Template.FindName("borderBtnSave", btnSave) as Border;

if (borderSave != null)
{
    ChangeButtonColor(borderSave, audioDirectory, "#F29580", "#32B8CD");
}

색상 변경하는 메서드

메서드를 실행할 때 필수값이 없으면 기본 색상 유지, 필수값이 존재하면 색상을 변경하게 하였습니다.

 

 private void ChangeButtonColor(Border borderElement, string hasValue, string defaultColorCode, string hasColorCode) 
{
    Color color;

    if (!string.IsNullOrEmpty(hasValue))
    {
       color = (Color)ColorConverter.ConvertFromString(hasColorCode);
       borderElement.Background = new SolidColorBrush(color);
    }
    else
    {
       color = (Color)ColorConverter.ConvertFromString(defaultColorCode);
       borderElement.Background = new SolidColorBrush(color);
    }
}

사용 후기

사용하고 있는 동영상 파일의 확장자는 전부 다 오류 없이 잘 된다고 하셨습니다. 확실히 다운로드 폴더를 선택할 수 있으니 일반적인 프로그램과 인터페이스가 유사해 설명 없어도 처음부터 사용할 수 있다고 Version 2가 더 좋다고 하셨습니다.

 

마지막에 알림 메시지에서 초기화의 [확인], [취소] 차이점이 무엇이냐고. 똑같지 않냐고 하셔서, 알림 메시지가 의도와 다르게 혼동을 주고 있구나 느꼈습니다.

 

스킬적으로 배워서 해보고 싶은 관심 있는 기능이랑 사용자들이 원하고 관심 있는 기능의 생각 차이가 있다는 걸 직접 겪으니 재미있고 사용자 의견이 얼마나 소중한 지 알겠습니다. 좀 더 스킬보다 사용자가 쓸 수 있는 프로그램을 만들어야겠다. 다시 한번 마음먹게 됩니다.

 

참고
https://learn.microsoft.com/en-us/dotnet/desktop/wpf/graphics-multimedia/how-to-control-a-mediaelement-play-pause-stop-volume-and-speed?view=netframeworkdesktop-4.8