Seller HTML detail templates

판매자 등록형 상세페이지 틀

수집한 상세페이지 자료에서 카피와 이미지는 제거하고, 이미지 오버레이, 컬러 블록, 리뷰 증거, 옵션·스펙 모듈만 재사용 가능한 placeholder 샘플로 재구성했습니다.

식품 · 리빙 · 선물

Premium Editorial

29CM/기획공방형 큰 비주얼, 넓은 여백, 짧은 카피

Width: 860px
Tone: quiet premium

Naver 860Gmarket 860Kakao 890Musinsa 1000

0860px HTML BODY860

01Opening visual

HYBRIDimage text overlay

opening

사진 한 장으로 분위기와 가격대를 먼저 설득

상단 1스크린은 실제 사용 장면 위에 짧은 문장만 올리고, 하단에 상품 컷과 핵심 약속을 배치합니다.

hero image

brand lineheadline

subcopy

text safe zone

02Three reasons

HTMLbadge cards

benefits

구매 이유를 3개 배지로 압축

긴 설명 대신 인증, 제조 방식, 선물 적합성처럼 빠르게 스캔되는 이유를 카드화합니다.

01benefit 01

02benefit 02

03benefit 03

03Material detail

HYBRIDtexture close-up

feature

클로즈업 이미지와 원료 이야기를 한 화면에

식감, 소재, 질감처럼 말로만 전달하기 어려운 부분을 확대 이미지와 짧은 주석으로 연결합니다.

close-up image

callout copydetail notes

04Usage scene

HYBRIDimage text overlay

usage

실사용 장면 위에 짧은 카피를 얹는 구간

식탁, 거실, 파우치 등 맥락 이미지에 텍스트 안전 영역을 잡아 상세페이지 흐름을 끊지 않습니다.

lifestyle image

scene copyheadline

short overlay copy

text safe zone

05Package composition

HTMLvariant showcase

components

패키지와 옵션을 한눈에 비교

세트 구성, 용량, 증정품을 분리된 옵션 블록으로 보여주고 구매 전 오해를 줄입니다.

01package image

02option table

06Shipping and care

HTMLpolicy strip

policy

배송·보관·교환 정보는 낮은 톤의 안내 스트립

전환을 방해하지 않도록 마지막에 간결한 안내 표로 정리합니다.

shipping

운영 정책 입력 영역

storage

운영 정책 입력 영역

exchange

운영 정책 입력 영역

쿠팡 · 스마트스토어 · 대량 SKU

Market Dense

쿠팡/스마트스토어형 정보 밀도, 비교표, 고시 우선

Width: 860px
Tone: direct conversion

Coupang 780Naver 86011st 831Gmarket 860

0860px HTML BODY860

01Direct offer

HTMLcutout color plane

opening

상품 컷아웃과 강한 가격/혜택 메시지

스마트스토어·쿠팡형 상세페이지는 첫 화면에서 혜택, 용량, 사용처를 직설적으로 보여줍니다.

product image

headlineprice note

02Problem and answer

HTMLcomparison matrix

problem

불편함과 해결 결과를 좌우 비교

고객이 이미 겪는 문제를 먼저 보여주고, 바로 옆에 상품으로 해결되는 상태를 배치합니다.

BEFOREpain point

AFTERsolution

result

03Benefit grid

HTMLbadge cards

benefits

4개 포인트로 구매 논리를 빠르게 압축

저렴함만 강조하지 않고 속도, 호환성, 내구성, 보관성을 같은 비중으로 나눕니다.

01point 01

02point 02

03point 03

04point 04

04Comparison table

HTMLcomparison matrix

comparison

자사 상품과 일반 선택지를 표로 정리

선택 기준을 세로축으로 고정하면 SKU가 많아져도 같은 구조를 반복할 수 있습니다.

BEFOREcurrent product

AFTERgeneric option

proof note

05Spec and notice

HTMLspec table

spec

상세 고시, 규격, 주의사항을 표준 블록으로

플랫폼 검수에서 빠지면 안 되는 항목은 별도 컴포넌트로 고정하고 상품별 값만 채웁니다.

spec table

상품별 값 입력 영역

legal notice

상품별 값 입력 영역

required labels

상품별 값 입력 영역

06Delivery and AS

HTMLpolicy strip

policy

배송, 반품, AS를 동일한 하단 모듈로 반복

CS 관련 정보는 모든 템플릿에서 같은 위치에 두면 운영자가 빠르게 검수할 수 있습니다.

delivery

운영 정책 입력 영역

return

운영 정책 입력 영역

AS contact

운영 정책 입력 영역

화장품 · 퍼스널케어

Beauty Proof

올리브영/Glossier형 성분, 제형, 임상 근거

Width: 860px
Tone: ingredient proof

Naver 860Coupang 780Olive export 860

0860px HTML BODY860

01Texture hero

HYBRIDtexture close-up

opening

제품 컷과 제형 이미지를 동시에 보여주는 시작

화장품은 병 이미지보다 제형, 흡수감, 사용 후 상태를 함께 보여줄 때 신뢰가 빨리 생깁니다.

product image

texture imageheadline

02Skin concern

HTMLcomparison matrix

problem

고민 상태와 기대 상태를 명확히 분리

과장된 before/after 대신 고민, 루틴, 사용감을 구분해 표현하면 검수 리스크가 낮습니다.

BEFOREconcern

AFTERbefore state

desired state

03Ingredient cards

HTMLbadge cards

feature

성분별 역할을 카드로 분해

