brunch

매거진 UX 디자인의 모든 것

라이킷 190 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Oct 14. 2016

탭(Tabs) UX 설계 13가지 원칙

UX 디자인 배우기 #48

Today UX 아티클

UX Planet에 올라온 Nick Babich의 글 Tabs for Mobile UXDesign을 전문 번역한 글입니다.

Tabs for Mobile UX Design

by Nick Babich

uxplanet.org

탭(tab)은 가장 많이 이용되는 모바일 UI 구성요소 중 하나입니다. 탭은 유저가 동일하게 중요한 소수의 뷰 사이를 빠르게 옮겨 다닐 수 있게 해주며, 실제 현실 속 요소를 모바일 애플리케이션과 웹으로 끌고 오기도 합니다. 제대로 적용하기만 하면, 탭은 용성 개선에 기여하는 훌륭한 유저 인터페이스 컨트롤로 여겨집니다.

훌륭한 메타포

UI에서 메타포는 유저와 애플리케이션 사이가 친밀해지게 해주는 데 이용되는 아이디어나 대상입니다. 인터페이스에서 쓰는 탭은 카드형 카탈로그 서랍 속의 인덱스카드에서 따온 ‘탭’이라는 보편적인 아이디어에서 나온 것이기 때문에 훌륭한 메타포입니다. 실제 대부분의 사람들이 경험을 가진 현실 속 대상을 활용한 것이죠.

인덱스 카드 박스

제대로 이용하기만 하면, 탭은 훌륭한 관습(convention)이며 다음과 같은 역할을 할 수 있습니다.

컨트롤로서 탭은 매우 직관적이며 이용하기 쉽습니다. 잘 디자인된 탭은 시각적 표현을 이용해 현재 유저의 위치를 분명하게 나타냅니다.

콘텐츠 조직(organization)을 개선해줍니다. 탭은 콘텐츠를 의미 있는 섹션으로 나눠주면서 적은 스크린 공간을 사용합니다. 많은 경우, 탭은 보이는 내용과 시각적으로 연결되어 있습니다. 이렇게 되면 활성화된 탭과 공간이 서로 연결되어 있다는 생각이 강화되고, 유저가 쉽게 관심 있는 내용에 접근할 수 있게 해 줍니다.

시각적 일관성을 더해줍니다. 유저가 가장 중요한 내용에 쉽고 빠르고 접근할 수 있게 해주는 UI 디자인이 훌륭한 UI 디자인입니다. 그러기 위해서는, 유저 인터페이스 디자인에서 여러분이 특정 방식으로 보여주고자 하는 내용의 우선순위를 정하는 것이 중요합니다.

탭과 내비게이션 바의 차이

이 둘은 보통 같은 디자인을 공유하지만, 인지적으로 매우 큰 차이를 가지고 있습니다. 탭은 서로 관련이 있는 것으로 생각하는 반면, 내비게이션 바는 그렇지 않습니다.

유저는 내비게이션 바를 클릭할 때, 지금 보고 있는 화면과는 관련이 없는 다른 화면으로 이동할 것이라고 기대합니다.

iOS의 네비게이션 바

반면 유저는 탭을 클릭할 때, 같은 화면 안에 있으면서 상위 탭 또는 현재 열린 탭과 관련된 데이터가 보일 것이라고 기대합니다. 완전히 다른 화면에 관련 없는 데이터가 보일 것이라고 기대하지 않습니다.

안드로이드 어플리케이션의 탭

언제 사용해야 하는가

연관 화면 그룹을 보여줄 때

한 세트의 탭 안에 있는 모든 내용은 더 큰 구성 원칙에 따라 서로 관련이 있어야 하며 동시에 각 탭의 내용은 상호 배타적이어야 합니다. 예를 들어, 탭으로 신문의 서로 다른 섹션을 보여줄 수도 있고, 서로 다른 종류의 설정을 보여줄 수도 있습니다. 대부분의 사용 사례를 보면, 다른 영역으로 가게 하는 것이 아니라 ‘같은 맥락 안에서 화면 전환을 보여줄 때’ 탭을 이용합니다. 유저가 주어진 탭을 선택했을 때, 자신이 찾으려는 것을 쉽게 예측할 수 있도록 탭을 논리적인 콘텐츠 덩어리로 묶어야 합니다.

왼쪽: 스토어 내 다양한 목적기로 전환할 수 있는 탭. 오른쪽: 콘텐츠 내 다양한 그룹으로 전환할 수 있는 탭. Source: Material Design

병렬형 콘텐츠를 보여줄 때

