정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

앱 바에 대한 지침

Applies to Windows and Windows Phone

표준 탐색 모음 컨트롤의 모양 샘플

표준 앱 바 컨트롤의 모양 샘플

설명

앱 바를 사용하면 필요할 때 명령에 손쉽게 액세스할 수 있습니다. 화면의 위쪽 또는 아래쪽 가장자리를 살짝 밀면 앱 바가 표시되고, 해당 콘텐츠를 조작하면 앱 바가 사라집니다. 또한 사진 선택이나 그리기 모드와 같이 사용자의 상황에 맞는 명령이나 옵션을 표시하는 데 사용할 수 있습니다. 앱의 섹션 또는 페이지 간 탐색에도 사용할 수 있습니다.

앱 기능 전체 프로세스 시리즈의 일부로 탐색 기능을 자세히 살펴보세요.:  플랫 탐색 전체 프로세스(HTMLXAML) 및 계층적 탐색 전체 프로세스(HTMLXAML)

사용자가 제품 구입과 같은 워크플로를 완료하는 데 필요한 명령이 있는 경우에는 이러한 명령을 앱 바 대신 캔버스에 배치합니다.

위쪽 앱 바

탐색 모음 또는 위쪽 앱 바는 사용자가 앱의 다른 영역에 액세스할 수 있는 탐색 컨트롤을 배치하는 데 좋은 장소입니다. 위쪽 앱 바를 탐색에 사용하면 Windows 스토어 앱 탐색을 위한 일관성 있고 예측 가능한 사용자 환경이 제공됩니다. 일관성은 사용자에게 신뢰감을 주어 시스템을 둘러보도록 유도하며, 앱 탐색과 관련된 지식을 앱 간에 적용하는 데 도움이 됩니다.

사용자가 캔버스만을 사용하여 주요 시나리오를 완료할 수 있어야 합니다. 탐색 모음은 탐색 컨트롤의 보조 위치입니다. 탐색 모음을 통해 사용자가 앱의 모든 부분을 사용할 수 있도록 돕거나, 홈페이지에 빨리 액세스할 수 있게 하거나, 앱의 다른 부분으로 점프하여 탐색하도록 유도할 수 있습니다.

위쪽 앱 바에 다른 기능을 추가할 수도 있습니다. 예를 들어 새로운 항목을 만드는 '+' 단추를 추가하거나 검색 상자를 통합합니다. 다른 기능을 추가하는 경우 앱 바의 오른쪽에 배치하는 것이 좋습니다.

탐색 모음의 항목에 스타일을 지정할 수 있지만 기본 모양은 단순한 단추입니다. 그러나 이전 이미지와 같이 또 다른 일반적인 시각적 처리는 단추와 미리 보기 사용입니다.

스토어 앱처럼 탐색 모음을 여러 영역으로 나눌 수도 있습니다. 여기서 위쪽 섹션은 전역 탐색에 사용되고 아래쪽 섹션은 앱 범주에 사용되는 것을 확인할 수 있습니다.

스토어 앱의 탐색 모음 그림

아래쪽 앱 바

하단 앱 바는 명령을 배치하는 데 좋은 장소입니다. 앱 캔버스에서 앱 바로 명령을 이동하면 사용자에게 가장 몰입형 환경을 제공할 수 있습니다.

표준 앱 바 컨트롤은 사용자 지정 작업을 최소화하거나 사용하지 않고 앱 바를 구현하려는 개발자를 위한 것입니다. 앱 바는 쉽게 만들 수 있지만 Windows 지침과 패턴에 따라 동작하도록 하는 것은 쉽지 않습니다. CommandBar classWinJS.UI.AppBar object는 의도한 디자인 및 동작과 일치하도록 작성되었으므로 개발자가 세부 정보에 주의할 필요가 없으며 일반적인 명령 패턴에서 벗어날 가능성이 적습니다.

표준 환경을 벗어나서 앱 바를 사용자 지정하려는 경우 XAML의 CommandBar 컨트롤 대신 AppBar 컨트롤을 사용합니다.

기본 제공 아이콘을 명령에 사용하거나 직접 만들 수 있습니다. 사용할 수 있는 아이콘 목록은 다음을 참조하세요.

예제

위쪽 앱 바

표준 탐색 모음 컨트롤을 보여 주는 스크린샷

 

아래쪽 앱 바

표준 앱 바 컨트롤을 보여 주는 스크린샷

