빠른 시작: UI 리소스 번역(HTML)

  • 아티클

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

UI용 문자열 리소스를 리소스 파일에 넣습니다. 그러면 코드 또는 태그로부터 해당 문자열을 참조할 수 있습니다.

지침

  1. 문자열을 코드나 태그에 바로 넣는 대신 리소스 파일에 넣습니다.

    1. Visual Studio에서 package.appxmanifest를 열고 응용 프로그램 탭으로 이동한 후 기본 언어를 "en-US"로 설정합니다. 범용 앱인 경우 솔루션의 각 package.appxmanifest에 대해 이 작업을 수행합니다.참고  이렇게 하면 프로젝트의 기본 언어가 지정됩니다. 기본 언어 리소스는 사용자의 기본 설정 언어 또는 표시 언어가 응용 프로그램에 제공된 언어 리소스와 일치하지 않을 경우 사용됩니다. 속성 페이지, JavaScript를 참조하세요.  
    2. 리소스 파일을 넣을 폴더를 만듭니다.
      1. 솔루션 탐색기에서 프로젝트(범용 앱인 경우 공유 프로젝트)를 마우스 오른쪽 단추로 클릭하고 추가 > 새 폴더를 선택합니다.
      2. 새 폴더의 이름을 "strings"로 지정합니다.
      3. 새 폴더가 솔루션 탐색기에 보이지 않으면 프로젝트가 여전히 선택된 상태에서 Microsoft Visual Studio 메뉴에서 프로젝트 > 모든 파일 표시를 선택합니다.
    3. 영어(미국)용 하위 폴더와 리소스 파일을 만듭니다.

      1. 문자열 폴더를 마우스 오른쪽 단추로 클릭하고 그 아래에 새 폴더를 추가합니다. 이름을 "en-US"로 지정합니다. 리소스 파일은 BCP-47 언어 태그용으로 이름이 지정된 폴더에 배치됩니다. 언어 한정자 및 일반 언어 태그 목록에 대한 자세한 내용은 한정자를 사용하여 리소스 이름을 지정하는 방법을 참조하세요.

      2. en-US 폴더를 마우스 오른쪽 단추로 클릭하고 추가 > **새 항목…**을 선택합니다.

      3. "리소스 파일(.resjson)"을 선택합니다.

      4. 추가를 클릭합니다. 이렇게 하면 기본 이름 resources.rejson을 사용한 리소스 파일이 추가됩니다. 이 기본 파일 이름을 사용하는 것이 좋습니다. 앱에서 리소스를 여러 파일로 분할할 수 있지만 이러한 파일을 참조할 때는 각별히 주의하여 올바르게 참조해야 합니다.문자열 리소스를 로드하는 방법을 참조하세요.

      5. 새 파일에는 기본 콘텐츠가 포함되어 있습니다. 파일 내용을 다음 코드로 바꿉니다(기본값과 유사할 수 있음).

        strings/en-US/resources.resjson

        {
    "greeting"              : "Hello",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Goodbye",
    "_farewell.comment"     : "A goodbye."
}

        마지막 쌍을 제외한 각 이름/값 쌍 뒤에 쉼표를 추가해야 하는 엄격한 JSON(JavaScript Object Notation) 구문입니다. 이 샘플에서 "greeting" 및 "farewell"은 표시되어야 하는 문자열을 나타냅니다. 다른 쌍("_greeting.comment" 및 "_farewell.comment")은 문자열을 설명하는 주석입니다. 주석은 문자열을 다른 언어로 지역화하는 번역사에게 특별한 지침을 제공할 수 있는 위치입니다.

  2. 코드 및 태그에 문자열 리소스 식별자를 추가합니다.

    1. JavaScript용 Windows 라이브러리에 대한 참조를 HTML 파일에 추가합니다(없는 경우).

      참고  다음 코드는 Visual Studio에서 새로운 빈 앱(범용 앱) 프로젝트를 만들 때 생성되는 Windows 프로젝트의 default.html 파일용 HTML을 보여 줍니다. 여기에는 WinJS에 대한 참조가 이미 포함되어 있습니다.

      <!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

      참고  다음 코드는 Visual Studio에서 새로운 빈 앱(범용 앱) 프로젝트를 만들 때 생성되는 WindowsPhone 프로젝트의 default.html 파일용 HTML을 보여 줍니다. 여기에는 WinJS에 대한 참조가 이미 포함되어 있습니다.

      <!-- WinJS references -->
<link href="/css/ui-themed.css" rel="stylesheet" />
<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

    2. HTML 파일과 함께 제공되는 JavaScript 코드에서 HTML이 로드될 때 WinJS.Resources.processAll 함수를 호출합니다.

      WinJS.Application.onloaded = function(){
    WinJS.Resources.processAll();
}

      추가 HTML이 WinJS.UI.Pages.PageControl 개체에 로드되면, 페이지 컨트롤의 IPageControlMembers.ready 메서드에서 WinJS.Resources.processAll(element)을 호출합니다. 여기에 HTML 요소 (element 및 하위 요소)가 로드됩니다. 이 예제는 응용 프로그램 리소스 및 지역화 샘플의 시나리오 6을 기반으로 합니다.

      var output;

