Art, Design & Lifelog

Art, Philosophy, Design, Font, Music, Essay, Critique, Diary, Opinion, News

IMG/UIX

UX의 ZEN. 04 - Tab에 대한 단상 (1)

Curious ARTBRAIN 2021. 2. 7. 21:40

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


오늘 할 얘기는 탭에 대한 이야기야. Tab. Tap 말고 Tab. 

옛날에 사내 뉴스레터를 제작할 때도 이 내용을 쓰기는 했지만 (링크), 당시에 생각했던 걸 기반으로 조금 발전시켜서 이야기를 해 보려 해. UX 문화가 성숙하게 되면 자연히 탭이 지양될 것이라고 믿었는데, 여전히 실무에서 탭을 '밀어내야' 하는 상황이 많더라구. 탭을 쓰는 게 편한 나머지 너무 남용되는 것 같아.

Maksym Kaharlytskyi - © Unsplash


확인해 보진 않았지만, 탭은 이런 캐비넷과 색인(인덱스)의 메타포를 가져온 거라고 생각해. (아마도 대부분 동의할 거야) 비슷한 가치의 정보들이 병렬로 펼쳐져 있을 때, 탐색을 쉽게 할 수 있도록 적절한 시작점을 안내하는 역할이지. 이게 좀 더 포터블해지면서, 다이어리의 색인 형태로 발전한 거겠지.


이 탭-메타포는 웹사이트의 다양한 정보를 효율적으로 분류하는 데 아주 편하기 때문에, 인터넷이 생기고 웹사이트가 발전하면서 자연스럽게 UI의 주연 자리를 차지하게 돼. 일례로 옛날의 애플 사이트를 보면, 노골적으로 색인 형태를 차용하고 있지.

전통적인 탭 모양을 사용한 옛날 애플 웹사이트 - © Apple
2021 현재 - © Apple

 

웹이 발달하면서 GNB(Global Navigation Bar)라는 말쑥한 이름을 갖게 되었지만, 사실 GNB는 탭과 다르지 않아. 탭과 GNB는 다음과 같은 공통된 특징이 있지.

병렬된 탭들은 서로 비슷한 위상을 갖고 있어야 하며 (연결성) ② 각 탭은 그 이하의 내용을 지배해야 하고 (제한성) ③ 탭을 클릭하면, 메뉴가 지시하는 컨텐츠의 시작점으로 이동하고 (지시성) ④ 하나의 탭을 선택하는 경우, 다른 탭의 내용을 볼 수 없게 되지 (배타성)

오늘은 위에 서술한 탭의 특징 중 첫번째인 '정보의 연결성'에 대한 의견을 정리하면서, 탭을 언제 + 어떻게 쓰는 게 좋을지 간단히 얘기해 보려 해.  

728x90


1. 탭 간 정보의 연결성

각 탭은 서로 비슷한 가치를 가져야 해. 예를 들어, 사과 - 배 - 바나나 - 파인애플은 되는데, 사과 - 원숭이 - 양자역학 - 건축은 적절하지 않다는 거지. 사과 - 홍옥 - 식물 - 열매도 안되긴 마찬가지. 즉, 동일한 분류체계의 병렬이어야 한다는 건데, 실제로는 아주 타이트하게 적용되진 않아. 잠시 위의 이미지로 돌아가 보자. 

이런 캐비넷과 색인 시스템을 써 본 사람들이... 없을래나? ^^

이미지만 봐도 대충 알겠지만 - 사용법을 간단히 설명하자면, ⓐ 찾고자 하는 범주의 캐비넷(서랍)을 찾고  각 서랍의 소팅 기준을 이해한 후 (일반적으로 가나다 순이거나 날짜 순이겠지만, 각 서랍마다 순서를 정의하는 방법이 다른 경우도 제법 많아) ⓒ 원하는 인덱스 카드가 나올 때까지 빨리 카드들을 스킵하고 원하는 카드를 만나면, 그 때부터 상세카드를 한 장씩 살펴보는 방식이야. 원하는 상세카드를 찾았다면, 그 위치에 임시 색인을 꽂아 두거나, 편집을 거쳐 다른 위치에 꽂거나, 삭제하거나 하는 거지. (개인적으로는 - 대학생 때 도서관 사서 알바를 했었어서 이런 캐비넷이 낯설지는 않아. ^^) 

다르게 말하면, 탭은 원래 선형적인 탐색을 위해서 고안된 장치야. 서랍간 탐색 > 인덱스 탐색 > 개별 카드 탐색의 전형적인 hierarchy를 가지고 있지. 꽤 고리타분한데다, 사용자 중심적이지도 않지. 사용자의 적극적인 탐색을 필요로 하지만, 탐색 활동에 비해 많은 결과를 돌려주지도 않아. 대표적인 탭의 형태인 GNB는 웹사이트 전체의 얼개를 유저에게 이해시키는 기능도 함께 하고 있기 때문에 그렇다 쳐도, 일반적인 화면에서 탭을 살피는 일은 정보 탐색과는 거리가 있어. 나열된 탭의 라벨들이 '가나다 순'처럼 순서를 예상할 수 있다면 모르겠지만, 일반적인 경우 탭으로 나열된 라벨들은 딱히 질서랄 게 없거든. 게다가, 소팅은 이미 pulldown이나 anchor, filter, dragger 등 UI element로 압축되었기 때문에, 현실에서의 탭은 대부분 이해하기 어려운 이유로 나열되어 있지.

