쇼핑몰의 본질은 ‘구경’을 ‘결제’로 바꾸는 것
쇼핑몰 홈페이지 제작에서 가장 먼저 푸는 문제는 예쁜 디자인이 아니라 전환입니다. 들어온 손님 대부분은 사지 않고 떠납니다. 그래서 이 쇼핑몰은 “상품을 보고 → 믿고 → 담고 → 결제한다”는 단 하나의 흐름을 1번 목표로 잡았습니다. 화면의 모든 요소는 이 네 박자 중 어느 하나를 돕거나, 아니면 빠집니다. 장식은 줄이고 구매를 막는 마찰을 줄이는 것 — 그것이 잘 파는 가게의 첫 번째 원칙입니다.
색: 신선함의 올리브, 비움의 페이퍼
바탕은 따뜻한 크림 페이퍼(#fbfaf6)에 시그널은 올리브 그린(#5c6b3c) 하나로 절제했습니다. 식료품·라이프스타일 커머스에서 초록은 신선함과 신뢰를 동시에 전합니다. ‘담기’ 버튼과 카테고리 강조에만 이 한 색을 써서, 손님의 눈이 항상 사는 행동으로 모이게 했습니다. 색이 많으면 상품이 죽고, 색이 하나면 상품이 삽니다. 할인가는 취소선과 함께 보여 가격의 이득을 즉시 읽히게 했습니다.
타이포: 상품을 또렷하게
제목과 본문 모두 Pretendard로 통일해, 상품명·가격·후기 수가 작은 카드 안에서도 또렷하게 읽히도록 했습니다. 커머스에서 폰트의 일은 멋부림이 아니라 ‘가격을 0.2초에 읽히게’ 하는 것입니다. 굵기 대비(상품명은 굵게, 설명은 차분하게)로 한 카드 안에 위계를 만들어, 훑어보는 눈이 살 것과 정보를 자연스레 구분하게 했습니다.
상품 그리드: 한눈에 훑고, 비교하고
핵심은 상품 그리드입니다. PC에서 4열, 태블릿 3열, 모바일 2열로 접히게 해 어떤 화면에서도 손님이 한 번에 여러 상품을 훑고 비교할 수 있게 했습니다. 각 카드에는 썸네일·상품명·가격·별점·후기 수·‘담기’ 버튼을 정해진 자리에 고정해, 손님이 카드를 옮겨 다녀도 같은 정보를 같은 위치에서 읽습니다. BEST·NEW·품절 배지로 무엇이 인기인지, 무엇이 새것인지, 무엇이 지금 못 사는지를 한눈에 알립니다. 품절 상품은 흐리게 처리하고 버튼을 ‘재입고 알림’으로 바꿔, 실망 대신 다음 기회를 남겼습니다.
장바구니: 담는 순간 살아 있게
이 쇼핑몰의 시그니처는 살아있는 장바구니입니다. ‘담기’를 누르면 버튼이 즉시 ‘담음’으로 바뀌고 우상단 장바구니 숫자가 톡 튀어오릅니다. 이 0.45초의 작은 반응이 “내 행동이 먹혔다”는 확신을 주어, 손님이 다음 상품으로 안심하고 넘어가게 합니다. 카테고리 칩을 누르면 해당 분류 상품만 즉시 필터링돼, 찾는 수고를 줄였습니다. 구매를 망설이게 하는 것은 대개 불안인데, 이런 즉각적 피드백이 그 불안을 잘게 부숩니다.
신뢰: 결제 직전의 마지막 의심을 지운다
온라인에서 처음 보는 가게에 카드 번호를 넣는 일은 늘 망설여집니다. 그래서 ‘4만원 이상 무료배송·7일 내 교환·정품 인증·검증 후기’ 네 가지 신뢰 배지를 상품과 결제 사이에 배치했습니다. 받아보기 전엔 알 수 없는 신선도·품질의 불안을 ‘어떻게 길렀는가’의 투명한 설명과 인증 공개로 풀었습니다. 신뢰는 말로 외치는 게 아니라, 손님이 걱정하는 바로 그 자리에서 사실로 답할 때 쌓입니다.
모바일에서 끝나는 결제
요즘 쇼핑은 대부분 침대에서, 출근길에서, 휴대폰으로 일어납니다. 그래서 이 사이트는 모바일을 먼저 설계했습니다. 작은 화면에서도 상품 그리드가 2열로 깔끔히 접히고, 장바구니와 ‘담기’가 엄지 닿는 곳에 오며, 결제 단계가 짧습니다. 입력 칸을 줄이고 간편결제(네이버페이·카카오페이)를 앞세워, 한 손으로도 결제가 끝나게 했습니다.
정직과 발견(GEO·Product)
가격·후기 수는 데모 예시임을 분명히 밝혀 과장하지 않았습니다. 대신 각 상품에 Product 구조화 데이터(가격·재고·통화)와 OnlineStore·FAQ 스키마를 넣어, 검색엔진의 상품 정보와 AI 답변 양쪽에서 쇼핑몰 홈페이지 제작 사례로 발견되게 했습니다. 배송·교환·결제처럼 손님이 실제로 검색하는 질문에 본문과 FAQ로 답해, 보기 좋은 가게가 아니라 찾아지고 팔리는 가게를 목표로 했습니다.