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