빠르고 쉬운 탐색, 카카오페이지 UX/UI 디자인
열일곱 번째 人(in)spiration | UX/UI 팀
Plus 人(in)spiration – 플러스엑스의 '일' 그리고 '사람'이야기
더하기를 기울여 곱하기로 변화하듯 플러스엑스에는 다양한 사람이 모여 함께 일합니다.
변화하는 시대에 다양한 경험을 새롭게 조합해 나가며 늘 최선의 결과를 만들어 내는 플러스엑스.
그 사람들의 이야기를 만나보세요.
거대한 IP 플랫폼을 위한 UX/UI 디자인
: 카카오페이지 사용성 개선 프로젝트
안녕하세요. 플러스엑스 UX/UI팀입니다.
퇴근 이후의 저녁, 한 주를 마무리하는 주말… 무엇을 하며 휴식을 취하시나요? 사람마다 다르겠지만, 최근에는 웹툰과 웹소설을 읽거나 영화와 드라마를 시청하는 콘텐츠 소비가 취미 및 휴식 생활에 꽤 높은 비중을 차지하고 있습니다.
콘텐츠를 소비하는 사람의 수는 코로나로 외부 활동에 제약이 생기면서 급격하게 늘어났습니다. 그리고 원소스 멀티유즈가 문화 사업의 기본이 되고, K-culture가 세계적인 인기를 얻으면서 국내 IP 플랫폼도 빠르게 성장했죠. 아마 이 글을 읽고 있는 분 중에서도 출·퇴근길에 웹툰과 웹소설을 읽고 영화와 드라마를 보기 위해 IP 플랫폼을 이용한 경험이 있을 거라 생각됩니다.
국내 IP 플랫폼 '카카오페이지'는 웹툰, 웹소설, 영화, 드라마 등 업계 최고의 콘텐츠 종류와 양을 제공함으로써 흐름을 선도하는 IP 플랫폼으로 자리매김했습니다. 하지만 카카오페이지는 지금 자리에 만족하지 않고 무한한 성장 가능성을 품고 있는 IP 시장의 미래에 대응하여 더 큰 도약을 꿈꾸고 있습니다.
이에 저희는 카카오페이지가 앞으로의 방향에 토대가 될 UX/UI 개선을 제안했습니다. IP 시장의 미래는 쉽게 예측할 수 없기에 넓은 시야를 가지려고 노력했습니다. 그래서 지금 바로 적용할 수 있는 방법이 아니라, 시장 변화에 유동적으로 대응할 방향으로 생각했습니다. 그 결과, 카카오페이지가 가야 할 방향성을 뚜렷하게 만들어 줄 UX/UI 컨셉을 도출할 수 있었습니다.
STEP 1. Research & Persona
적을 알고 나를 알면 백전백승이라는 말이 있듯이, 방대한 콘텐츠를 가진 카카오페이지를 명확하게 알기 위해 사용도 조사를 실행했습니다. 내·외부 자료를 검색해서 분석하고, 사용자 조사와 휴리스틱 평가를 진행했습니다. 효율적인 작업을 위해 '휴리스틱 평가'는 리커트 척도 기반의 분석 기법을 적용했습니다.
리서치를 마친 후, 사용자 입장에서 문제점을 더 자세히 알아보기 위해 퍼소나를 설정하고 고객여정지도를 그리는 과정을 거쳤습니다. 퍼소나는 카카오페이지의 주요 타깃 연령층인 10~30대까지 설정하고 사용 빈도와 충성도를 구분하여 4가지 유형으로 선정했습니다.
그리고 이들이 각각 어떤 과정을 통해 콘텐츠를 찾고 소비하는지 시나리오를 짠 후, 행동 패턴 및 소비 형태를 분석했습니다. 이 과정을 통해 카카오페이지의 경험을 방해하는 페인 포인트(Pain Point)와 타깃층의 니즈를 파악할 수 있었습니다.
카카오페이지에는 웹툰부터 웹소설, VOD, DA, 슈퍼 웹툰까지 방대한 콘텐츠가 존재합니다. (컨설팅을 통해 TO-BE 모델로 제안한 섬네일 디자인)STEP 2. Summary
저희는 사용자 조사와 퍼소나 단계를 통해 카카오페이지의 강점이 동전의 양면처럼 약점으로도 작용할 수 있다는 사실을 알았습니다.
사용자 입장에서 콘텐츠 종류와 양이 많다는 건, 콘텐츠를 분별하기 어렵고 사용하기가 복잡하다는 걸 의미했습니다. 다양한 콘텐츠 메뉴와 카테고리는 원하는 콘텐츠 탐색을 어렵게 만드는 요인이 될 수 있고요. 또, 장르 성격이 강한 콘텐츠는 대중성이 부족하다는 한계가 있으며, 충성도가 높은 고객이 많다는 사실은 소통 채널의 부족을 초래한다는 걸 알았습니다.
저희는 현 상황이 마치 정보와 자료는 많지만, 원하는 정보는 쉽게 찾을 수 없는 오래된 책방과 같다고 생각했습니다. 그래서 콘텐츠의 종류와 양이 많다는 장점을 그대로 유지하되 원하는 콘텐츠를 찾기 쉽도록 일관성 있는 구조와 카테고리를 구축하고 관습을 깬 혁신적인 플랫폼으로 도약하는 것을 개선의 궁극적인 목표로 설정했습니다.
STEP 3. Concept
본격적인 개선 방향 성립은 혁신적이지만 일관적이고, 동시에 역동적으로 진화하는 큐레이션까지 제공하는 구조에 관한 고민으로부터 시작했습니다.
그러다 눈에 들어온 것이 영화 <엑스맨>의 '세레브로'였습니다. 세레브로는 자비에 교수가 돌연변이를 탐색할 때 사용하는 기계로, 자비에 교수는 비현실적인 공간에 들어가 세레브로를 연결해서 전 세계에 위치한 돌연변이를 탐색합니다.
이때, 세레브로는 전혀 다른 차원을 연결하는 통로처럼 느껴집니다. 저희는 이 과정이 카카오페이지라는 문을 통해 IP 유니버스에 들어와 콘텐츠를 탐색하고 소비하며 즐기는 소비자의 경험과 비슷하게 보였습니다. 그에 따라, 카카오페이지의 UX/UI 컨셉은 영화 <엑스맨>의 세레브로에서 영감받은 'Dynamic Snapview'로 정해졌습니다.
STEP 4. Principle & Strategy Concept
컨셉을 정한 저희는 광활한 IP 세계를 빠르게 조망하고 효율적으로 탐색할 수 있는 UX 원칙을 세웠습니다. 그리고 원칙을 기반으로 설계한 UX 구조와 UI 디자인을 카카오페이지에 제안했습니다.
─ Simplify the Complex
효과적인 개선을 위해 우선으로 변화가 잦아 복잡했던 카테고리에 일관성을 주고 채널화하는 것이 필요하다고 생각했습니다. 카테고리를 채널화하면 사용자의 취향 데이터를 반영할 수 있고 방대한 IP를 유연하게 그룹화할 수 있기 때문입니다.
이런 구조를 뒷받침하기 위해서는 섬네일 디자인도 일관된 구조를 가져야 합니다. 그래서 콘텐츠 종류와 장르에 상관없이 레이아웃을 통일하고, 뱃지 아이콘을 활용하여 정보를 압축해서 전달하는 디자인을 제안했습니다. 한편, 배경과 같은 디자인 요소를 변경하여 사용자가 이미지로 장르를 구분하는 방법도 추가로 제안했습니다.
이와 함께 서로 다른 위계로 흩어졌던 전략 카테고리를 채널화하고 핵심 콘텐츠를 중심으로 카테고리의 위계질서를 재정립하는 등 채널 정보를 일관되게 전달하는 방법도 제안했습니다. 그리고 채널 카테고리를 사용자가 효과적으로 인식할 수 있도록 카드 상단에는 채널의 아이덴티티를 보여주는 로고를, 하단에는 국문으로 기재한 채널명을 두는 방식으로 디자인을 통일했습니다.
─ Easy to Discover
두 번째로 제안한 개선 방향은 사용자가 콘텐츠 정보를 단계적으로 인식할 수 있는 적응형 프레임을 구축하는 것이었습니다. 직관적인 사용환경을 제공하는 적응형 프레임은 카카오페이지라는 거대한 IP 세계를 탐색하는데 길잡이가 될 것입니다.
IP 플랫폼에서 '탐색'은 매우 중요한 개념이며, 특히 사용자가 제일 먼저 마주하는 홈 화면에서 쉽게 콘텐츠를 탐색할 수 있어야 합니다. 그래서 저희는 모션을 활용한 탐색 방법을 고안했습니다.
콘텐츠를 탐색할 때는 홈 화면의 섬네일 카드를 수직 방향(상/하)으로 움직이고, 카테고리를 탐색할 때는 홈 하단의 채널 카드를 수평 방향(좌/우)으로 움직이면 됩니다. 그리고 채널 카드는 좌/우 방향에 따라 카테고리 성격이 구분됩니다. 좌측에는 대중적인 성격의 카테고리로, 우측에는 큐레이션 성격이 두드러지는 카테고리로 이루어지게 했습니다. 이렇게 모션의 방향성으로 탐색 정보를 구분한 프레임은 사용자의 직관적인 사용을 도와줄 것입니다.
─ Connective Experience
마지막으로 경계를 자연스럽게 넘나드는 구조를 제안했습니다. 꼬리에 꼬리를 물어 영역을 확장하는 IP의 특성상, 콘텐츠의 자연스러운 연결은 사용자에게 더 많은 콘텐츠 경험을 제공하고 연속적인 소비를 끌어냅니다. 그래서 저희는 콘텐츠 상세 최하단에 작가의 다른 작품이나 추천 작품을 제공하고, 최근 본 작품 목록 사이에 카카오페이지가 추천하는 작품을 매끄럽게 보여줄 수 있는 구조를 설계했습니다.
검색 기능을 강화하는 방향 역시 사용자의 경험을 매끄럽게 해줍니다. 카카오페이지는 작품의 특성을 키워드로 제시하는 '키토크'라는 기능을 제공합니다. 이는 사용자가 취향에 맞는 콘텐츠를 쉽게 찾고 소비할 수 있도록 도와줍니다. 그래서 보다 더 쉽고 정확한 검색 결과를 위해 키토크 검색을 강화하고 이를 활용한 큐레이션을 보여주는 방법을 제안했습니다.
또한 경계를 넘나드는 경험을 시각적으로도 보여줄 수 있도록 모션을 적용한 섬네일과 프레임 경계를 없앤 레이아웃을 제안했습니다. 한 장의 이미지로만 존재하는 섬네일을 배경, 오브젝트, 효과 등 여러 개의 레이어로 나눈 후, 자이로 센서를 활용하여 입체적인 움직임과 인터랙션이 가능한 방법이었습니다. 그리고 사용자에게 신선한 경험을 제공할 수 있게 섬네일 영역을 1개 이상 사용하여 상하, 좌우 방향에 상관없이 자유롭게 확장하는 방법도 제안했습니다.
Epilogue.
카카오페이지 사용성 개선 프로젝트는 플러스엑스와 카카오페이지가 함께 IP 플랫폼의 미래를 생각하고 고민한 결과입니다. 프로젝트를 마무리한 지 어느 정도의 시간이 지난 지금, 카카오페이지의 나세훈 이사님에게 몇 가지를 물어봤습니다.
Q. 플러스엑스와 함께 사용성 개선 프로젝트를 진행하면서 인상적이었던 부분이 있으셨나요?
─ 저희가 요청한 미션이 현재보다는 미래에 대한 UX/UI와 WOW에 관한 이야기였기에 굉장히 어렵고 막연한 주제였을 겁니다. 명확한 답 없이 끝까지 가보는 프로젝트였음에도 불구하고 리서치부터 UX/UI 원칙과 전략, 컨셉 도출까지 깊게 고민하고 도전하는 모습이 인상적이었습니다. 또, 영화에 등장한 세레브로를 UX 컨셉에 접목하여 디자인하는 모습도 기억에 남습니다.
Q. 플러스엑스가 제안한 개선안의 핵심은 무엇이라고 생각하시나요?
─ 이번 제안은 카카오페이지를 펼쳐 놓고 A부터 Z까지, 다양하면서도 작고 세밀한 요소까지 다루고 고민한 결과였습니다. 그중에서도 IP를 어떻게 보여줄 것인가를 다룬 IPX(IP eXperience) 부분이 핵심이었다고 생각해요. 사용자가 IP 각각의 성격과 내용을 어떻게 남다르게 경험하고, 수많은 IP 중에서 사용자가 찾아서 보고 싶은 하나의 콘텐츠를 어떻게 만나게 할 것인가에 대한 제안이 인상적이었습니다. IPX에 관한 고민을 바탕으로 디자인한 디스플레이 크기와 모션, 콘텐츠 검색 방향과 대비를 통한 강조 등은 큰 도움이 되고 있습니다.
Q. 이번 프로젝트의 결과는 앞으로 어떻게 적용되나요?
─ 제안한 내용 중 섬네일 카드의 디스플레이 방식은 현재 가장 직접적으로 반영된 부분입니다. 사실, 사업적 상황을 고려해야 하므로 프로젝트 결과를 현실에 적용하는 데에는 충분한 논의와 시간이 필요합니다. 그래서 프로젝트를 마친 지금, 제안을 어떻게 현실과 균형을 맞추며 적용하고 나아가야 할지를 고민하고 있습니다.
프로젝트가 끝난 후, 나세훈 이사님과 이야기를 나누면서 미래를 아우를 수 있는 UX 설계와 UI 디자인을 찾는 것이 이번 프로젝트와 맞는 방향이었음을 다시 한번 확인할 수 있었습니다. 함께 고민하고 찾은 방향성을 바탕으로 카카오페이지가 IP라는 거대한 우주를 자신만의 속도로 즐겁게 유영하기를 바랍니다.
Plus 人(in)nspiration 은
앞으로도 계속 플러스엑스 브런치를 통해 발행됩니다.
-
플러스엑스의 UXUI 실무 배우러 가기
UX 상위기획 실무 강의 : 플러스엑스 UX 실무 마스터 패키지
UX 디자인 실무 피그마 강의 : Plus X UX디자이너가 피그마로 화면 설계하는 방식
-
UI 디자인 기초 강의 : 플러스엑스 UI 실무 마스터 패키지
UI 디자인 실무 피그마 강의 : Plus X UI팀의 입문자를 위한 피그마 디자인 매뉴얼
