Windows 스토어 앱 UI 전체 프로세스(HTML)

아티클
12/11/2015

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

뛰어난 사용자 인터페이스를 만들려면 어떻게 해야 할까요? 앱에 가장 적합한 레이아웃은 무엇일까요? 앱을 쉽고 직관적으로 탐색하려면 어떻게 해야 할까요?

이러한 질문에 답하는 것으로 앱 개발의 디자인 단계를 시작합니다. 그런 다음 디자인을 구현하는 방법을 알아봅니다.

Microsoft는 지침, 모범 사례 및 예제를 사용하여 Windows 8.1의 UI 접근 권한 값을 완전히 활용할 수 있도록 도와줍니다. 직관적이고 매력적이며 다른 Windows 스토어 앱과 일관된 앱 UI를 정의할 수 있습니다.

StumbleUpon 앱 기본 페이지

다음 섹션은 앱 UI를 디자인하는 데 도움이 되는 작업의 개요입니다. 이러한 작업은 UX 지침에 설명된 모범 사례를 따릅니다.

Windows 스토어 앱을 처음 개발하거나 앱 레이아웃, 탐색, 컨트롤 및 명령에 대해 잘 모르는 경우 각 단계를 검토하면 도움이 될 수 있습니다. 그렇지 않으면 자유롭게 둘러보세요. 앱 UI 개발의 관련된 측면이 그룹화되어 있습니다. 여기에 포함된 지침, 작업 및 샘플 코드는 JavaScript 및 HTML로 작성한 Windows 스토어 앱 개발과 관련이 있습니다. C#/VB/C++ 및 XAML 버전은 Windows 스토어 앱 UI 전체 프로세스(XAML)를 참조하세요.

샘플

컨트롤 및 레이아웃 갤러리 샘플에는 여기서 설명하는 모든 UI 요소가 포함되어 있습니다. 이 도우미 샘플은 자주 참조되며, 특정 기능이 구현된 샘플 위치를 가리킵니다.

컨트롤 및 레이아웃 갤러리 샘플

샘플 앱은 Windows 스토어 앱 컨트롤 갤러리입니다. 샘플 내에서 컨트롤과 각 컨트롤 구현 코드를 찾아볼 수 있습니다. 아래 섹션에서 각 단계를 구현한 방법을 확인할 수도 있습니다.

1단계: 설정 및 각 위치에 적합한 항목 확인

앱 디자인 및 개발을 시작하기 전에 계획을 수행해야 합니다. 앱의 장점, 대상 사용자, 구현하려는 시나리오 및 지원할 기능을 고려해 보세요. 앱을 계획하는 방법에 대한 자세한 내용은 비전 정의를 참조하세요.

먼저 앱에서 사용할 탐색 전략을 결정합니다. 이 자습서에서는 허브 템플릿에서 시작합니다. 앱 UI를 디자인 및 개발하기 위해 템플릿을 다운로드하고 개요에 따라 여러 기능을 시도해 볼 수 있습니다.

자세한 내용은 탐색 패턴 및 계층적 탐색(HTML)을 참조하세요.

바로 코드를 살펴보려는 경우 컨트롤 및 레이아웃 갤러리 샘플로 건너뛰세요.

UI 레이아웃

Windows 스토어 앱의 각 위치에 적합한 항목을 확인합니다. UI 레이아웃에 대한 지침을 알아보세요.

샘플에서는 지침에 따라 앱을 디자인한 방법을 보여 줍니다.

기본 페이지의 캔버스에 다음 요소를 배치합니다.
- 컨트롤 그룹 목록. 컨트롤 유형을 빠르게 찾아볼 수 있도록 기능별로 그룹화되어 있습니다.
- 모든 컨트롤 목록. 특정 컨트롤을 쉽게 검색할 수 있도록 이름의 사전순으로 정렬되어 있습니다.
홈페이지로 빠르게 돌아갈 수 있도록 각 페이지의 위쪽 앱 바에 탐색 요소가 추가되었습니다.
각 섹션 페이지는 표준 계층적 탐색 패턴을 따릅니다. 이 페이지에는 컨트롤 항목 목록과 각 항목의 세부 정보 페이지 링크가 포함되어 있습니다.
각 섹션 페이지 및 세부 정보 페이지에는 이전 페이지로 돌아가는 뒤로 단추가 있습니다.
각 세부 정보 페이지에는 앱의 주 화면에 있는 주요 콘텐츠가 배치됩니다.
- 컨트롤 설명
- 캔버스에 표시될 수 있는 컨트롤 예제
- 컨트롤을 구현하는 코드 조각

2단계: 추가할 컨트롤 선택

컨트롤 추가와 앱 레이아웃은 서로 관련이 있습니다. 추가할 컨트롤을 알고 있어야 하며, 컨트롤을 선택하기 전에 레이아웃을 디자인해야 합니다. 컨트롤 작동 방식을 이해하면 적절한 레이아웃을 결정하는 데 도움이 됩니다.

이 자습서에서는 먼저 개별 컨트롤을 살펴보겠습니다. 3단계에서 컨트롤을 레이아웃에 정렬하는 방법을 배울 것입니다. 레이아웃 디자인에 대해 먼저 알아보려면 다음 섹션으로 건너뛰고 나중에 돌아와도 됩니다.

