라네즈
폴드는 영문 Gellix 60px과 1440×564 슬라이드가 맡고, 국문은 폭 624px 상세페이지로 내려가 112px 번호 마커와 함께 3만 픽셀을 걷는다.
라네즈 한국은 홈과 상품 상세가 전혀 다른 두 사이트처럼 만들어진 뷰티 커머스입니다. 홈 폴드는 영문 Gellix 60px 한 줄과 1440×564 슬라이드가 차지하고 국문은 26px 상품명으로 물러서지만, 상품 상세로 들어가면 폭 624px 한 줄기에 112px 번호 마커와 48~52px 국문 카피가 2만~3만 픽셀 동안 반복됩니다. 국문 히어로를 찾는다면 맞지 않고, 국내 커머스의 긴 상세페이지 조판을 볼 때 표본이 넉넉합니다. 다만 한글 서체가 층마다 Arita·Pretendard·Noto Sans KR 셋으로 갈리고 폰트 파일을 87개나 싣는 점은 참고가 아니라 반면교사입니다.
https://www.laneige.com/kr/koColor Palette
Primary
Label
Line
Background
Accent
Typography
Arita Dotum · 400 / 700 / 900한글 본문·글로벌 nav·상세 본문
Gellix · 300 / 400 / 500 / 600 / 700라틴 디스플레이·nav 라틴
Noto Sans KR · 500 / 600 / 700상품 상세의 굵은 국문 카피
Pretendard · 400 / 500 / 700홈 본문·홈 국문 상품명
Brandon Grotesque · 700선언만 있고 사실상 미사용
Type Scale크기 기준은 layout
numeral112px · 600 · 1
Handgloves 123
hero60px · 700 · 1
Handgloves 123
display-ko52px · 700 · 1.31
다람쥐 헌 쳇바퀴
band-en48px · 700 · 1.04
Handgloves 123
copy-ko48px · 600 · 1.25
다람쥐 헌 쳇바퀴
page-title40px · 400 · 1.2
Handgloves 123
product-name29px · 400 · 1.4
Handgloves 123
card-ko26px · 700 · 1.15
다람쥐 헌 쳇바퀴
ui17px · 400 · 1.15
Handgloves 123
body16px · 400 · 1.15
Handgloves 123
국문 · Korean
| hangulFont | 한 서체가 아니라 셋이다. 한글 24,317글리프 중 Arita Dotum 계열 14,166(58.3%: Medium 13,202 · SemiBold 956 · Bold 8) · Noto Sans KR 계열 6,623(27.2%: Bold 5,228 · Medium 1,395) · Pretendard 계열 3,494(14.4%: Regular 2,958 · Medium 536) · Gellix SemiBold 34(0.14%). 전부 self-host 웹폰트라 OS 의존은 없다(Apple SD Gothic Neo 0글리프). 선언 1순위는 Arita이고 실제 1순위도 Arita지만, 층마다 갈린다 — 홈 한 페이지만 보면 Pretendard 1,747/1,909(91.5%)이고 글로벌 nav는 Arita, 상품 상세는 Arita 2,256~2,436 + Noto Sans KR Bold 467~2,161이다 |
| hangulWeights | 400: Arita Medium 13,202 / Pretendard 2,202 · 500: Noto Sans KR Medium 1,395 / Pretendard Medium 536 · 600: Noto Sans KR Bold 4,555 / Arita SemiBold 12 · 700: Arita SemiBold 944 / Pretendard 756 / Noto Sans KR Bold 673 · 900: Arita Bold 8. CSS 600은 사실상 Noto Sans KR 전용 단이고, 700은 세 서체가 나눠 가진다 |
| body | 16px/400 lh1.15 자간 −0.4px(raw body 최다 40건) · 20px/400 lh1.15 리드(18건). 행간이 1.15로 짧아 국문 여러 줄 단락에는 부담이 있다 |
| sub | 홈 국문 상품명 26px/700 lh1.15 자간 −0.26px(1440 실측 6건, y922) · 상세 상품명 29px/400 lh1.40 자간 −0.4px |
| label | UI 라벨 17px/400 lh1.15(25건) · nav 18px/400 lh3.33 자간 −0.4px(20건) · 각주 18px/500~600 |
| mixing | 한 줄 안에서 글자 단위로 갈린다 — nav '베스트 & 신상품' 18px/400은 declared 'Gellix, Arita, sans-serif'인데 한글 6자를 Arita Dotum Medium이, 라틴 3자를 Gellix가 그린다(fonts.json 샘플). 홈 캐러셀은 영문 48px/700 + 국문 26px/700 두 줄을 위아래로 쌓아 층을 나눈다. 혼용 노드는 913개(전체 2,480개)로 프로브 재측정을 거쳤다 |
| hangulHeadings | 있다, 단 폴드에는 없다. 홈 국문 최대는 26px/700 상품명이고 60px 히어로·48px 2단·38px 섹션 제목은 전부 영문 Gellix다. 국문 대형 제목은 상품 상세에만 있다 — 52px/700 lh1.31 자간 −2.6px(product-id-67 '피부의 피로 잡는 피로회복 미백에센스' 등 raw ×4), 48px/600 lh1.25(product-id-39 '초밀착 다각도 모공 커버'·product-id-id '스무스 립, 스무디 글로우!'), 40px/400 카테고리 h1 '스킨케어' |
| verdict | 국문 히어로 레퍼런스로는 부적합하다 — 폴드 국문 천장이 26px이고 60px 자리는 영문 Gellix 전용, 히어로 자체가 1440×564 슬라이드다. 유효한 것 셋: ① 국내 커머스의 긴 상세페이지 조판 — 폭 624px 한 줄기에 112px/600 번호 마커와 48~52px 국문 카피, 임상 수치 카드, 리뷰 그리드를 19,473~32,907px 동안 쌓는 표본이 5페이지 있다 ② 국문 대형 카피의 −5.0% 자간(52px ls−2.6px)과 영문 대문자의 +3.2% 트래킹(38px ls+1.2px)이 한 사이트에서 대비된다 ③ 반면교사 — 한글 서체 3계열이 층마다 갈리고 폰트 파일 87개 중 상당수가 렌더 0글리프다 |
| rendered | Arita-dotum(TTF)-Medium ×13202 · Noto Sans KR Bold ×5228 · Pretendard ×2958 · Noto Sans KR Medium ×1395 · Arita-dotum(TTF)-SemiBold ×956 · Pretendard Medium ×536 · Gellix SemiBold ×34 · Arita-dotum(TTF)-Bold ×8 |
영문 · Latin영문 전용
| latinFont | Gellix 6,101글리프(52.0%) · Arita-dotum(TTF)-Medium 3,923글리프(33.4%) · Pretendard 740글리프(6.3%) · Noto Sans KR 455글리프(3.9%) |
| latinWeights | 실측 페이스 Medium · SemiBold · Light · Bold |
| share | 라틴 11,736글리프 / 한글 24,317글리프 — 지면의 32.6%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Gellix를 쓰는 단: numeral 112px/600 · hero 60px/700 · band-en 48px/700 |
| mixing | 국영문 혼용 노드 913개(전체 2,480개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Gellix 영문 전용(52.0% · 선언됨 · 최상단 디스플레이 독점) |
| verdict | 영문 전용 서체가 있다 — Gellix 라틴 52.0% / 한글 0.1% · 최상단 디스플레이 독점. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 112px) |
| sharedWithKorean | 국문과 같은 서체: Gellix · Arita-dotum(TTF)-Medium · Pretendard · Noto Sans KR |
| rendered | Arita-dotum(TTF)-Medium ×3923 · Gellix ×2345 · Gellix SemiBold ×2305 · Gellix Medium ×835 · Gellix Light ×616 · Pretendard ×420 · Pretendard Medium ×320 · Noto Sans KR Bold ×295 · Arita-dotum(TTF)-SemiBold ×285 · Noto Sans KR Medium ×160 · ×158 · Brandon Grotesque Bold ×72 · Apple Color Emoji ×2 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | regular(홈) × spacious(상세) | |
| Base unit | 4px | |
| Max width | 1360px | |
| Section gap | 홈은 섹션 padding-top 150px ×3 | |
| Header | 61px fixed | |
| Content Widths | 홈 1360 · 카테고리 1180 · 상품 상세 624(네오쿠션·바운시앤펌·립슬리핑) 또는 720(래디언-C) — 상세로 갈수록 좁아진다 | |
| Grid Home | NEW ARRIVALS 4열 253×414 · LANEIGE BEAUTY & LIFE LAB 6장 1440×691 전폭 | |
| Grid Category | 상품 카드 4열, 행 높이 445px, 16개 = 4행 | |
| Grid Review | 리뷰 3열 323×206~391, gap 16, 9장, 바탕 #F7F7F7 1,754px | |
| Card Padding | 상세 포인트 카드 192×76·192×192 gap 24 | |
| Button Padding | 구매 15×25 · 정렬 10×15 · 카테고리 10 45 10 15 |
Border Radius
| Role | Value | Preview |
|---|---|---|
| hairline | 3px | 9회 · 작은 div 모서리 |
| small | 10px | 18회 · 드롭다운 listbox |
| medium | 24px | 22회 · 버튼 |
| medium | 26.672px | 16회 · 버튼(다른 계열) |
| large | 32px | 30회 · 이미지 블록·카드 |
| large | 35px | 9회 · 버튼 |
| pill | 50px | 2회 · 칩 |
| pill | 200px | 32회 · 리스트 아이템 알약 |
| pill | 900px | 8회 · 홈 하단 원형 블록(658×658·725×725) |
| circle | 50% | 46회 · svg·아이콘 |
| circle | 100% | 36회 · 슬라이드 닷 20×20 |
Guidelines
Do
- 국문 대형 카피는 상세페이지에 두고 폭 624px 한 줄기로 좁힌다 — 112px/600 번호 마커로 3장 끊고 그 사이를 48px/600 국문과 이미지 밴드로 채운다
- 국문 큰 제목은 자간을 조인다 — 52px/700에 −2.6px(−5.0%), 26px/700에 −0.26px(−1.0%)
- 영문 대문자 디스플레이는 반대로 벌린다 — 38px/700 +1.2px(+3.2%), 48px/700 +0.05px
- 슬라이더 페이지네이션은 20×20 원형 닷(r100%, 1px #5F5F5F 테두리)에 gap 36으로 통일한다
- 임상 수치는 본문에 섞지 말고 3열 192×192 카드와 48~64px 숫자로 따로 세운 뒤 18px/600 각주로 출처를 단다
- 본문 텍스트는 #5F5F5F(3,425회)와 #444444(9.74:1)까지만 내려간다
- 상세 섹션 상하 여백은 80/80, 홈 섹션 상단 여백은 150으로 두 리듬을 구분한다
Don't
- 폰트 파일을 87개 싣지 않는다 — Black Han Sans·Gmarket Sans 6파일은 렌더 0글리프, Brandon Grotesque는 72글리프뿐이다
- 한글 서체를 층마다 바꾸지 않는다 — 이 사이트는 nav·상세가 Arita Dotum, 홈이 Pretendard, 굵은 카피가 Noto Sans KR로 갈려 같은 화면 안에서 국문 인상이 달라진다
- #898989를 본문에 쓰지 않는다(3.24:1·3.50:1 AA 미달, 56회)
- 액션 블루 #6691FF(2.97:1)와 포인트 오렌지 #F54A00(3.58:1)을 텍스트 색으로 쓰지 않는다 — 배경·그래프에만
- #212123 어두운 지면 위에 #000000 글자를 얹지 않는다(1.31:1, 18회)
- 버튼 라운드를 24·26.672·35px 세 값으로 늘리지 않는다 — 한 값으로 잠근다
- 국문 히어로를 이 사이트에서 베끼지 않는다 — 폴드 국문 천장이 26px이고 60px 자리는 영문 전용이다
