|
|
|
|
|
|
|
|
|
|
이번에 소개할 작업은 반려동물 간식·사료 쇼핑몰 '시크릿박스'의 강아지간식 상세페이지 디자인이에요. 오픈 이벤트 안내부터 10개 브랜드의 간식, 사료, 위생용품까지 한 페이지에 담아야 했던 작업이라 많은 상품을 헷갈리지 않게 보여주는 구성에 중점을 두었어요.
오픈 소식과 배송 안내를 첫 화면에 담았어요
상단에는 시크릿박스 로고와 강아지·고양이 캐릭터, 그릇에 얼굴을 묻고 밥을 먹는 강아지 사진을 크게 배치했어요. 나무 간판 느낌의 박스 안에는 '#이제오픈해쓰' 같은 해시태그 문구를 넣어 새로 문을 연 쇼핑몰이라는 점을 가볍게 전달했고요.
바로 아래에는 택배 상자를 든 배송기사 캐릭터와 함께 오후 4시까지 주문하면 당일 발송된다는 안내를 넣었어요. 지역이나 물량에 따라 일정이 달라질 수 있다는 문구도 같은 영역에 함께 두었어요.
네 가지 오픈 이벤트는 배경색으로 나눴어요
이벤트는 '하나'부터 '넷'까지 번호를 붙이고 영역마다 배경색을 다르게 했어요. 베이지 톤의 미트스틱 사은품 안내, 파란색의 리뷰 포인트 안내(글 500점·포토 1,000점·동영상 2,000점), 주황색의 5+1 이벤트, 민트색의 무료배송 기준 변경(5만 원 이상 → 3만 원 이상) 순서예요.
사은품 영역에서는 강아지용과 고양이용 미트스틱을 C1~D4 코드와 맛 이름으로 정리하고, 낱개 포장이나 부드러운 식감 같은 특징은 선 아이콘과 손글씨 느낌의 글꼴로 보여줬어요.
옵션이 많은 상품은 어떻게 보여주면 좋을까요?
상품이 많을 때는 일정한 규칙으로 묶고, 모든 상품을 같은 형식으로 반복하면 훨씬 보기 편해요. 제품마다 보여주는 방식이 다르면 고객이 비교하기도, 주문할 상품을 정확히 고르기도 어려워지거든요.
이번 상세페이지에는 사주시개, 슈슈간식타임, 리얼안심간식, 그대로말랑고구마, 훼밀리퍼피, 요고소프트, 도그랑사료 등 여러 브랜드가 들어갔어요. 브랜드마다 A부터 J까지 알파벳을 정하고 A-01, B-03처럼 번호를 붙였어요. 각 브랜드 영역은 서로 다른 색 띠와 강아지 사진으로 시작하고, 정가에 취소선을 그은 뒤 할인가를 옆에 두었어요.
상품 카드는 한 줄에 세 개씩, 제품 사진 → 상품명·중량 → 주원료 → 등록성분 순서로 통일했어요. 성분처럼 글이 많은 정보도 카드마다 같은 위치에 있어서 여러 제품을 나란히 놓고 비교할 수 있어요. 리얼안심간식은 포장 사진 대신 접시에 담긴 간식 사진으로 실제 모양을 보여줬어요.
다른 상품과 상담 안내까지 이어지도록
하단에는 매장 위치 지도, 시저캔 할인 배너, 고양이 간식을 모은 '냥냥이 간식도 사고싶어요' 영역을 넣고 각각 구매하러 가는 버튼을 달았어요. 마지막은 전화상담, 카카오채널, 상담시간을 세 칸으로 나눈 고객상담센터로 정리했어요.
페이지가 긴 편이지만 섹션마다 색이 바뀌어서, 모바일에서 스크롤하면서도 지금 어떤 브랜드를 보고 있는지 구분하기 쉬워요.
굿파크에서는 상품 수가 많은 쇼핑몰도 고객이 원하는 제품을 찾기 쉽도록 정보 순서와 상품 카드 구성을 함께 고민하고 있어요. 2012년부터 다양한 상세페이지를 작업해왔고, 작업자와 직접 소통하며 진행할 수 있어요.
이 게시물을
