이커머스 상세페이지 제작의 시작과 목표
제품의 이커머스 상세페이지를 처음부터 완성도 있게 제작하고 싶었습니다. 처음엔 이전에 만들어둔 초안(v2, v3)이 있었지만 "세련되지 않다"는 문제가 있었고, 사진 소재가 전혀 없는 상태에서 시작해야 했습니다. 목표는 ①미니멀하고 제품(사진) 중심의 구성으로 다듬기 ②쿨톤 색감을 절제해서 반영 ③사진 없이도 완성된 레이아웃을 만들고 ④스마트스토어 등 실제 쇼핑몰에 바로 등록 가능한, 절대 깨지지 않는 결과물을 뽑아내는 것이었습니다.
진행 방법
디자인 리서치 및 방향 설정
기존 v2/v3 HTML 코드를 첨부하고 방향을 조율했습니다. 질문 폼으로 톤(쿨톤이되 미니멀), 길이(한국형 상세페이지답게 길게), 폰트(산세리프 위주), 가격 노출 여부, 사진 자리 처리 방식 등을 먼저 확정했습니다.
사진 없이도 완성되는 구조 설계
image-slot 컴포넌트를 활용해 모든 사진 자리를 드래그 앤 드롭으로 채울 수 있는 플레이스홀더로 만들고, 각 자리마다 어떤 구도·연출의 사진이 필요한지 한국어 가이드 문구를 직접 작성했습니다.
3개 버전 제작 및 비교
v1: 미니멀·정갈, 사진 중심
v2: 임팩트 있는 헤드라인 + 청록 포인트 컬러 + 세일즈 구조 (Point 01~05, 옵션 비교 카드, 체크리스트 등)
v3: v1의 정제미 + v2의 구조를 결합한 절충안
v2를 최종 선택
핵심 도식(단면 구조도) 제작
"에어매쉬가 왜 시원한지"를 설명하는 단면 구조 도식을 SVG로 직접 제작했습니다. 처음엔 밋밋해서 제공한 실제 참고 이미지(상부/하부 니트층 + 중간 스페이서 공기층 구조)를 분석해 반영했습니다.
일반 평면 메쉬(막혀서 열기가 갇힘)와 3D 에어매쉬(공기가 흐름)를 1:1 대비되는 구조로 다 시 그리고, "바람이 통한다"는 느낌을 딱딱한 화살표 대신 흐르는 바람결 + 드리프트 입자 효과로 표현했습니다.
실제 사진 반영 및 어도비 파이어플라이용 프롬프트 작성
연출 촬영이 불가능한 상황을 고려해, 포토룸 등 AI 사진 연출 툴에 넣을 수 있는 상세한 영문+한글 프롬프트를 컷별로 작성했습니다. 배경·조명·구도를 모듈화(배경 6종 × 조명 4종 × 구도 5종)해서 모든 컷이 똑같은 흰 배경으로 단조로워지지 않도록 조합을 다르게 짰습니다.
인터넷 등록용 최종 이미지 추출
사용자가 준비한 실제 제품 사진 10여 장을 슬롯에 채운 뒤, 스마트스토어 등록 규격에 맞춰 폭 1720px(2배 고해상도) PNG 14장으로 분할 추출했습니다. 이 과정에서 제작용 메모, 더미 후기 등 고객에게 노출되면 안 되는 내용을 전부 제거하고, FAQ 아코디언을 전부 펼친 상태로 고정하는 등 정적 이미지 변환에 맞는 후처리를 거쳤습니다.
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
사진이 없어도 상세페이지 설계는 완성할 수 있다. 드래그 앤 드롭 슬롯 + 구체적인 촬영/연출 가이드를 먼저 짜두면, 사진이 나중에 들어와도 레이아웃이 흔들리지 않습니다.
한국형 상세페이지는 HTML 그대로 업로드하면 반드시 깨진다. 스마트스토어·쿠팡 편집기는 외부 CSS·폰트·스크립트를 잘라내기 때문에, 최종 등록은 반드시 긴 이미지(PNG)로 구워서 올려야 폰트·색·레이아웃이 100% 보존
해상도 계산이 중요하다. 한 장에 모든 내용을 담으려 하면 픽셀 상한에 걸려 자동 축소되어 화질이 떨어집니다. 원하는 해상도(2배)를 먼저 정하고, 그에 맞게 섹션을 여러 장으로 쪼개는 역산이 필요했습니다.
도식(인포그래픽)은 참고 이미지가 있을 때 퀄리티가 확 오른다. 말로만 설명한 1~2차 시도는 계속 밋밋했지만, 실물 구조 참고 사진을 제공받은 뒤에는 정확한 레이어 구조(상부 니트/중간 공기층/하부 니트)를 재현할 수 있었습니다.
과정 중에 어떤 시행착오를 겪었나요?
도식의 공기 흐름을 화살표로만 표현했더니 그리다 만 것 같았고, 결국 흐르는 바람결 + 입자 효과로 바꾸고서야 만족스러운 결과가 나왔습니다.
이미지 내보내기 시 캐시된 미리보기를 봐서 반영이 안 된 것처럼 보이는 착시가 몇 차례 있었고, 파일명을 바꿔 재확인하는 방식으로 해결했습니다.
프로젝트 공유 시 "Project not found" 오류가 발생했는데, 원인은 워크스페이스 외부 인원에게 링크만 보낸 것이었습니다. 결국 권한 설정 대신 완전한 오프라인 단일 HTML 파일로 내보내는 방식으로 우회했습니다.
SVG 도식에 정확하지 않은 수치(7mm)를 임의로 넣었다가, 사용자가 "확실하지 않으면 숫자는 지우자"고 피드백해 근거 없는 수치를 전부 제거했습니다.
도움이 필요한 부분
실제 제품 촬영본이 준비되면, 지금 작성해둔 파이어플라이용 프롬프트가 실제로 얼마나 자연스러운 결과물을 뽑아주는지 검증이 필요합니다.
앞으로의 계획
실제 제품 사진이 모두 준비되면 최종 이미지를 다시 뽑아 스마트스토어에 등록할 예정이 며, 필요 시 편백칩 베개 등 테르엔의 다른 제품 상세페이지에도 동일한 디자인 시스템을 확장 적용할 계획입니다.
