새로운 개발 플랫폼을 사용할 때마다 저는 앱을 원하는 방식으로 작동하게 하는 데 있어서 난관에 부딪히곤 합니다. 여러분 중에도 저처럼 포럼을 통해 문제 해결 방법에 대한 답을 얻은 분들이 많을 것입니다. 이 글을 통해 포럼에 가장 많이 올라온 주제를 선정하여 자세히 알아보고, 코딩 작업에 도움이 될 만한 추가 리소스를 제공하겠습니다. 개발자들이 가장 많이 게시하고 읽고 회신한 주제로는 앱 설정 및 데이터, 일관된 색과 스타일의 적용, 다국어와 다양한 문화권에 어울리는 디자인 방법, Metro 스타일 컨트롤을 애니메이션으로 제작하는 방법 등이 있었습니다.

각 주제별로 리소스를 선정하여 표로 정리해 보았습니다. 각각의 표는 상단에 빠른 시작 링크를 배치하고 그 옆에 SDK 샘플을, 그리고 마지막에 자세한 내용이 수록된 문서 링크를 배치하는 방식으로 구성했습니다. 빠른 시작 링크에는 API 디자인을 이해하는 데 도움이 될 배경 지식을 제공하는 설명과 코드 조각이 포함되어 있어 처음 시작하는 개발자들에게 유용합니다. SDK 샘플은 보다 깊이 있는 정보를 제공하는 동시에 코딩 작업에 어느 정도 익숙한 개발자가 참고할 수 있는 예제 역할도 합니다. 문서는 가장 자세한 정보를 제공하는 참고 자료로, 이미 익숙한 일부 기능의 원리를 완벽하게 이해하고자 할 때 참고할 수 있습니다.

앱 설정 및 데이터

“Windows.Storage.ApplicationData.current와 WinJS.Application.local 간에 어떤 차이점이 있습니까?”

포럼에 이와 비슷한 질문을 게시한 분들이 많을 것입니다. 앱에서 설정과 데이터에 액세스하는 방법은 다양하고 각각 나름의 이점이 있습니다. WinRT의 경우 XAML 앱과 JavaScript 앱에서 로컬 및 로밍 설정과 임시 데이터를 저장하는 데 사용되는 공통 API를 제공합니다. WinRT 데이터 로밍 API를 사용하면 사용자가 동일한 Microsoft 계정에 연결한 모든 컴퓨터로 앱 설정 및 데이터를 자동으로 동기화할 수 있습니다. 자세한 내용은 응용 프로그램 데이터를 참조하십시오.

Metro 스타일 앱을 디자인할 때는 사용하는 입력 장치, 표시 크기, 네트워크 연결 속도가 사용자마다 다를 수 있다는 점을 고려해야 합니다. 네트워크 상태의 변화에 대응하는 방법과 다양한 연결 속도를 지원하도록 앱을 개발하는 방법은 연결된 응용 프로그램 개발을 참조하십시오.

응용 프로그램 데이터 로밍은 Microsoft 계정으로 Windows에 로그인하는 사용자를 위해 앱 데이터를 동기화하는 간단하면서도 강력한 기본 제공 도구입니다. 우리는 여러 장치 간에 파일과 설정을 동기화하기 위한 패턴을 개발했습니다. 우수한 앱 환경을 구축하려면 이러한 API의 작동 방식을 정확히 알아야 합니다. API 작동 방식은 응용 프로그램 데이터 로밍에 대한 지침에서 참조할 수 있습니다.

앱 설정 및 데이터 관련 리소스

링크

유형

주요 내용

응용 프로그램 데이터 관리(HTML, XAML)

빠른 시작

로컬 및 로밍 설정과 임시 데이터를 저장하고 액세스하는 코드 조각을 보여 줍니다.

응용 프로그램 데이터 샘플

샘플

LocalSetting 및 RoamingSetting을 비롯한 ApplicationData API와 RoamingFolder의 파일을 액세스/저장하는 방법을 보여 줍니다.

응용 프로그램 데이터 로밍에 대한 지침

문서

데이터 로밍 API의 이용 방법을 제안합니다.

상태를 효율적으로 저장하고 가져오는 방법(HTML)

문서

WinJS에는 로컬 저장소를 사용하여 SessionState와 파일 액세스 권한이 포함된 설정을 문제 없이 효율적으로 저장하는 고유한 지원 기능이 포함되어 있습니다.

인덱싱된 데이터베이스 API(Indexed Database API)(HTML)

문서

JavaScript 앱에서는 강력하고 사용하기도 쉬운 표준 호환 인덱싱된 데이터베이스 API(일명 IndexDB)가 기본 제공됩니다.

응용 프로그램 수명 주기 이벤트를 사용하여 응용 프로그램 데이터를 자동으로 저장하는 방법을 보여 주는 예로 Visual Studio 11에서 Grid and Split Metro 스타일 앱 템플릿을 참조하십시오.

