DETAIL PAGE SYSTEM / 01

반복 없이 조립하는
상세페이지 블록 12

사진과 카피만 바꿔도 장면이 달라 보이도록 레이아웃은 분리하고, 폰트·여백·색상 규칙만 하나로 고정했습니다.

12 BLOCKS780 / 860 PXSTATIC HTMLFIXED SCHEMA

블록 카탈로그

각 블록의 복사 버튼은 렌더용 <section>과 고정된 data-fields를 함께 복사합니다.

12 / 12 READY
01
대형 제품컷 히어로hero-full
img,headline,sub
원본 출력 폭390px 실제 표시 시뮬레이션780px
NEW STANDARD

차이를 만드는 한 장

첫 화면에는 가장 강한 제품컷과 핵심 약속 하나만 남깁니다.
설명보다 인상이 먼저 기억되도록 구성합니다.

02
카피·제품 분할 히어로hero-split
img,eyebrow,headline,sub,cta
원본 출력 폭390px 실제 표시 시뮬레이션780px
JUST ENOUGH

필요한 만큼만 담다

제품의 쓰임과 장점을 한 화면에서 빠르게 이해시키는 균형형 첫 컷입니다.

핵심 포인트 보기
03
문제 상황 제시problem
img,eyebrow,headline,sub
원본 출력 폭390px 실제 표시 시뮬레이션780px
THE PROBLEM

매일 쌓이는 작은 불편

고객이 이미 겪고 있는 장면을 먼저 보여 주면 해결의 필요성이 자연스럽게 이어집니다.

01눈에 자꾸 남는 흔적
02반복되는 번거로운 관리
03정리되지 않는 사용 공간
04
핵심 가치 3열point-3
eyebrow,headline,point1_title,point1_sub,point2_title,point2_sub,point3_title,point3_sub
원본 출력 폭390px 실제 표시 시뮬레이션780px
THREE POINTS

선택을 쉽게 만드는 기준

비슷해 보이는 상품도 꼭 봐야 할 기준 세 가지만 정리하면 비교가 빨라집니다.

POINT 01

관리의 편리함

일상에서 자주 쓰는 만큼 손이 덜 가는 구조인지 확인합니다.

POINT 02

안정적인 사용

사용 중 흐트러짐 없이 본래 역할을 유지하는지 살펴봅니다.

POINT 03

공간과의 조화

필요한 기능은 갖추고 주변은 깔끔하게 보이도록 정돈합니다.

05
이미지·텍스트 교차 2종img-text-L / img-text-R
img,eyebrow,headline,sub,caption
원본 출력 폭 · L/R 공통 스키마390px 실제 표시 시뮬레이션780px
DETAIL L

눈에 보이는 차이의 이유

왼쪽 이미지는 디테일을 크게 보여 주고 오른쪽 카피는 의미를 짧게 설명합니다.

이미지 56% · 텍스트 44%
DETAIL R

쓰임이 달라지는 순간

다음 장면은 방향을 바꿔 반복감을 줄이고 시선의 흐름을 이어 갑니다.

텍스트 44% · 이미지 56%
06
디테일 2×2 콜라주detail-collage
img1,img2,img3,img4,headline,caption1,caption2,caption3,caption4
원본 출력 폭390px 실제 표시 시뮬레이션780px
CLOSER LOOK

가까이 볼수록 선명한 차이

여러 컷을 하나의 리듬으로 묶어 필요한 디테일만 압축합니다.

전체 구조
소재 확대
마감 확인
추가 디테일
07
사용 전후 비교before-after
before_img,after_img,eyebrow,headline,before_label,after_label,sub
원본 출력 폭390px 실제 표시 시뮬레이션780px
BEFORE / AFTER

사용 전후가 한눈에

같은 각도와 같은 크기로 배치해 변화가 과장 없이 바로 보이도록 만듭니다.

BEFORE
AFTER
08
상품 스펙표spec-table
eyebrow,headline,rows
원본 출력 폭390px 실제 표시 시뮬레이션780px
SPECIFICATION

확인할 정보만 정확하게

상품별 검증 사실만 입력하고 확인되지 않은 수치는 비워 둡니다.

상품명제품명 입력
소재검증된 소재 입력
구성구성품 정보 입력
색상옵션 색상 입력
제조국원산지 정보 입력
판매원사업자 정보 입력
09
SVG 사이즈 도면size-diagram
img,eyebrow,headline,width,height,depth,unit,notes
원본 출력 폭 · 숫자는 SVG 텍스트390px 실제 표시 시뮬레이션780px
SIZE GUIDE

사이즈는 숫자로 명확하게

실측 위치를 SVG 치수선으로 표시합니다. 이미지 속 숫자는 사용하지 않습니다.

제품 사이즈 도면 예시가로, 세로, 깊이 치수선을 SVG로 표시한 더미 도면가로 00 cm세로 00 cm깊이 00 cm
10
A/B 옵션 비교option-compare
eyebrow,headline,option_a_img,option_a_name,option_a_points,option_b_img,option_b_name,option_b_points
원본 출력 폭390px 실제 표시 시뮬레이션780px
CHOOSE YOUR TYPE

내게 맞는 구성을 고르세요

A

기본형

  • 꼭 필요한 기능 중심
  • 간결한 사용 구성을 선호할 때
  • 구성 정보는 사실 원장과 연동
B

확장형

  • 추가 수납이나 기능 포함
  • 활용 범위를 넓히고 싶을 때
  • 차이점만 짧고 정확하게 표기
11
장착·사용 순서howto-step
eyebrow,headline,step1_img,step1_title,step1_sub,step2_img,step2_title,step2_sub,step3_img,step3_title,step3_sub,step4_img,step4_title,step4_sub
원본 출력 폭390px 실제 표시 시뮬레이션780px
HOW TO USE

처음부터 쉬운 사용 순서

사진 한 장에 행동 하나만 보여 주면 설명서를 길게 읽지 않아도 따라 할 수 있습니다.

STEP 01

위치를 맞춰요

사용할 공간에 제품을 곧게 놓습니다.

STEP 02

고정부를 연결해요

지정된 연결부를 순서대로 체결합니다.

STEP 03

당겨서 고정해요

흔들림이 없도록 길이를 조절합니다.

STEP 04

마지막으로 확인해요

전체 위치와 체결 상태를 점검합니다.

12
배송·교환·상품정보고시notice
headline,shipping,exchange,product_info,contact
원본 출력 폭390px 실제 표시 시뮬레이션780px

구매 전 꼭 확인해 주세요

NOTICE & INFORMATION

배송 안내

배송비, 출고 기준, 도서산간 추가 비용 등 판매처의 검증된 정책을 입력합니다. 확인되지 않은 도착일은 약속하지 않습니다.

교환·반품

신청 기간, 반품 비용, 교환이 제한되는 경우를 마켓 정책과 실제 판매 조건에 맞춰 입력합니다.

상품정보고시

품명상품별 정보 입력
재질검증 자료 기준 입력
제조국원산지 입력
판매원사업자 정보 입력

고객 문의

문의 채널과 운영 시간을 입력합니다. 상품별 고지 항목은 notice.json과 사실 원장을 기준으로 렌더합니다.

블록 HTML을 복사했습니다.