ZEN of UX. 30 - 선별된 리스트, 모두보기 버튼은 꼭 필요한가.

 

오늘은 간단히 요 얘기 좀 해볼까 해. 말하고 싶은 건 (1)과 (2)의 차이 + 어떤 것이 좋은가 인데, 이야기를 시작하기에 앞서, (1)이나 (2)를 반드시 써야 하는가 - 를 짚고 넘어가고 싶어. * 나는 이 글에서 (1), (2)처럼 "리스트의 일부를 발췌해서 작게 묶은 덩어리"를, 선별된 리스트라고 칭할 예정이야. 

우리가 사용하고 만드는 많은 앱들은 대부분 이런 UI를 갖고 있는데, 여러 리스트의 요약본을 한 화면에서 보여주려는 시도는 서비스의 아이템 분류가 많을 때 빈번하게 발생하고, 분류 단위가 많고 복잡할수록 이런 페이지는 더 많이 생기게 돼. 하지만, 나는 이런 화면이 많아지는 이유가 유저를 위한 게 아니라 유지/관리하는 사람의 편의를 위해 생기는 거라고 봐. 이런 화면이 많아지는 현상은 결코 바람직하지 않다고 생각해.

정확한 니즈가 있는 유저는 검색이나 큐레이션을 통해서 최대한 빠르게 목적을 이루게 하고, 니즈는 있으나 목적을 뚜렷이 인지하지 않은 유저들에겐 목표를 명확하게 하라고 강요하기보다는 유저를 Fuzzy한 상황에 두고, 잠재적인 여러 정보에 노출될 수 있도록 해야 한다는 게 내 기본 신념이거든. 그대들에게 강요할 생각은 없지만 나는 - 분류체계, 카테고리가 많은 서비스는 기획의 안일함 때문이다 - 라고 믿고 있어. 물론, 현실적인 문제로 인해 자잘한 분류가 많아지는 건 나도 충분히 이해하고, 심지어 일부 유저들은 '많은 분류'를 보면서 심리적인 안정도 느낀다지만^^ 한 번쯤은 원론적인 형태를 고민해 보는 것도 나쁘지 않은 것 같아. 

---

암튼, 다시 돌아가서.

이런 화면이 생기는 프로세스는 뻔해. 뭔가 아이템을 두루 + 많이 보여주고는 싶은데 - 막연히 섬네일만 주루룩 나열하기에는 주목성도 약하고 목적성도 약해지니까 그룹으로 묶어도 보고, (형식을) 바꿔도 보고, (텍스트로) 설명해 보고 하는 거지. 이렇게 하면 여러 종류의 상품을 적당히 큐레이션 비슷하게 나열할 수도 있고, 지루한 스크롤을 환기시켜 줄 수도 있으니까. 커머스를 만드는 입장에선 너무나 선택하기 쉬운 옵션이지.

역사적으로는 (1)이 먼저 등장했고, 모바일웹/앱이 PC웹/앱과 다른 생태계를 만들기 시작하면서 생긴 게 (2)야. 그렇다고 후자가 전자보다 새롭다거나 좋은 거라고 말하기는 애매한지라 요즘은 둘 다 전통적인 형태로 받아들여지고 있어.

먼저 (1)을 보면,

타이틀의 우측에 See All (= 전체보기) 버튼이 있고, 리스트의 일부 섬네일만 노출하는 방식이야. 가장 좋은 것은 See All을 누르는 게 아니라, 제시된 섬네일 몇 개 중 하나를 누르는 것이지만, 그중에 만족스러운 콘텐츠가 없다면 See All을 누르거나 아래로 더 스크롤을 내려서 다른 카테고리의 아이템을 살펴보게 되겠지. 이때 섬네일의 방향은 기본적으로 위에서 아래로 나열되지만, 이미지의 후킹이 강한 콘텐츠 리스트는 좌우로 섬네일을 배치하기도 해. (= 인스타 앱에서 reels 리스트)

웹에서도 익숙한 방식이고, 태블릿에서도 쓸만한 방식이지만, 작은 화면의 디바이스에서는 엄청난 단점이 있어. 바로 스크롤 방향과 관계없는 위치인 탓에, See All 버튼의 위치가 효율적이지 않다는 거야. 각 섬네일을 훑어보고, 만족스럽지 않으면 다시 타이틀까지 올라가서 See All을 눌러야 하는 건 직관적으로 봐도 뭔가 어색하잖아? Horizontal 리스트는 그나마 탐색방향과 버튼의 방향이 맞지만, Horizontal 리스트 역시 - 플리킹 하는 손의 위치에서 See All로 이동하는 동작은 그것 나름 어색하긴 마찬가지야.

또한, See All 버튼 영역을 확보하기 위해서는 타이틀의 크기가 어느 정도 커야 하는데, 디자인을 체계화 하다 보면 타이틀의 크기를 키우는 건 제한적이고, 필연적으로 See All의 버튼 크기에도 한계가 생기게 돼. 애초에 이런 구조는 '마우스 조작'에 더 어울리지.