샘플 코드를 검토하여 갤러리에 각 컨트롤을 추가한 방법을 확인합니다.

	기능별 컨트롤 컨트롤 목록 사용 가능한 컨트롤의 전체 목록과 각 컨트롤의 용도를 살펴보고 앱에 필요한 컨트롤을 선택합니다.
	빠른 시작: HTML 컨트롤 추가 및 이벤트 처리 단추, 확인란, 드롭다운 목록 등의 HTML 컨트롤을 사용합니다.
	빠른 시작: 텍스트 표시 레이블, div, 단락, 텍스트 영역 등의 HTML 컨트롤을 사용하여 텍스트를 표시합니다.
	빠른 시작: 텍스트 입력 및 편집 텍스트 상자, 텍스트 영역, 암호 입력 상자, 서식 있는 편집 상자/서식 있는 텍스트 상자 등의 HTML 컨트롤을 사용하여 텍스트를 입력 및 편집합니다.
	빠른 시작: WinJS 컨트롤 및 스타일 추가 ListView 컨트롤, 평가 컨트롤, 플라이아웃 컨트롤 등 JavaScript용 Windows 라이브러리의 컨트롤을 사용합니다.

3단계: 레이아웃 빌드

	앱 페이지 레이아웃 그리드 시스템, 머리글, 여백 및 간격과 이러한 요소가 일관된 사용자 환경을 만드는 방법에 대해 알아봅니다.
	레이아웃 및 크기 조정에 대한 UX 지침 사용자는 최소 너비에서 전체 화면까지 앱 크기를 조정하고, 각기 다른 크기의 화면에, 각기 다른 해상도와 방향으로 표시할 수 있습니다. 모든 크기에서 멋지게 표시되도록 앱을 디자인할 수 있습니다. 샘플에서는 기본 최소 너비인 500픽셀을 사용했습니다.
	빠른 시작: 앱 레이아웃 정의 모든 크기에서 멋지게 표시되고 제대로 작동하는 유연한 UI를 만듭니다.
	빠른 시작: 다양한 창 크기에 맞는 앱 디자인 앱이 좁은 너비에서도 제대로 표시되고 문제 없이 작동하도록 디자인을 변경하고 앱의 최소 너비를 500픽셀에서 320픽셀로 변경하는 방법을 알아봅니다. 앱 높이가 너비보다 클 때마다 가로 이동 앱이 세로 레이아웃으로 바뀌도록 디자인하는 방법을 알아봅니다.
	레이아웃 및 크기 조정에 대한 UX 지침 디스플레이 장치의 픽셀 밀도가 증가함에 따라 화면에 표시되는 개체의 실제 크기가 더 작아집니다. UI가 너무 작아서 터치할 수 없거나 텍스트가 너무 작아서 읽을 수 없는 경우 Windows에서 시스템 및 앱 UI의 크기를 특정 배율로 조정합니다. 크기 조정 시 앱이 멋지게 표시되도록 하는 방법을 알아봅니다.

4단계: 명령 배치 위치 및 참 메뉴 사용 방법 선택

	명령 패턴 화면, 팝업, 대화 상자 또는 앱 바에서 명령을 배치할 위치에 대해 알아보고 앱의 명령을 배치할 위치를 결정합니다.
	앱 바에 대한 지침 및 검사 목록 빠른 시작: 명령을 제공하는 앱 바 추가 탐색 모음에 대한 지침 빠른 시작: 탐색 모음 추가 명령 그룹화, 일관된 배치, 스타일 및 아이콘, 명령 앱 바와 탐색 앱 바에 대한 기타 중요한 지침을 알아봅니다. 샘플에서는 탐색에 도움이 되도록 위쪽 앱 바에 홈 단추를 구현했습니다.
	상황에 맞는 메뉴 추가에 대한 지침 및 검사 목록 잘라내기 및 붙여넣기와 같은 작업에 즉시 액세스하려면 상황에 맞는 메뉴를 사용합니다. 상황에 맞는 메뉴를 간결하고 선택 내용과 관련이 있도록 유지합니다.
	검색에 대한 지침 및 검사 목록 빠른 시작: 앱에 검색 추가 앱에서 바로 검색 상자 컨트롤을 사용하는 경우와 검색 계약을 사용하는 경우에 대해 알아봅니다.
	콘텐츠 공유에 대한 지침 빠른 시작: 콘텐츠 공유 공유할 콘텐츠가 있는 앱은 공유 원본입니다. 다른 앱에서 콘텐츠를 받을 수 있는 앱은 공유 대상입니다.
	앱 설정에 대한 지침 빠른 시작: 앱 설정 추가 설정 참 메뉴를 사용하는 방법을 신중하게 결정합니다. 설정을 간단하고 적게 유지합니다. 설정 창에 적합한 설정을 알고 있습니다.
	앱 도움말에 대한 지침 사용 안내 UI에 대한 지침 빠른 시작: 앱 도움말 추가 설정 창에서 앱 도움말을 구현하는 경우 및 방법과 팁, 데모, 새롭게 디자인된 UI 등의 기타 방법을 사용하여 도움말을 제공하는 경우에 대해 알아봅니다.