|
|
|
|
|
|
|
|
|
|
|
|
이번에 소개할 작업은 반려동물 간식 쇼핑몰 시크릿박스의 고양이간식 상세페이지 디자인이에요. 쮸루쮸루, 쉬바캔, 위스카스, 템테이션 등 12개 브랜드의 간식과 사료 52종을 한 페이지에 담은 오픈 이벤트 상세페이지예요.
상품이 많은 페이지라 브랜드마다 색으로 구역을 나누고, 상품 하나하나에 코드와 성분 정보를 같은 형식으로 붙여 정리했어요.
첫 화면부터 오픈 이벤트 네 가지까지
첫 화면에는 스테인리스 밥그릇 앞에서 밥을 먹는 회색 고양이 사진을 크게 쓰고, 그 위에 시크릿박스 로고와 '#이제오픈해쓰' 같은 해시태그를 나무 간판 모양으로 얹었어요. 바로 아래에는 택배 상자를 든 캐릭터와 함께 오후 4시까지 주문하면 당일 발송된다는 배송 안내를 넣었어요.
이어지는 오픈 이벤트는 '하나, 둘, 셋, 넷'으로 번호를 붙이고 이벤트마다 배경색을 바꿨어요. 1개만 사도 쉬바캔 사은품, 후기 종류별 적립 포인트, 5+1 증정, 무료배송 기준 인하까지 네 가지예요. 후기 포인트는 글·포토·동영상 후기별 점수를 아이콘 카드 네 칸으로 나눠 숫자가 바로 보이게 했어요.
12개 브랜드를 색으로 나눈 상품 구역
상품 영역은 브랜드별로 대표 색을 하나씩 정했어요. 쮸루쮸루는 주황, 마시꾸냥은 연두, 고집은 파랑, 위스카스 파우치는 보라, 쉬바캔은 갈색 식이에요. 각 구역 머리에는 그 색을 입힌 고양이 사진을 깔고 브랜드명, 정가와 할인가, 한 줄 소개를 같은 자리에 배치했어요.
스크롤을 내리다 배경색이 바뀌면 다른 브랜드로 넘어갔다는 걸 알 수 있어요. 가격은 정가에 취소선을 긋고 화살표로 할인가를 잇는 방식을 모든 구역에 똑같이 적용했어요.
옵션이 많은 상품은 상세페이지에서 어떻게 보여줘야 할까요?
옵션이 많을 때는 모든 옵션을 같은 형식의 카드로 정리하고, 주문할 때 바로 찾을 수 있는 이름이나 번호를 붙여두는 게 기본이에요. 카드마다 정보 순서가 다르면 상품끼리 비교하기가 어려워지거든요.
이번 페이지에서는 브랜드마다 가, 나, 다… 글자를 정하고 상품마다 '가-01', '마-06'처럼 코드를 붙였어요. 카드 안에는 제품 사진, 맛과 용량, 주원료, 등록성분을 항상 같은 순서로 넣었고요.
위스카스와 쉬바는 같은 맛이라도 '1세 이상', '7세 이상', '2~12개월' 제품이 나뉘어 있어서 연령 배지를 사진 옆에 따로 달았어요. 상품이 하나뿐인 저염멸치나 캣츠랑 사료는 가로로 넓은 카드 한 장으로 구성했어요.
하단에는 매장 위치와 강아지 간식, 상담 안내를
상품 목록이 끝나면 네이버 지도로 매장 위치를 보여주고, 주황 테두리 박스 안에 '댕댕이 간식도 사고 싶어요' 문구와 구매 버튼, 강아지 간식 상품 이미지를 모았어요. 마지막 고객상담센터는 꽃 일러스트 배경 위에 전화 상담, 카카오채널, 상담 시간을 세 칸으로 나눠 정리했어요.
상품 수가 많아서 정리하기 쉽지 않았지만 원하는 상품을 찾고 비교하기 쉽도록 정보 형식과 구역 나누기부터 함께 정리해요. 반려동물 간식처럼 맛, 용량, 연령 구분이 많은 상품이라면 옵션을 정리하는 방식으로 디자인하면 구매자들이 편하게 상품들을 비교해볼 수 있어요.