아모레퍼시픽 뷰티몰 (에이피 뷰티)
흰 지면과 검정 잉크 두 색으로만 짓고, 상세는 폭 624px 한 줄기로 이미지와 카피를 번갈아 쌓는다.
아모레퍼시픽 그룹의 스킨케어 커머스 사이트로, 흰 지면과 검정 잉크 두 색만으로 화면을 짓습니다. 상품 상세는 폭 624px 한 줄기로 좁혀 전폭 이미지 밴드와 48px 국문 카피 블록을 예닐곱 번 번갈아 쌓아 내려가고, 임상 수치도 원형 배지 격자로만 보여줍니다. 국문 제목이 50~54px까지 커지지만 큰 글자에도 자간을 조이지 않고 양수 한 값으로 고정하는 점은 참고보다 반례 쪽입니다. 이미지가 글보다 많은 커머스 상세 페이지를 설계할 때 볼 만합니다.
https://www.ap-beauty.comColor Palette
Primary
Label
Line
Background
Static
Accent
Typography
Noto Sans KR · 300 / 400 / 500 / 700한글 전량 — display·heading·body·ui·caption
Futura PT Web · 400 / 500 / 700라틴 display·숫자·기호 (한글 없음)
Montserrat · Open Sans · Nanum Gothic · Red Hat Display · 400 / 500 / 600 / 700요청되었으나 렌더 0글리프
Type Scale1440 layout 기준
display56px · 400 · 1.1
다람쥐 헌 쳇바퀴
h1-ko54px · 400 · 1.1
다람쥐 헌 쳇바퀴
h2-ko50px · 400 · 1.1
다람쥐 헌 쳇바퀴
h348px · 500 · 1.25
다람쥐 헌 쳇바퀴
h432px · 700 · 1.5
다람쥐 헌 쳇바퀴
product-title28px · 400 · 1.2
다람쥐 헌 쳇바퀴
lead20px · 300 · 1.85
다람쥐 헌 쳇바퀴
body16px · 400 · 1.5
다람쥐 헌 쳇바퀴
label14px · 400 · 1.5
다람쥐 헌 쳇바퀴
caption13px · 400 · 1.4
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Noto Sans KR (Google, wght 300/400/500/700) — 한글 16,232글리프의 99.9%(Noto Sans KR 10,748 66.2% + Noto Sans Korean Light 3,100 19.1% + Noto Sans CJK KR Medium 2,370 14.6%). Futura PT Web 계열은 14글리프(0.1%)뿐 — 이전 집계의 19.3%는 혼용 노드를 통째로 센 허수였다 |
| hangulWeights | 400 Noto Sans KR 10,016 · 300 Noto Sans Korean Light 3,100 · 500 Noto Sans CJK KR Medium 2,370 · 700 Noto Sans KR 732 (Futura PT Web 400 13 · Medium 700 1은 잔여) |
| body | 16px w400 lh1.50 자간 +0.48px(+3.0%) — 57스타일 중 count 31로 최다 |
| sub | 20px w300 lh1.85 (+2.4%) · 24px w300 lh1.80 — 리드 문단은 300 웨이트로 내린다 |
| label | 14px w400 lh1.50 uppercase(count 26) · 14px w300 lh1.40 카테고리 라벨(count 16) · 13px w300 자간 0.39px(count 9) |
| mixing | 한 줄 안에서 갈린다. 선언 `futura-pt, noto-sans-cjk-kr, sans-serif` 한 스택으로 두고 브라우저 폴백에 맡겨, 브랜드 코드·수치·기호는 Futura PT Web이, 한글은 Noto Sans KR이 그린다 — 'A.O.트리플 디펜스 에어리 선 세럼 SPF50+ / PA++++' 28px/400에서 라틴 23자 Futura + 한글 12자 Noto, '세럼 & 에센스' 20px/500에서 앰퍼샌드·공백 3자 Futura + 한글 5자 Noto. 별도 국문 폰트 선언 없이 한 스택으로 국영문을 처리하는 방식이다 |
| hangulHeadings | 있다. 홈 히어로 h3 50px/400 '입체 탄력 커버로 오래 지속되는 피부 광채'(검정 지면 900px), 홈 섹션 제목 54px/400 '새로운 차원의 피부 과학 기술'·'독자 특허 성분'·'결과를 검증하는 클리니컬 테스트', 홈 제품 밴드 strong 50px/400 3개, 상세 카피 헤드 48px/500 '광노화를 트리플 레벨에서 원천 케어' 등. 전부 Noto Sans KR 렌더 |
| verdict | 국문 히어로·대형 제목 레퍼런스로 유효하다 — 50·54px 국문 디스플레이가 웨이트 400에 자간 +0.48px(+0.9%), 행간 1.10으로 조판된다. 다만 큰 글자에도 양수 자간을 그대로 쓰는(조이지 않는) 방식이라, 국문 디스플레이의 자간 처리 사례로는 반례 쪽에 가깝다. 본문 16/400/1.50과 리드 20/300/1.85의 웨이트 대비는 그대로 쓸 만하다 |
| rendered | Noto Sans KR ×10748 · Noto Sans Korean Light ×3100 · Noto Sans CJK KR Medium ×2370 · Futura PT Web ×13 · Futura PT Web Medium ×1 |
영문 · Latin영문 전용
| latinFont | Futura PT 5,622글리프(62.8%) · Noto Sans Korean 1,581글리프(17.7%) · Noto Sans KR 1,372글리프(15.3%) · Noto Sans CJK KR 378글리프(4.2%) |
| latinWeights | 실측 페이스 Medium · Light |
| share | 라틴 8,953글리프 / 한글 16,232글리프 — 지면의 35.5%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Futura PT를 쓰는 단: display 56px/400 · h3 48px/500 · product-title 28px/400 |
| mixing | 국영문 혼용 노드 486개(전체 1,462개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Futura PT 영문 전용(62.8% · 최상단 디스플레이 독점) |
| verdict | 영문 전용 서체가 있다 — Futura PT 라틴 62.8% / 한글 0.1% · 최상단 디스플레이 독점. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 56px) |
| sharedWithKorean | 국문과 같은 서체: Futura PT · Noto Sans Korean · Noto Sans KR · Noto Sans CJK KR |
| rendered | Futura PT Web ×3214 · Futura PT Web Medium ×2408 · Noto Sans Korean Light ×1581 · Noto Sans KR ×1372 · Noto Sans CJK KR Medium ×378 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 8px | |
| Max width | 1320px | |
| Section gap | 상품 상세 카피 블록 상하 80px(패딩 79.9999px ×97) | |
| Header | 156px fixed | |
| Content Widths | 홈 1232(후보 1232×8·1280×8·1320×5·1168×4) · 카테고리 목록 1320(1320×5·1280×4·892×2) · 상품 상세 624(624×94~185·720×41~63·1008×5~9) | |
| Grid List | 카테고리 상품 그리드 5행×4열, 아이템 302×509, 거터 24, radius 0 (category-id-32 실측) | |
| Grid Home | 추천 상품 6×1 411×621 가로 스와이퍼(홈 y970 h1679, 이미지 30장) | |
| Grid Stats | 임상 배지 5×3 또는 3×3, 아이템 192×192, 거터 24, radius 2000px, bg #FFFFFF | |
| Grid Ritual | 상세 말단 교차판매 6열×6행 312×637, 거터 0 | |
| Card Padding | 상세 스펙 행 624×26~185(1열), 히어로 옵션 행 330×83~117 5행 | |
| Button Padding | '온라인 몰 바로가기' 0 0 0 20px · 'MORE INFO' 18px 123px(1종) / 나머지 0 |
Border Radius
| Role | Value | Preview |
|---|---|---|
| square | 0px | 0회 · 기본값. 버튼 7종 전부 r 0, 카테고리 카드 r 0px |
| small | 3px | 4회 · 작은 배지(span) |
| standard | 10px | 106회 · 썸네일·태그(span) — 0을 뺀 최다 |
| circle | 50% | 50회 · 원형 아이콘·인디케이터(span) |
| circle-btn | 100% | 9회 · 원형 버튼(button) |
| pill | 2000px | 22회 · 임상 결과 원형 배지 192×192(div) — 정사각에 2000px를 줘 원을 만든다 |
Guidelines
Do
- 지면은 #FFFFFF 하나로 두고 강조가 필요한 구간만 통째로 #000000으로 뒤집는다(홈 히어로 900px · 클리니컬 밴드 720px)
- 국문 대형 제목을 쓴다 — 50px/400(히어로)·54px/400(섹션)이 Noto Sans KR로 실제 렌더된다
- 자간은 0.48px 한 값으로 통일한다(57스타일 중 51). 크기별 조정을 하지 않는 것이 이 사이트의 규칙이다
- 상세는 폭 624px 한 줄기로 이미지 밴드(405·540·675·720)와 카피 블록(패딩 80/80)을 번갈아 쌓는다
- 수치는 192×192 원형 배지(radius 2000px, 거터 24) 3×3 또는 5×3으로만 보여준다
- 경계는 1px 선으로만 — rgb(153,153,153) 102회가 기본이고 보조는 rgb(232,232,232)·rgb(214,214,214)
- 본문 회색은 #444649(9.47:1)까지만 내린다. 그 아래 #757575는 4.61:1로 큰 글자 전용
Don't
- 그림자로 띄우지 않는다 — box-shadow 3종 전부 blur 0·spread 0이라 밑줄(0 1px)·언더바(0 14px·0 18px)지 깊이가 아니다
- 골드 #9A833E를 텍스트·CTA에 쓰지 않는다(3.69:1 AA 미달, 실사용도 링크 9회뿐)
- #AAAAAA(2.32:1)·#DDDDDD(1.36:1)·#707984 on #FFFFFF(4.41:1)를 읽는 텍스트에 쓰지 않는다 — WCAG 27쌍 중 8쌍이 AA 미달이다
- 선언 스택만 보고 Futura PT로 한글을 조판하지 않는다 — 한글 렌더가 16,232글리프 중 14개(0.1%)라 사실상 전부 Noto Sans KR로 떨어진다
- 라운드를 남발하지 않는다 — 버튼 7종·카테고리 카드 전부 radius 0이고 곡률은 썸네일 10px과 배지 2000px 두 곳뿐
- 커스텀 이징을 쓰지 않는다(ease 1,147회 대 ease-in-out 11 · linear 9 · ease-out 1)
- 상세 본문 폭을 넓히지 않는다 — 624px가 94~185회로 압도적이고 다음 후보 720px은 41~63회다