var page = WinJS.UI.Pages.define("/html/scenario6.html", {
    ready: function (element, options) {
        output = element.querySelector('#output');
        WinJS.Resources.processAll(output); // Refetch string resources
        WinJS.Resources.addEventListener("contextchanged", refresh, false);
    }
    unload: function () { 
        WinJS.Resources.removeEventListener("contextchanged", refresh, false); 
    } 
});

    3. HTML에서 리소스 파일의 리소스 식별자('greeting' 및 'farewell')를 사용하여 문자열 리소스를 참조합니다.

      <h2><span data-win-res="{textContent: 'greeting'}"></span></h2>
<h2><span data-win-res="{textContent: 'farewell'}"></span></h2>

    4. 특성에 대한 문자열 리소스를 참조합니다.

      <div data-win-res="{attributes: {'aria-label' : 'String1'}}" >

    5. JavaScript에서 문자열 리소스를 참조합니다.

      var el = element.querySelector('#header');
var res = WinJS.Resources.getString('greeting');
el.textContent = res.value;
el.setAttribute('lang', res.lang);

    HTML 대체를 위한 data-win-res 특성의 일반 패턴은 data-win-res="{propertyname1: 'resource ID', propertyname2: 'resource ID2'}"입니다.

    참고  문자열에 태그가 포함되어 있지 않으면, 가능한 경우 innerHTML 대신 textContent 속성에 리소스를 바인딩하세요. textContent 속성이 innerHTML보다 훨씬 교체 속도가 빠릅니다.

     

  3. 다른 두 언어에 대한 폴더와 리소스 파일을 추가합니다.

    1. 독일어용으로 문자열 폴더 아래에 다른 폴더를 추가합니다. 독일어(독일)에 대해 폴더 이름을 "de-DE"로 지정합니다.

    2. de-DE 폴더에 다른 Resources.rejson 파일을 만들고 그 콘텐츠를 다음 내용으로 바꿉니다.

      strings/de-DE/resources.resjson

      {
    "greeting"              : "Hallo",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Auf Wiedersehen",
    "_farewell.comment"     : "A goodbye."
}

    3. 프랑스어(프랑스)용으로 "fr-FR"이라는 폴더를 하나 더 만듭니다. 새 Resources.rejson 파일을 만들고 그 콘텐츠를 다음 내용으로 바꿉니다.

      strings/fr-FR/resources.resjson

      {
    "greeting"              : "Bonjour",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Au revoir",
    "_farewell.comment"     : "A goodbye."
}

  4. 앱을 빌드하여 실행합니다.

    기본 표시 언어를 위한 앱 테스트

    1. F5 키를 눌러 앱을 빌드 및 실행합니다.
    2. greeting 및 farewell이 사용자의 기본 설정 언어로 표시됩니다.
    3. 앱을 종료합니다.

    참고  Windows 스토어 앱 전용입니다. 다른 언어에 대해 앱을 테스트합니다.

    1. 제어판을 열고 시계, 언어 및 국가별 옵션 > 언어를 선택합니다.
    2. 앱 실행 시 표시된 언어는 목록에 있는 최상위 언어(영어, 독일어 또는 프랑스어)입니다. 최상위 언어가 이 세 언어 중 하나가 아니면 앱이 지원하는 목록에서 그 다음 언어가 앱에 적용됩니다.
    3. 시스템에 이 세 언어가 모두 없을 경우에는 언어 추가를 클릭하고 목록에 추가합니다.
    4. 앱을 다른 언어로 테스트하기 위해서 목록에서 해당 언어를 선택하고 이 언어가 맨 위에 올 때까지 위로 이동을 클릭합니다. 그런 다음 앱을 실행합니다.

    참고  Windows Phone 스토어 앱만 해당됩니다. 다른 언어에 대해 앱을 테스트합니다.

    1. 휴대폰(또는 휴대폰 에뮬레이터)에 설정을 표시합니다.
    2. 언어를 선택합니다.
    3. 앱 실행 시 표시된 언어는 목록에 있는 최상위 언어(영어, 독일어 또는 프랑스어)입니다. 최상위 언어가 이 세 언어 중 하나가 아니면 앱이 지원하는 목록에서 그 다음 언어가 앱에 적용됩니다.
    4. 휴대폰에 이 세 언어가 모두 없을 경우에는 언어 추가를 탭한 다음 목록에 추가하는 방식으로 누락된 언어를 추가합니다.
    5. 앱을 다른 언어로 테스트하기 위해서 목록에서 해당 언어를 길게 탭하고 이 언어가 맨 위에 올 때까지 위로 이동을 탭합니다. 그런 다음 휴대폰을 초기화하고 앱을 실행합니다.

관련 항목

한정자를 사용하여 리소스 이름을 지정하는 방법

문자열 리소스를 로드하는 방법

WinJS.Resources.processAll

응용 프로그램 리소스 및 지역화 샘플(영문)

속성 페이지, JavaScript

BCP-47 언어 태그