앱 리소스에 대한 지침 및 검사 목록(Windows 스토어 앱)
Windows 스토어 앱의 앱 바 작업을 하는 경우 다음 지침을 따릅니다.
로드맵: 이 항목은 다음 항목과 연관되어 있습니다. 참고 항목:
- C# 또는 Visual Basic으로 작성한 Windows 스토어 앱용 로드맵
- C++로 작성한 Windows 스토어 앱용 로드맵
- 앱 기능 전체 프로세스 시리즈의 가장 흥미로운 항목인 Windows 스토어 앱 UI 전체 프로세스
사용자 환경 지침
앱 바를 사용하면 필요할 때 명령에 손쉽게 액세스할 수 있습니다. 화면의 아래쪽 가장자리를 살짝 밀면 앱 바가 표시되고, 해당 콘텐츠와 상호 작용하면 앱 바가 사라집니다. 또한 앱 바는 사진 선택 또는 그리기 모드와 같이 사용자 컨텍스트와 관련된 명령이나 옵션을 표시하는 데 사용할 수도 있습니다.
사용자가 제품 구입과 같은 워크플로를 완료하는 데 필요한 명령이 있는 경우에는 이러한 명령을 앱 바 대신 캔버스에 배치합니다.
앱 바에 명령을 배치하기 위한 지침
앱 바에 명령을 배치할 때는 다음 지침을 따르세요.
다른 명령 그룹을 앱 바의 양쪽에 분리해서 배치하세요.
새 콘텐츠를 만들기 위한 집합 및 보기를 필터링하기 위한 집합 등 성격이 다른 명령 집합들이 있는 경우에는 각각 앱 바의 오른쪽과 왼쪽에 분리해서 배치하세요.
둘 이상의 집합이 있으면 구분 기호로 분리하세요.
앱 전체에서 일관된 위치에 명령을 배치하세요.
각 페이지는 해당 페이지와 관련된 명령만 포함해야 하지만 페이지 간에 공통되는 명령이 있는 경우 사용자가 명령 위치를 예측할 수 있도록 비슷한 위치에 두어야 합니다.
배치 규칙을 따르세요.
- 맨 오른쪽에 새로 만들기/추가/만들기 단추(+ 아이콘)를 배치합니다.
- 뷰 전환 단추를 함께 그룹화한 후 맨 오른쪽에 배치합니다.
- 수락, 예, 확인 명령은 거부, 아니요, 취소 명령 왼쪽에 배치합니다.
항목이 선택되었을 때 앱 바에 상황에 맞는 명령을 표시하고 앱 바를 자동으로 표시합니다.
대부분의 사람들은 오른손잡이이므로 앱 페이지에서 항목을 선택할 때 해당 항목과 관련된 명령을 앱 바 왼쪽에 표시합니다. 이렇게 하면 팔이나 손이 명령을 가리지 않게 됩니다.
컨텍스트 명령을 표시할 때 앱 바의 해제 모드를 고정으로 설정합니다.
앱 바에 상황에 맞는 명령이 표시되면 사용자가 앱과 상호 작용할 때 앱 바가 자동으로 숨겨지지 않도록 해당 상황이 유지되는 동안 모드를 고정으로 설정합니다. 상황이 더 이상 유지되지 않으면 고정 모드를 해제합니다.
예를 들어 이미지가 선택될 때는 사진 조작을 위한 상황에 맞는 명령을 표시할 수도 있고, 이미지를 회전하거나 자르는 경우처럼 이미지로 작업하도록 할 수도 있습니다. 이 경우 앱 바는 사용자가 이미지를 선택 취소하거나 가장자리를 살짝 밀어 앱 바를 해제할 때까지 앱 바가 계속 표시됩니다.
명령이 너무 많을 때는 메뉴와 플라이아웃을 사용하세요.
앱 바에 있는 모든 명령을 별개의 단추로 맞출 수 없는 경우에는 명령들을 그룹화하여 앱 바 단추로 액세스할 수 있는 메뉴에 배치하세요.
.png "앱 바 메뉴")
회신, 전체 회신 및 전달을 응답 메뉴에 배치하는 등과 같이 명령의 논리적 그룹을 사용하세요.
기타 관련 없는 명령에 대해 "자세히" 또는 "고급"과 같은 메뉴는 만들지 않습니다. 이러한 유형의 일반 명령은 앱을 더 복잡하게 만들고 극히 일부의 사용자에 의해서만 사용될 수 있습니다. 오버플로가 필요하다고 생각되거나 논리적 그룹을 사용할 수 없는 경우에는 앱을 간소화하는 방법을 생각해 보세요.
사이드 및 세로 방향 보기가 가능하도록 앱 바를 디자인합니다.
앱 바 명령이 끌기 뷰와 세로 뷰에 올바르게 표시되는지 확인합니다.
자세한 내용은 여러 다른 뷰에서 앱 바를 사용하는 방법을 참조하세요.
가로 스크롤이 가능하도록 디자인합니다.
앱 페이지 아래쪽에 가로 스크롤 영역이 있는 경우 앱 바가 고정 모드로 표시될 경우 스크롤 영역의 높이를 줄입니다. 그렇지 않은 경우 앱 바가 스크롤 막대를 덮으므로 스크롤하기 위해 앱 바를 해제해야 할 수 있습니다. 앱 바 위쪽 가장자리와 같도록 스크롤 막대의 아래쪽 가장자리를 유지해야 합니다.
명령, 메뉴 및 플라이아웃에 기본 스타일을 사용합니다.
사용자들이 단추 배치와 크기에 익숙해져 있으므로 앱 바를 사용자 지정하려면 단추의 크기나 안쪽 여백은 건드리지 말고 배경, 아이콘 및 레이블의 색상을 사용자 지정하는 것이 좋습니다. 기본 레이아웃은 터치 기능을 지원하고 지원되는 모든 화면 너비에 10개의 명령이 들어가도록 디자인되었습니다. 레이아웃을 변경하면 원치 않는 동작이 발생할 수 있습니다.
자세한 내용은 빠른 시작: 앱 바 단추 스타일 지정을 참조하세요.
아래쪽 앱 바는 명령, 탐색 모음은 바는 탐색용으로 사용하세요.
일반적으로 아래쪽 앱 바는 현재 페이지에서 동작하는 명령에 사용하세요. 탐색 모음은 다른 페이지로 이동하기 위한 탐색 요소에 사용하세요.
명령에는 기본 제공 아이콘을 사용하세요.
자세한 내용은 빠른 시작: 앱 바 단추 스타일 지정을 참조하세요.
중요한 명령을 앱 바에 배치하지 않습니다.
앱에서 핵심적인 명령은 앱 바에 배치하지 마세요. 예를 들어 카메라 앱에서 "사진 촬영" 명령은 앱 바가 아닌 앱 페이지에 배치하세요. 앱 페이지에 단추를 추가하거나 사용자가 사진 촬영을 위해 미리 보기를 탭하도록 할 수도 있습니다.
로그인, 로그아웃 또는 기타 계정 관리 명령을 앱 바에 배치하지 마세요.
로그인, 로그아웃, 계정 설정, 계정 만들기 등의 모든 계정 관리 명령은 설정 플라이아웃에 포함되어야 합니다. 사람들이 특정 페이지에 로그인하는 것이 중요한 경우 앱 페이지에 로그인 단추를 포함하세요.
텍스트용 클립보드 명령을 앱 바에 배치하지 않습니다.
잘라내기, 복사 및 붙여넣기 명령은 앱 바 대신 앱 페이지의 상황에 맞는 메뉴에 배치하세요.
앱 바에는 앱 설정을 배치하지 마세요.
모든 앱 설정 명령(기본값 및 기본 설정)은 설정 플라이아웃에 포함되어야 합니다. 설정 플라이아웃은 잘 사용되지 않는 관리 명령(기록 지우기 등)을 포함하기 좋은 위치이기도 합니다.
마우스 오른쪽 단추 처리
앱의 UI를 다른 Windows 스토어 앱과 일관되게 유지하려면 사용자가 마우스 오른쪽 단추를 클릭하여 제공된 앱 바를 트리거합니다. 게임의 보조 사격이나 3D 뷰어의 가상 트랙볼처럼 마우스 오른쪽 단추를 다른 용도로 사용해야 하는 앱이 있는 경우 앱에서 앱 바를 시작하는 이벤트를 무시할 수 있습니다. 그러나 Windows 스토어 앱 환경의 중요한 부분이므로 게임의 컨트롤 모델에서는 앱 바의 역할이나 유사한 상황에 맞는 메뉴를 계속 고려해야 합니다.
앱의 컨트롤을 설계할 때 따라야 할 지침입니다.
- 앱에서 중요한 기능에 마우스 오른쪽 단추를 사용해야 하는 경우 해당 기능에 직접 사용합니다. 워크플로에서 중요하지 않을 경우 상황에 맞는 UI나 앱 바를 활성화하지 마세요.
- 테두리 메뉴처럼 앱별 상황에 맞는 마우스 오른쪽 단추 클릭 동작이 필요 없는 Microsoft DirectX 화면의 영역이 있는 경우에는 사용자가 이러한 영역을 마우스 오른쪽 단추로 클릭할 때 앱 바를 표시합니다.
- 캔버스의 모든 위치에서 마우스 오른쪽 단추 지원이 필요한 경우 사용자가 픽셀의 맨 위 가로 행, 픽셀의 맨 아래 가로 행 또는 둘 다를 마우스 오른쪽 단추로 클릭할 때 앱 바를 표시하는 것이 좋습니다.
- 이러한 솔루션으로 모두 충족되지 않으면 DirectX 화면에 사용자 지정 컨트롤을 추가하여 앱 바를 여는 마우스 제스처를 사용하세요.
- MouseMoved 같은 MouseDevice 클래스 이벤트를 사용하여 상황에 맞는 메뉴 동작을 직접 구현하세요.
- 터치를 사용할 때 길게 누르기 또는 누르고 있기가 마우스 오른쪽 단추 클릭과 동일합니다. 두 이벤트를 유사한 방식으로 처리하세요. 이 이벤트를 처리하고 이벤트에 대해 사용자 지정 동작을 정의하려면 Holding 이벤트를 등록하세요. 누르고 있기를 사용하려면 터치, 펜 및 스타일러스 입력으로 누르고 있기를 지원하도록 GestureSettings 속성을 설정하세요. 마우스로 누르고 있기 동작을 사용하려면 GestureSettings 속성에서 HoldWithMouse를 설정하세요.
- 앱에서 Win+Z 키 누르기 조합에 다른 동작을 지정하지 마세요. 앱 바 또는 유사한 상황에 맞는 메뉴를 개발하고 사용자가 Z 키와 함께 Windows 키를 누르면 표시합니다. KeyDown 및 AcceleratorKeyActivated 이벤트를 등록하여 이러한 두 키를 누르는 경우를 결정합니다.