스마트스토어를 새로 만들 때 사업자분들이 가장 많이 물어보시는 질문 중 하나가 상품을 어떤 순서로 보여줘야 하냐는 거예요. 의류 브랜드 윈썸도 마찬가지였어요.
캐주얼 브랜드 윈썸, 스마트스토어 스킨을 새로 만든 이유
윈썸은 캐주얼 의류를 판매하는 브랜드로, 기존에는 스마트스토어 기본 스킨을 그대로 사용하고 있었어요. 상품은 많은데 메인 화면에서는 등록 순서대로 나열되다 보니 신상품이 묻히는 경우가 많았고, 시즌 상품을 강조하기도 어려운 구조였어요.
상담을 하다 보면 베스트상품, 신상품, 시즌상품을 전부 강조하고 싶어 하시는 분들이 많아요. 하지만 메인 화면에 모든 걸 크게 넣으면 오히려 어떤 상품을 봐야 할지 헷갈리게 돼요.
베스트상품·신상품·시즌상품, 메인에 어떤 순서로 보여줘야 할까
윈썸 작업에서는 우선순위를 나눠서 접근했어요. 상단에는 시즌상품과 이벤트상품처럼 지금 알리고 싶은 상품을 배치하고, 그 아래로 베스트상품과 신상품을 구분된 영역으로 나눠서 보여주는 방식을 선택했어요.
카테고리별 대표상품을 따로 보여주기로 한 이유
카테고리별 대표상품은 별도 섹션으로 뺐어요. 상의, 하의, 아우터 같은 카테고리마다 대표 이미지를 하나씩 노출시켜서, 방문자가 스크롤만 해도 어떤 카테고리가 있는지 파악할 수 있게 했어요.
이렇게 나누다 보니 스토어 전체의 흐름도 자연스럽게 정리가 됐어요. 처음 들어온 고객은 시즌 상품을 먼저 보고, 관심 있는 카테고리로 이동하고, 그다음 베스트상품까지 살펴보는 동선이 만들어졌어요.
스킨과 상세페이지 디자인을 통일해야 하는 이유
윈썸 대표님께서 스킨 디자인과 상세페이지 디자인을 통일해야 하는지도 물어보셨는데, 저는 어느 정도는 맞추는 걸 추천드려요.
색감이나 폰트, 버튼 스타일 같은 기본 톤을 맞춰두면 고객이 메인에서 상세페이지로 넘어갔을 때 다른 사이트처럼 느껴지지 않아요. 윈썸도 스킨에 사용한 포인트 컬러와 여백 스타일을 상세페이지 상단 배너에 그대로 적용했어요.
다만 상세페이지 안의 세부 구성까지 스킨과 똑같이 맞출 필요는 없다고 말씀드렸어요. 상품마다 설명해야 할 내용이 다르기 때문에, 톤앤매너만 통일하고 구성은 상품 특성에 맞게 짜는 편이 전환율에는 더 유리해요.
모바일에서도 구매로 이어지는 동선 만들기
모바일 화면도 신경 써서 작업했어요. 의류 쇼핑은 모바일에서 구매가 많이 이루어지는 편이라, 상품 이미지가 잘리지 않고 한 화면에 적당히 들어오는지 여러 번 확인했어요.
작업을 마치고 나서
작업을 마치고 윈썸 대표님과 함께 화면을 하나씩 다시 확인했어요. 신상품과 시즌상품이 구분되어 보이니 상품을 찾기가 훨씬 편해졌다는 이야기를 해주셨어요.
굿파크는 소상공인과 개인사업자를 위해 홈페이지 제작, 홈페이지형 블로그 디자인, 스마트스토어 디자인, 상세페이지 디자인을 진행해온 웹디자인 브랜드예요. 2012년부터 여러 업종의 스토어와 사이트를 만들어오면서, 대표님과 직접 소통하고 무제한으로 시안을 수정해드리는 방식으로 작업하고 있어요.
이 게시물을