보통 유저에게 여러 탭의 콘텐츠를 동시에 보여줄 필요가 없습니다. 만일 서로 다른 탭에 있는 정보를 비교하며 봐야 하는 콘텐츠라면, 탭을 전적으로 이용하지 않는 것이 좋습니다. 계속 탭 사이를 왔다 갔다 하다 보면 유저에게 단기 기억 과부하가 일어나 사용성이 떨어지기 때문입니다.

음악 장르는 보통 병렬로 보여진다. Source:Material Design

스코프 바 또는 필터를 보여줄 때

유저가 검색하고 싶어 하는 ‘분명하게 정의되었거나 전형적인 카테고리’가 있을 때는 탭을 스코프 바(scope bar)로 이용하는 것이 유용할 수 있습니다.

iOS9 의 스코프바

또한 탭은 관련이 있지만 구분된 데이터에도 이용할 수 있습니다. 애플 앱스토어에서는 각 앱을 보는 화면에서는 ‘Details’, ‘Reviews’, ‘Related’와 같은 서브 뷰를 볼 수 있습니다.

탭 사용성 가이드라인

탭은 상단에 배치한다

탭은 화면 하단이나 사이드가 아닌 상단에 보여야 합니다. 모든 것의 자연스러운 계층 구조는 위에서 아래로 가는 것으로 유저는 새로운 화면을 위에서 아래로 훑어볼 것입니다. 또 다른 이유는 화면에 보이는 내용보다 탭이 정보 계측 구조에서 더 높은 단계에 있기 때문입니다.

활성화 탭은 강조한다

현재 위치를 제대로 알려주지 못하는 것은 앱 메뉴에서 가장 흔하게 발견되는 실수이기도 합니다. “나는 어디에 있는가?”는 성공적으로 탐색하기 위해서 유저가 반드시 답을 얻어야 하는 질문입니다.

만일 현재 탭이 이 사례처럼 제대로 강조되어 있지 않으면, 어떤탭이 선택된 상태인지 알기 어렵습니다.

언제나 하나의 미리 선택된 탭이 있어야 한다

만일 탭을 이용한다면, 탭이 보일 때 하나의 탭은 선택이 된 상태여야 합니다. 유저가 탭을 볼 수 있는데 선택된 탭이 없는 경우는 없어야 합니다. 만일 그렇게 되면 유저가 방향을 잃었다는 생각을 할 수 있기 때문입니다.

탭을 정돈한다

유저가 이해할 수 있는 방향으로 탭 레이블을 정돈해야 합니다. 유저가 앱을 편하게 이용하게 하려면 특별히 탭을 보여줘야 하는 순서가 있는지 판단해야 합니다. 여러분의 논리가 아닌 유저의 논리를 따라야 한다는 걸 기억하세요.

매출 정보는 연도별로 정리할 수 있습니다.

의미 있는 텍스트 레이블을 사용한다

탭은 훑어보기 쉬워야 하고 유저가 그것을 탭 했을 때 어떤 일이 일어날지 정확히 이해할 수 있어야 합니다. 텍스트 레이블은 짧아야 하고 의미 있는 정의를 제공해야 합니다.

레이블에는 새로 만들어낸 용어가 아닌 쉬운 언어를 써야 합니다.

레이블이 잘리지 않도록 긴 텍스트 레이블은 피해야 합니다. 만일 전반적으로 긴 텍스트가 필요하다면, 탭 컨트롤로 쓰기에는 전부 너무 복잡한 선택이라는 신호와 같습니다.

짤리는 레이블은 이해를 방해할 수 있습니다. Source:Material Design

아이콘을 주의한다

탭 레이블은 전부 아이콘을 쓰거나 전부 텍스트로 써야 합니다.

텍스트 레이블과 아이콘 레이블을 혼용하지 않습니다. Source:Material Design

아이콘은 ‘모양’이 아니라 그 ‘의미’를 기반으로 이용하는 것이 기본입니다. 그러면 특정 의미를 가진 아이콘의 모양이 바뀌더라도 여러분이 만든 앱의 UI를 이해하는 데 도움이 될 겁니다. 보통 모든 내비게이션 옵션을 잘 표현하도록 아이콘을 만들어 내는 것은 매우 어렵기 때문에, 대게 텍스트가 훨씬 더 낫습니다.

나쁜 사례: 모든 아이콘의 의미를 파악하기 정말 어렵습니다.

여러 줄을 겹쳐서 쓰거나 탭 속의 탭을 쓰지 않는다

탭은 반드시 한 줄이어야 합니다. 여러 줄로 만들면 과하게 복잡해지는 현상이 분명 생길 겁니다. 만일 한 줄에 다 들어가지 않을 만큼 많은 탭이 필요하다면 디자인을 간소화해야 합니다.

탭을 한 줄로 보여주지 못했다. Image credits: Material Design