권장 사항 및 금지 사항

  • 탐색과 명령을 분리합니다. 명령은 아래쪽 앱 바에 배치하고 탐색은 위쪽 앱 바에 배치하는 것이 좋습니다. 앱을 처음으로 실행할 때 앱 바에 있는 중요한 명령을 알려주도록 도움말을 제공할 수 있습니다.

  • 새 콘텐츠를 만들기 위한 집합, 보기를 필터링하기 위한 집합 등 성격이 다른 명령 집합이 있는 경우에는 각각 앱 바의 오른쪽과 왼쪽에 분리해서 배치합니다. 여러 개의 집합이 있는 경우 구분 기호로 분리합니다.

  • 앱 전반에 걸쳐 일관된 위치에 명령을 배치합니다. 각 페이지는 해당 페이지와 관련된 명령만 포함해야 하지만 페이지 간에 공통되는 명령이 있는 경우 사용자가 명령 위치를 예측할 수 있도록 비슷한 위치에 두어야 합니다.

  • 다음과 같은 배치 규칙을 따르세요.

    • 맨 오른쪽에 새로 만들기/추가/만들기 단추(+ 아이콘)를 배치합니다.
    • 뷰 전환 단추를 함께 그룹화한 후 맨 오른쪽에 배치합니다.
    • 수락, 예, 확인 명령은 거부, 아니요, 취소 명령 왼쪽에 배치합니다.
  • 항목이 선택된 경우 앱 바에 상황에 맞는 명령을 표시하고 앱 바를 자동으로 표시합니다. 대부분의 사람들은 오른손잡이이므로 앱 페이지에서 항목을 선택할 때 해당 항목과 관련된 명령을 앱 바 왼쪽에 표시합니다. 이렇게 하면 팔이나 손이 명령을 가리지 않게 됩니다.

  • 앱 바에 상황에 맞는 명령이 표시되는 경우 사용자가 앱을 조작할 때 앱 바가 자동으로 숨겨지지 않도록 해당 상황이 유지되는 동안 모드를 고정으로 설정합니다. 상황이 더 이상 유지되지 않으면 고정 모드를 해제합니다. 예를 들어 사용자가 이미지를 선택한 경우 사진 조작을 위한 상황에 맞는 명령을 표시하지만 이미지를 회전하거나 자르는 등 이미지 작업을 계속할 수 있게 하려고 합니다. 이 경우 앱 바는 사용자가 이미지를 선택 취소하거나 가장자리를 살짝 밀어 앱 바를 해제할 때까지 앱 바가 계속 표시됩니다.

  • 모든 명령을 앱 바에 별개의 단추로 포함할 수 없는 경우에는 명령을 그룹화하여 앱 바 단추로 액세스할 수 있는 메뉴에 배치합니다. 회신, 전체 회신 및 전달을 응답 메뉴에 배치하는 등 논리적 그룹을 명령에 사용합니다.

    플라이아웃 및 메뉴 이미지

  • 크기 조정된 뷰와 세로 뷰에 적절하게 앱 바를 디자인합니다. 명령이 10개 미만인 경우 사람들이 앱의 크기를 조정하거나 세로 뷰로 회전할 때 Windows는 레이블을 자동으로 숨기고 여백을 조정하여 모든 명령에 대한 도구 설명을 제공합니다. 보다 사용자 지정된 뷰를 표시하려는 경우 명령을 메뉴로 그룹화하거나 크기 조정된 뷰 또는 세로 뷰에 더 적은 수의 명령을 표시하는 보다 구체화된 환경을 제공할 수 있습니다.

    JavaScript 앱에서는 사람들이 앱의 크기를 조정할 때 최선의 레이아웃이 표시되도록 DOM에서 상황에 맞는 명령 앞에 전역 명령을 배치하는 것이 좋습니다. 자세한 내용은 명령을 제공하는 앱 바 추가앱 바 스타일 지정을 참조하세요.

    C#/C++/VB 앱에서 CommandBar 컨트롤을 사용하면 크기 조정이 자동으로 처리됩니다. 자세한 내용은 여러 다른 크기로 앱 바를 사용하는 방법을 참조하세요.

  • 앱 페이지 아래쪽에 가로 스크롤 영역이 있는 경우 앱 바가 고정 모드로 표시될 경우 스크롤 영역의 높이를 줄입니다. 그렇지 않은 경우 앱 바가 스크롤 막대를 덮으므로 스크롤하기 위해 앱 바를 해제해야 할 수 있습니다. 앱 바 위쪽 가장자리와 같도록 스크롤 막대의 아래쪽 가장자리를 유지해야 합니다.

  • 앱 바에 중요한 명령을 배치하지 마세요. 예를 들어 카메라 앱에서 "사진 촬영" 명령은 앱 바가 아닌 앱 페이지에 배치합니다. 앱 페이지에 단추를 추가하거나 사용자가 사진 촬영을 위해 미리 보기를 탭하도록 할 수도 있습니다.

  • 로그인, 로그아웃 또는 기타 계정 관리 명령을 앱 바에 배치하지 마세요. 로그인, 로그아웃, 계정 설정, 계정 만들기 등의 모든 계정 관리 명령은 설정 플라이아웃에 포함되어야 합니다. 사람들이 특정 페이지에 로그인하는 것이 중요한 경우 앱 페이지에 로그인 단추를 포함합니다. 자세한 내용은 로그인에 대한 지침을 참조하세요.

  • 앱 바에는 앱 설정을 배치하지 마세요. 모든 앱 설정 명령(기본값 및 기본 설정)은 설정 플라이아웃에 포함되어야 합니다. 설정 플라이아웃은 잘 사용되지 않는 관리 명령(기록 지우기 등)을 포함하기 좋은 위치이기도 합니다.