일관된 색과 스타일 적용

“GridViewItem이 선택되면 GridViewItem의 백그라운드 색상을 변경해야 합니까?”

많은 개발자들이 앱, 컨트롤, 타일을 사용자 지정하는 방법에 대한 질문을 했습니다. 이 섹션에서는 기본 제공 스타일을 활용하는 방법과 모양과 느낌을 사용자의 취향에 맞게 지정하는 방법에 대한 정보를 제공합니다. Windows 8에는 간단하게 밝은 테마와 어두운 테마 중에 원하는 테마 설정을 선택하고 고대비 색을 사용하여 가독성을 높이고 Metro 스타일 앱에 사용할 사용자 지정 색 테마를 만들 수 있는 API가 있습니다.

Metro 스타일 앱에서는 고대비 색 구성표가 기본적으로 지원됩니다. 사용자가 설정에서 고대비 테마로 전환하면 기본 제공 스타일을 사용하는 앱이 자동으로 시스템에서 정의된 고대비 색으로 바뀝니다.

Windows 8 앱은 전체 화면을 사용하기 때문에 사용자의 앱에 대한 몰입도가 높아집니다. 또한 사용자가 앱 전체에 일관되게 사용된 색과 스타일에 오랜 시간 노출되다 보면 브랜드에 친숙해지게 됩니다. 다음은 브랜드를 대표하는 색과 스타일을 사용하여 앱을 스타일링하는 방법을 참조할 수 있는 리소스입니다.

테마 설정 관련 리소스

링크

유형

주요 내용

빠른 시작: 스타일 컨트롤(XAML)

빠른 시작

스타일을 바탕으로 한 제작 방법, 명시적/묵시적 스타일, 컨트롤 템플릿 등에 대해 설명합니다.

빠른 시작: 스타일 컨트롤(HTML)

빠른 시작

HTML 컨트롤을 스타일링하는 방법을 소개합니다. CSS 및 HTML 코드 조각과 CSS 의사 요소에 대한 정보, Metro 스타일 앱에만 적용되는 HTML 부분 등의 내용이 수록되어 있습니다.

빠른 시작: 브러시 사용(XAML)

빠른 시작

브러시, 모양 및 효과에 대해 설명합니다.

앱 테마 색 적용(HTML 테마 롤러)

샘플

이 '테마 롤러'는 사용자 지정 앱 색 구성표를 만들고 테스트하는 방법을 안내하고 선택한 색을 앱에 적용하는 방법을 보여 줍니다.

고대비 모드에 대한 CSS 스타일

샘플

고대비 모드와 사용자 지정 고대비 스타일을 감지하는 CSS 미디어 쿼리입니다.

XAML 고대비 스타일 샘플

샘플

사용자 지정 앱 테마와 스타일에서 고대비 색을 지원하는 방법을 보여 줍니다.

JavaScript로 액세스 가능한 Metro 스타일 앱 제작

문서

접근성 요건과 확인해야 할 사항 등 고대비 테마를 지원하는 것과 관련한 정보가 수록되어 있습니다.

Metro 스타일 앱의 접근성(XAML)

문서

고대비 테마 지원 및 기타 접근성 문제에 대한 정보를 제공합니다.

다국어와 다양한 문화권에 어울리는 디자인 방법

“다국어 앱을 제작하는 최상의 방법은 무엇입니까?”

Windows 8에서 현지화 리소스 도구를 새롭게 제공함에 따라 현지화와 세계화에 대한 질문이 많이 게시되었습니다. 새로운 현지화 리소스 형식은 이전에 제공된 일부 리소스와 유사하지만, 이전 리소스의 경우 모든 프로그래밍 언어에 공통적으로 사용할 수 있었습니다. 여기서 소개하는 리소스는 글로벌 마켓 계획을 수립할 때 세계화/현지화 요소와 관련한 결정을 내리는 데 유용합니다.

Windows 스토어를 통해 앱을 전 세계 사용자들에게 선보일 수 있습니다. 이때 만약 앱이 현지 언어를 지원한다면 고객이 앱을 다운로드하고 사용할 확률도 그만큼 높아질 것입니다. 최근 개발자용 Windows 스토어 블로그에서는 새로운 언어권과 국가에서도 앱을 제출하고 구매할 수 있도록 하는 내용을 포함한 추가 글로벌 지원 계획을 발표했습니다. 국가에 관계없이 모든 Windows 스토어에서 앱을 제공하려면 Windows 앱 인증 요구 사항에 맞추어 앱을 제작해야 합니다. 앱이 전 세계 사용자에게 적합하고 앱 이름이 Windows 스토어에서 중복되지 않는지를 확인해야 합니다. 그리고 기술 지원을 제공할 언어를 결정합니다.

현지화 관련 리소스

링크

