자체 시안
[쇼핑몰] 스마트스토어 상세페이지 「결따라 폴딩 릴렉스 체어」
고객 의뢰 없이 직접 기획하고 만든 예시 작업입니다
- PC
- Mobile
스마트스토어 상세페이지 「결따라 폴딩 릴렉스 체어」
고르는 데 필요한 숫자를 첫 화면 바로 아래에 모은 캠핑 의자 상세페이지 시안
- 제작 방식
- HTML · CSS · SVG (디자인 시안)
- 작업 기간
- 2026년 9월
- 타입
- 스마트스토어 상세페이지 (860px)
- 메인 컬러
- #2d3a2b#8a5b3c#f4efe4
- 폰트
- Gowun Batang · Pretendard
시안을 직접 띄워 둔 주소입니다. 눌러 보며 움직임까지 확인하실 수 있습니다.
작업 리포트
캠핑 의자 한 개를 스마트스토어에 올린다면 상세페이지를 어떻게 짤지 가정하고 직접 기획한 시안입니다. 「결따라」와 제품 · 수치 · 후기는 모두 가상이며, 제품 사진 대신 의자와 캠핑 풍경을 직접 그렸습니다. 아래 「사이트 보러가기」에서 넓은 화면과 휴대폰 폭으로 모두 볼 수 있습니다.
무엇을 중심에 두었나
잘 팔리는 상세페이지는 대개 혜택 → 공감 → 기능 포인트 → 비교 → 후기 → 사양 순서로 길게 이어집니다. 이 흐름은 그대로 가져오되, 고객이 정말 비교하는 숫자(무게 · 접은 길이 · 견디는 무게 · 펴는 시간)가 맨 아래 사양표에만 있지 않게 **첫 화면 바로 다음 「30초 요약」**에 모았습니다.
- 등받이 3단 각도는 세 각도를 겹친 측면도와 쓰임(식사 · 대화 · 불멍)으로
- 크기는 숫자 대신 사람 실루엣이 앉은 치수 도식으로 — 등받이가 뒷머리까지 오는지 한눈에
- 비교표는 다른 제품을 깎아내리지 않고 로우체어 · 일반 폴딩과 「쓰임이 다르다」로 정리했습니다
휴대폰에서
스마트스토어 상세는 860px 이미지가 휴대폰 폭으로 그대로 줄어듭니다. 그래서 반응형으로 다시 배치하지 않고, 줄어든 뒤에도 읽히는 글자 크기(본문 28px · 제목 60px 이상, 860 기준)로 처음부터 잡았습니다. 시안 페이지의 「휴대폰 폭으로 보기」로 줄어든 모습을 바로 확인할 수 있습니다.
실제로 만든다면
그림 자리에 실제 제품 촬영 컷(연출 · 누끼)을 받아 보정해 넣고, 완성본은 860px 폭 JPG 여러 장으로 잘라 스마트스토어 상품 에디터에 올립니다. 캠핑용품은 KC 안전확인 대상 여부와 표시 사항(소재 · 제조국 · 내하중 기준)을 실제 인증서와 맞춰 확인합니다.
첫 화면 다음 「30초 요약」
무게 · 접은 길이 · 견디는 무게 · 펴는 시간을 네 칸에 모았습니다. 수만 px 아래로 흩어지기 쉬운 결정 정보를 스크롤 한 번 안에 둡니다.
사람 실루엣과 함께 보는 치수
숫자만 나열하지 않고, 170cm 성인이 기댔을 때 등받이가 어디까지 오는지 측면 도식으로 그렸습니다.
휴대폰에서 읽히는 글자 크기
상세는 860px 이미지가 휴대폰 폭으로 줄어듭니다. 그래서 본문을 860 기준 28px 이상으로 잡아 줄어든 뒤에도 읽히게 했습니다.
제공 서비스
- 상세페이지 기획
- 상세페이지 디자인
- 일러스트 (SVG)
- 모바일 가독성