좋은 캐러셀 디자인을 위한 가이드 5가지
슬라이더를 구현하기 위해 검색을 하다가 보니 슬라이더를 캐러셀이라고 많이 불린다는 것을 알았습니다. 이커머스 사이트나 여러 웹사이트 메인 페이지에서 가장 흔히 볼 수 있는 것이죠.
메인 페이지의 첫 번째 이미지를 아무래도 많이 선택하기 때문에 첫 이미지와 정보가 중요하다고 생각합니다.
캐러셀이란?
캐러셀은 메인 페이지에서 마케팅 정보를 보여주는 한 가지 방법으로, 유저가 스크롤을 내리지 않고도 볼 수 있는 정보의 양을 극대화하기 위해 디자이너들이 사용한다고 합니다.
Nick Babich는 메인 페이지 상단에 위치하며, 일명 ‘above the fold’영역의 상당 부분을 차지한다고 합니다.
같은 공간에 하나 이상의 콘텐츠를 보여주며, 한 번에 하나씩만 보이고 각각은 이미지와 약간의 텍스트로 구성되어있다고 합니다.
1. 컨텐츠가 최우선
방문자가 흥미롭거나 유용한 컨텐츠를 써야합니다. 첫 슬라이드가 나머지 슬라이드보다 훨씬 더 노출 확률이 높기 때문에 중요도 순으로 배치해야 합니다.
2. 슬라이드의 수를 제한한다.
5개 이하의 슬라이드를 넣으라고 Nick은 권합니다. 그 이상은 유저가 보지 않을 것이고, 나중에 유저가 캐러셀에서 봤던 콘텐츠를 다시 찾을 때 발견하기 쉽게 만들어 주기 때문이라고 합니다.
3. 진행률을 표시한다.
Dotted 표시나, 해당 슬라이드로 바로 이동할 수 있는 진행률 표시를 추가해야 합니다.
4. 모바일에 최적화
슬라이드 컨텐츠가 모바일에서도 읽기 쉬운지 확인해야 합니다. 모바일이 무시할 수 없는 존재가 되었기 때문에 모바일에서 보이는 캐러셀의 이미지와 텍스트를 최적화하는 것이 최우선 과제라고 합니다.
5. 내비게이션 컨트롤 디자인
내비게이션 컨트롤이 있음을 캐러셀 내부에서 명확하게 보여줘야 한다고 합니다. 링크와 버튼은 명확히 구분할 수 있고 충분히 크게 만들어야 한다고 합니다.
캐러셀의 가장 좋은 대안
메인 페이지에 뜨는 캐러셀이 가장 흔하게 갖는 문제점은 ‘맥락 부족’이라고 합니다. 즉, 방문자는 보통 다음 슬라이드에 무엇이 보일지 왜 관심을 가져야 하는지 전혀 알 수가 없기 때문에 그 다음 슬라이드로 넘겨보지 않으려 한다는 겁니다. 캐러셀과 비교했을 때, ‘히어로 이미지’를 사용하는 것도 좋다고 합니다. 히어로 이미지를 사용하면 방문자가 하나의 이미지에 집중할 수 있고, 디자이너도 심사숙고하여 제품이나 서비스를 대표하는 이미지 하나만 선택할 수 있어 더 효과적이라고 합니다.
참고
