Kakao 번역 API와 .NET 음성 Speech를 이용한 번역 나래이터 만들기 4. 최종 번역 나래이터 구현[ WPF]

안녕하세요. 언제나 휴일에 언휴예요.

이제 앞에서 작성한 두 개의 라이브러리를 참조하여 WPF 번역 나래이터를 만들어 보아요.

화면 배치

제일 먼저 화면 배치를 합니다.

배치
배치

Window의 Content를 Grid로 할게요. Row는 3개, Column은 2개이며 그림처럼 폭과 높이를 설정합시다.

배치2

나머지 부분도 배치합니다. ListBox 내부는 Window의 Load 이벤트 핸들러에서 C# 코드로 직접 작성할 거예요.

MainWindow C# 숨김 코드 작성하기

Load 이벤트 핸드러를 작성합시다.

먼저 Narrator 클래스의 정적 멤버 Narrators 속성에서 나래이터 컬렉션 개체를 얻어옵니다.

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            List narrators = Narrator.Narrators;
        }

그리고 모든 나래이터마다 하나의 Grid 개체를 생성하여 나래이터 정보와 “소개하기” 버튼을 배치할 거예요. 이렇게 생성한 Grid 개체는 ListBox의 Items 컬렉션에 추가합니다.

Xaml에서 표현한 것을 코드로 어떻게 표현하는지 한 번 비교해 보세요. WPF 프로그래밍을 하다보면 코드 숨김 C# 파일에서 이런 작업을 할 때가 발생합니다.

각 UI 요소에 Tag 속성이 있어서 UI 요소와 연관있는 개체를 설정해 두었다가 필요할 때 사용하는 부분도주의 깊게 살펴보세요.

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            List narrators = Narrator.Narrators;
            Grid grid;
            ColumnDefinition cd;
            TextBlock tb_bar;
            Button button;
            foreach(Narrator narrator in narrators)
            {
                grid = new Grid();
                grid.Width = lbox_narbut.ActualWidth - 20;
                cd = new ColumnDefinition();
                cd.Width = new GridLength(5, GridUnitType.Star);
                grid.ColumnDefinitions.Add(cd);
                cd = new ColumnDefinition();
                cd.Width = new GridLength(1, GridUnitType.Star);
                grid.ColumnDefinitions.Add(cd);

                tb_bar = new TextBlock();
                tb_bar.Text = narrator.Name;
                grid.Children.Add(tb_bar);
                button = new Button();
                button.Tag = narrator;
                button.Content = "소개하기";
                button.Click += Button_Click;
                grid.Children.Add(button);
                Grid.SetColumn(button, 1);
                lbox_narbut.Items.Add(grid);
                grid.Tag = narrator;
            }
        }

나래이터 소개 버튼을 클릭했을 때 처리하는 이벤트 핸들러를 구현합시다. 이벤트 핸들러의 첫 번째 입력 인자는 이벤트 발생을 통보한 개체입니다. 버튼 클릭 이벤트 핸들러에서는 버튼 자신이 sender입니다. 이를 참조 연산하여 사용하는 부분과 Tag에 설정했던 요소를 참조합니다. 그리고 비동기로 자기를 소개합니다.

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Button button = sender as Button;
            if(button == null)
            {
                return;
            }
            Narrator narrator = button.Tag as Narrator;
            if(narrator == null)
            {
                return;
            }
            narrator.IntroduceAsync();
        }

btn_speek의 클릭 이벤트 핸들러를 작성합시다. 나래이터-버튼 리스트 박스의 첫 번째 아이템 항목에 Grid 개체를 참조합니다.

Grid 개체 Tag 속성에 설정한 Narrator 개체를 참조하여 비동기로 읽어줍니다.

        private void btn_speek_Click(object sender, RoutedEventArgs e)
        {
            Grid grid = lbox_narbut.Items[0] as Grid;
            if(grid == null)
            {
                return;
            }
            Narrator narrator = grid.Tag as Narrator;
            narrator.SpeakAsync(tbox_src.Text);
        }

btn_translate의 클릭 이벤트 핸들러를 작성합시다. KakaoTranslateAPI 형식의 Translate 정적 메서드를 호출하여 결과를 TextBlock에 표시합니다.

        private void btn_translate_Click(object sender, RoutedEventArgs e)
        {
            string result = KakaoTransAPI.Translate(tbox_src.Text);
            tbl_trnas.Text = result;
        }

