Windows 앱
콘텐츠의 테이블 축소
콘텐츠의 테이블 확장

Windows 스토어 앱용 UX 검사 목록

앱 인증을 용이하게 하고 뛰어난 사용자 환경을 제공하려면 이 검사 목록을 사용하여 앱이 UX 지침을 따르는지 확인합니다.

필수

다음은 앱에 대한 가장 높은 우선 순위의 UX 지침입니다. 앱이 Windows 스토어에 대해 인증을 받으려면 이 섹션의 지침을 모두 따라야 합니다.

확인설명지침
[ ]앱이 고객에게 고유하고 창조적인 가치를 제공해야 합니다. Windows 스토어 앱 계획
[ ]앱은 Windows 스토어 앱으로 래핑된 웹 사이트 이상의 것이어야 합니다. Windows 스토어 앱 계획
[ ]각 앱이 설치 후 하나의 타일을 표시해야 합니다. 앱의 타일 이미지는 앱 콘텐츠와 관련이 있어야 합니다.타일, 배지 및 알림 메시지 작업(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]앱 타일이 표준 타일 템플릿을 사용해야 합니다.타일, 배지 및 알림 메시지 작업(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]앱에서 설명, 타일, 알림, 앱 바 또는 가장자리에서 살짝 밀기 조작을 사용하여 광고를 표시하면 안 됩니다. 광고 지침
[ ]앱이 터치식 입력과 키보드 및 마우스 입력을 완전히 지원해야 합니다.사용자 조작에 대한 응답(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]터치 제스처 및 작업이 Windows Touch 언어와 일치해야 합니다. 앱에서 Windows Touch 언어에 없는 터치 제스처를 사용하면 안 됩니다. 터치 패턴
[ ]앱이 Windows 8 마우스 언어를 사용해야 합니다.마우스 조작에 응답(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]대화형 UI 요소는 시각적 피드백을 제공해야 합니다. 비대화형 UI 요소는 시각적 피드백을 제공하면 안 됩니다.시각적 피드백에 대한 지침(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]고객이 기본 최소 크기까지 앱 크기를 임의로 조정할 때 앱이 계속 작동 가능해야 합니다. 크기 조정에 대한 지침레이아웃 범위를 좁히기 위한 크기 조정에 대한 지침
[ ]가로 방향에서 앱의 디스플레이 크기가 1024 x 768일 때 앱의 기능에 완전히 액세스할 수 있어야 합니다. 화면에 맞추기에 대한 지침
[ ]앱이 프로그래밍 방식으로 닫히거나 앱을 닫는 UI를 제공하면 안 됩니다. Windows 8 프로세스 수명 관리는 Windows 스토어 앱을 자동으로 닫습니다. 앱 일시 중단 및 다시 시작에 대한 지침
[ ]앱이 일시 중단되고 적절한 상태로 다시 시작되어야 합니다. 앱 일시 중단 및 다시 시작에 대한 지침
[ ]앱에 하단 앱 바가 구현되는 경우 해당 바는 상향식 살짝 밀기로 표시되어야 합니다.앱 바에 대한 지침 및 검사 목록(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]앱에 탐색 모음이 구현되는 경우 해당 모음은 하향식 살짝 밀기로 표시되어야 합니다.앱 바에 대한 지침 및 검사 목록(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]앱이 시스템 알림 설정을 따라야 하며 이 설정을 사용하지 않도록 설정하더라도 작동 가능해야 합니다.타일, 배지 및 알림 메시지 작업(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)

 

권장

앱에서 이 섹션의 지침을 따르는 것이 좋습니다. 이러한 각 지침은 잘 디자인된 앱을 만드는 데 도움이 됩니다.

확인설명지침
앱 목표
[ ]앱에 명확한 사용자 환경 목표와 명확한 '장점' 설명이 있어야 합니다. Windows 스토어 앱 계획
[ ]앱 기본 페이지 또는 허브 페이지는 포함된 웹 사이트 이상의 것이어야 합니다. Windows 스토어 앱 계획

탐색 패턴
레이아웃 및 맞춤
[ ]콘텐츠를 구성하기 위해 앱이 모든 페이지와 뷰에서 맞춤, 서체 및 공백을 일관되게 사용해야 합니다. 앱 페이지 레이아웃

입력 체계에 대한 지침
[ ]앱에서 콘텐츠를 구성하는 기본 방법으로 크롬(선, 상자 및 기타 UI 요소)을 사용하면 안 됩니다. 앱 페이지 레이아웃