추가 사용법 지침

다양한 창 크기에 맞게 조정

앱 바가 포함된 창의 크기를 조정하면 명령의 크기가 조정되고 레이블이 삭제될 수도 있습니다. 축소된 크기의 명령이 더 이상 화면에서 한 줄에 들어가지 않으면 두 번째 행으로 줄 바꿈됩니다.

  • 전체 크기와 축소된 크기(최소 500px 또는 320px)를 각각 한 개씩 디자인하여 앱 바 보기를 둘 이상 디자인합니다. 대부분의 사람들은 전체 화면이나 다른 앱과 50/50인 일반적인 창 크기만 사용합니다.
  • 더 작은 보기를 디자인하는 경우 명령을 그룹화합니다. 의미 있는 방식으로 명령을 그룹화할 수 없는 경우 줄임표 아이콘을 사용하여 "더 보기" 그룹에 넣습니다.
일반적인 창 해상도(픽셀)단일 행에 포함되는 레이블 없는 축소된 크기의 단추 수단일 행에 포함되는 레이블 있는 전체 크기의 단추 수
13662213
10241610
768127
50085
32053

 

마우스 오른쪽 단추 처리

앱의 UI를 다른 Windows 스토어 앱과 일관되게 유지하려면 사용자가 마우스 오른쪽 단추를 클릭하여 제공된 앱 바를 트리거해야 합니다. 게임의 보조 사격이나 3D 뷰어의 가상 트랙볼처럼 마우스 오른쪽 단추를 다른 용도로 사용해야 하는 앱이 있는 경우 앱에서 앱 바를 시작하는 이벤트를 무시할 수 있습니다. 그러나 Windows 스타일 앱 환경의 중요한 부분이므로 게임의 컨트롤 모델에서는 앱 바의 역할이나 유사한 상황에 맞는 메뉴를 계속 고려해야 합니다.

앱의 컨트롤을 설계할 때 따라야 할 지침입니다.

  • 앱에서 중요한 기능에 마우스 오른쪽 단추를 사용해야 하는 경우 해당 기능에 직접 사용합니다. 워크플로에 중요하지 않은 경우 상황에 맞는 UI나 앱 바를 활성화하지 마세요.
  • 테두리 메뉴와 같은 상황에 맞는 오른쪽 클릭 작업이 필요 없는 앱 영역을 마우스 오른쪽 단추로 클릭할 때는 앱 바를 표시합니다.
  • 모든 위치에서 마우스 오른쪽 단추 지원이 필요한 경우 사용자가 픽셀의 맨 위 가로 행, 픽셀의 맨 아래 가로 행 또는 둘 다를 마우스 오른쪽 단추로 클릭할 때 앱 바를 표시하는 것이 좋습니다.
  • 이러한 방법으로 해결되지 않는 경우 사용자 지정 조작 컨트롤을 사용하여 마우스로 앱 바를 엽니다.
  • MouseMoved 같은 MouseDevice 클래스 이벤트를 사용하여 상황에 맞는 메뉴 동작을 직접 구현하세요.
  • 길게 누르기 터치 제스처는 오른쪽 단추 클릭과 같습니다. 두 이벤트를 유사한 방식으로 처리합니다. 이 이벤트를 처리하고 이벤트에 대해 사용자 지정 동작을 정의하려면 Holding 이벤트를 등록합니다. 길게 누르기를 사용하려면 GestureSettings 속성에 Hold(터치식 및 펜 입력) 및 HoldWithMouse를 설정합니다.
  • Win+Z 키 조합의 동작을 변경하지 마세요. 앱에서 앱 바나 상황에 맞는 메뉴가 표시되어야 합니다. KeyDownAcceleratorKeyActivated 이벤트를 등록하여 이러한 두 키를 누르는 경우를 결정합니다.

관련 항목

디자이너용
명령 패턴
탐색 패턴
앱 바에 접근성 구현
개발자용(JavaScript 및 HTML로 작성한 Windows 런타임 앱)
WinJS.UI.AppBar object
WinJS.UI.NavBar object
HTML AppBar 컨트롤 샘플
HTML NavBar 컨트롤 샘플
탐색 및 탐색 기록 샘플
첫 번째 앱 - 3부: PageControl 개체 및 탐색
앱 바 추가
탐색 모음 추가
페이지 간 탐색(HTML)
개발자용(C#/VB/C++ 및 XAML로 작성한 Windows 런타임 앱)
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
XAML AppBar 컨트롤 샘플
XAML 탐색 샘플
첫 번째 앱 - 3부: 탐색, 레이아웃 및 보기
첫 번째 앱 - C++ Windows 스토어 앱에서 탐색 및 보기 추가(자습서 3/4)
앱 바 추가(XAML)
페이지 간 탐색(XAML)
개발자용(DirectX 및 C++로 작성한 Windows 런타임 앱)
앱 바 또는 설정 만들기

 

 

표시:
© 2014 Microsoft