핵심 성분은 함량, 기능, 체감 포인트를 같은 카드 구조로 반복해 읽기 쉽게 만듭니다.

01ingredient 01

02ingredient 02

03ingredient 03

04Test evidence

HYBRIDreview proof markup

proof

리뷰·테스트 결과를 캡처풍으로 시각화

인증서 원본 이미지는 placeholder로 두고, 수치와 주석은 HTML 텍스트로 교체 가능하게 나눕니다.

PROOFtest result

01test result

02certificate

03disclaimer

05How to use

HTMLprocess steps

usage

루틴 단계는 세로 타임라인으로 정리

사용 순서, 권장량, 주의 시점을 분리하면 상품군이 바뀌어도 같은 구조를 유지할 수 있습니다.

01step 01

이미지 또는 짧은 설명 placeholder

02step 02

이미지 또는 짧은 설명 placeholder

03step 03

이미지 또는 짧은 설명 placeholder

06Ingredients and caution

HTMLspec table

spec

전성분과 주의문구는 검수용 표로 고정

의무 표기 영역은 디자인보다 누락 방지가 중요하므로 행 단위 placeholder로 관리합니다.

full ingredients

상품별 값 입력 영역

caution

상품별 값 입력 영역

volume

상품별 값 입력 영역

홈리빙 · 주방 · 소형가구

Home Living Spec

IKEA/29CM 리빙형 크기, 소재, 구성품, 관리법

Width: 860px
Tone: warm utility

Naver 860Gmarket 860Kakao 890Custom 900

0860px HTML BODY860

01Room scene

HYBRIDimage text overlay

opening

공간 이미지 위에 상품의 사용 맥락을 먼저 제시

홈리빙은 실제 방, 주방, 책상에서의 크기감이 중요하므로 hero에 장면형 이미지를 크게 씁니다.

space image

product imageheadline

short overlay copy

text safe zone

02Size context

HYBRIDmeasurement overlay

feature

치수선과 스케일 이미지를 제품 위에 직접 표시

가로, 세로, 깊이, 손잡이 높이 같은 숫자는 별도 표보다 이미지에 붙을 때 오해가 줄어듭니다.

scale image

measurementsfit note

03Daily benefits

HTMLbadge cards

benefits

생활 편익을 아이콘 카드처럼 반복

수납, 청소, 내구성처럼 사용 후 장점을 같은 크기의 모듈로 나눕니다.

01storage

02cleaning

03durability

04Included items

HTMLvariant showcase

components

구성품과 부품을 누락 없이 펼쳐 보기

나사, 설명서, 추가 부품처럼 작지만 CS에 중요한 항목까지 들어갈 공간을 확보합니다.

01component image

02parts list

05Material and care

HTMLspec table

spec

소재, 관리법, 주의사항을 큰 표로

소재별 관리법과 배송 중 손상 기준은 문단보다 표가 검수와 수정에 유리합니다.

material table

상품별 값 입력 영역

care guide

상품별 값 입력 영역

notice

상품별 값 입력 영역

06Packing and delivery

HTMLpolicy strip

policy

포장, 배송, 교환 기준을 하단에 고정

부피가 큰 제품은 배송 안내가 길어지므로 접수 기준을 정리할 영역이 필요합니다.

packing

운영 정책 입력 영역

delivery

운영 정책 입력 영역

exchange

운영 정책 입력 영역

소비재 · 캐릭터형 뷰티 · 키즈

Playful Character

캐릭터/일러스트 포인트, 짧은 말풍선, 단계 설명

Width: 860px
Tone: friendly pop

Naver 860Coupang 780Ably 880

0860px HTML BODY860

01Character hook

FIGMAcutout color plane

opening

캐릭터와 제품을 컬러면 위에 크게 배치

말풍선, 스티커, 배경 도형이 많은 유형은 Figma에서 비주얼을 만든 뒤 이미지 export하는 편이 안정적입니다.

character

product imageheadline

02Tiny problem

FIGMAreview proof markup

problem

작은 고민을 말풍선과 캡처풍으로 표현

캐릭터형 상세페이지는 공감 문장을 짧게 만들고, 말풍선 이미지는 하나의 그래픽으로 관리합니다.

PROOFsituation

01situation

02speech bubble

03answer

03Three-step use

HTMLprocess steps

usage

3단계 사용법은 HTML로도 충분히 자동화 가능

단계 숫자, 짧은 동사, 이미지 슬롯만 바꾸면 키즈·뷰티·소비재에 모두 재사용됩니다.

01step 01

이미지 또는 짧은 설명 placeholder

02step 02

이미지 또는 짧은 설명 placeholder

03step 03

이미지 또는 짧은 설명 placeholder

04Fun points

HTMLbadge cards

benefits

재미 포인트를 배지와 컬러 카드로

컬러와 모양은 템플릿 스타일에서 바꾸고, 문구는 상품 데이터로 채우는 구조입니다.

01point 01

02point 02

03point 03

05Set and variants

HTMLvariant showcase

components

색상, 향, 캐릭터 옵션을 작은 쇼케이스로

옵션 이미지와 이름을 같은 카드 규격으로 맞추면 대량 SKU 생성이 쉬워집니다.

01variant 01

02variant 02

03package

06Safe notice

HTMLspec table

spec

연령, 소재, 안전 문구를 빠짐없이 표기

키즈·캐릭터 상품은 귀여운 화면과 별개로 안전 고시는 독립 모듈로 두는 편이 안전합니다.

age

상품별 값 입력 영역

material

상품별 값 입력 영역

caution

상품별 값 입력 영역