Create multi language support app (Multilingual App Toolkit) - Windows 8 RP

포스팅 할 내용을 찾아서 돌아다니던 중 Multilingual App Toolkit이라는 것을 발견하고, 뭐하는 물건인지 살펴보게 되었는데, 내용을 보니 기존 방법보다 편하고, 빠르게 Multi Language app을 만들수 있다고 하여, 셈플을 만들게 되었는데, 정확한 사용 방법을 몰라 한참을 헤메다가 몇 군데 사이트를 통해서 겨우 완벽한 셈플을 만드는데 성공하여, 포스팅을 한다.

 

1. 참고 사이트들

Multilingual App Toolkit for Visual Studio 2012 RC

http://msdn.microsoft.com/en-us/windows/apps/hh848309

Develop your app for everyone?localize your UI

http://timheuer.com/blog/archive/2012/04/26/localize-windows-8-application.aspx

 

2. 기존 다국어 지원 앱 셈플

Application resources and localization sample

http://code.msdn.microsoft.com/windowsapps/Application-resources-and-cd0c6eaa

 

셈플을 다운로드 받아서 보면, 각 언어별로 Resources.resw 파일이 존재하는 것을 알 수 있다. 하나의 문자열을 리소스로 추가하면, 지원하는 언어마다 리소스 파일을 열어서 문자열을 추가해 주어야 하는데, 이는 매우 귀찮은 작업이고, 번역도 해야하니 쉬운일은 아니다.

 

3. Multilingual App Toolkit을 사용하면?

하나의 리소스 파일을 이용해서 앱을 만들어 놓은 후 빌드하면, 추가해 놓은 언어 별로 자동으로 문자열이 추가되고, 간단한 몇 가지 작업을 하면, 모든 문자열이 각 업어별로 번역이 되어서 바로 사용이 가능하다. 한마디로, 기존 방법에 비해서는 무척 심플한 방법이라고 할 수 있겠다.

 

 

 

4. 작업 순서

 

4-1. Multilingual App Toolkit을 다운 받아서 설치한다.

Multilingual App Toolkit for Visual Studio 2012 RC

http://msdn.microsoft.com/en-us/windows/apps/hh848309

 

여기서 어떤것을 다운 받을 것인가라는 문제가 있는데, 기준언어를 어떤 것을 사용하는지에 따라 다운 받을 것이 다르다. 여기서는 기준 언어를 영어로 선택했다. 즉, 영어 -> 다른 언어로가 되는 것이다.

 

4-2. Visual Studio 2012에서 Multilingual App Toolkit을 사용 가능한 상태로 바꾼다.

  

 

4-3. SampleApp Project에서 마우스 오른쪽 클릭 -> Add translation languages 선택

 

4-4. Translation Languages 팝업 -> 변환할 언어 선택 여기서는 프랑스어를 체크(한국어, 일어, 중국어는 이미 체크되어 있는 상태라..) -> French를 확장해서 French (France)를 추가로 선택해 준다.

 

4-5. 프로젝트에 추가된 French.xlf 파일을 열어보면 아래와 같이 아무런 내용이 없음을 알 수 있다.

* 추가 French (France).xlf 파일 - 자세한 사항은 소스 참조

 

4-6. F6을 눌러서 빌드를 한 후에 다시 내용을 살펴 보면 en-US/Resources.resw 파일에 있는 내용이 추가된 것을 볼 수 있다.

 

 

 

4-7. 내용을 확인 한 후 French.xlf 파일을 오른쪽 마우스 버튼으로 클릭하고, Send for translation을 선택 한다. -> 팝업이 출력된 후 OK를 선택한다 -> 저장 위치를 선택하고 저장한다.

 

4-8. 저장된 폴더로 이동 후 SampleApp_French.xlf 파일을 더블 클릭해서 실행한다.

 

4-9. Editer가 실행이되면서, 내용이 보인다.

 

4-10. 모두 선택 후 변환을 클릭해서 번역하고, State를 Translated로 변경한 후 저장한다.

 

4-11. 다시 VS2012로 돌아와서 French.xlf 파일을 오른쪽 마우스 버튼으로 클릭하고, Import translation을 선택 한다. -> 방금 작업한 SampleApp_French.xlf 을 선택 하면 번역된 내용이 입력된 것을 볼 수 있다.(약간 변경되었으며, 자세한 사항은 소스를 참고)

 

4-12. 이후에는 윈도우의 기본 언어에 프랑스어(프랑스)를 추가하고, 언어팩을 설치 한 후 기본 언어를 변경하고 앱을 실행 시켜보자

 

 

 

 

5. 결과 화면

번역된 내용이 정확한지는 확인을 못했다.

 

 

6. MainPage.xaml

 

<Page
    x:Class="SampleApp.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SampleApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.5*"/>
            <ColumnDefinition Width="0.5*"/>
        </Grid.ColumnDefinitions>
        <StackPanel Margin="20,0,0,0">
            <TextBlock Text="Multilingual App Toolkit Sample" Style="{StaticResource PageSubheaderTextStyle}" Padding="0,20,0,0"/>
            <TextBlock x:Uid="Message_Title" Text="Person Information" Style="{StaticResource ItemTextStyle}" />
            <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
                <TextBlock x:Uid="PersonInfo_Name" Text="Name :" Margin="0,10,10,0" Width="70" TextAlignment="Right"/>
                <TextBox VerticalAlignment="Center" Width="200"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
                <TextBlock x:Uid="PersonInfo_Age" Text="Age :" Margin="0,10,10,0" Width="70" TextAlignment="Right"/>
                <TextBox VerticalAlignment="Center" Width="200"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
                <TextBlock x:Uid="PersonInfo_Sex" Text="Sex :" Margin="0,10,10,0" Width="70" TextAlignment="Right"/>
                <TextBox VerticalAlignment="Center" Width="200"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
                <TextBlock x:Uid="PersonInfo_Desc" Text="Description :" Margin="0,10,10,0" Width="70" TextAlignment="Right"/>
                <TextBox VerticalAlignment="Center" Width="200"/>
            </StackPanel>
            <TextBlock x:Uid="Message_Input" Text="Input your information please" Margin="0,10,10,0" Style="{StaticResource ItemTextStyle}"/>
        </StackPanel>
    </Grid>
</Page>

7. 이렇게 여러 언어를 지원하는 앱을 쉽게 만들 수 있다.

더 자세한 사항은 소스를 참고 하기 바란다.

 

8. 소스

 

SampleApp.zip