Art, Design & Lifelog

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

IMG/UIX

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

Curious ARTBRAIN 2021. 2. 28. 21:37

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


이전 포스팅 (링크1, 링크2)에서 탭의 4가지 속성 중 두 가지를 이야기했어. 하다 보니 푸념이 되긴 했지만, 뭐 어때. 개인 블로그인데. ^^

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

오늘은 이 중 ③ 탭의 지시성에 대해서 써 볼까 해. 오늘 설명하는 탭은 앞의 두 포스팅에서 설명하는 탭과는 다르게 '앵커 기능'을 중심으로 이야기하려 해. 앞에서 말했던 탭이 '작은 탐색기능이 흔적처럼 남은, 연속적인 메뉴가 달린 컨테이너'였다면, 이번 포스팅에서 말하는 탭은 컨테이서의 성격이 약하고 지시적인 역할이 강한 탭의 한 종류야.

© Matrix


앵커는 말 그대로 anchor, 닻이야. 배가 이동하다가 정지하려할 때 바다에 내리는 무거운 추.

디지털에서의 앵커는, 원하는 항목이 나올 때까지 촤라라락 훑어보다가 원하는 곳에 도착하면 멈춰서서 내용을 볼 수 있게 도와주는 도구야. 사실은 훅~! 넘어가지만 정서적으로는 촤라라라락~! 하다가 탁! 서는 게 앵커지. (개인적으론 위 짤이 앵커의 전형적인 모습이라고 생각해.) 

때문에, 앵커로서의 탭수많은 정보가 나열되어 있을 때에만 성립해. 적은 정보는 촤라라라락~! 할 필요가 없겠지. 그런데 여기서 근본적인 문제 제기 : 왜 수많은 정보를 보여주어야만 하는 걸까? 그런 상황을 미연에 방지했어야 하는 거 아닌가? 애초에 적절한 정보만 딱! 보여줘야 하는 거 아냐? 그게 스마트한 거잖야?

수많은 정보의 나열을 꼭 보여주어야만 하는 경우는 정말 제한적이야.

오른쪽에 파란 알파벳이 앵커인 건 다들 알지?


이를테면 연락처 앱. 서로 개연성이 없는 정보들의 무한 나열.

하지만 약간이라도 편하게 만드는 게 UX잖아. 세상 단순한 연락처 앱에도 검색 기능이나 그루핑 기능을 쓰잖아. 그러니까, 내가 하고 싶은 말은 - 앵커로서의 탭을 사용해야만 하는 경우는 매우 제한적이고, 대개의 경우, 더 스마트한 탐색 방법이 존재한다는 거야. 앵커로서의 탭은, 그저 탐색의 첫 번째 조건일 뿐이야. 그것도 매우 정적이고 원시적인.

https://digitalcommunications.wp.st-andrews.ac.uk


* 앵커 탭과 비슷한 예로 아코디언 UI가 있어. 거의 똑같아. 차이가 있다면, 탭은 한 줄에 요약할 수 있다는 게 장점인 반면 정보량이 제한적일 수밖에 없는 거고, 아코디언은 타이틀에 담을 수 있는 정보량이 많은 대신 (대부분) 스크롤이 발생한다는 점이야. 나는 탭도 아코디언도 둘 다 싫지만^^ 가끔은 화면 구성이 단순하다는 이유로 아코디언을 선호하기도 해. 

하지만, 예외적으로 앵커 탭이 먹히는 부분이 있어. 바로 쇼핑몰 웹사이트.

© 11st.co.kr

이건 너무나 관습적으로 사용되고 있어서, 앵커 탭을 써도 무리가 없다고 봐.  

대부분의 유저가 낮은 수준의 탐색을 한다는 걸 전제하면, 유저의 무감한 스크롤에 따라 여러 정보를 순차적으로 보여주는 것은 괜찮은 선택인 것 같아. 만일 저걸 4개의 버튼으로 만들었다면, 3,4번 탭은 거의 눌리지 않겠지? 판매자 입장에선 건성으로라도 눈에 띄는 게 답이니까, 버튼보단 탭이 나을거야. 나름 퍼널 구조에 따른 심도를 고려해서 배치했기 때문에 유저도 부담을 느끼진 않겠지.

하지만... 우리나라 쇼핑몰에서 저 탭이 없어진다고 해서 불만을 느낄 유저가 있을까? ^^ 말했듯이, 대개의 유저는 무심한 스크롤을 하는데, 저 앵커 탭을 눌러서 리뷰/QA/판매자 정보로 바로 가는 사람이 몇이나 될까? (아마존에는 탭이 없지만, 리뷰는 우리나라보다 훨씬 더 상세하고 열띤 양상을 보이잖아.) 즉, 탭이 무리 없이 사용된 건 맞지만, 의존성이 낮아서지 탭의 특장점이 있어서는 아니란 뜻. 있던 탭을 빼는 건 저항이 있겠지만, 아마도 매출에는 전혀 연관이 없을 거야. 확신해. ^^

