앱 탭(피벗 컨트롤)(Windows Phone 스토어 앱)

앱 탭 패턴은 사용자가 자주 이동하는 여러 페이지의 UI에 사용됩니다. 이 패턴은 영화, 야구 등의 경우와 같이 앱이 단일 주제와 관련된 경우에 특히 유용합니다. 각 페이지는 앱 전체에서 표현되는 전반적인 데이터와 관련된 내용을 사용자에게 보여 줍니다. 앱 탭 패턴은 완전한 앱을 구성하는 요소일 수 있고 앱의 하위 영역에서 사용될 수도 있습니다. 예를 들어 허브 컨트롤을 앱의 기본적인 첫 번째 수준으로(이전 항목에서 설명) 사용하고 여기서 사용자가 앱 탭 패턴이 사용된 앱 하위 섹션으로 이동하도록(피벗 컨트롤 사용) 만들 수 있습니다.

개인 컬렉션에 보유한 영화를 카탈로그하는 앱을 원하는 경우를 가정하겠습니다. 앱 탭 패턴을 사용하여 동영상을 몇 가지의 필터링된 보기로 제공할 수 있습니다. 하나의 필터링된 보기에서는 즐겨찾기로 표시된 동영상을 보여 주고, 다른 필터링된 보기는 액션 종류의 영화용으로만 사용할 수 있습니다. 또 다른 필터링된 보기는 시간이 날 때 시청할 순서대로 순위를 매긴 영화용으로 지정할 수 있습니다. 물론, 필터링 없이 전체 영화 목록을 표시하는 페이지도 만들 수 있습니다.

다음 그림은 이 앱 구조를 시각화하는 데 도움을 줍니다. 앱이 시작되면 필터링된 페이지 중 하나가 열립니다. 이 위치에서 UI에서 탭처럼 작동하는 각 페이지를 가로로 스크롤할 수 있습니다.

Outlook 받은 편지함의 앱 탭

각 탭은 기본적으로 사용자에게 보여 줄 데이터를 필터링하여 표시하는 서로 다른 방식입니다. 필터링된 보기 페이지가 열려 있을 때 하드웨어 뒤로 버튼을 누르는 경우 앱이 종료됩니다.

서로 다른 필터링된 보기를 표시하는 중앙 데이터 형식이 있는 앱에 앱 탭 패턴을 사용합니다.

피벗 컨트롤을 앱 탭 구현으로 사용

앱 탭 패턴을 구현하는 데 피벗 컨트롤을 사용할 수 있습니다. 이 컨트롤을 사용하면 사용자가 각 페이지(피벗 항목이라고 함)에서 오른쪽, 왼쪽으로 이동할 수 있습니다.

Microsoft의 Outlook 클라이언트 앱은 단일 데이터 형식, 즉 각 피벗 항목에 서로 다른 필터링이 적용된 이메일 목록을 표시하기 때문에 앱 탭 패턴을 사용합니다. Outlook 앱을 사용하여 이메일 받은 편지함을 보면 —모두, 읽지 않음, 긴급 등 3개의 피벗 항목이 표시됩니다. 따라서 원하는 경우 예를 들어 긴급 이메일만 확인하기가 쉽습니다. 이런 방법 덕분에, 긴급으로 표시된 이메일을 찾으려고 모두 피벗 항목에서 이메일 전체를 스크롤할 필요가 없습니다.

Outlook 클라이언트 앱

앱 탭 패턴을 사용하는 또 다른 기존 앱은 Netflix 앱입니다. 각 피벗 항목이 동영상 목록을 표시하며, 각 피벗 항목에 대한 목록은 적용된 필터링 때문에 차이가 있습니다. 각각을 비교하여 고유성과 유용성을 확인할 수 있습니다. 즉석 피벗 항목은 사용자가 원할 때 스트리밍 장치를 통해 감상할 수 있도록 해당 대기열에 넣어 둔 동영상을 보여 줍니다. 홈 피벗 항목은 Netflix에서 사용자가 관심을 보일 것으로 판단하는 동영상을 보여 줍니다. 검색 피벗 항목은 검색 키워드와 일치하는 동영상을 보여 줍니다.

피벗 항목은 집중적이며 효율적입니다. 관련 항목의 필터링, 정렬, 표시 등과 같은 작업 기반 동작에 주된 초점을 맞춥니다. 허브는 광범위하고, 종합적인 탐색 위치입니다. 최신 관련 콘텐츠를 홍보하고 표시하는 데 가장 효율적으로 사용됩니다. 특정 컨트롤이 다른 컨트롤보다 더 적합한 경우가 있습니다.

Netflix 앱

탭과 같은 기능

각 피벗 항목은 실제로 탭이며, 탭은 위쪽에 나열됩니다. Netflix 앱 그림에서 볼 수 있듯이 이 앱은 현재 홈 피벗 항목이 열려 있고 그 오른쪽으로 장르 피벗 항목을 사용할 수 있음을 확인할 수 있습니다. 장르 피벗 항목으로 이동하려면 해당 항목을 탭하거나 항목 쪽으로 이동합니다.

앱에 포함하는 피벗 항목 수를 최소화해야 합니다. 사용자는 피벗 항목 간에 이동하는 경우 방향을 잃을 수 있습니다. 피벗 항목 수를 5개 이하로 유지하세요. 5개 넘게 필요한 경우에는 탭해서 다른 페이지로 이동하거나 그 자체로 하나의 피벗 컨트롤인 다른 탐색 수준으로 이동할 수 있는 링크가 있는 목록 컨트롤을 피벗 컨트롤 중 하나에 포함시킵니다. 이런 기능이 필요한지 확인하려면 Windows Phone용 세부 정보 드릴다운이 있는 목록을 참조하세요.

