볼 만한 작품을 고르느라 무한 스크롤링해 본 경험, 한 번쯤 있을 거예요. 작품 탐색은 대체로 즐겁지만 때로 피로감을 주기도 합니다. 그래서 유저의 수고를 덜어주는 앱 디자인이 중요한데요.
완성도 높은 앱 디자인은 UI･UX 디자이너와 데이터 분석가의 긴밀한 협업으로 설계됩니다. ‘웹툰 썸네일(Thumbnail)’이 유저의 탐색 경험을 어떻게 개선하는지 알아보겠습니다.
웹툰 썸네일의 기준
웹툰 썸네일의 시초는 영화 포스터입니다. (왼) ⓒ Samuel Regan-Asante on Unsplash (오) ⓒ RIDI
썸네일은 책 표지와도 같아요. 가장 먼저 독자의 시선을 끄는 이미지로서 작품의 매력을 함축합니다.
웹툰 썸네일의 시초는 영화 포스터입니다. 영화는 웹툰에 앞서 가장 대중적인 스토리 매체였기에 유용한 참고자료입니다. 영화 장르별 포스터 규칙을 웹툰 썸네일에도 비슷하게 적용할 수 있어요. 예컨대 로맨스 장르는 두 인물이 마주 보는 구도를, 액션 장르는 앞뒤 거리감과 사선을 이용한 역동적인 레이아웃을 즐겨 사용합니다.
그러나 영화와 달리 웹툰에는 유명 배우가 출연하지 않습니다. 주요 장르와 소비층 역시 영화의 그것과 다릅니다. 모바일 세로 화면에 담긴다는 점도 큰 차이죠. 따라서 웹툰 썸네일은 매체와 장르의 특성을 반영한 고유의 디자인 패턴을 형성합니다.
디자이너는 썸네일 제작에 앞서 성실한 독자가 되어봅니다. 웹툰을 실제로 전부 읽어보는 겁니다. 극적이거나 작화가 매력적인 장면을 뽑아 썸네일화 하는데요. 웹툰 감상 여부가 이미지 선정에 큰 영향을 줍니다. 단순히 이미지만 훑어보고 내용을 읽지 않으면 핵심 장면을 골라내기 어렵거든요. 동시에 티징(teasing)이나 스포일링(spoiling)을 피하는 이미지여야 하고요. 작품 제목 텍스트 역시 이야기의 흐름과 분위기에 맞게 디자인하려면 직접 독자가 되어봐야겠죠.
로맨스 판타지, 가장 많이 눌러본 웹툰 썸네일은?
최우측 썸네일이 가장 높은 클릭률을 기록했습니다. ⓒ RIDI
독자가 반응하는 웹툰 썸네일은 무엇일까요? 웹툰 구독 앱 만타(Manta)는 클릭률과 감상률을 비교하는 데이터 실험으로 경향성을 확인했습니다.
로맨스 판타지 <Finding Camellia>의 웹툰 썸네일을 여러 타입으로 만들어 A/B 테스트를 진행했는데요. 유저 집단을 둘로 나누어 각기 다른 썸네일을 띄우고 반응을 살폈습니다. 처음에는 결과치가 비슷할 거라고 예상했어요. 하지만 예상과 달리 최대 클릭률과 최소 클릭률의 차이가 8.38%p까지 벌어졌습니다. 가장 높은 클릭률을 기록한 건 바로 남녀 주인공의 로맨스 텐션을 극대화한 이미지였어요.
비슷한 실험을 반복해보니, 로맨스 판타지 독자들은 역시 단독 인물보다 커플이 등장하는 이미지에 반응한다는 걸 확인할 수 있었어요. 특히 커플의 스킨십을 담은 이미지가 높은 클릭률을 기록했습니다. 독자가 장르에 기대하는 바를 유추할 수 있겠죠.
같은 로맨스 판타지 작품이라도 커플이 등장하는 썸네일 클릭률이 높습니다. ⓒ marucomics
물론, 클릭이 무조건 감상으로 이어지진 않습니다. 그래서 노출 대비 감상률을 참고하면 더 정확하고 섬세하게 판단할 수 있습니다. 에피소드를 클릭하고 스크롤 해 내려보는 것까지가 ‘작품 감상’이거든요. 클릭률 대비 감상률이 너무 낮은 이미지는 재고해볼 필요가 있겠죠. 웹툰 썸네일이 유저의 작품 선택에 유효한 변수라는 걸 보여줍니다.
만타(Manta) 팀은 실험 결과를 서비스 화면에 반영해, 가장 클릭률 높은 썸네일의 노출 비율을 100%로 상향했습니다. 이로써 더 효과적인 작품 탐색 경험을 제공할 수 있게 되었죠.
컬렉션: 계속 넘겨보고 싶은 웹툰 썸네일
주요 웹툰을 스와이핑으로 둘러볼 수 있는 ‘컬렉션’ 화면 ⓒ Manta
만타(Manta) 홈 화면에 있는 ‘컬렉션’은 다양한 웹툰 썸네일을 훑어볼 수 있는 탐색창입니다. 전형적인 웹툰 썸네일과 달리 영화 포스터의 형식을 적극적으로 흡수했는데요. 전체 화면의 3분의 2를 차지하는 넓은 면적으로 시각적 어필을 극대화했습니다.
여기선 개별 이미지만큼이나 그 순서와 조합도 중요합니다. ‘컬렉션 보는 맛’이 있으려면 중간중간 예측을 빗나가는 썸네일 배치로 강약조절을 할 필요가 있습니다. 느낌이 비슷한 썸네일만 연속해서 등장하면 더 이상 넘겨보고 싶지 않을 테니까요. 같은 장르 안에서도 작품의 결과 스펙트럼을 다채롭게 펼쳐놓는 방법입니다.
웹툰 썸네일의 중요성과 설계 방법을 소개했는데요. 이처럼 데이터를 활용하는 앱 디자인은 유저의 작품 탐색 경험을 개선시키고, 결과적으로 서비스의 완성도를 높이는 데 기여합니다.
원문 : 웹툰 썸네일, 반드시 클릭하는 앱 디자인의 비밀 / 데이터 분석과 UI･UX 디자인의 시너지
콘텐츠 플랫폼 기업 리디 RIDI / 웹툰, 웹소설, 전자책을 아우르는 콘텐츠 플랫폼 ‘리디’와 글로벌 웹툰 구독 서비스 ‘만타(Manta)’를 서비스하고 있습니다. 콘텐츠를 통해 풍부한 상상과 깊은 통찰을 전한다고 믿습니다. 리디만의 단단한 철학과 독보적인 경험을 담아, 콘텐츠 업계 및 스타트업에 인사이트를 제공합니다.
관련 기사