디자인 사례 연구: 웹 사이트 및 Windows 스토어 앱
[ ]앱에 허브 페이지가 있는 경우 해당 페이지를 주로 앱의 다른 페이지에 대한 메뉴로 사용하면 안 됩니다. 유용한 콘텐츠가 포함되어야 합니다. 탐색 패턴
그리드
[ ]UI 요소를 그리드에 맞춰야 합니다. 앱 페이지 레이아웃
실루엣
[ ]앱의 제목이 모든 페이지에 일관되게 배치되어야 합니다. 앱 페이지 레이아웃
[ ]여백이 모든 페이지에 일관되게 설정되어야 합니다. 앱 페이지 레이아웃
[ ]앱에 유연한 레이아웃을 사용하는 경우 왼쪽 여백이 120px 이상이어야 합니다. 앱 페이지 레이아웃
[ ]아래쪽 여백이 50px 이상이어야 합니다. 앱 페이지 레이아웃
이동 및 스크롤
[ ]가로로 이동하는 허브 또는 기본 페이지에서 세로로 스크롤되는 목록은 끌기 지점을 사용해야 합니다.이동에 대한 지침(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]세로로 이동하는 허브 또는 기본 페이지에서 가로로 스크롤되는 목록은 끌기 지점을 사용해야 합니다.이동에 대한 지침(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]콘텐츠에 자유형 이동이 필요하지 않은 경우 페이지가 세로 및 가로로 모두 이동하면 안 됩니다.이동에 대한 지침(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]페이지가 스크롤 가능한 경우 이동 표시기를 제공해야 합니다.이동에 대한 지침(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]가로로 이동하는 페이지에 세로로 이동하는 목록을 여러 개 포함하면 안 됩니다.이동에 대한 지침(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]세로로 이동하는 페이지에 가로로 이동하는 목록을 여러 개 포함하면 안 됩니다.이동에 대한 지침(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
서체
[ ]앱이 고정된 형식 크기 및 두께 집합(램프 형식)을 사용해야 합니다. 입력 체계에 대한 지침

글꼴에 대한 지침
[ ]글꼴 및 글꼴 계층 구조가 페이지 간에 일관되게 설정되어야 합니다. 입력 체계에 대한 지침

글꼴에 대한 지침
[ ]대/소문자 표기 및 대문자 표시가 일관되게 설정되어야 합니다. 입력 체계에 대한 지침
[ ]앱에 맞춤법 오류가 포함되면 안 됩니다. 입력 체계에 대한 지침
[ ]앱에 잘린 텍스트가 포함되면 안 됩니다. 입력 체계에 대한 지침
호스트된 웹 콘텐츠
[ ]앱 허브 페이지의 <iframe>에 호스트된 웹 콘텐츠가 포함되면 안 됩니다. 빠른 시작: 단일 페이지 탐색 사용
앱의 <iframe>에 호스트된 웹 콘텐츠가 포함된 경우 앱으로 돌아가는 방법을 제공해야 합니다. 빠른 시작: 단일 페이지 탐색 사용
[ ]직접적인 앱 콘텐츠가 아닌 웹 페이지는 외부 브라우저에서 열려야 합니다. 링크에 대한 지침 및 검사 목록
[ ]호스트된 웹 콘텐츠를 앱 실루엣에 맞춰야 합니다. 앱 페이지 레이아웃
브랜딩
[ ]앱에 시작 화면 이미지(620x320 픽셀)가 있어야 합니다. 시작 화면에 대한 지침 및 검사 목록
[ ]시작 화면에 광고를 포함하면 안 됩니다. 시작 화면에 대한 지침 및 검사 목록
[ ]시작 화면에 앱 정보나 도움말 같은 필수 앱 정보가 포함되면 안 됩니다. 시작 화면에 대한 지침 및 검사 목록
[ ]시작 화면과 앱의 첫 번째 뷰 간 전환에 빈 화면이 표시되면 안 됩니다. 시작 화면에 대한 지침 및 검사 목록
[ ]로고가 페이지 제목의 올바른 배치 또는 맞춤과 다른 콘텐츠에 방해가 되면 안 됩니다. 브랜딩
[ ]앱이 브랜딩 또는 다른 앱 요소에서 Windows가 아닌 플랫폼을 참조하면 안 됩니다. 브랜딩
[ ]배경 이미지가 콘텐츠 검사 및 읽기를 방해하거나 주의를 분산시키면 안 됩니다. 브랜딩
앱 바
[ ]하단 앱 바에는 탐색이 포함되면 안 되며 명령만 포함되어야 합니다. 앱 바에 대한 지침 및 검사 목록(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]탐색 모음에는 명령이 포함되면 안 되며 탐색만 포함되어야 합니다.앱 바에 대한 지침 및 검사 목록(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]앱 바에 포함된 작업이 참 메뉴와 중복되면 안 됩니다. 유일한 예외는 하단 앱 바에 포함될 수 있는 인쇄입니다.
[ ]사용자가 페이지를 탭하거나 아래쪽 또는 위쪽 가장자리를 살짝 밀면 앱 바가 닫혀야 합니다.앱 바에 대한 지침 및 검사 목록(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]사용자가 살짝 밀어 항목을 선택하면 앱 바가 열리고 선택한 항목에 사용할 수 있는 작업이 표시되어야 합니다.앱 바에 대한 지침 및 검사 목록(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]앱에 동시에 표시되는 하단 앱 바가 두 개 이상 있으면 안 됩니다.앱 바에 대한 지침 및 검사 목록(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]상황에 맞는 명령은 하단 앱 바의 왼쪽(또는 오른쪽에서 왼쪽 언어의 경우 오른쪽)에 배치되어야 합니다.앱 바에 대한 지침 및 검사 목록(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]앱 바 단추의 텍스트는 가운데로 양쪽 맞춤되어야 합니다.앱 바에 대한 지침 및 검사 목록(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]앱 바의 명령이 중복되면 안 됩니다.앱 바에 대한 지침 및 검사 목록(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]페이지 간에 공유되는 명령은 앱 바의 동일한 위치에 최대한 가깝게 배치되어야 합니다.앱 바에 대한 지침 및 검사 목록(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]앱에서 기존 문자 모양을 새로운 용도로 사용하면 안 됩니다. 작업 또는 명령에 대한 아이콘이 없을 경우 새로 만듭니다. WinJS.UI.AppBarIcon

AppBar 단추 스타일 이미지
플라이아웃
[ ]사용자가 플라이아웃의 항목을 변경할 경우 콘텐츠가 즉시 업데이트되어 변경 내용을 반영해야 합니다. 플라이아웃에 대한 지침 및 검사 목록
[ ]앱에서 정보용 UI 또는 상황에 맞는 UI에 모달 대화 상자를 사용하면 안 됩니다. 정보에는 플라이아웃을 사용하고 상황에 맞는 UI에는 상황에 맞는 메뉴를 사용합니다.UI 배치(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]사용자가 페이지를 탭하면 플라이아웃이 닫히거나, 플라이아웃에 닫기 또는 취소 명령이 있어야 합니다. 플라이아웃에 대한 지침 및 검사 목록
[ ]플라이아웃은 연결된 앱 바 단추 근처에 배치되어야 합니다. 플라이아웃에 대한 지침 및 검사 목록
[ ]플라이아웃을 연 명령이 플라이아웃으로 가려지면 안 됩니다. 플라이아웃에 대한 지침 및 검사 목록
[ ]플라이아웃에 그림자나 볼록 또는 3D 효과를 만드는 다른 요소가 있으면 안 됩니다. Windows의 화면 효과는 볼록이 아니라 평면입니다. 플라이아웃에 대한 지침 및 검사 목록
[ ]플라이아웃에 탐색이 포함되는 경우 뒤로 단추를 포함해야 합니다. 예를 들어 사용자는 설정 창에서 정보, 피드백 등의 설정 플라이아웃으로 이동할 수 있습니다. 이러한 설정 플라이아웃에는 설정 창으로 돌아가는 뒤로 단추가 포함됩니다. 플라이아웃에 대한 지침 및 검사 목록
[ ]장치 가장자리를 따라 배치되는 플라이아웃이 가장자리 살짝 밀기에 방해가 되면 안 됩니다. 플라이아웃에 대한 지침 및 검사 목록
상황에 맞는 메뉴
[ ]살짝 밀어 직접 선택할 수 있는 개체에는 상황에 맞는 메뉴가 포함되면 안 됩니다. 컨텍스트 메뉴에 대한 지침 및 검사 목록
[ ]앱 바와 상황에 맞는 메뉴에서 명령이 중복되면 안 됩니다. 컨텍스트 메뉴에 대한 지침 및 검사 목록
메시지 대화 상자
[ ]오류 메시지에 스택 추적이나 디버그 정보가 포함되면 안 됩니다. 메시지 대화 상자에 대한 지침 및 검사 목록
[ ]대화 상자에 표시되는 오류 메시지나 확인 질문은 전체 앱에 적용되어야 합니다. 메시지 대화 상자에 대한 지침 및 검사 목록

UI 배치(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
정렬 및 필터링
[ ]앱 바에서 열리는 필터는 플라이아웃을 사용해야 합니다. 탐색 패턴
[ ]정렬 및 필터 플라이아웃은 연결된 앱 바 단추 근처에 배치되어야 합니다. 탐색 패턴

플라이아웃에 대한 지침 및 검사 목록
[ ]사용자가 페이지를 탭하면 정렬 및 필터 플라이아웃이 닫혀야 합니다. 플라이아웃에 대한 지침 및 검사 목록
[ ]정렬 및 필터링 UI가 캔버스에 있고 앱이 둘 이상의 기준으로 정렬되거나 필터링되는 경우 정렬 또는 필터 옵션이 드롭다운 목록에 배치되어야 합니다. 탐색 패턴

플라이아웃에 대한 지침 및 검사 목록
[ ]앱이 탭을 모방하기 위한 목적 등으로 정렬 또는 필터링을 탐색에 사용하면 안 됩니다. 대신, 정렬 및 필터링을 통해 사용자가 데이터 뷰를 신속하게 미세 조정할 수 있게 합니다. 탐색 패턴
컨트롤
[ ]앱이 별도의 편집 또는 다시 정렬 모드를 사용하는 대신 직접 조작을 허용해야 합니다. 명령 디자인

디자인 사례 연구: iPad 및 Windows 스토어 앱
[ ]편집하거나 다시 정렬할 항목을 선택하는 사용자 지정 동작 또는 제스처가 앱에 있으면 안 됩니다. 가로질러 밀기에 대한 지침
[ ]항목의 확인 표시는 항목이 선택되었음을 나타낼 때만 사용해야 합니다. 가로질러 밀기에 대한 지침
[ ]사용자가 항목을 선택할 수 있는 경우 선택한 항목과 연결된 명령이 하나 이상 있어야 합니다. 가로질러 밀기에 대한 지침

앱 바에 대한 지침 및 검사 목록(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]사용자가 진행하는 데 필요한 명령은 캔버스에 배치되어야 합니다.UI 배치(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
탐색
[ ]탐색 컨트롤이 앱의 캔버스 또는 페이지 영역이나 하단 앱 바에 있으면 안 됩니다. 탐색 컨트롤은 탐색 모음에 있어야 합니다.

참고  뒤로 단추는 예외이며 캔버스에 배치될 수 있습니다.

탐색 패턴
[ ]앱이 캔버스의 탭을 탐색에 사용하면 안 됩니다. 디자인 사례 연구: 웹 사이트 및 Windows 스토어 앱
[ ]섹션 또는 세부 머리글은 지원 섹션이나 세부 정보 페이지를 열어야 합니다. 탐색 패턴
[ ]섹션 머리글에 펼침 단추 표시기 또는 "모든 <x> 보기" 텍스트와 같이 추가 콘텐츠를 표시하는 작동 가능한 UI가 표시되어야 합니다. 탐색 패턴
[ ]뒤로 단추는 페이지의 왼쪽 위나 탐색 모음의 왼쪽에 배치되어야 합니다. 오른쪽에서 왼쪽 언어의 경우 페이지의 오른쪽 위나 탐색 모음의 오른쪽에 뒤로 단추를 배치합니다. 탐색 패턴
[ ]앱의 페이지 또는 탐색 모음에 사용할 수 없는 뒤로 단추가 있으면 안 됩니다. 탐색 패턴
시맨틱 줌
[ ]시맨틱 줌을 앱의 다른 페이지로 이동하는 데 사용하면 안 됩니다. 시맨틱 줌은 동일한 페이지의 다른 위치로 이동하는 데 사용합니다.시맨틱 줌에 대한 지침(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)

시맨틱 줌 컨트롤에 대한 지침 및 검사 목록(C#/VB/C++ 및 XAML)
[ ]현재 보기에 8페이지가 넘는 콘텐츠가 포함된 경우 시맨틱 줌을 사용해야 합니다.시맨틱 줌에 대한 지침(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
Touch 제스처
[ ]UI 요소, 컨트롤 및 앱의 다른 부분이 Windows 에지 제스처나 Windows 에지 제스처와 연결된 UI에 방해가 되면 안 됩니다.일반적인 사용자 조작에 대한 지침(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]항목이 선택된 상태가 아닐 경우 살짝 밀어 제스처 선택을 구현하면 안 됩니다. 가로질러 밀기에 대한 지침
[ ]UI 요소에 둘 이상의 명령이 연결되어 있으면 안 됩니다. 단일 UI 요소에 둘 이상의 명령이 있을 경우 터치 제스처가 모호해집니다. 일반적인 사용자 조작에 대한 지침
[ ]터치 제스처가 겹치면 안 됩니다. 앱의 스크롤 가능한 지도 컨트롤, 토글 스위치, 슬라이더 또는 이동이나 스크롤에 방해가 되는 다른 컨트롤이 스크롤 가능한 뷰어 내에 있으면 안 됩니다. 일반적인 사용자 조작에 대한 지침
터치 대상
[ ]터치 조작은 사용자에게 피드백을 제공해야 합니다. 터치 패턴
[ ]항목이 작동 가능하지 않을 경우 사용자에게 터치 피드백을 제공하면 안 됩니다. 터치 패턴
[ ]터치 다운 시 앱이 커밋되면 안 됩니다. 조작을 되돌릴 수 있어야 합니다. 터치 패턴
[ ]사용자가 항목을 끌어내면 터치 동작이 취소되어야 합니다. 터치 패턴
[ ]터치 대상은 5mm 이상이어야 합니다.타기팅에 대한 지침(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]앱의 터치 대상 사이에 하위 단위(10픽셀)가 두 개 이상 있어야 합니다. 대상 지정에 대한 지침
텍스트 입력
[ ]앱이 Windows 가상 키보드 또는 연결된 IME(입력기)를 사용해야 합니다. 사용자 지정 가상 키보드를 사용하면 안 됩니다. IME 개발에 대한 지침 및 검사 목록

터치 키보드 및 필기 패널에 대한 지침
[ ]가상 키보드가 텍스트 입력 시나리오를 완료하는 데 필요한 컨트롤을 가리면 안 됩니다. 예를 들어 사용자 이름 또는 암호 텍스트 상자에 대한 가상 키보드가 로그인 단추를 가리면 안 됩니다. 터치 키보드 및 필기 패널에 대한 지침
애니메이션
[ ]필요한 경우 앱이 애니메이션을 구현해야 합니다.UI에 애니메이션 효과 주기(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]사용자 지정 애니메이션으로 인해 성능이 저하되거나 사용자 환경이 부정적인 영향을 받으면 안 됩니다. 애니메이션
[ ]애니메이션 및 전환 성능이 낮으면 안 됩니다. 예를 들어 사용자가 타일 다시 그리기를 알아차리면 안 됩니다. 애니메이션

애니메이션 매끄럽게 만들기
화면 크기 및 방향
[ ]유연한 레이아웃을 사용하는 앱이 큰 화면에 맞게 재배치되어야 합니다. 레이아웃에 대한 지침

화면에 맞추기에 대한 지침
[ ]큰 디스플레이나 높은 픽셀 밀도 디스플레이에서 앱이 눈에 띄는 아티팩트나 이미지 품질 저하를 표시하면 안 됩니다. 화면에 맞추기에 대한 지침

픽셀 밀도에 맞게 크기 조정에 대한 지침
[ ]앱이 장치 및 모니터의 세로 방향을 지원해야 합니다. 앱의 높이가 너비보다 큰 크기 조정을 앱이 지원해야 합니다. 크기 조정에 대한 지침
[ ]사용자 앱 크기를 조정할 때 앱이 컨텍스트 및 상태를 유지해야 합니다. 크기 조정에 대한 지침
[ ]앱이 기본 최소 크기까지 완벽하게 작동해야 합니다. 앱이 기본값보다 작은 최소 크기를 지원하는 경우 최소 크기에서 최대한 많은 기능을 유지해야 합니다. 크기 조정에 대한 지침

레이아웃을 좁히기 위한 크기 조정에 대한 지침
[ ]사용자가 앱 크기를 조정할 때 앱 레이아웃 및 모든 컨트롤의 배율이 적절하게 조정되어야 합니다. 모든 크기의 창에서 UI와 컨트롤을 사용할 수 있어야 합니다. 크기 조정에 대한 지침
[ ]앱이 320-499픽셀의 너비를 지원하는 경우 좁은 너비에서 앱이 좁은 세로 보기로 전환되어야 합니다. 세로 이동으로 전환되고 더 작은 여백, 머리글, 뒤로 단추 및 전환 애니메이션 오프셋을 사용합니다. 레이아웃을 좁히기 위한 크기 조정에 대한 지침
[ ]앱 크기가 프로그래밍 방식으로 변경되면 안 됩니다. 사용자는 언제든지 앱 크기를 조정할 수 있습니다. 레이아웃을 좁히기 위한 크기 조정에 대한 지침
[ ]창 크기가 변할 때 앱이 앱의 다른 부분으로 전환되면 안 됩니다. 레이아웃을 좁히기 위한 크기 조정에 대한 지침
계약 및 참 메뉴
[ ]앱이 앱 캔버스 또는 앱 바에서 설정, 공유 또는 장치 참 메뉴를 중복하면 안 됩니다. 명령 패턴
[ ]앱이 모든 크기, 방향 또는 화면 위치에서 참 메뉴 사용을 지원해야 합니다. 참 메뉴는 사용자가 마지막으로 사용한 앱에 적용됩니다. 레이아웃을 좁히기 위한 크기 조정에 대한 지침
검색 계약 및 참 메뉴
[ ]앱이 찾기 페이지에 검색 계약을 사용하면 안 됩니다. 앱 바에 찾기 페이지 컨트롤을 배치합니다.찾기 페이지에 대한 지침 및 검사 목록(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]앱의 검색 컨트롤이 캔버스에 있을 경우 검색 계약을 열어야 합니다. 검색에 대한 지침 및 검사 목록
공유 계약 및 참 메뉴
[ ]공유가 구현된 경우 공유 참 메뉴를 통해 이루어져야 합니다. 콘텐츠 공유에 대한 지침
[ ]앱이 공유 참 메뉴를 구현했지만 현재 컨텍스트에 공유할 수 있는 콘텐츠가 없는 경우 올바른 메시지를 표시해야 합니다. 콘텐츠 공유에 대한 지침
설정 계약 및 참 메뉴
[ ]구성, 옵션 및 계정 관리를 비롯한 앱 설정은 앱 페이지 또는 사용자 지정 플라이아웃이 아니라 설정 참 메뉴에서 구현되어야 합니다. 앱 설정에 대한 지침
[ ]정보, 개인 정보 취급 방침, 서비스 계약, 도움말 및 피드백 페이지는 설정 참 메뉴를 통해 구현되어야 합니다. 앱 설정에 대한 지침
[ ]앱이 설정 창에서 컨트롤을 일관되게 사용해야 합니다. 앱 설정에 대한 지침
[ ]사용자가 앱을 탭하면 설정 창이 닫혀야 합니다. 앱 설정에 대한 지침
[ ]설정 창에 뒤로 단추가 있어야 합니다. 앱 설정에 대한 지침
[ ]설정 플라이아웃이 현재 앱 너비에 맞아야 합니다. 레이아웃을 좁히기 위한 크기 조정에 대한 지침
파일 선택기
[ ]앱이 파일 선택기를 사용하여 파일을 열거나 저장하거나 액세스해야 합니다. 파일 선택기에 대한 지침

파일 선택기 계약에 대한 지침 및 검사 목록
[ ]앱이 파일 선택기를 통해 콘텐츠를 탐색하거나 사용하면 안 됩니다. 파일 선택기에 대한 지침
타일
[ ]앱이 와이드 타일을 사용하는 경우 타일에 대한 라이브 콘텐츠가 있어야 합니다. 타일 및 배지에 대한 지침 및 검사 목록
[ ]앱 타일 색, 글꼴 및 아이콘이 앱과 일치해야 합니다. 타일 및 배지에 대한 지침 및 검사 목록
[ ]타일의 앱 아이콘 또는 로고가 높은 품질이어야 하며, 눈에 띄는 아티팩트를 표시하면 안 됩니다. 타일 및 배지에 대한 지침 및 검사 목록
[ ]타일의 텍스트 철자가 맞아야 합니다. 타일 및 배지에 대한 지침 및 검사 목록
[ ]보조 타일은 정적 콘텐츠에 연결되면 안 됩니다. 보조 타일에 대한 지침 및 검사 목록
[ ]보조 타일은 사용자가 앱을 조작할 수 있게 하는 명령 단추가 되면 안 됩니다. 보조 타일에 대한 지침 및 검사 목록
[ ]보조 타일은 관련 콘텐츠로 직접 이동해야 합니다. 앱의 홈 페이지를 열어야 합니다. 보조 타일에 대한 지침 및 검사 목록
[ ]앱이 보조 타일을 사용하여 광고를 표시하면 안 됩니다. 보조 타일에 대한 지침 및 검사 목록
Toast 알림
[ ]앱이 알림 메시지를 오류 메시지에 사용하면 안 됩니다. 알림 메시지에 대한 지침 및 검사 목록
[ ]알림 메시지는 작동 가능해야 하며, 사용자가 탭할 경우 앱으로 이동해야 합니다. 알림 메시지에 대한 지침 및 검사 목록
[ ]앱이 알림 메시지를 광고에 사용하면 안 됩니다. 알림 메시지에 대한 지침 및 검사 목록
[ ]앱이 알림 메시지를 사소한 변경에 사용하면 안 됩니다. 알림 메시지에 대한 지침 및 검사 목록
로밍
[ ]로밍된 데이터는 일관되고 정확하게 로밍되어야 합니다. 예를 들어 데이터가 한 장치에만 로밍되고 다른 장치에 로밍되지 않으면 안 됩니다. 로밍 중인 앱 데이터 지침
계정 관리
[ ]계정 관리 기능은 설정 참 메뉴에서 구현되어야 합니다.앱 바에 대한 지침 및 검사 목록(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]사용자가 설정 참 메뉴에서 로그아웃할 수 있어야 합니다. 로그인 컨트롤에 대한 지침 및 검사 목록
[ ]앱에서 로그인하는 진입점은 설정 참 메뉴를 열어야 합니다. (예외: 웹 인증) 로그인 컨트롤에 대한 지침 및 검사 목록
[ ]앱에 인증이 필요하지 않은 경우 로그인 컨트롤을 표시하면 안 됩니다. 로그인 컨트롤에 대한 지침 및 검사 목록
[ ]해당하는 경우 표준 웹 인증 대화 상자를 사용해야 합니다. 웹 인증 브로커

 

권장

이 섹션의 지침은 앱의 사용자 환경을 향상시킵니다.

확인설명지침
레이아웃 및 맞춤
[ ]모든 보기에서 모든 앱 페이지의 콘텐츠가 왼쪽 맞춤(오른쪽에서 왼쪽 언어의 경우 오른쪽 맞춤)되어야 합니다. 입력 체계에 대한 지침
[ ]앱의 허브 또는 기본 페이지에 시각적 변형이 포함되어야 합니다. 탐색 패턴
실루엣
[ ]열이 560픽셀(28 단위) 이상이어야 합니다. 앱 페이지 레이아웃
[ ]앱이 표준 실루엣을 사용하는 경우 다음 지침을 준수해야 합니다.
  • 페이지 머리글은 위에서 100픽셀( 5단위)이어야 합니다.
  • 페이지 머리글의 왼쪽 여백은 120픽셀(6 단위)이어야 합니다.
  • 페이지 머리글은 SegoeUI 스타일 집합 20, 가늘게여야 합니다.
  • 콘텐츠 영역의 위쪽 여백은 140픽셀(7 단위)이어야 합니다.
  • 콘텐츠 영역의 왼쪽 여백은 120픽셀(6 단위)이어야 합니다.
  • 콘텐츠가 가로로 이동하는 경우 콘텐츠 영역의 아래쪽 여백은 130픽셀(6.5단위) 이하, 50픽셀(2.5 단위) 이상이어야 합니다.
  • 이미지와 타일 같은 하드 가장자리 항목은 항목 및 함께 제공되는 텍스트 사이의 가로 안쪽 여백이 10픽셀(2 하위 단위)입니다.
  • 이미지와 타일 같은 하드 가장자리 항목은 열 사이의 가로 안쪽 여백이 10픽셀(2 하위 단위)입니다.
  • 목록은 열 사이의 가로 안쪽 여백이 40픽셀(2 단위)입니다.
  • 이미지와 타일 같은 하드 가장자리 항목은 연속된 항목 사이의 세로 안쪽 여백이 10픽셀(2 하위 단위)입니다.
  • 타일 및 텍스트 목록은 연속된 항목 사이의 세로 안쪽 여백이 20픽셀(1 단위)입니다.
  • 항목 그룹은 그룹 사이의 가로 안쪽 여백이 80픽셀(4 단위)입니다.
앱 페이지 레이아웃

입력 체계에 대한 지침

글꼴에 대한 지침

이동 및 스크롤
[ ]가로로 이동하는 페이지에서는 콘텐츠가 왼쪽 가장자리로 스크롤되어야 합니다. 왼쪽 여백에서 콘텐츠 스크롤이 멈추면 안 됩니다.이동에 대한 지침(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]페이지의 모든 영역이 이동 및 스크롤에 응답해야 합니다. 이동에 대한 지침
서체
[ ]앱의 형식 램프에 형식 크기가 5개 넘게 포함되면 안 됩니다. 입력 체계에 대한 지침
[ ]앱이 문장 대/소문자 표기를 사용해야 합니다. 입력 체계에 대한 지침
브랜딩
[ ]앱에 확장된 시작 화면이 있을 경우 초기 시작 화면과 비슷해야 합니다. 시작 화면에 대한 지침 및 검사 목록
[ ]앱이 1.4x(868x420 픽셀) 및 1.8x(1116x540 픽셀) 배율을 지원하는 시작 화면 자산을 포함해야 합니다. 시작 화면에 대한 지침 및 검사 목록
[ ]시작 화면이 7초 넘게 표시되는 경우 앱이 로드될 때까지 사용자가 기다리도록 시각 신호를 제공해야 합니다. 시작 화면에 대한 지침 및 검사 목록
[ ]앱의 허브 페이지에 로고가 있어야 합니다. 브랜딩
앱 바
[ ]앱 바에 이전 및 다음 명령이 포함되면 안 됩니다. 대신, 앱의 전환 컨트롤이 캔버스에 포함되어야 합니다.앱 바에 대한 지침 및 검사 목록(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)

FlipView 컨트롤 추가(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]앱에 빈 앱 바가 있으면 안 됩니다.앱 바에 대한 지침 및 검사 목록(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]앱 바에 포함된 작업이 참 메뉴와 중복되면 안 됩니다. 명령 패턴
상황에 맞는 메뉴
[ ]상황에 맞는 메뉴는 대상 개체 근처에 배치되어야 합니다. 컨텍스트 메뉴에 대한 지침 및 검사 목록
정렬 및 필터링
[ ]앱 시나리오에 필요한 정렬 및 필터 명령은 캔버스에 배치되어야 합니다. 반드시 필요하지 않은 정렬 및 필터 명령은 앱 바에 배치되어야 합니다. 탐색 패턴
[ ]앱에 앱 바당 한 개 이하의 정렬 단추와 필터 단추 한 개가 있어야 합니다.앱 바에 대한 지침 및 검사 목록(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
탐색
[ ]앱의 계층 구조 수준이 5개 이상인 경우 머리글 드롭다운 목록 또는 탐색 모음을 사용하여 다른 섹션으로 이동해야 합니다. 탐색 패턴
[ ]브라우저 기록 단추처럼 동작하도록 뒤로 단추를 백 스택으로 구현해야 합니다. 탐색 패턴
[ ]뒤로 단추가 전체 화면 동영상 위에 표시되면 안 됩니다. 페이드 아웃되거나 탐색 모음에 배치되어야 합니다. 오디오 및 동영상 성능

미디어 리소스 최적화
시맨틱 줌
[ ]현재 보기에 5페이지가 넘는 콘텐츠가 포함된 경우 시맨틱 줌을 사용해야 합니다.시맨틱 줌에 대한 지침(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]시맨틱 줌 보기에는 추가 관련 정보가 포함되어야 합니다.시맨틱 줌에 대한 지침(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]사용자가 축소할 때 앱에 표준 왼쪽 여백이 있어야 합니다.시맨틱 줌에 대한 지침(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
터치
[ ]삭제 및 닫기와 같이 정확도가 중요한 작업의 터치 대상은 9mm 이상이어야 합니다. 터치 패턴
[ ]모든 터치 대상은 7mm 이상이어야 합니다. 터치 패턴
키보드 및 마우스
[ ]앱이 키보드를 사용한 탐색 및 선택을 지원해야 합니다.일반적인 사용자 조작에 대한 지침(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]목록 및 그리드와 같은 앱의 콘텐츠 컨테이너가 마우스 휠 스크롤을 지원해야 합니다.마우스 조작(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]앱이 마우스 가리키기 피드백을 지원해야 합니다.마우스 조작(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
애니메이션
[ ]애니메이션이 앱의 자연스러운 진행을 방해하면 안 됩니다. 앱에 애니메이션 사용(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
[ ]애니메이션이 사용자의 주의를 분산시키면 안 됩니다.앱에 애니메이션 사용(JavaScript 및 HTML 또는 C#/VB/C++ 및 XAML)
화면 크기 및 방향
[ ]고정 레이아웃을 사용하는 앱은 모든 화면 크기와 픽셀 밀도에서 가운데 맞춤되어야 합니다. 화면에 맞추기에 대한 지침
[ ]방향 전환이 유연하게 이루어져야 합니다. 다시 그리기 작업을 표시하면 안 됩니다. 크기 조정에 대한 지침
[ ]크기를 조정할 때 전환이 유연하게 이루어져야 합니다. 다시 그리기 작업을 표시하면 안 됩니다. 크기 조정에 대한 지침
검색 계약 및 참 메뉴
[ ]앱에 검색 가능한 콘텐츠가 있을 경우 검색 계약을 구현해야 합니다. 검색에 대한 지침 및 검사 목록
[ ]반환된 검색 결과가 없을 경우 앱이 의미 있는 메시지를 사용자에게 제공해야 합니다. 검색에 대한 지침 및 검사 목록
[ ]앱이 검색 결과와 함께 검색 조건을 표시해야 합니다. 검색에 대한 지침 및 검사 목록
[ ]앱이 검색 계약을 구현하는 경우 입력하여 검색을 사용하도록 설정해야 합니다. 검색에 대한 지침 및 검사 목록
공유 계약 및 참 메뉴
[ ]공유 가능한 콘텐츠가 있는 앱은 공유 소스 계약을 구현해야 합니다. 콘텐츠 공유에 대한 지침
[ ]콘텐츠 게시, 저장 또는 만들기를 허용하는 앱은 공유 대상 계약을 구현해야 합니다. 콘텐츠 공유에 대한 지침
설정 계약 및 참 메뉴
[ ]설정 창에서 사용자가 변경한 내용은 즉시 커밋되어야 합니다. 앱 설정에 대한 지침
[ ]설정 창에서 사용하지 않도록 설정된 컨트롤에는 사용하지 않도록 설정된 이유를 설명하는 메시지가 있어야 합니다. 앱 설정에 대한 지침
[ ]설정 플라이아웃은 좁거나(346픽셀) 와이드(646픽셀)여야 합니다. 앱 설정에 대한 지침
파일 선택기
[ ]앱이 저장 위치를 제공하는 경우 파일 열기 선택기 계약을 구현해야 합니다. 파일 선택기 계약에 대한 지침 및 검사 목록
타일
[ ]앱에 동적 콘텐트가 있을 경우 라이브 타일을 구현해야 합니다. 타일 및 배지에 대한 지침 및 검사 목록
[ ]타일의 이름이나 로고가 중복되면 안 됩니다. 타일 및 배지에 대한 지침 및 검사 목록
[ ]와이드 보조 타일에는 라이브 콘텐츠가 있어야 합니다. 보조 타일에 대한 지침 및 검사 목록
Toast 알림
[ ]앱이 화면에 표시되는 경우 알림이 표시되면 안 됩니다. 알림 메시지에 대한 지침 및 검사 목록
[ ]알림 메시지에 알림을 닫는 'x' 아이콘이 있으면 안 됩니다. 알림 메시지에 대한 지침 및 검사 목록
로밍
[ ]앱이 앱 설정 및 기본 설정, 활동 기록, 즐겨찾기 및 사용자 정의 목록과 같은 적절한 데이터를 로밍해야 합니다. 로밍 중인 앱 데이터 지침

 

관련 항목

Windows 스토어 앱 UX 테스트 사례

 

 

표시:
© 2017 Microsoft