Carousel, 회전목마가 광고 배너가 된 이유

한 줄로

놀이공원의 회전목마가 웹 페이지 상단에 올라간 그날부터, 디자이너와 PM은 영원히 싸우게 됐습니다.

어디서 왔나

영어 "carousel"의 어원은 이탈리아어 carosello, 17세기 기사들의 마상 토너먼트입니다. 19세기 들어 증기 동력 회전 놀이기구로 진화하면서 우리가 아는 회전목마가 됐습니다.

이 비유가 웹에 도입된 건 1990년대 후반입니다. 한 페이지에 여러 배너를 보여주고 싶은데 화면 자리는 한정돼 있을 때, 여러 슬라이드를 같은 자리에서 순환시키는 발상입니다. 회전목마처럼 빙빙 도니까 carousel입니다.

2000년대 e커머스가 폭발하면서 캐러셀이 모든 메인 페이지의 표준이 됐습니다. Amazon, eBay, 한국의 G마켓·11번가 모두 메인 상단에 캐러셀입니다.

그런데 문제가 있었습니다. 2013년 노트르담대 디자인 디렉터 에릭 룬쉬타(Erik Runyon)가 한 분석을 내놨습니다. 자기 학교 사이트의 캐러셀 클릭률을 측정해 보니, 첫 번째 슬라이드가 90% 이상의 클릭을 가져갔고, 나머지 슬라이드는 거의 안 눌렸습니다.

후속 연구들도 비슷한 결과를 냈습니다. 닐슨 노먼 그룹은 2013년 보고서에서 "캐러셀은 사용자의 주의를 분산시킬 뿐 효과는 거의 없다"고 결론지었습니다.

그럼 왜 캐러셀이 살아남았을까요. PM과 마케팅 팀이 좋아하기 때문입니다. "이번 분기에 홍보할 게 5개 있는데 어떻게 다 첫 화면에 넣지?"의 답이 캐러셀입니다. 정치적 산물입니다.

지금 우리가 쓰는 방식

캐러셀은 여전히 흔하지만, 좋은 사례는 다음과 같이 다뤄집니다.

자동 슬라이드 금지: 사용자가 직접 넘기는 것만 허용합니다.
각 슬라이드의 비주얼 강도가 동일: 한 슬라이드가 너무 화려하면 나머지가 묻힙니다.
단순한 dot 인디케이터: 사용자가 슬라이드 수를 알 수 있게 합니다.
모바일에서는 swipe: 화살표 버튼보다 자연스럽습니다.

대안으로는 카드 그리드(한 화면에 5개를 같이 보여주기), 추천 알고리즘(사용자별 1개만 노출)이 있습니다.

바이브 메이커가 챙길 한 가지

캐러셀을 만들고 싶을 때 자문해야 합니다. "정말 이 5개를 다 보여줘야 하는가, 아니면 1개를 못 고르는 것인가?" 후자라면 더 큰 문제가 있습니다. 선택지를 줄이지 못한 채 화면에 모두 넣는 건 디자인이 아니라 미루기입니다.

관련

Hick's Law, Above the fold, CTA