다시 말하지만, See All을 누르지 않도록 화면 전체를 구성하는 게 가장 좋은 설계야. 하지만 - 아무리 작게 써있더라도 - 일단 See All을 본 유저는 그걸 일종의 '백업'으로 기억하게 되어서, 섬네일의 탐색 집중도 떨어지게 돼. ("없으면 모두보기로 들어가서 살펴보면 되지 뭐."라는 무의식이 생겨서, 노출된 섬네일에 대한 집중도가 떨어지는 현상. FOMO가 안 생김)

그렇다면 (2)는?

섬네일과 비슷한 규모의 버튼을 리스트의 맨 끝에 두어서, 섬네일들을 모두 탐색한 이후에 '만족스럽지 않으면' 더보기를 누르는 구조야. 이때 페이지를 전환할 수도 있지만, 페이지 이동 없이 리스트를 확장할 수도 있어. 이 경우, 리스트의 맨 앞으로 되돌아갈 이유가 없기 때문에, 리스트의 길이에 제한을 두지 않아도 되고, 리스트를 제자리에서 확장하는 방법으로 몇 번의 유예를 둘 수도 있어. 

하지만 리스트가 길 경우, More를 누르기 위해서 불필요한 스크롤을 감수해야 하는 단점이 있고, '선별된 리스트' 여러 개를 보여줘야 할 경우, 다른 리스트로의 전환이 (1)만큼 극적이기는 어렵다는 단점이 있지. 이는 리스트의 길이를 조절함으로써 어느 정도 해결할 순 있겠지.

또한, 이런 리스트 구조는 (1)보다 빠른 탐색을 만들기 때문에, 서비스가 제공하는 각 아이템들이 서로 '많이 다르게 생긴' 경우에 잘 먹힌다고 생각해. (1)과 (2)만 비교한다면 말이지. (엇비슷한 아이템이 많은... 양말?이나... 부품? 판매 서비스들에게는 어울리지 않... 적당한 커머스 서비스로 어떤 예시를 들어야 할지 딱히 생각이 안 나네^^) 

그런데 저 (List)를 봐봐.

리스트의 본 페이지에는 필터, 소팅, 검색, 탭 등 다양한 탐색 툴을 배치할 수 있어. 이 말은 즉, 툴을 이용해서 보다 정밀한 탐색을 할 생각인 유저가 있다면 얼른 이 리스트 페이지로 떨궈줘야 한다는 뜻이야. 애초에 이 페이지가 필요한 사람은 (1)이든 (2)든 - 리스트 일부만 먼저 보여주는 게 오히려 낭비라는 거지. (이 경우엔, more로의 접근에 시간을 더 써야 하는 (2)가 더 나쁜 UX겠네.)

애초에 유저들이 적극적으로 탐색하는 서비스라면, 그 서비스의 첫 화면은 검색 필드와 옵션을 강조해서 배치했을 거고, (1)과 (2) 같은 리스트는 '툴을 사용하지 않는 초심자의 니즈'를 보완하는 안전망처럼 사용되겠지. 하지만 많은 서비스들이 이런 맥락을 모르고, 마치 미끼 없이 낚시하듯이 리스트 몇 개를 대충 뿌려두고 '큐레이션 페이지'라고 부르고 있어. 

가장 이상적인 (1), (2)는 -

유저가 원하던 바로 그 아이템을 바로 탭 하게 함으로써, 리스트를 경유하지 않고 바로 상세 페이지로 떨궈주는 것이겠지? 그런데 여기서 (1), (2)의 공통적인 약점이 있어. 동일한 포맷의 반복으로 인해, 아이템 자체를 매력적으로 보이지 않게 한다는 점이지.

바꿔 말하자면, '리스트 속 섬네일 하나'는 아무리 잘 꾸며도 배너 하나만 못하다는 의미야. 선별된 소수의 아이템 몇 개만을 보여줄 바에야 차라리 배너용 Carousel을 두는 게 낫지 않겠어?

나와 비슷한 생각을 가진 사람들이 나와 비슷한 논리로 이 '선별된 리스트'의 한계를 극복하기 위해 노력해 왔어.

Carousel과 리스트 사이에서 어정쩡한 줄타기를 하기도 하고, 한 번 더 묶어서 무조건 상세로 보내는 방법을 고안하기도 하고, 화면의 일부를 갤러리처럼 (작은 섬네일을 누르면 큰 섬네일이 바뀌면서 보다 많은 정보를 보여주는 방식 - 이 역시 상세페이지의 역할 일부를 가져오는 것) 활용하기도 하고, 극단적으로는 아예 상세 페이지의 주요 정보를 리스트에서 바로 보여주기도 하지. 

---

 

타이틀 옆에 See All을 두든, 리스트 하단에 more를 두든... 사실 어느 방식으로라도 서비스는 돌아가고, 대부분의 덜 민감한 유저들은 큰 불편 없이 사용할 거야. 또한 이 글에서 내가 주장하는 것이 옳을 수도, 틀릴 수도, 성길 수도, 급할 수도 있겠지.

하지만, 오래 이 일을 하다 보니, UI, UX, GUI는 정말 쉴 새 없이 바뀌는 분야라는 걸 온몸으로 느끼고 있고, 잠깐 정신줄을 놓으면 이 변화의 흐름에 휩쓸려서 "생각 없이 디자인"하겠다 싶어서 간단히 생각을 정리하는 글이니 감안하고 보아주길 바라.