신한화구
흰 지면과 제품 사진이 주인공이고, UI는 #666666 회색 300 웨이트 글자와 1px 직각 외곽선 버튼으로 물러선다.
신한화구는 국내 미술재료 제조사의 브랜드 사이트로, 흰 지면 위에 제품 사진과 가는 회색 글자를 놓는 조용한 카탈로그 인상입니다. 홈 첫 화면은 하늘색 그라디언트 위에 신제품 PWC 수채화 이미지를 크게 보여 주는 슬라이드이고, 버튼은 모서리가 직각인 1px 외곽선 하나뿐입니다. 국문 대형 제목은 없고 본문 15px 300 웨이트가 주력이라 국문 히어로 타이포 레퍼런스로는 약합니다. 사진이 많은 제품 카탈로그나 브랜드 연혁 페이지를 구성할 때 참고할 만합니다.
https://www.shinhanart.com/krColor Palette
Label
Accent
Background
Fill
Typography
Roboto · 300 / 400 / 500 / 600 / 700display·body·ui (라틴, 한글 혼용 문장의 영문·숫자)
NanumGothic · 300 / 400 / 500body·heading (한글 전부)
Times New Roman · 400폴백 (잔재)
Type Scale0px(heading-2 ×8)·크기 미상 스타일은 스크린리더 전용이라 제외했다
hero-title40px · 400 · 1.1
Handgloves 123
about-year53.3px · 500 · 1
다람쥐 헌 쳇바퀴
about-sub35px · 350 · 1
다람쥐 헌 쳇바퀴
about-milestone30px · 500 · 1
다람쥐 헌 쳇바퀴
h227px · 400 · 1
Handgloves 123
h1-small26px · 700 · 1
Handgloves 123
newsletter25px · 400 · 1
Handgloves 123
strip-lead16.3px · 300 · 1.5
Handgloves 123
body15px · 300 · 1
다람쥐 헌 쳇바퀴
ui14px · 400 · 1
Handgloves 123
caption11px · 400 · 1.63
Handgloves 123
국문 · Korean
| hangulFont | NanumGothic (os-font, 20,513글리프 100.0%) — 웹폰트 아님, Mac/Windows에서 다르게 보임. 사이트는 NanumGothic 파일 43개 URL을 선언(로컬 설치본 우선 여부 미확인) |
| hangulWeights | 300 주력(18,825글리프) · 400(1,188) · 500(478) · 350(22) |
| body | 15px/300 (layout 1440) |
| sub | 16.3px/300 ls−0.75px 안내문(raw 1920 18/300 lh1.5 −0.75px 포함) |
| label | 13px/300 strong(카드 라벨) · 14px/400 버튼 |
| mixing | 국영문 한 줄 혼용 — 한글은 NanumGothic, 문장 속 영문·숫자는 Roboto(웹폰트) |
| hangulHeadings | 대형 없음 — 한글이 맡는 최대 제목은 About 연혁 연도 53.3px/500(1960s 등은 영문 숫자)이고 한글 소제목 최대 35px/350·30px/500. 홈 히어로 40px 제목('신한 프리미엄 수채화 PWC')은 한글+영문 혼용(1920 raw, Roboto 40/400) |
| verdict | 국문 대형 히어로 레퍼런스로는 약하다(국문 제목 최대 35~40px대). 가는 300 웨이트 국문 본문·카탈로그 타이포 레퍼런스로 유효 |
| rendered | NanumGothic ×20513 · xeicon ×1 |
영문 · Latin영문 전용
| latinFont | NanumGothic 28,338글리프(52.1%) · Roboto 21,590글리프(39.7%) · Times New Roman 3,703글리프(6.8%) · Songti SC 723글리프(1.3%) |
| latinWeights | 단일 페이스(웨이트 파생 페이스 없음) |
| share | 라틴 54,387글리프 / 한글 20,514글리프 — 지면의 72.6%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 NanumGothic를 쓰는 단: about-year 53.3px/500 · about-sub 35px/350 · about-milestone 30px/500 · body 15px/300 |
| mixing | 국영문 혼용 노드 227개(전체 1,338개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Roboto 영문 전용(39.7% · 선언됨 · 최상단 디스플레이 독점) · Times New Roman 폴백(6.8% · 선언됨) |
| verdict | 영문 전용 서체가 있다 — Roboto 라틴 39.7% / 한글 0.0% · 최상단 디스플레이 독점 · Times New Roman 라틴 6.8% / 한글 0.0%. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 40px) |
| sharedWithKorean | 국문과 같은 서체: NanumGothic · xeicon |
| rendered | NanumGothic ×28338 · Roboto ×21590 · Times New Roman ×3703 · Songti SC ×723 · NanumMyeongjo ×22 · xeicon ×10 · PingFang SC ×1 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | regular | |
| Base unit | 8px | |
| Max width | 1380px | |
| Section gap | 홈 하단 카드 섹션 y1052 h91 / y1173 h475 / y1913 h91 / y2034 h554 — 안내 띠 91px와 카드 섹션이 교대(layout 1440) | |
| Header | 138px absolute | |
| Card Padding | 홈 카드 273×273 거터 4px(Watercolors 타일 10개 5열) | |
| Button Padding | 12×30 ('문의하기', raw 1920) | |
| Grid Home | 브랜드 카드 10개 5열 273×273 gap 4px · FLEUR 14개 310×509 gap 15px |
Border Radius
| Role | Value | Preview |
|---|---|---|
| none | 0px | 0회 · 버튼·카드 전부 직각. raw borderRadius 값 없음, 버튼 r 0px |
Guidelines
Do
- 버튼은 모서리 0·1px 외곽선·14px/400으로 만든다(raw 버튼 9종 r 0px)
- 본문 설명은 15px/300(raw ×22), 안내 띠 문장은 16.3px/300 ls−0.75px
- 한글 글자색은 #666666 주력(4,609회), 강조 표식에만 #E30613(33회)
- 히어로는 좌측 텍스트 + 우측 제품 이미지 구성, 제목 40px/400 lh1.1 ls−0.75px
- 콘텐츠 폭 1380px 중앙(36회), 헤더는 138px absolute 투명으로 히어로 위에 올린다
- 브랜드 타일은 273×273 5열 gap 4px처럼 사진으로 면을 채운다
- 사진 섹션 사이에 91px 안내 띠를 끼워 리듬을 만든다
Don't
- 둥근 모서리·알약 버튼을 쓰지 않는다 (r 0px 전부)
- 본문에 #999999를 쓰지 않는다 (#f5f5f5 위 2.61:1)
- 레드 #E30613을 큰 면이나 배경에 깔지 않는다 (33회, 표식 전용)
- #0000EE는 브라우저 기본 링크색이라 따라 쓰지 않는다 (8회)
- 한글 대형 제목을 기대하지 않는다 — 국문 제목은 15~35px대
- 한글 본문을 NanumGothic이 아닌 서체로 옮길 때 weight 300을 그대로 쓰면 가늘게 보인다(원본은 NanumGothic 300 ×18,825글리프)
- 홈 docHeight 900을 문서 길이로 인용하지 않는다 (풀페이지 슬라이드 구조)
