설화수 Sulwhasoo
흰 지면 위 각진 상자 하나 없이, 74px 국문 제목과 이미지 두 장을 34,000px 동안 반복한다.
아모레퍼시픽 럭셔리 스킨케어 브랜드의 커머스입니다. 흰 지면에 라운드가 사실상 0이고 그림자도 거의 없어 모서리가 각져 있으며, 색은 회색·검정 텍스트에 로즈 한 점이 전부입니다. 상품 상세가 '이미지 두 장 + 74px 국문 제목' 블록을 3만 픽셀 넘게 반복하는 구조라, 국문 대형 제목이 사진과 맞붙는 브랜드 스토리 조판 참고로 표본이 넉넉합니다. 단 홈 히어로 제목은 36px로 작고 세리프 국문은 선언만 있을 뿐 실제로 그려지지 않으니, 국문 세리프를 찾는다면 다른 곳을 보셔야 합니다.
https://www.sulwhasoo.comColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Noto Sans KR · 300 / 400 / 500 / 700 / 800 / 900한글 전부 — display·heading·body·ui
Theinhardt · 300 / 400 / 500 / 600 / 700 / 800라틴 display·수치 (라틴 전용)
Fhhswaamuvtzpvgjbigsigklacl / Cdkxbkvrzvglcyctipygosadrmd / Qthgesbcthcyayofunajmetckhw · 500 / 700 / 800PDP 전용 (라틴 971 + 한글 6글리프)
Arita Buri (아리따 부리) · 300 / 600선언만 됨 — 실제 렌더 0글리프
fontello · 400아이콘
Apple SD Gothic Neo · 400OS 폴백
Type Scale자간은 크기와 무관하게 -0
display-num-xl140px · 800 · 1
Handgloves 123
display-num95px · 600 · 1
다람쥐 헌 쳇바퀴
display-ko74px · 800 · 1.22
다람쥐 헌 쳇바퀴
display-ko-light60px · 300 · 1
다람쥐 헌 쳇바퀴
statement54px · 800 · 1.59
다람쥐 헌 쳇바퀴
h1-hero36px · 700 · 1.5
다람쥐 헌 쳇바퀴
h1-product34px · 500 · 1.2
다람쥐 헌 쳇바퀴
h232px · 700 · 1.5
다람쥐 헌 쳇바퀴
h3-strip30px · 700 · 3
다람쥐 헌 쳇바퀴
label20px · 700 · 1.5
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Noto Sans KR (self-hosted /wvl/fonts, Light·Regular·Medium·Bold·Black + Medium-subset 9파일). CDP 실측 한글 19,795글리프의 99.8%(19,749). 나머지 46글리프는 이름 없는 서브셋 37 · Fhhsw 3 · Cdkx 3 · Theinhardt 계열 3으로 흩어져 있다 — 이전 측정에서 한글 서체처럼 보이던 이름 없는 서체 1,903(10.2%)·Fhhsw 557·Theinhardt 499는 전부 혼용 노드의 라틴이 한글 버킷에 섞인 허수였다 |
| hangulWeights | Regular 10,115(51.1%) · Light 3,384(17.1%) · Thin 2,744(13.9%) · Medium 2,433(12.3%) · Bold 1,073(5.4%). 선언 웨이트보다 한 단계 가벼운 페이스로 그려진다 — CSS 300→Light 1,677, 400→Light 1,707 + Thin 738, 500→Regular 10,115, 600→Medium 1,181, 700→Medium 1,252, 800→Bold 1,073 |
| body | PDP 본문 22~42px(대형 스토리 조판), 리스트 카드 본문 13~14px, 헤더 nav 15px/400 Noto Sans KR Light — 같은 사이트 안에서 본문 크기가 3배 넘게 벌어진다 |
| sub | PDP 스토리 부제 26px/700 lh1.00 ls-0.7px(×4) · 26px/600 lh1.54 ls-0.78px · 링크 26px/400 lh1.50(×4) |
| label | 20px/500 ls-0.7px 링크 ×12 · 20px/700 lh1.50 ls-0.7px h1 ×13 · 카드 제목 18px/700 |
| mixing | 선언은 라틴 우선(Theinhardt, NotoSans, 'Malgun Gothic', …) 순서지만, 실측은 그 우선순위가 거의 작동하지 않는다고 말한다 — 라틴 14,978글리프 중 Noto Sans KR이 8,389(56.0%)로 1순위이고 Theinhardt 계열은 748(5.0%)뿐이며 그마저 자음생크림콜라겐마스크 PDP 한 페이지에 몰려 있다. 나머지 라틴은 이름 없는 서브셋 4,869(32.5%)와 PDP 서브셋(Fhhsw 658 · Cdkx 301)이 가져간다. 즉 한 줄에 국영문이 섞여도 대부분 국문 서체 하나로 조판된다. PDP h1은 '여윤팩 Overnight Recharging Mask'처럼 국문+영문을 한 줄에 붙인다 |
| hangulHeadings | 있다. 국문 최대는 74px/800 lh1.22 ls-2.22px(-3.0%)로 PDP마다 8~17회 반복하고(여윤팩 '설화수 여윤팩' y1091, 윤조아이세럼 '설화수 윤조아이세럼' 72px/800 y1091), 홈 히어로는 36px/700 '선물은 설화수'다. 그보다 큰 95~140px은 전부 라틴 숫자('93.7%'·'500'·'-5.0*°C')다 |
| verdict | 국문 대형 디스플레이 레퍼런스로 유효하다 — 74px/800 자간 -3%, 이미지 2장과 붙는 스토리 조판이 PDP 4페이지에서 40회 넘게 반복돼 표본이 충분하다. 다만 세리프 국문 조판을 찾는다면 이 사이트가 아니다(아리따부리 선언 3파일, 재측정에서도 렌더 0글리프). 국문 조판은 Noto Sans KR 한 계열로 끝난다 — 국문 서체 다양성 표본으로는 얇다. 홈 히어로는 36px으로 작아 국문 히어로 레퍼런스로는 약하다 |
| rendered | Noto Sans KR Regular ×10115 · Noto Sans KR Light ×3384 · Noto Sans KR Thin ×2744 · Noto Sans KR Medium ×2433 · Noto Sans KR Bold ×1073 · ×37 · Cdkxbkvrzvglcyctipygosadrmd ×3 · Fhhswaamuvtzpvgjbigsigklacl ×3 · Theinhardt Bold ×2 · Theinhardt ×1 |
영문 · Latin영문 전용
| latinFont | Noto Sans KR 8,389글리프(56.0%) · 4,869글리프(32.5%) · Theinhardt 748글리프(5.0%) · Fhhswaamuvtzpvgjbigsigklacl 658글리프(4.4%) |
| latinWeights | 실측 페이스 Regular · Light · Medium · Bold · Thin |
| share | 라틴 14,978글리프 / 한글 19,795글리프 — 지면의 43.1%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Noto Sans KR를 쓰는 단: display-ko 74px/800 · display-ko-light 60px/300 · statement 54px/800 · h1-hero 36px/700 · h1-product 34px/500 · h2 32px/700 · h3-strip 30px/700 · label 20px/700 |
| mixing | 국영문 혼용 노드 678개(전체 2,140개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Theinhardt 영문 전용(5.0% · 선언됨 · 최상단 디스플레이 독점) · 이름 미보고 서체() 영문 전용(32.5%) |
| verdict | 영문 전용 서체가 있다 — Theinhardt 라틴 5.0% / 한글 0.0% · 최상단 디스플레이 독점 · 이름 미보고 서체() 라틴 32.5% / 한글 0.2%. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 140px) |
| sharedWithKorean | 국문과 같은 서체: Noto Sans KR · · Theinhardt · Fhhswaamuvtzpvgjbigsigklacl |
| rendered | ×4869 · Noto Sans KR Regular ×4434 · Noto Sans KR Light ×2574 · Noto Sans KR Medium ×1065 · Fhhswaamuvtzpvgjbigsigklacl ×658 · Theinhardt ×571 · Cdkxbkvrzvglcyctipygosadrmd ×301 · Noto Sans KR Bold ×247 · Theinhardt Bold ×177 · Noto Sans KR Thin ×69 · Qthgesbcthcyayofunajmetckhw ×12 · Apple SD Gothic Neo ×1 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 8px | |
| Max width | 1100px | |
| Section gap | 홈 120px 균일(507→627 | |
| Header | 123px absolute (홈) / relative (나머지 9페이지) | |
| Grid Home | 3열 448px, 거터 24px (448×3+24×2=1392), 카드 448×565, 12개 2행 | |
| Grid List | 4열 카드 409px 높이, y 532/941/1350/1759로 409px 간격 반복 (16개 4행, 1440) | |
| Grid Cross | PDP '함께 쓰면 좋은 제품' 3×3 220×261 거터 20, 전 PDP 동일 | |
| Grid Filter | 리스트 페이지 필터 칩 8×8 68×38, 거터 0 | |
| Card Padding | 리스트 카드 padding 8/8 · PDP 구매영역 40/80 | |
| Button Padding | 0px ('구매하러 가기'·'오프라인 매장 안내'·'본문 바로가기') / 0 12px (탭 '제품상세'·'리뷰(265)') / 1px 7px 0 (슬라이더) | |
| Breakpoints | 1780 · 1760 · 1680 · 1660 · 1553 · 1300 · 1280 · 1170 · 1025 · 1024 · 1023 · 1000 · 950 · 890 (14개) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| hairline | 1px | 40회 · a 태그 — 사실상 각진 모서리 |
| small | 6px | 1회 · div 1회 관측 |
| standard | 8px | 5회 · div 5회 — 사이트에서 가장 큰 사각 라운드 |
| — | 13px | 1회 · i 태그 1회 관측 |
| circle | 50% | 14회 · 슬라이더 버튼·아이콘 |
Guidelines
Do
- 국문 대제목은 74px/800 lh1.22 자간 -2.22px(-3.0%)로 세운다 — 이 사이트의 국문 조판 기준점이고 PDP마다 8~17회 반복된다
- 상자는 각지게 둔다. 라운드 관측치가 1px×40·8px×5·50%×14뿐이고 버튼 7종이 전부 r 0px이다
- 주/보조 버튼은 같은 상자(padding 0, r 0, border 1px solid #000)에 bg #222222/#FFFFFF만 뒤집어 만든다
- 지면 전환은 색면으로 한다 — #FFFFFF 기본, 홈 히어로 #EEEEEE, 성분 #F3F3F3, 마사지 #F3F0EE, 리츄얼 #FDF2E5(#000 위 19.01:1)
- PDP 섹션은 간격 0으로 붙이고 내부 padding 200~270px으로 숨을 준다(여윤팩 270/269, 탄력크림 200/200)
- 콘텐츠 폭은 1100px(후보 1100×168 최다), 홈만 1392px 3열 448/24로 넓힌다
- 본문 회색은 #767676(4.54:1)까지만. #EEEEEE 지면 위에서는 3.91:1로 떨어지니 그 조합을 피한다
Don't
- 세리프로 럭셔리를 내지 않는다 — 아리따부리 3파일이 선언돼 있지만 실제 렌더 글리프는 0이고, 디스플레이는 그로테스크(Theinhardt)와 Noto Sans KR Bold뿐이다
- #BEA2A2(2.37:1)·#FF5100(3.27:1 ×127)·#DF682B(3.41:1)을 소형 텍스트에 쓰지 않는다 — 셋 다 AA 미달이다
- #2F638B를 브랜드 색으로 쓰지 않는다 — semantic.primary로 잡혔지만 9페이지 중 1페이지 93회뿐이다
- 그림자로 띄우지 않는다. 9페이지 통틀어 4종 20회이고 그중 rgb(255,255,255) 0 0 15px 4px 흰 글로우가 2회다. 그라디언트는 0개
- 같은 크기에 웨이트를 흩뿌리지 않는다 — 60px에 300·500·800, 40px에 500·600·700·800이 공존해 raw 92스타일이 됐다(재현하지 말 것)
- 라운드를 8px 이상 주지 않는다 — 8px 5회·13px 1회가 전부이고 나머지는 각진 면이다
- 리스트 페이지에 히어로를 기대하지 않는다 — 카테고리 4페이지 전부 y123부터 260px 배너 이미지와 카드 그리드로 바로 들어간다