참고  피벗 컨트롤을 사용하면 항목 머리글을 탭하여 항목 간에 이동할 수 있습니다. 이런 동작은 허브 컨트롤이 수행할 수 없는 것입니다.

데이터 필터링 고려 사항

이 항목 시작 부분에서, 피벗 컨트롤을 가장 잘 사용하는 방법은 각 피벗 항목이 동일한 데이터 형식을 포함하지만 해당 데이터를 달리 필터링하여 표시하는 것이라고 설명했습니다. 또 관련 없는 데이터가 있는 섹션을 표시하는 데 허브 컨트롤을 사용한다는 설명도 했습니다. 데이터가 기본적으로 다르지만 한 가지 형식의 주제와 전적으로 연관이 있는 경우, 피벗 컨트롤을 이런 방식으로도 사용할 수 있습니다. 예를 들어 관광객을 대상으로 하는 앱에서 뉴욕 시에 대해 제시할 정보가 있는 경우 위치, 인구, 연간 조세 수입 등과 같은 흥미로운 통계가 담긴 피벗 항목이 포함된 피벗 컨트롤을 사용할 수 있습니다. 그런 다음, 관광지와 같은 정보를 담은 피벗 항목과 투숙할 호텔에 대한 피벗 항목을 추가로 사용할 수도 있습니다.

ESPN ScoreCenter 앱은 각 피벗 항목에 중심 주제를 기반으로 하는 다른 유형의 데이터가 포함된 앱 탭 탐색 패턴의 예입니다.

ESPN ScoreCenter 앱

피벗 컨트롤과 허브 컨트롤 결합

허브 컨트롤의 홈페이지(예: Facebook 앱의 홈 허브)에서 목록에 있는 탐색 항목을 탭하여 피벗 컨트롤을 탐색할 수 있습니다. 이는 Facebook 홈 허브 섹션에서 프로필을 선택할 때 발생하는 동작입니다. 사용자가 프로필 선택을 탭하면 담벼락, 정보, 내 사진 등과 같은 피벗 항목을 보여 주는 피벗 컨트롤로 연결됩니다. 이런 방식으로 컨트롤 간에 이동할 수 있습니다.

기본 허브 컨트롤에서 Facebook 앱 내부 피벗 컨트롤로 이동

허브 홈 섹션 선택에서 다른 허브로 이동하게 만들고 싶을 수도 있겠지만, 이것은 좋은 생각이 아닙니다. 사용자가 현재 위치한 앱이 무엇인지 잊기 쉽기 때문에 혼동을 일으킬 수 있습니다. 때로는 허브에 배경 전체에 펼쳐지는 큰 이미지가 있어서 사용자로 하여금 최상위 수준에 있음을 충분히 인식하게 만드는 경우가 있습니다. 이 경우 이 사용자가 그 자체로 허브인 다른 배경의 하위 영역으로 이동하면 혼동을 일으킵니다.

피벗 컨트롤의 앱 바

모든 데이터가 같은 형식이므로, 대부분의 경우 표시 중인 항목과 관련된 버튼이 있는 아래쪽 앱 바를 제공할 수 있습니다. 다음 그림과 같이 Outlook에는 사용자에게 필요한 동작이 포함되어 있기 때문에 항상 표시되며 표시 중인 항목에 어떤 식으로든 영향을 미치는 앱 바가 있습니다.

Outlook 클라이언트 앱

Outlook 앱에서 앱 바는 열려 있는 피벗 항목에 관계없이 동일한 작업을 허용할 수 있습니다. 앞의 그림에서 보면 새 이메일을 만들고, 선택 상자를 노출하고, 폴더를 전환하고, 이메일을 다시 동기화하는 버튼이 있습니다. 이것은 피벗 컨트롤과 허브 컨트롤 간의 또 다른 차이입니다. 왜냐하면 여기서 하단에 앱 바를 넣지는 않을 것이기 때문입니다.

각 피벗 항목에 놓일 내용을 시중하게 고려하여 가장 적합하게 배치하지 않는 한, 동일한 버튼을 항상 하단에 유지할 수 있다고 가정하지 마세요. 사용된 일부 피벗 컨트롤은 각 피벗 항목에서 완전히 똑같은 데이터 형식을 유지하지 않을 수 있습니다.

"홈" 피벗 항목

첫 번째 피벗 항목을 나머지 모든 피벗 항목의 목록을 표시하는 데 사용할 수 있습니다. 그러면 사용자는 살짝 밀어 피벗 항목으로 이동하는 대신 피벗 항목을 탭하여 곧바로 해당 피벗 항목으로 이동할 수 있습니다. 그리고 목록에 다른 앱을 시작하는 항목을 포함할 수 있습니다.

원치 않는다면 사용자로 하여금 홈 피벗 항목을 방문하게 만들지 않아도 됩니다. 예를 들어 영화 목록 앱의 경우 사용자가 홈 피벗 항목을 방문하게 만드는 대신 가장 인기 있는 최신 영화의 그래픽을 보여 주는 피벗 항목을 방문하게 만들 수 있습니다. 이렇게 하면 사용자는 더 눈길을 끄는 이미지를 접하게 됩니다.

관련 항목

허브

피벗