시몬스
카피는 이미지가 맡고 웹은 상품을 정리한다 — 히어로에 활자가 한 글자도 없다.
광고로 이름난 침대 브랜드지만 웹사이트는 그 결이 아니라 커머스 카탈로그에 가깝습니다. 홈 히어로가 1360×648 이미지 다섯 장을 도는데 그 안에 텍스트 노드가 하나도 없어서, 브랜드 카피가 전부 이미지 비트맵으로 들어가 있습니다. 조판에서 눈여겨볼 것은 굵기를 CSS 두께가 아니라 폰트 이름으로 지정한다는 점인데(Pretendard-SemiBold를 별개 패밀리로 선언), 그래서 코드상 웨이트 값과 실제로 그려지는 굵기가 어긋납니다. 국문 최대가 34px이고 자간 규칙도 없어 조판 레퍼런스로는 약하고, 커머스 목록·매장 찾기 같은 구조를 볼 때 쓰면 좋습니다.
https://www.simmons.co.krColor Palette
Label
Fill
Line
Background
Static
Accent
Typography
Pretendard · 300 / 400 / 700body·ui, 한글 37.0%
Pretendard SemiBold · 400 / 600heading·nav, 한글 37.7%
Pretendard Medium · 500 / 600 / 700body·상품명, 한글 25.0%
Apple SD Gothic Neo · 400폴백
Type Scale1440 layout 기준
h136px · 400 · 1.22
다람쥐 헌 쳇바퀴
h234px · 600 · 1.29
다람쥐 헌 쳇바퀴
h2-home32px · 400 · 0.88
다람쥐 헌 쳇바퀴
h330px · 400 · 1.4
다람쥐 헌 쳇바퀴
h420px · 600 · 1.25
다람쥐 헌 쳇바퀴
lead18px · 400 · 1.22
다람쥐 헌 쳇바퀴
body16px · 400 · 1.75
다람쥐 헌 쳇바퀴
body-sm14px · 400 · 1.5
다람쥐 헌 쳇바퀴
label13px · 600 · 1.54
다람쥐 헌 쳇바퀴
caption12px · 400 · 1.33
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard 계열 3페이스 — Pretendard SemiBold(5,431글리프 37.7%) · Pretendard(5,330 37.0%) · Pretendard Medium(3,594 25.0%) · Apple SD Gothic Neo(39, 0.3%) |
| hangulWeights | 600 SemiBold 3,213 · 400 Pretendard 3,148 + **SemiBold 1,938** · 500 Medium 1,234 · 300 Pretendard 1,306 · 700 Medium 668. weight 400 자리에 SemiBold가 섞여 있는 것이 패밀리로 굵기를 지정한 증거다 |
| body | 16px/400 lh1.75 자간 0 (Pretendard Regular, 27회) |
| sub | 18px/400 lh1.22 (상품명·연도 표제) · 15px/500 |
| label | nav 13px/600 Pretendard SemiBold · 메타 12px/400 |
| mixing | 국영문을 같은 Pretendard 계열이 다 그린다(라틴 8,573글리프도 동일 계열). 홈 섹션 제목만 영문 'NEW'·'BEST' 32px으로 서고 그 아래 상품명·설명은 전부 국문이라, 층이 아니라 자리로 갈린다 |
| hangulHeadings | 있다 — 브랜드 스토리 34px/600 h3가 최대이고 8회 반복된다('시몬스의 역사가 세계 침대의 역사입니다'·'좋은 침대에는 역사와 원칙이 있습니다'). **홈 히어로에는 국문은커녕 활자 자체가 없다**(textLen 0) |
| verdict | 국문 대형 조판 레퍼런스로는 부적합하다 — 최대가 34px/600이고 자간 규칙이 0종이며 히어로 카피가 이미지 안에 있다. 국문 본문(16/400/1.75)과 커머스 목록·매장 찾기 구조를 볼 때만 유효하다 |
| rendered | Pretendard SemiBold ×5431 · Pretendard ×5330 · Pretendard Medium ×3594 · Apple SD Gothic Neo ×39 |
영문 · Latin국문과 동일
| latinFont | Pretendard 8,573글리프(99.5%) · Apple SD Gothic Neo 39글리프(0.5%) |
| latinWeights | 실측 페이스 Medium · SemiBold |
| share | 라틴 8,612글리프 / 한글 14,394글리프 — 지면의 37.4%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Pretendard를 쓰는 단: h1 36px/400 · h2 34px/600 · h2-home 32px/400 · h3 30px/400 · h4 20px/600 · lead 18px/400 · body 16px/400 · body-sm 14px/400 · label 13px/600 · caption 12px/400 |
| mixing | 국영문 혼용 노드 608개(전체 1,664개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 37.4%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 99.5%를 그리는 Pretendard가 한글도 99.7% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard · Apple SD Gothic Neo |
| rendered | Pretendard ×4483 · Pretendard Medium ×2642 · Pretendard SemiBold ×1448 · Apple SD Gothic Neo ×39 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 5px | |
| Max width | 1360px | |
| Docs width | 1040px | |
| Section gap | 브랜드 스토리 상단 인트로 padding 100/100 | |
| Header | 126px fixed | |
| Grid Products | 상품 3열, 행 높이 341/371/392, gap 0 (docH 16,360 · 섹션 40) | |
| Grid Cards | 브랜드 스토리 3열 200×241 gap 30 · 4열 495×428 gap 10 · 4열 498×320 gap 4 · 5열 200×276 gap 0 | |
| Grid Map | 매장 페이지 지도 타일 6열 256×256 gap 0 ×172 (카카오맵 래스터) | |
| Card Padding | 미측정 (추출기 범위 밖) | |
| Button Padding | 10 16 (제품 보러가기·더보기) · 12 10 (검색) · 8 16 / 15 16 (입력) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| sharp | 0px | 4회 · 버튼 4종·입력 4종 전부. 기본은 직각이다 |
| xs | 2px | 1회 · span 배지 |
| sm | 4px | 15회 · 작은 칩·타일 |
| — | 4.2449px | 2회 · 버튼 — 계산 잔재. 재현하지 말 것 |
| standard | 6px | 27회 · 링크 카드·선택 박스 (최다) |
| — | 10px | 1회 · 관측만 |
| top-only | 15px 15px 0px 0px | 1회 · 시트형 패널 상단만 |
| lg | 20px | 1회 · 관측만 |
| circle | 50% | 19회 · 아이콘 버튼·인디케이터 |
Guidelines
Do
- 지면 #FFFFFF에 텍스트 #161616 하나로 밀고, 채도는 --point-color(#A64424) 한 색만 강조에 쓴다 (팔레트 10회)
- 기본 형태는 직각이다 — 버튼 4종·입력 4종 전부 radius 0px, 라운드는 6px 링크 카드에만 붙인다
- 액션은 두 종류로 고정한다: 1px solid #161616 고스트(패딩 10 16)와 #161616 채움 검색 버튼(패딩 12 10)
- 콘텐츠 폭은 1360(기본)·1040(매장·팩토리움)·892(이벤트) 세 값만 쓴다
- 상품 목록은 3열 gap 0, 행 높이 341~392로 붙여 카탈로그 밀도를 만든다
- 브랜드 서사는 34px/600 국문 제목 + 16px lh1.75 본문 한 쌍으로 반복한다 (브랜드 스토리 8회)
- 모션은 0.4s ease 하나로 통일한다 (raw 153회, easings는 ease 211회가 전부)
Don't
- 히어로 카피를 이미지 안에 넣지 않는다 — 이 사이트 히어로의 textLen이 0이라 검색·번역·확대·스크린리더에 아무것도 남지 않는다
- 굵기를 폰트 패밀리 이름으로 지정하지 않는다 (Pretendard-SemiBold를 별개 패밀리로 선언 → font-weight 400 자리에 SemiBold가 1,938글리프 그려진다). 한 패밀리 + font-weight로 쓴다
- #0000EE·#007AFF를 브랜드 색으로 오해하지 않는다 — 각각 브라우저 기본 링크색(20회)과 Swiper 기본 화살표색(4회)이 안 덮인 것이다
- #7F7F7F(4:1)·#AFAFAF(2.19:1)를 본문에 쓰지 않는다 — 둘 다 AA 미달인데 118회·40회 쓰이고 있다
- 4.2449px·20.5714px·14.8571px 같은 계산 잔재 값을 스케일로 옮기지 않는다
- 이 사이트에서 자간 규칙을 가져가지 않는다 (37개 스타일 전부 letter-spacing 없음)
- 국문 대형 조판 레퍼런스로 쓰지 않는다 — 국문 최대가 34px/600이고 그보다 큰 36·32px 자리는 영문·숫자다