윈도우즈 설정 창에서 흔히 보이는 탭 무더기 - -;

 

시대를 거슬러 오르는 신세계 - © SSG

 

반면, 옛날 삼성카드의 탭 구조는 나름 계열화가 되어서 이해하기 편해 - © 삼성카드


위의 사례에서 보듯, 유저는 일단 처음부터 끝까지 '어떤 탭이 있는지' 눈으로 한 번 쭉~ 훑어야 해. 그렇지 않고서는 선택하기 어려워. 심지어 위의 경우들처럼 개수가 지나치게 많은 경우엔 쉽게 학습되지도 않지. (UX에선 통상적으로 7개 이하를 권장하고 있어.)

그럼 탭은 언제 사용해야 할까? 

O'reilly에 따르면, 웹에서 탭을 써야할지 말아야할지 긴가민가 하다면, 프린트를 생각해보라고 하더군. 하나의 스크롤로 길게 엮어도 무리가 없다면 탭을 쓰지 말고, 각각의 내용을 별도의 페이지에 인쇄하는 것이 보기에 좋다면 탭을 사용하라고. ^^ 괜찮은 방법이긴 한데, 여전히 페이지를 정적으로 여긴다는 한계가 있지. (이건 나중에 탭의 배타성에 대해서 이야기할 때 다시 거론할게.) 게다가 이건 탭으로 묶인 컨텐츠 중심의 사고이지, 탭 중심의 생각은 아니야.

그럼 위 질문을 바꿔 보자구 : 동적인 디지털 환경을 고려하면, 탭은 어떻게 사용하는 게 좋을까? 

탭의 낮은 효용이 '학습을 요구하기 때문'이라고 한다면, 또한 정적인 한계가 탭의 걸림돌이라면 - 학습이 필요없는 탭, 동적으로 움직이는 탭이라면 탭의 효용이 높아질 수 있을까?  

구글 크롬의 탭 - © google chrome


가장 먼저 떠오른 것은 크롬의 탭 구조야. 유저의 의지에 따라 탭이 생성되고, 쓸모없는 탭은 끄고, 필요하면 위치를 바꿀 수도 있고, 북마크 등으로 기능을 보완할 수 있는 구조.

탭을 올바르게 사용하는 수많은 방법이 있겠지만, 크롬의 예시도 그 중 하나가 아닐까 해. 기존의 정적인 '참조'의 기능을 넘어서서, 유저가 직접 생산하고, 정보 관리에 개입하는 동적인 형태. 이런 경우엔 좌우의 탭이 서로 개연성을 가질 필요도 없고, 유저가 탭을 학습할 필요도 없지. 

그렇다고 해서, 유저 스스로의 편집에 맡기는 게 항상 옳지는 않은데, 이전에 네이버 메인 개편 (링크)을 할 때도 동일한 이슈가 있었거든. 이 때도 아쉬움이 많았어. 탭 자체를 제거하고 각 유저에 맞는 컨텐츠를 (혼합해서) 뿌리자고 건의했지만, 여러가지 사정 (기존 유저가 느끼는 익숙함, 각 컨텐츠 생산자들간의 경쟁, 로그인/로그아웃 상태에서의 디자인 일관성 등) 때문에 결국 변형된 탭 형태로 끝났지. 

원래대로라면, 유저가 탭을 두 개 고르면 두 개만, 세 개 고르면 세 개만 노출하는 게 답이었을 텐데. 그럼 나머지 탭 컨텐츠는 보여질 기회도 없는 거잖아. 오히려 유저의 우연한 발견을 막는 상황이지. 탭을 온전히 유저에게 맡기면 정보 제공자 입장에서는 아쉬울 수 밖에 없어. 실제로 탭은 대개 정보를 나누기 위해서 사용하지, 정보를 선택하기 위해서 사용하진 않으니까 - 마냥 유저가 생성하게 두라고 하기도 애매해.  

© Naver


(2부에 계속) 


1부 정리

  1. 탭은 캐비넷 색인에서 유래했다.
  2. 하지만 탭은 선형적 탐색이라는 한계가 명확하여, 좋은 UX라고 볼 수 없다.
  3. 또한, UI component의 발달로, 전통적인 탭 역할은 퇴화되었다.
  4. 탭을 정적으로 다루면 효용이 적지만, 유저의 능동적인 탭 활용은 가치가 있을지도 모르겠다. 
728x90

1 2 3 4 5 6 7 8 9 ··· 68