상품 상세 레이아웃 시스템
목적
상품 상세 레이아웃 시스템은 전자상거래 상품 상세 페이지(PDP)를 구성하기 위한 표준화된 고성능 시각적 및 공간적 프레임워크를 제공합니다. 상품 상세 페이지는 모든 전자상거래 또는 DTC(Direct-to-Consumer) 웹사이트에서 가장 중요한 전환 엔진입니다. 풍부한 미디어, 다중 변형 구성기, 동적 가격 모델, 신뢰 신호, 주요 클릭 유도 버튼(CTA)을 응집력 있고 스캔 가능하며 완전히 접근 가능한 인터페이스 내에서 균형 있게 배치해야 합니다.
체계적인 접근 방식은 정렬되지 않은 구매 그리드('구매 상자'), 방향 감각을 잃게 하는 미디어 슬라이더, 변형 전환 중 레이아웃 이동(CLS), 숨겨진 모바일 구매 트리거, 사용자 지정 선택기의 중요한 접근성 차단과 같은 일반적인 디자인 마찰 지점을 해결합니다. 이 시스템은 마케팅 프레젠테이션과 기술 구현 간의 격차를 해소하여 페이지가 안정적으로 로드되고 최대 전환을 유도하며 WCAG AA 표준을 엄격히 준수하도록 보장합니다.
사용 사례
- B2C 및 DTC(Direct-to-Consumer) 전자상거래: 물리적 상품, 의류, 화장품 또는 전자제품을 위한 고도로 세련된 상품 페이지 설계.
- 디지털 제품 및 구독 판매: 소프트웨어, 멤버십 또는 서비스 랜딩 페이지에서 기능 하이라이트, 등급 선택기, 결제 체크아웃 구성.
- 산업 및 B2B 카탈로그 페이지: 다운로드 가능한 도식과 견적 빌더가 포함된 복잡한 사양 중심 하드웨어 부품 페이지 구성.
- 마켓플레이스 상세 보기: 다양한 다중 공급업체 목록(부동산, 여행 예약, P2P 판매)을 위한 레이아웃 그리드 표준화.
사용하지 말아야 할 경우
- SaaS 요금제 비교 랜딩 페이지: 별도의 구독 패키지를 나란히 비교하려면
pricing-table-ui-system또는comparison-matrix-system을 사용하세요. - 기본 상품 검색(PLP): 카탈로그 탐색 또는 검색 결과 목록에는
card-ui-system및filter-and-sort-system을 사용하세요. - 간단한 리드 캡처 또는 양식: 기본 연락처 양식, 뉴스레터 또는 단일 단계 가입에는
form-design-system을 사용하세요. - 편집자 주 및 블로그 콘텐츠: 내러티브 스토리텔링, 뉴스레터 및 텍스트 전용 열에는
article-layout-system을 사용하세요.
입력
- 콘텐츠 및 에셋 목록: 고해상도 제품 이미지/비디오(종횡비, 확대/축소 요구 사항), 사양, 리뷰, 가격 구조 및 신뢰 보장.
- 변형 매트릭스 복잡성: 옵션 수(예: 색상, 크기, 재질) 및 종속 관계 존재 여부(예: "사이즈 L은 검정색만 가능").
- 타이포그래피 및 간격 척도: 상대적 크기 척도 및 유동 간격 토큰(
fluid-typography-system및fluid-spacing-system에서 가져옴). - 고도 및 색상 토큰: 브랜드 강조 색상, 상태 음영(세일, 경고, 품절), 표면 고도 및 활성/포커스/호버 상태(
accessible-color-system및elevation-and-depth-system에서 가져옴). - 모바일 뷰포트 제약 조건: 뷰포트 경계 및 기기 노치(특히 iOS 홈 인디케이터 및 브라우저 메뉴 막대).
출력
- 이중 패널 공간 청사진: 화면을 영향력이 큰 왼쪽 미디어 패널과 스캔 가능한 오른쪽 구매 구성기 패널(구매 상자)로 나누는 구조적 그리드.
- 반응형 스태킹 및 흐름 규칙: 레이아웃이 모바일 최적의 수직 스택으로 축소되는 방식을 보여주는 전환 사양.
- 모바일 고정 구매 서랍: 주요 CTA 접기 이후 모바일 뷰포트에서 지속되는 뷰포트 고정 구매 막대 사양.
- 대화형 견본 및 선택기 구성 요소: 크기 버튼, 색상 견본 및 수량 카운터를 위한 구성 요소 수준 설계.
- Aria live 및 키보드 사양: 명확한 키보드 탭 경로, 로빙 tabindex, 포커스 유지 및 화면 판독기 준수를 위한 상태 알림 트리거.
워크플로우
1. 이중 패널 공간 레이아웃 설정 (데스크톱 >1024px)
2열 CSS 그리드 또는 Flexbox 레이아웃을 사용하여 데스크톱 보기를 비례적으로 분할하여 구성합니다.
- 왼쪽 열: 미디어 패널 (50~55% 차지): 고충실도 시각적 제품 에셋을 표시합니다. 사용자가 긴 스크롤 중에 구매 맥락을 잃지 않도록 상위 열을
align-items: start;로 설정하고 미디어 컨테이너를 고정시킵니다:position: sticky; top: calc(var(--global-header-height) + var(--space-m));. - 오른쪽 열: 구매 구성기 / 구매 상자 (45~50% 차지): 모든 메타데이터와 거래 컨트롤을 배치합니다. 상단에서 하단으로 읽히는 명확한 계층 구조를 가진 단일 수직 열로 유지합니다.
- 그리드 거터: 미디어와 컨트롤을 구별하지만 통합된 상태로 유지하기 위해 충분한 시각적 거터(예:
gap: clamp(24px, 4vw, 48px))를 유지합니다.
2. 구매 구성기(구매 상자)의 시각적 계층 구조 설계
구매 상자 열 아래로 "F-패턴" 읽기 흐름을 적용합니다. 요소를 논리적으로 정렬합니다.
- 이동 경로 및 카테고리 표시기: 작고 흐린 텍스트를 상단에 배치(예: "Shop > Outdoor > Jackets")하여 맥락을 제공합니다.
- 제품 헤더:
font-size: clamp(1.75rem, 3.5vw, 2.5rem)및 굵은 두께로 스타일링된h1을 사용한 기본 제목. - 사회적 증거 요약: 평균 평점을 표시하고 리뷰 섹션(예: "★ ★ ★ ★ ☆ (128개의 리뷰)")으로 직접 스크롤하는 활성 텍스트 링크가 포함된 별점 블록.
- 가격 엔진 블록: 매우 눈에 띄는 가격. 굵은 활성 가격, 더 작고 취소선이 있는 정상 소비자가(할인 중인 경우), 명확한 색상의 할인 배지(예: "$20 절약"). 할부 메시지(예: "또는 Klarna로 4회 $25 결제")를 바로 아래에 배치합니다.
- 변형 구성기: 크기, 색상 견본 또는 재질. 일관된 레이블 제목과 간격(예:
margin-bottom: var(--space-m))을 사용합니다. - 재고 및 배송 안심: 변형 근처에 미묘한 실시간 재고 알림(예: "● 재고 3개 남음 - 내일 배송")을 배치합니다.
- 기본 구매 CTA: 구매 상자 전체 너비로 늘어나는 눈에 띄고 대비가 높은 "장바구니에 담기" 또는 "지금 구매" 버튼.
- 신뢰 배지 및 반품 정책: 기본 CTA 바로 아래에 배치하여 구매 마찰을 최소화하는 눈에 띄는 아이콘/텍스트 클러스터(예: "✓ 무료 배송", "✓ 30일 반품 가능").
3. 왼쪽 미디어 갤러리 구성
탐색이 빠르고 가벼우며 레이아웃 안정성을 유지하도록 이미지를 구성합니다.
- 기본 디스플레이 컨테이너:
aspect-ratio: 1 / 1; object-fit: cover;를 사용하여 고정된 종횡비(일반적으로1:1정사각형 또는3:4세로)의 컨테이너에 활성 이미지를 고정합니다. 이는 약간 다른 크기의 이미지를 로드할 때 누적 레이아웃 이동(CLS)을 방지합니다. - 썸네일 탐색: 기본 이미지 아래(또는 왼쪽 세로)에 지원 썸네일을 수평으로 쌓습니다. 활성 썸네일에 대비가 높은 테두리와
aria-current="true"가 있는지 확인합니다. - 확대/축소 트리거: 활성 이미지의 오른쪽 하단 모서리에 미묘한 확대/축소 아이콘을 포함합니다. 트리거하면 전체 화면 스와이프 가능 모달 라이트박스(
image-gallery-and-lightbox-system)가 열립니다.
4. 모바일 스태킹 및 모바일 고정 구매 서랍 생성 (<768px)
모바일 화면에서는 표준 다중 열 레이아웃이 깨집니다. 다음 적응 규칙을 적용합니다.
- 선형 수직 흐름: 페이지를 단일 열 스택으로 축소합니다. 미디어 갤러리를 맨 위(전체 너비 또는 약간 안쪽)에 배치하고, 그 뒤에 제품 헤더, 가격, 변형 구성기, CTA, 상세 사양을 순서대로 배치합니다.
- 모바일 고정 구매 서랍: 모바일에서 기본 CTA가 화면 밖으로 빠르게 스크롤되므로 하단 고정 체크아웃 서랍을 구현합니다.
- 인라인 CTA가 화면에 보이는 동안에는 서랍을 숨깁니다.
- 사용자가 인라인 CTA를 뷰포트 밖으로 스크롤하면(스크롤 임계값 > 600px), [제품 썸네일 + 제목](작은 뷰포트에서는 선택 사항/축소됨), [가격], 막대 오른쪽 절반을 차지하는 [기본 장바구니에 담기 CTA]를 포함하는 간결한 하단 고정 막대를 위로 슬라이드합니다.
padding-bottom: env(safe-area-inset-bottom);을 사용하여 모바일 기기 스와이프 영역을 존중하고 시스템 컨트롤과의 겹침을 방지합니다.
5. 사용자 정의 견본 및 변형 선택기 상호 작용 표준화
사용자 정의 선택기(색상 원형 또는 버튼 매트릭스 등)는 세련되고 깔끔하게 상호 작용해야 합니다.
- 시각적 견본: 색상 원형은 데스크톱에서 최소
32x32px, 모바일에서40x40px이상이어야 합니다. 활성 견본은 외부 동심원 테두리 링(색상 원과 테두리 사이에 2px 흰색 공간 유지)으로 표시됩니다. - 크기 버튼: 크기에 대해 둥근 알약 모양 윤곽선(예: "S", "M", "L")을 사용합니다. 사용할 수 없는 크기는 흐리게(예: 불투명도
0.4및 대각선 슬래시) 표시하지만 화면 판독기가 "사이즈 S - 품절"이라고 알릴 수 있도록 포커스 가능 상태로 유지합니다. - 동적 피드백: 견본을 전환하면 페이지를 새로고침하지 않고도 표시되는 가격, 재고 알림 및 기본 이미지 갤러리가 즉시 업데이트되어야 합니다.
6. 키보드 탐색 및 화면 판독기 접근성을 위한 설계
사용자 정의 구성기는 접근성 실패의 빈번한 지점입니다. 다음 엄격한 지침을 적용합니다.
- 시맨틱 견본 선택: 시각적으로는 기본 입력을 숨기면서 완전히 접근 가능하도록 유지하기 위해
<label>태그로 래핑된 표준<input type="radio">를 사용하여 견본을 구현합니다. 이는 기본 화살표 키 탐색, 자동 라디오 그룹화 및 키보드 포커스 상태를 보장합니다. - Aria Live 알림: 사용자가 견본이나 변형을 선택하면 보이지 않는
aria-live="polite"div를 사용하여 화면 판독기에 업데이트를 알립니다(예: "선택한 색상: 크림슨 레드. 가격이 99달러로 업데이트되었습니다. 재고 있음."). - 건너뛰기 링크 및 컨텍스트 앵커: "평점 별 리뷰 링크"에 눈에 띄는 포커스 링이 있고 대상에
tabindex="-1"을 사용하여 키보드 포커스를 리뷰 섹션(#reviews)으로 부드럽게 스크롤하는지 확인합니다.
결정 규칙
견본 스타일 선택
| 옵션 수 | 권장 UI 선택기 패턴 | 설계 근거 |
|---|---|---|
| 2 - 5 옵션 (예: 빨강, 파랑, 초록) | 시각적 알약 버튼 또는 견본 | 즉시 가시성, 낮은 인지 부하, 쉬운 단일 탭 대상. |
| 6 - 15 옵션 (예: 10개의 신발 사이즈) | 적응형 Flex 그리드 매트릭스 | 컴팩트한 그룹화, 긴 스크롤 없이 구매 상자 열에 깔끔하게 맞음. |
| 16개 이상 옵션 (예: 50개의 기기 모델) | 검색 기능이 있는 사용자 지정 선택 메뉴 | 시각적 혼란과 압도적인 "선택 마비" 레이아웃 블록을 방지합니다. |
레이아웃 분할 (데스크톱 및 태블릿 뷰포트)
- 데스크톱 (>1024px): 2열 그리드(왼쪽 미디어 고정, 오른쪽 구성기 스크롤).
- 태블릿 (768px - 1023px): 열 너비를 재평가합니다. 변형 구성기에 밀집된 매트릭스 입력이 포함된 경우 50/50 분할로 전환하거나 단순화된 왼쪽 정렬 컨테이너를 사용하여 단일 열 스택으로 조기에 축소합니다.
- 모바일 (<768px): 엄격한 1열 스택. 스크롤 시 활성 모바일 고정 구매 서랍이 트리거됩니다.
가격 표시 전략
- 할인 표시: 활성 할인 가격을 대비가 높은 빨간색 또는 브랜드 볼드(최소 24px/
1.5rem)로 렌더링합니다. 정상 가격(MSRP)은 취소선과 함께 흐린 회색으로 옆에 렌더링하고, 절약 금액(예: "$30 절약" 또는 "-25%")을 나타내는 컴팩트한 단색 채움 알약 배지를 포함하여 인지된 가치를 극대화합니다. - 표준 표시: 활성 가격을 굵은 중립-다크/중립-라이트(기본 본문 제목 색상과 일치)로 렌더링합니다.
제약 조건
- 접근성 (WCAG AA 최소 기준):
- SC 2.4.11 포커스 가려짐 방지: 포커스 가능한 변형 알약 또는 수량 버튼이 고정 헤더나 모바일 하단 구매 서랍에 의해 가려지지 않도록 합니다. 적절하게 전역
scroll-margin-top및scroll-margin-bottom을 사용합니다. - SC 2.5.8 대상 크기: 모든 변형 선택기, 견본 원 및 수량 증분 트리거(
+/-)는 최소 24x24px의 탭 대상과 명확한 분리를 제공해야 하며, 터치스크린에서는 44x44px여야 합니다. - 대비 AA: 기본 텍스트, 가격 및 선택된 테두리 상태는 최소 4.5:1의 대비 비율을 유지해야 합니다. 색상 견본 원에는 색상에만 의존하는 것을 방지하기 위해 텍스트 레이블(인접하거나 접근 가능한 도구 설명/화면 판독기 텍스트로)이 함께 제공되어야 합니다(SC 1.4.1 색상 사용).
- SC 2.4.11 포커스 가려짐 방지: 포커스 가능한 변형 알약 또는 수량 버튼이 고정 헤더나 모바일 하단 구매 서랍에 의해 가려지지 않도록 합니다. 적절하게 전역
- 누적 레이아웃 이동(CLS) 유지:
- 항상 제품 제목, 이미지 컨테이너 및 동적 알림 상자에 공간을 예약합니다. 동적 리뷰나 재고 카운터가 로드될 때 콘텐츠가 점프하는 것을 방지하기 위해 스켈레톤 상태(
skeleton-state-system) 또는 명시적 치수를 사용해야 합니다.
- 항상 제품 제목, 이미지 컨테이너 및 동적 알림 상자에 공간을 예약합니다. 동적 리뷰나 재고 카운터가 로드될 때 콘텐츠가 점프하는 것을 방지하기 위해 스켈레톤 상태(
- 동적 뷰포트 높이: 모바일 고정 구매 서랍은 환경 안전 영역(
env(safe-area-inset-bottom))을 존중하여 물리적 홈 스와이프 버튼이 기본 체크아웃 CTA와 충돌하지 않도록 해야 합니다.
일반적인 실패 패턴
- "들쭉날쭉한 구매 상자" 이동: 제품에 따라 크기 또는 색상 변형 버튼의 줄 바꿈이 다르게 발생하여 기본 "장바구니에 담기" CTA가 동적으로 위아래로 점프합니다.
- 색상 전용 맹점: 레이블이 지정되지 않은 색상 원을 견본으로 사용. 색맹 사용자는 녹색과 갈색 견본을 구분할 수 없으며, 명시적인 레이블 텍스트가 연결되지 않으면 화면 판독기는 "색상 버튼"만 읽습니다.
- 모바일 가상 키보드 차단: 모바일 화면에서 하단 고정 막대를 배치하여 모바일 가상 키보드가 확장될 때 양식 필드를 차단하거나 겹치게 하여 사용자를 가둡니다.
- 이미지 종횡비 점프: 기본 갤러리 디스플레이에 명시적인 종횡비를 선언하지 않아 사용자가 가로 및 세로 제품 이미지 사이를 전환할 때 전체 레이아웃 열이 축소 및 확장됩니다.
- 이중 스크롤바 잠금: 왼쪽 고정 열을 너무 높게 설정하거나 오버플로되도록 하여 왼쪽 열이 작은 창 내에서 독립적으로 스크롤되고 서로 인접한 이중 스크롤바를 생성합니다.
검증 기준
- 이중 패널 설정: 데스크톱 레이아웃에는 왼쪽 고정 미디어 열과 오른쪽 스크롤 가능 구매 상자 열이 깔끔한 1px 테두리 또는 명확한 공백 분할과 함께 있습니다.
- 선형 모바일 계단식: 모바일 뷰포트는 그리드를 단일 열 스택으로 축소합니다.
(원본이 잘렸습니다. 전체 번역을 위해 전체 내용을 제공해 주세요.)