ZEN of UX. 09 - Tab에 대한 단상 (2)

* UX의 ZEN이라는 이름으로 올리는 포스트는, UX의 절대적인 답이라기보다는, 그동안의 경험과 이해를 바탕으로 내가 주장하고자 하는 내용이야. 즉, 절대적인 것도 아니고 잘못되었을 수도 있지만, 나로서는 거의 확신에 가까운 내용이지. 이 시리즈를 볼 때는 이런 관점으로 이해해 주길 바라. 

---

이전 포스팅 (링크)에서 탭의 4가지 속성을 이야기했어. 

① 탭 간의 연결성 
② 영역의 제한성 (지배적 성질)
③ 탭의 지시성 (앵커와 기능이 겹침)
④ 탭 간의 배타성 

이전 얘기가 애매하게 끝났지만 — 일단은 go. ^^
영역의 제한성에 대해서 이야기할까 해.

문서 또는 책에서의 전통적 탭 개념은 애초에 분명한 경계가 있었기 때문에, 탭이 지시하는 영역이 비교적 명확했어. 다음 탭이 나오기 전까지의 카드들만 담으면 되었으니까. 선형적인 1차원 구조인 거지. 가장 단순한 탐색의 방법 - 하나하나씩 훑어보기.

다음 인덱스가 나올때까지 탐색.

하지만, UI, GUI는 2차원의 가변적인 평면 위에서 이루어지기 때문에, 위의 각 카드처럼 컨텐츠 영역이 명확하지 않아. 특히 웹에서는 브라우저의 특성상 컨텐츠 영역이 가변적이고, 얼마든지 확장할 수 있지. 

실제로는 오른쪽처럼 좌우+하단을 생략하는 경우가 대부분이잖아?

모바일 또는 웹에서 이 영역을 명확하게 정의내리긴 쉽지 않아. 대개의 경우는 한 눈에 들어오지 않을만큼 + 스크롤이 생길만큼 크지. 그렇지 않다면 애초에 탭을 쓰지도 않을테고. (그러고보니, 요즘엔 한 화면 안에 쏙 들어오는 작은 탭 구조를 못본 것 같아.)

이게 영역의 제한성이야, 탭은 어디까지 담는지를 명확하게 표기해 주어야 하는데, 웹과 모바일 환경에서는 영역을 분명하게 지시하는 게 쉬운 일이 아니야.

그럼 역으로, 영역을 없애는 방법은 없을까?

다행히 똑똑한 분들이 전통적인 의미의 탭 (정렬, 분류, 선형 탐색, 필터링 등) 을 계승하는 UI 컴퍼넌트를 개발했는데, 우리도 익히 알고 있는, Pull down과 Drop down이야. 본래적인 방향성을 가지고 있으면서도 가장 단순한 탐색의 기능만 남긴 형태. 선형적이고 아름답지. ^^

By Blaze Pollard, on Dribble

하지만, 이것 역시 '리스트'라는 전제가 있어야 해. 관습적으로 드롭다운은 그 하단을 제어한다고 여겨지지만, 페이지네이션에 붙어서 위 리스트를 통제하는 경우도 종종 볼 수 있어. (항목 40개씩 보기, 80개씩 보기...) 

모바일 퍼스트인 요즘에는 이런 UI를 발견하기 힘들지만, 예전에는 이렇게 탭을 남용하는 경우가 많았어.

왼쪽 버티컬 탭은 빨간 영역만을 제어하는 것처럼 보이지만, 실제로는 우측 전체를 통제하는 거고. 그 우측 영역은 또 빨간색 영역과 흰색 영역으로 나뉘어. 흰색 영역은 또 그 위의 탭에 의해 통제되고, 크게 '단말'과 '요금제'로 나뉘는 것 같지만, 사실은 단말/요금제/save카드의 세 부분으로 나뉘고, "단말" 영역은 '신규/기변'의 탭으로 또 한 번 나뉘지. 요금제 부분은 더 엉망인데, '유형 선택' 드롭다운 하위로 '상세 선택'이 있고, '프로모션 요금제'와 '부가요금제'는 서로 독립적이고... 정말 제대로 된 부분이 거의 없지. 

요즘 시각에서 보면 참 한심해 보이지만, 예전에는 정말 이런 요구를 많이 받았었고, 심지어 요즘도 이런 요청을 하는 사람들을 종종 만나. (아흐, 지긋지긋해.) "한 눈에 보여주어야 한다"는 막연한 욕구 때문이라고 생각해. 그리고, 그런 막연한 욕구를 쉽게 충족시켜줄 수 있는 장치가 바로 '탭'인 거지. Stakeholder의 과도한 욕심과, 기획자의 생각 없음이 빚은 비극. 

 

정보량이 많은지 적은지를 생각하지 않고, 또한 '한눈에 보는 것이 정말 필요한지'를 고민하지도 않고. 일단 다 때려 넣고 보는 안일한 설계. 대시보드를 그리고 싶은 욕구가 있는 건 알겠는데, 이걸 굳이 한 화면에 보여준다고 해서, 보기 편하거나 쓰기 편할까? (저 좁은 영역에 플로팅 버튼과 광고까지 띄웠어. 대단해. ^^) 이건 그냥 엄청난 버튼의 집합일 뿐이라구!

계속 얘기하는 거지만, 탭은 선형적인 리스트에만 적용하자구. 리스트 페이지가 아니라면 여러 가지 대체 UI를 사용해 보는 걸 추천해.

반면에, 모바일 화면은 상황이 좀 나아. 

© uxplanet

관습상, 그리고 구조상 - 스크롤의 방향은 위/아래로 정해졌고, 영역의 특성상 탭은 화면 전체를 통제할 수밖에 없거든. 이름도 'Tab Bar'야. 어쩔 수 없이 수직 선형적인 구조라서 통제 범위가 명확하지. 하지만, 모바일 화면에서도 탭을 오용하는 경우가 가끔 발견되기도 해.

(3부에 계속)

---

2부 정리

1. 탭은 선형적인 도구이다. (한 방향으로 진행하는 탐색)
2. 탭은 결국 버튼일 뿐이다. 컨텐츠 중첩은 환상이다.
3. 드롭다운, 스콥바 등 - 탭을 개선한 여러 UI component가 이미 충분히 많다. 보다 적확한 걸 갖다 쓰자.
4. 탭은 일을 쉽게 하려는 자들에게 큰 유혹이 된다. 유혹에 넘어가지 않기를.