유형

주요 내용

빠른 시작: 개성 있는 Metro 스타일 앱을 제작하는 방법(XAML)

빠른 시작

리소스 파일 예제와 코드 조각을 제공합니다.

빠른 시작: 전 세계를 겨냥한 Metro 스타일 앱 디자인(HTML)

빠른 시작

리소스 파일 예제와 코드 조각을 제공합니다.

응용 프로그램 리소스 및 현지화

샘플

다국어를 지원하는 앱 제작 방법을 보여 주는 앱 샘플입니다.

다국어 앱 도구 키트

도구 키트

앱의 리소스를 번역하는 데 유용한 도구 키트와 외국어를 전혀 모르는 상태에서도 앱의 세계화 준비 상태를 테스트할 수 있는 의사 언어 엔진을 제공합니다.

세계화 및 현지화를 위한 디자인

문서

현지화된 앱의 모범 사례를 제시합니다.

 

Metro 스타일 컨트롤 애니메이션

“Edge UI의 애니메이션은 매우 멋집니다. C++로 구현하려면 어떻게 해야 합니까?”

앱에 Metro 스타일 애니메이션을 추가하는 방법을 묻는 개발자들이 많았습니다. Windows 8에서는 Metro 스타일 앱에 사용할 수 있는 애니메이션의 라이브러리가 제공됩니다. 이 애니메이션 라이브러리는 앱에 생명을 불어넣고 일관되게 개성을 표현해 주는 다양한 애니메이션으로 구성되어 있습니다. CSS와 XAML에서 추가로 지원되는 애니메이션 기능을 활용하면 이전 프로젝트의 애니메이션을 적용하거나 새 앱에 사용할 사용자 지정 애니메이션을 만들 수 있습니다. Metro 스타일 앱의 빠르고 유연한 애니메이션에 대한 블로그 게시물로 읽어보시기 바랍니다. 이 글에서는 Windows 8에서 지원되는 일관되고 자연스러운 애니메이션에 대해 자세히 소개하고 애니메이션을 만드는 데 참고할 수 있는 코드 샘플과 그에 대한 설명을 제공합니다.

애니메이션 관련 리소스

링크

유형

주요 내용

빠른 시작: UI에 애니메이션을 적용하는 방법

빠른 시작

Silverlight/WPF에서 애니메이션을 가져와 적용하는 방법을 설명하고 코드 샘플과 설명, 문서 링크, 자주 사용되는 몇 가지 애니메이션의 동영상을 제공합니다.

애니메이션 라이브러리(XAML, HTML)

샘플

Windows UI 전체와 기타 Metro 스타일 앱에 사용된 애니메이션을 활용하여 Windows와 일관된 기본 모양과 느낌을 앱에 표현할 수 있는 애니메이션 라이브러리 API입니다. PopInAnimation 등의 애니메이션이 포함되어 있습니다.

HTML 독립 애니메이션

샘플

Metro 스타일 앱에 사용된 CSS 2D 및 3D 전환, 변형 및 애니메이션 샘플을 보여 줍니다.

HTML 플라이아웃 컨트롤 샘플

샘플

HTML 플라이아웃 컨트롤의 기본 애니메이션을 재생하여 보여 줍니다.

애니메이션 메트릭 샘플(XAML)

샘플

개발자가 Windows 애니메이션 라이브러리의 애니메이션을 재구성할 수 있도록 애니메이션을 정의하는 매개 변수에 액세스하는 방법을 소개합니다.

애니메이션 라이브러리로 UI에 애니메이션 적용(HTML)

문서

컨트롤별로 지침, 예제, CSS3 빠른 시작 리소스를 제공하는 JavaScript 애니메이션에 대한 포괄적인 참고 자료입니다.

결론

유용한 링크를 제공하기 위해 여러분의 의견을 모니터링하여 위와 같은 중요 주제를 추려낸 후 문서와 샘플을 광범위하고 깊이 있게 조사했습니다. 고객이 어떤 정보를 원하는지를 파악하여 고객의 궁금증을 해결하기 위해 Microsoft의 여러 팀이 매일 개발자 포럼에 참여하고 있습니다. 커뮤니티 리소스, Windows 8 Metro 스타일 앱 샘플, Metro 스타일 앱용 API 참조 등 관련 문서도 지속적으로 보완되고 있습니다. 향후 Release Preview가 준비되는 대로 이 글의 링크와 Windows 개발자 센터의 다른 콘텐츠에도 업데이트된 정보를 수록할 예정입니다. 유용한 정보를 지속적으로 제공하기 위해서는 여러분의 의견과 질문이 필요합니다. 앞으로도 Metro 스타일 앱 포럼에 적극적으로 참여해 주시고 여러분이 원하는 정보가 무엇인지를 알려 주시기 바랍니다.

- Windows 프로그램 관리자
    Aaron Wroblewski