젠틀몬스터
회색 지면 #F3F4F6 위에 1440×756 영상과 24px 제목 하나 — 위계는 글자 크기가 아니라 이미지 면적과 여백 60·80·90px으로 만든다.
젠틀몬스터 한국 스토어는 제목을 키우지 않는 커머스입니다. 히어로가 폭 전체를 쓰는 영상 한 편이고 그 위 제목은 24px, 국문은 30px이 천장이라 위계를 글자 크기가 아니라 이미지 면적과 60·80·90px 여백으로 만듭니다. 국문 히어로가 없는 대신 영문 세리프만 82px 대문자로 크게 쓰고, 한 폰트 스택 안에서 라틴은 라틴 전용 서체가 한글은 산돌 고딕네오가 글자 단위로 나눠 그립니다. 본문과 UI는 12~13px로 아주 작아, 면은 넓고 글자는 작은 조판을 볼 때 참고가 됩니다.
https://www.gentlemonster.com/kr/koColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Sandoll GothicNeo1 04 Rg · 350한글 본문·UI·제목 (weight 350 선언 시)
Sandoll GothicNeo1 TTF · 400한글 본문·제품명 (weight 400 선언 시)
ABC Favorit Book · 350 / 400라틴·숫자 (같은 스택 안에서 글자 단위 분기)
Instrument Serif · 400영문 디스플레이 (대문자)
GentleMonster Serif · 400브랜드 세리프 — 용처 미확인
. · 400이름 없는 폰트 — 라틴 전용, 실체 미확인
Roboto · 400지도 위젯(TMap·Google Maps 컨트롤) 전용
Type ScaleDS 문서 없음 — 스케일은 raw typography
display-serif82.5px · 400 · 1.03
Handgloves 123
h2-feature-ko30px · 400 · 1.27
다람쥐 헌 쳇바퀴
title-serif24px · 400 · 1.12
Handgloves 123
title-ko24px · 400 · 1.12
다람쥐 헌 쳇바퀴
label-upper18px · 350 · 1.22
다람쥐 헌 쳇바퀴
section-title17px · 350 · 1.29
다람쥐 헌 쳇바퀴
h1-product16px · 400 · 1.25
다람쥐 헌 쳇바퀴
nav-body13px · 350 · 1.38
다람쥐 헌 쳇바퀴
link-label12px · 350 · 1.42
다람쥐 헌 쳇바퀴
product-name11px · 400 · 1.45
다람쥐 헌 쳇바퀴
micro10px · 400 · 1.5
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Sandoll GothicNeo1 — 04 Rg 7,197글리프(55.2%) + TTF 5,786(44.3%) = 12,983글리프, 한글 13,048글리프의 99.5%다. 나머지는 Apple SD Gothic Neo 58(0.4%, OS 폴백) · ABC Favorit Book 7(0.1%)뿐이고, 이전 측정에서 한글 서체처럼 보이던 ABC Favorit Book 1,826(17.7%)과 이름 없는 '.' 1,647(16.0%)은 혼용 노드의 라틴이 한글 버킷에 섞인 허수였다(재측정 후 각각 0.1% · 0%). 선언 1순위 __gentleSansLightKo_b62f59·__gentleSansRegularKo_ca70b3는 Next.js next/font/local의 해시 이름이며, 그 파일(/kr/_next/static/media/*.woff2 905개 서브셋)의 내부 이름이 Sandoll GothicNeo1이다. 웹폰트 맞음 — OS 의존 아님 |
| hangulWeights | 350 → Sandoll GothicNeo1 04 Rg 7,123(웨이트 350 한글 7,134 중) · 400 → Sandoll GothicNeo1 TTF 5,786(웨이트 400 한글 5,914 중, 04 Rg 74·Apple SD 54가 나머지). 500 이상 한글 0. 굵기 2단뿐이고 선언 350이 실제로는 04(Regular) 파일을 그린다 |
| body | 13px w350 lh1.38 ls0 (IE 페이지 bodyPx 13, raw ui 13px/350 ×10) · 12px w350 lh1.42 ls0 (PDP·카테고리·스토리 bodyPx 12, raw link 12px/350 ×26) |
| sub | 17px w350 lh1.29 ls0 (섹션 제목·서비스 안내 p ×4) · 24px w400 (카테고리 h1, raw 24px ×8) |
| label | 12px w350 lh1.42 (2차 nav ×26) · 11px w400 lh1.45 (제품명 ×36) · 10px w400 (캡션 ×4) |
| mixing | 글자 단위 분기 — 한 스택(__gentleSansLightKo)이 라틴·숫자는 ABC Favorit Book, 한글은 Sandoll GothicNeo1로 그린다('2026 컬렉션' 12px = Favorit×5 + Sandoll×3, '베지 컬렉션' = Sandoll×5 + Favorit×1). 재측정이 이 분기를 총량으로도 확인했다 — Favorit은 라틴 2,683글리프를 그리면서 한글은 7글리프뿐이다. 영문 디스플레이는 Instrument Serif 82.5px 대문자로 별도 층이며 국문은 그 층에 들어가지 않는다. 컬렉션명·제품명은 영문 원어('Bouquet 02'·'CREPE 01'·'MM201 MSV1') |
| hangulHeadings | 있음, 단 소형. 최대 30px/400 lh1.27 ×3(IE 페이지 h2 '새로운 인텔리전트 아이웨어 디자인 공개'·'독창적 미학을 입은 아이웨어 컬렉션'·'가벼운 실루엣, 매끄럽게 이어지는 AI 경험'), 24px/400 h1 ×1(카테고리 '메종 마르지엘라 ✕ 젠틀몬스터'), 17px/350–400 섹션 제목 ×6(홈·PDP·법무·서비스). 히어로 제목은 전부 영문(홈 24px 'Veggie Collection', 스토리 82.5px 'Bouquet Collection', IE 28px 'Intelligent Eyewear') — 국문 히어로 0 |
| verdict | 국문 히어로·대제목 레퍼런스로는 부적합(국문 천장 30px, 히어로는 영상 1440×756 + 영문 세리프 24px). 유효한 것: ① 소형 국문 UI 조판 — 12–13px/350 자간 0 lh1.38–1.42, 제품명 11px/400 ② 라틴 전용 폰트(Favorit, 한글 7글리프)와 한글 폰트(산돌 고딕네오1, 한글 99.5%)의 글자 단위 혼용 스택 ③ '제목을 키우지 않고 이미지 면적·여백으로 위계를 만드는' 커머스 골격(24px 제목 + 756px 영상) |
| rendered | Sandoll GothicNeo1 04 Rg ×7197 · Sandoll GothicNeo1 TTF ×5786 · Apple SD Gothic Neo ×58 · ABC Favorit Book ×7 |
영문 · Latin자사 라틴
| latinFont | . 3,081글리프(33.1%) · ABC Favorit 2,683글리프(28.8%) · Sandoll GothicNeo1 1,701글리프(18.3%) · Instrument Serif 1,050글리프(11.3%) |
| latinWeights | 실측 페이스 Book |
| share | 라틴 9,302글리프 / 한글 13,048글리프 — 지면의 41.6%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일 단이 라틴 전용 서체로 지정된 곳 없음 — 라틴은 국문 서체 또는 폴백이 그린다 |
| mixing | 국영문 혼용 노드 670개(전체 1,818개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Instrument Serif 영문 전용(11.3% · 최상단 디스플레이 독점) · 이름 미보고 서체(.) 영문 전용(33.1%) · ABC Favorit 영문 전용(28.8%) · GentleMonster Serif 자사 라틴(2.8%) |
| verdict | 영문 전용 서체가 있다 — Instrument Serif 라틴 11.3% / 한글 0.0% · 최상단 디스플레이 독점 · 이름 미보고 서체(.) 라틴 33.1% / 한글 0.0% · ABC Favorit 라틴 28.8% / 한글 0.1% · GentleMonster Serif 라틴 2.8% / 한글 0.0%. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 82.5px) |
| sharedWithKorean | 국문과 같은 서체: ABC Favorit · Sandoll GothicNeo1 · Sandoll GothicNeo1 04 Rg |
| rendered | . ×3081 · ABC Favorit Book ×2683 · Sandoll GothicNeo1 TTF ×1701 · Instrument Serif ×1050 · Sandoll GothicNeo1 04 Rg ×499 · GentleMonster Serif ×265 · Roboto ×22 · Arial ×1 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 4px | |
| Max width | 1320px | |
| Docs width | 648px | |
| Section gap | 60px(홈 히어로 mb-[60px]: 756 → 다음 y 816) | |
| Header | 90px absolute | |
| Grid Home | 신제품 캐러셀 720×720 gap 60 ×45슬라이드 · 베스트셀러 390×663 gap 24 ×18(390×3+24×2=1218, 1320 안 3.3장 노출) | |
| Grid Category | 제품 카드 3열, 카드 높이 635, 행 간격 634–635(y 829→1464→2098), 카드마다 컬러 스와치 점 8×1 gap 2 ×6–7 | |
| Grid Pdp | 갤러리 이미지 957px 풀폭 ×10 세로 적층(9,570px) + 우측 product-info 패널(z-[100]) 9,692px · 유사 프레임 390×572 gap 24 ×34 | |
| Grid Stories | SHOP THE COLLECTION 195×195 4열 gap 0(=780 = max-w-[54.16667vw]) · 슬라이더 1200×600 ×5 gap 0 · 매장 위치 301×59 2열 gap 18 ×7 | |
| Grid I E | 콘텐츠 셸 552/648/616/480 혼용 · FAQ 행 648×54 ×5 r30 · 캐러셀 점 6×6 gap 6 | |
| Grid Stores | 지도(256px 타일 16장) + 매장 리스트 600×112 ×6 좌우 분할, 둘 다 y 90 h 810 | |
| Vw Spacing | 79.488px ×128(=4.14vw@1920 → 59.6px@1440) · 43.008px ×36(=2.24vw → 32.3px@1440) — 여백 일부가 vw 기반 | |
| Card Padding | 카드 padding 0 — 이미지가 카드 전체(반복 컴포넌트 padT/B 0/0 전부) | |
| Button Padding | 0×23 (구매하기 r25) / 0×10 (쇼핑백에 추가하기 r8) / 7×12 (칩 r35) / 12 (구독하기 r50) | |
| Home Content Width | 492 ×3 후보가 1320 ×2보다 많이 잡혔으나 492는 히어로 슬라이더 슬라이드 내부 폭으로 추정(미확인) — 페이지 폭은 다른 6페이지와 같은 1320으로 본다 |
Border Radius
| Role | Value | Preview |
|---|---|---|
| none | 0px | 68회 · 카드·이미지·슬라이드 전부(layout 반복 컴포넌트 r0 — 카테고리 24·홈 2·PDP 2·스토리 6) |
| hairline | 1px | 64회 · span — 스와치 점·구분 요소(미확인) |
| — | 2px | 172회 · '환경 설정 센터 닫기' 버튼 — OneTrust 잔재, 브랜드 UI 아님 |
| — | 3px | 8회 · 관측만 |
| small | 4px | 18회 · span 소형 요소 |
| button | 8px | 31회 · '쇼핑백에 추가하기'·'더 보기'·'수리 서비스 접수하기'·국가 선택 버튼 |
| — | 15px | 10회 · card/div |
| — | 16px | 16회 · dialog/alertdialog — OneTrust 잔재 추정(2.5px ×8도 alertdialog) |
| — | 17px | 8회 · Filter |
| — | 20px | 29회 · span |
| cta-pill | 25px | 11회 · '구매하기' a — 높이 50 알약(pad 0 23) |
| faq-row | 30px | 5회 · IE 페이지 FAQ 행 648×54 |
| chip | 35px | 33회 · 필터 칩 a (pad 7 12) — '메종 마르지엘라'·'프라다' |
| input-pill | 50px | 9회 · 뉴스레터 input·'구독하기' 버튼 |
| circle | 50% | 25회 · 캐러셀 점 6×6·아이콘 버튼 |
| bar | 9999px | 12회 · 홈 히어로 진행바 102×1 ×5 gap 8 |
Guidelines
Do
- 지면은 #F3F4F6, 텍스트는 #111111 하나 — 팔레트 6,118회 대 보조 386회. 회색 톤을 늘리지 말 것
- 제목은 24px에서 멈춘다(홈 히어로 h2 24/400, 카테고리 h1 24/400). 국문 최대 30px(IE 페이지 ×3). 위계는 영상 1440×756·이미지 957px·여백 60/80/90으로
- 카드·이미지는 r0·padding 0·shadow none(반복 컴포넌트 전부). 라운드는 버튼 8·칩 35·CTA 알약 25·구독 50에만
- 국문 UI는 12–13px/350 자간 0 lh1.38–1.42(13px ×26, 12px ×52), 제품명 11px/400(×36)
- 한 줄 안에서 라틴·숫자는 ABC Favorit Book, 한글은 Sandoll GothicNeo1 — '2026 컬렉션' = Favorit×5 + Sandoll×3(총량으로도 Favorit 라틴 2,683 대 한글 7글리프). 이 글자 단위 혼용을 스택으로 재현한다(Favorit 앞, 한글 폰트 뒤)
- 영문 대제목만 세리프 대문자(Instrument Serif 82.5px lh1.03 @1440, vw 기반). 국문엔 세리프를 쓰지 않는다(Instrument Serif·GentleMonster Serif 모두 한글 0글리프)
- 액션 버튼은 #111 배경 + 흰 텍스트 12px/400 r8. 채도 있는 primary를 만들지 않는다(#F7E600 3회뿐)
- 섹션 사이 60/80/90px, 콘텐츠 1320(1440 − 60×2), 문서형 페이지는 648 셸
Don't
- 국문 히어로 대제목을 만들지 않는다 — 이 사이트의 국문은 30px이 천장이고 히어로 제목은 영문 24px·82.5px 세리프다
- #858585를 본문에 쓰지 않는다 (3.34:1 ×70, 3.35:1 ×33, 칩 위 2.86:1 ×18 — 전부 AA 미달)
- 카드에 그림자·라운드·테두리를 주지 않는다 (카드 r0 ×34, 관측된 그림자 6종 41회는 지도·OneTrust·IE 위젯에 한정)
- 헤더를 고정하지 않는다 (8페이지 전부 absolute·투명 90px, fixedOrSticky false)
- 굵기 500 이상 한글을 쓰지 않는다 (hangulByWeight: 350·400뿐, 700 24회는 OneTrust 잔재 추정)
- 양수·음수 자간을 넣지 않는다 (36스타일 중 35가 ls 없음)
- 0.75s 초과·커스텀 커브 남발 금지 — 0.3s(143)·0.35s(128) ease-out/ease-in-out이 주력, 0.75s cubic-bezier(.22,1,.36,1)는 60회 한정
- 흰 텍스트를 배경색 위에 두지 않는다 — #fff on #f3f4f6 1.1:1 ×445는 전부 영상·이미지 위 오버레이 쌍