탭 속의 탭은 공간 기억(spatial memory)을 파괴하기 때문에, (어떤 탭에 이미 들어가 봤는지 기억하기 위해) 유저가 탭과 그 내용 사이의 관계를 추적하는 것이 불가능해집니다.

탭은 충분히 크게 만든다

탭은 쉽게 탭(tap) 할 수 있도록 충분히 크게 만들어야 합니다. 각 탭의 너비를 계산하기 위해서는, 화면의 너비를 액션 수로 나누면 됩니다. 아니면 그 대신 가장 큰 탭의 너비를 모든 탭에 쓰면 됩니다.

안드로이드 가이드라인에서는 모바일에서 쓰는 탭에 다음과 같은 치수를 이용하라고 제안합니다.

Units indensity-independent pixels (dp). Source: Material Design.

선택되지 않은 탭도 잘 보이게 만든다

선택되지 않은 탭도 분명하게 잘 보이고 읽을 수 있게 만들어야 유저가 추가적인 옵션을 상기할 수 있습니다. 만일 강조되지 않은 탭이 시야에서 없어지면, 그 많은 숨겨진 기능은 유저가 절대 클릭해보지 못하거나 발견하지 못할 위험이 있습니다.

하위 탭으로 구성되어 스크롤이 되는 탭(scrollable tab)은 이 원칙의 유일한 예외입니다. 하지만 여전히 스크롤이 되는 콘텐츠는 덜 효율적이긴 합니다. 원하는 옵션을 보기 위해서 한 번은 스크롤을 해야 하기 때문입니다.

안드로이드의 스크롤 되는 탭 Source:Material Design

스크롤링 방향에 따라 탭을 숨긴다

보통 모바일앱에는한 번에 모바일 화면에 딱 맞는 것보다 더 많은 페이지나 섹션이 있으며, 탭이나 버튼 열을 추가하는 것은 작은 모바일 화면에서 가치 있는 공간을 많이 차지하게 만듭니다.

만일 스크린이 스크롤이 되는 피드라면, 탭 바는 사람들이 새로운 콘텐츠를 보기 위해 스크롤할 때는 숨기고 상단으로 가기 위해 끌어내릴 때는 보여줄 수도 있습니다. 하지만, 이런 행동이 유저의 액션을 제한하진 않는지 확인해야 합니다 (반드시 A/B를 해야 합니다).

스크롤링 피드. Image credits: lmjabreu

전환 효과로 슬라이드 애니메이션을 사용한다

한 화면에서 다른 탭이 보이고 있다는 느낌을 강화하기 위해서, 탭 사이에 the default animated activity transition을 이용하면 안 됩니다 (유저는 이를 보면 더 깊은 탭으로 이동한다고 생각할 겁니다). 탭은 옆으로 놓여있기 때문에 어떤 애니메이션을 쓰건 이를 반영해야 합니다. 최고의 애니메이션은 슬라이딩 애니메이션입니다. 슬라이딩 애니메이션을 이용하면 유저가 다른 탭으로 움직이기 위해 스와이프 제스처를 이용하도록 독려할 수도 있습니다.

Source: Dribbble

스와이프 제스처를 잊지 않는다

탭을 탭(tapping)하는 것도 괜찮긴 하지만, 탭 사이에 스와이핑(swiping)이 가능하게 만들면 더 좋습니다. 스와이프 제스처를 쓰면 유저가 UI 상단까지 올라가지 않아도 됩니다. 안드로이드에선 모든 탭 UI는 언제나 스와이프 제스처를 지원해야 합니다.

Source: Dribbble

일관성을 주려고 노력한다

탭의 기능을 이용할 수 없다고 해서 탭을 제거하면 안 됩니다. 만일 어떤 경우에는 탭을 제거하고 어떤 경우엔 제거하지 않는다면, 앱의 UI는 불안정하고 예측 불가능하게 될 겁니다. 최고의 솔루션은 모든 탭을 쓸 수 있게 만들되, 해당 탭의 내용을 왜 이용할 수 없는지 설명해야 합니다. 예를 들어, 만일 포스트가 하나도 없을 때, Modpost 앱의 ‘Post’ 탭 화면에는 포스트를 추가하는 방법이 보입니다. 이 기능은 Emptystate라고 불립니다.

애플 iOS의Modspot

결론

탭은 제대로만 사용하면 훌륭한 요소입니다. 상대적으로 간단한 UI 구성 요소이지만 잘못 이용하기도 매우 쉽습니다. 위의 가이드라인을 따르면 보기에도 멋지고 제대로 작동하는 앱이 될 겁니다. 훌륭한 앱은 유저가 어떤 과업이든 가능한 가장 효율적인 방법으로 성취할 수 있도록 도와주는 앱입니다.