한국 쇼핑몰을 제외하고는, 앵커 탭의 사용이 유효한 경우는 매우 제한적이야.

 

728x90

 

그럼, 어떤 경우에 앵커 탭이 유효할까? 

1. 정보가 정적이고 맥락이 불규칙적인 경우겠지. 유저가 공을 들여 일일이 읽어야만 하는 경우. 예를 들면 성경책이나 법률 서적 같은 경우, 시작점으로 보내주는 정도의 도움은 줄 수 있겠지만, 유저가 내용을 이해하는 것 자체를 도와줄 수 없는 경우에 사용하는 건 괜찮은 것 같아. 물론, 이 경우에도 검색이나 필터 등의 보조 수단을 붙여줘야 하겠지.

 By Ihor Chipak on Dribbble

* 맥락 없는 리스트의 대표 사례인 메일 앱. 지나칠 정도로 많은 보조 탐색 기능을 사용해. 하지만 다른 서비스에서 이 정도로 많은 보조 탐색 수단을 사용한다면 스트레스 요소가 될 뿐이야. 이건 메일이라는 특성상 유저의 적극적인 탐색이 보장되기 때문이지, 탐색 도구가 많을 수록 좋다는 뜻은 아니거든. 적절하게 열어주고, 잡다한 길은 닫아주는 게 일반 서비스에서 요구되는 탐색에 대한 감각인데, 이걸 깊게 생각하는 사람들이 많지는 않은 것 같아. 탐색의 민감도에 대해 타 부서 사람이나 주니어들에게 깊이 이해시키기는 정말 어려운 것 같아. (오늘도 불만을 남기고야 만다능...) 


또는, 2. 중요하지 않은 많은 정보를 다룰 때. 또는 별도의 복잡한 조작 없이 스크롤만으로 해결되는 컨텐츠. 쇼핑몰이 가장 좋은 예가 될거야. 중요하지 않으나 소수의 유저가 탐색하는 곳에도 활용될 수 있겠지. (국립공원 안내소 사이트가 가장 먼저 떠오르네^^)

3. 거대한 리스트를 부득이하게 조정하지 못하는 경우에도 제한적으로 의미가 있겠지, 위에서 언급한 '연락처' 같은 상황. 유저 탐색을 도울 방법이 없을 때, 최소한의 도움 요소로서의 탭. 하지만 요즘은 검색 로직이 발달했기 때문에 유저들도 굳이 스크롤하지 않아.

마지막으로는, 일반 탭을 쓰기엔 4. 정보량의 균형이 맞지 않는 경우에도. 굳이 쓰겠다면 앵커 탭을 쓰는 게 낫겠지. 각 탭의 정보량을 비슷하게 맞추지 못한다면, 그냥 스크롤로 한 번에 연결하는 게 나을지도 몰라.

하지만, 여기서 제일 중요하게 생각해야 하는 건 - 충분히 다른 가능성을 살펴 보았는지, 보다 스마트하게 탐색할 수 있는 방법은 없는지, 유저에게 탐색행위를 떠넘기는 기만을 저지르는 것은 아닌지. 스스로 확신할 수 있을 때까지 살펴봐야 해. "여기 정보들이 있으니, 네가 잘 살펴보고 쫓아와" - 이건 바른 태도가 아니야.

차라리 화면 전환이 더 나을 수도 있어. 매 순간에 필요한 정보는 제한적이니까. 그 정보만 보여주고 다음 화면에 다음 정보를 보여주는 것도 나쁘지 않아. 클릭 수 기반의 전통적인 웹 개념의 잔재가 여전히 남아 있어서 화면이 전환되면 큰일나는 줄 아는 사람이 많지만, 화면 전환이 곧 로딩이 아닌데다, 깜빡!하는 화면전환 말고도 유연하게 연결시키는 트랜지션도 많으니까. 

정 어려우면, 탭이 없다고 생각하고 디자인해봐. 실제로 현재 90%의 서비스에는 탭이 필요 없다고 확신해. 그리고 그 비율은 계속 늘어날 거야.

(4부에 계속)


3부 정리

  1. 탭은 가장 초보적인 탐색 도구이다. 
  2. 특히 앵커 탭은, 서로 개연성이 없는 수많은 정보들이 무한 나열될 때만 (조금) 유효하다.
  3. 수동적인 유저의 탐색만이 가능한 경우 유효하지만, 그 경우에도 다른 UI장치를 보조해 주자.
  4. 사실, 현재는 탭을 안 써도 되는 시대다. 90%, 혹은 그 이상