다음을 통해 공유


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

[ 이 문서는 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 등의 기타 방법을 사용하여 도움말을 제공하는 경우에 대해 알아봅니다.

 

5단계: 마무리

스토어 요구 사항 아이콘

Windows 앱 인증 키트 실행.

권장. 인증 키트를 실행하면 앱이 Windows 스토어 요구 사항을 이행하는 데 도움이 되므로 앱에 주요 기능을 추가한 경우 인증 키트를 실행해야 합니다.

중지 아이콘

완료되었습니다. UX 지침을 고려하여 UI를 디자인했으므로 사용자에게 뛰어난 환경을 제공하는 모범 사례가 앱에 반영되었습니다.

 

다음 단계

이제 기본 사항을 이해했으므로 앱 기능 전체 프로세스 시리즈의 다른 예제를 살펴보겠습니다.

더 자세히 알고 싶으세요?

UX 지침 인덱스

사용자 환경 지침의 전체 목록을 찾아봅니다.

사용자 조작: 터치식 입력... 등

앱의 사용자 조작 환경을 디자인하기 위한 전체 프로세스를 따르세요.

첫 Windows 스토어 앱 만들기

Windows 스토어 앱 개발이 처음이며 첫 번째 앱을 시작하려는 경우 이 자습서 시리즈를 따르세요.