btn_speek2의 클릭 이벤트 핸들러는 btn_speek 이벤트 핸들러와 하는 역할이 같습니다. 차이가 있는 부분은 Narrator 개체입니다.

        private void btn_speek2_Click(object sender, RoutedEventArgs e)
        {
            Grid grid = lbox_narbut.Items[1] as Grid;
            if(grid == null)
            {
                return;
            }
            Narrator narrator = grid.Tag as Narrator;
            narrator.SpeakAsync(tbox_src.Text);
        }

마지막으로 btn_all의 클릭 이벤트 핸들러를 작성합시다. 위에서 수행한 모든 작업을 수행하게 구현합니다.

        private void btn_all_Click(object sender, RoutedEventArgs e)
        {
            Grid grid = lbox_narbut.Items[0] as Grid;
            if(grid == null)
            {
                return;
            }
            Narrator narrator = grid.Tag as Narrator;
            narrator.SpeakAsync(tbox_src.Text);

            string result = KakaoTransAPI.Translate(tbox_src.Text);
            tbl_trnas.Text = result;

            grid = lbox_narbut.Items[1] as Grid;
            if (grid == null)
            {
                return;
            }
            Narrator narrator2 = grid.Tag as Narrator;
            narrator2.SpeakAsync(tbox_src.Text);
        }

다음은 MainWindow.xaml의 소스 코드입니다.

using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using WrapKakaoLib;
using WrapSpeechLib;

namespace 번역_나래이터_v0._1
{
    ///
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void btn_speek_Click(object sender, RoutedEventArgs e)
        {
            Grid grid = lbox_narbut.Items[0] as Grid;
            if(grid == null)
            {
                return;
            }
            Narrator narrator = grid.Tag as Narrator;
            narrator.SpeakAsync(tbox_src.Text);
        }

        private void btn_translate_Click(object sender, RoutedEventArgs e)
        {
            string result = KakaoTransAPI.Translate(tbox_src.Text);
            tbl_trnas.Text = result;
        }

        private void btn_speek2_Click(object sender, RoutedEventArgs e)
        {
            Grid grid = lbox_narbut.Items[1] as Grid;
            if(grid == null)
            {
                return;
            }
            Narrator narrator = grid.Tag as Narrator;
            narrator.SpeakAsync(tbox_src.Text);
        }

        private void btn_all_Click(object sender, RoutedEventArgs e)
        {
            Grid grid = lbox_narbut.Items[0] as Grid;
            if(grid == null)
            {
                return;
            }
            Narrator narrator = grid.Tag as Narrator;
            narrator.SpeakAsync(tbox_src.Text);

            string result = KakaoTransAPI.Translate(tbox_src.Text);
            tbl_trnas.Text = result;

            grid = lbox_narbut.Items[1] as Grid;
            if (grid == null)
            {
                return;
            }
            Narrator narrator2 = grid.Tag as Narrator;
            narrator2.SpeakAsync(tbox_src.Text);
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            List narrators = Narrator.Narrators;
            Grid grid;
            ColumnDefinition cd;
            TextBlock tb_bar;
            Button button;
            foreach(Narrator narrator in narrators)
            {
                grid = new Grid();
                grid.Width = lbox_narbut.ActualWidth - 20;
                cd = new ColumnDefinition();
                cd.Width = new GridLength(5, GridUnitType.Star);
                grid.ColumnDefinitions.Add(cd);
                cd = new ColumnDefinition();
                cd.Width = new GridLength(1, GridUnitType.Star);
                grid.ColumnDefinitions.Add(cd);

                tb_bar = new TextBlock();
                tb_bar.Text = narrator.Name;
                grid.Children.Add(tb_bar);
                button = new Button();
                button.Tag = narrator;
                button.Content = "소개하기";
                button.Click += Button_Click;
                grid.Children.Add(button);
                Grid.SetColumn(button, 1);
                lbox_narbut.Items.Add(grid);
                grid.Tag = narrator;
            }
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Button button = sender as Button;
            if(button == null)
            {
                return;
            }
            Narrator narrator = button.Tag as Narrator;
            if(narrator == null)
            {
                return;
            }
            narrator.IntroduceAsync();
        }
    }
}

이상으로 Kakao API와 .NET 음성 Speech를 이용한 번역 나래이터 강의를 마칠게요.