이디야커피
흰 지면에 사진을 얹고 국문 제목은 48px 얇은 나눔스퀘어 한 줄 — 라운드 41회·그림자 31회뿐인 각진 기업 지면.
이디야커피 사이트는 흰 지면 위에 사진을 크게 얹고 국문 제목 한 줄로 여는 기업·프랜차이즈형 웹사이트입니다. 서브 페이지 7곳이 48px weight 100 나눔스퀘어로 국문 제목을 세워, 얇은 국문 대형 제목의 국내 사례로 볼 만합니다. 다만 한 도메인 안에서 브랜드 사이트(/contents)와 기업 사이트(/C)가 서로 다른 한글 서체로 그려지고, 브랜드 쪽 한글은 웹폰트가 아니라 기기에 설치된 나눔고딕으로 나옵니다. 라운드가 41회뿐이고 자간을 지정한 단이 44단 중 2단인 각진 지면이라, 장식보다 정보 전달이 앞서는 프랜차이즈·기업 사이트의 구조와 국문 제목 조판을 참고할 때 쓰기 좋습니다.
https://www.ediya.comColor Palette
Primary
Label
Line
Background
Accent
Typography
Noto Sans KR · 300 / 400 / 500 / 700기업 사이트(/C/*) 한글·라틴 전반
NanumGothic · 400 / 500 / 900브랜드 사이트(홈·/contents/*) 한글·라틴 본문
NanumSquare · 100 / 300 / 400 / 600 / 700 / 900display — 두 사이트 공통 제목
Apple SD Gothic Neo · 400 / 600OS 폴백
Nunito Sans · 100 / 400 / 700 / 900영문 전용(선언만)
Type Scalepx 기준은 layout
h148px · 100 · 1.2
다람쥐 헌 쳇바퀴
display-ko44px · 100 · 1.15
다람쥐 헌 쳇바퀴
display-en42px · 100 · 1.1
Handgloves 123
display-black40px · 900 · 0.55
다람쥐 헌 쳇바퀴
h2-intro40px · 400 · 1.4
다람쥐 헌 쳇바퀴
h2-menu40px · 300 · 1.5
다람쥐 헌 쳇바퀴
h3-year30px · 700 · 0.74
다람쥐 헌 쳇바퀴
h2-band26px · 400 · 0.85
다람쥐 헌 쳇바퀴
h4-card22px · 600 · 1.25
다람쥐 헌 쳇바퀴
body16px · 400 · 1.6
다람쥐 헌 쳇바퀴
meta13px · 400 · 1.7
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Noto Sans KR 9,378글리프(51.6%, 기업 사이트 /C/* 웹폰트) · NanumGothic 5,913(32.5%, 브랜드 사이트 OS 폰트) · Apple SD Gothic Neo 1,526(8.4%, OS) · NanumSquare 1,369(7.5%, 자체 호스팅 제목 전용). 한 도메인에서 한글 서체가 경로별로 갈린다 |
| hangulWeights | 400 압도(15,940글리프) · 500(860) · 900(384, NanumGothic 346) · 700(183) · 300(610) · 100(167, 48px 제목 전용) · 600(42) |
| body | 16px w400 lh1.60(count 10) · 13px w400 lh1.70(count 19, 최다) · 15px w400 lh1.70(count 11) |
| sub | 18px w400 lh1.30 NanumSquare(count 6) · 20px w300 lh1.70 Noto Sans KR(count 3) — 서브 페이지 히어로 본문은 18px |
| label | 13px w500 lh3.85(count 9, 높이 50px) · 12px w400 lh1.70(count 9) · 14px w400 lh1.70(count 18) |
| mixing | 국영문을 한 서체가 함께 그린다. 혼용 노드는 10페이지 1,709개 중 591개이고 591개 전부 한글 전용 프로브로 재측정했다(mixedProbed 591/591). 영문만 다른 서체로 세우려는 선언(Nunito Sans)은 있지만 파일이 로드되지 않아 실현되지 않는다 |
| hangulHeadings | 있다. 48px w100 lh1.20 NanumSquare가 서브 페이지 7곳의 h1을 맡는다(대한민국 대표 커피 브랜드 · 미래의 가능성, 이디야 커피가 열어드립니다 · 원두 · 품질 · MD 상품 · 매장검색 · 연혁). 홈은 44px w100 국문 h2(고객과 가맹점주, 협력사의 상생의 가치를 실천합니다), 메뉴 소개는 40px w300 국문 3연속(음료 · 베이커리), 연혁 인트로는 40px w400 ls−1px이다. 반면 42px대 최대 문구 두 개(ALWAYS BESIDE YOU, EDIYA COFFEE · DREAM FACTORY)는 영문이다 |
| verdict | 국문 대형 제목 레퍼런스로 유효하되 조건부다. 48px/100 · 44px/100 · 40px/300이 실제 국문이고 위치·규격이 일관되지만(h460 블록 7곳), NanumSquare가 단일 페이스라 선언 weight 100이 얇은 획으로 그려지지 않는다 — '얇은 국문 디스플레이'를 이 사이트에서 배우면 안 된다(해석·미확인). 자간은 44단 중 2단만 지정돼 있어 자간 레퍼런스로는 부적합하고, 서체 선택 레퍼런스로도 부적합하다(브랜드 사이트 한글이 OS 폰트다). 쓸 만한 것은 국문 제목–본문 규격과 기업·프랜차이즈 페이지의 섹션 골격이다 |
| rendered | Noto Sans KR Thin ×9378 · NanumGothic ×5913 · Apple SD Gothic Neo ×1526 · NanumSquare ×1369 |
영문 · Latin영문 전용
| latinFont | Noto Sans KR 4,854글리프(46.4%) · NanumGothic 4,010글리프(38.4%) · NanumSquare 816글리프(7.8%) · Nunito Sans 12pt 488글리프(4.7%) |
| latinWeights | 실측 페이스 Thin · ExtraLight |
| share | 라틴 10,450글리프 / 한글 18,186글리프 — 지면의 36.5%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Noto Sans KR를 쓰는 단: h2-intro 40px/400 · h3-year 30px/700 · h2-band 26px/400 · body 16px/400 · meta 13px/400 |
| mixing | 국영문 혼용 노드 591개(전체 1,709개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Nunito Sans 12pt 영문 전용(4.7% · 선언됨 · 최상단 디스플레이 독점) · Nunito Sans 12pt ExtraLight 12pt 영문 전용(2.3% · 선언됨 · 최상단 디스플레이 독점) |
| verdict | 영문 전용 서체가 있다 — Nunito Sans 12pt 라틴 4.7% / 한글 0.0% · 최상단 디스플레이 독점 · Nunito Sans 12pt ExtraLight 12pt 라틴 2.3% / 한글 0.0% · 최상단 디스플레이 독점. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 42px) |
| sharedWithKorean | 국문과 같은 서체: Noto Sans KR · NanumGothic · NanumSquare · Apple SD Gothic Neo |
| rendered | Noto Sans KR Thin ×4854 · NanumGothic ×4010 · NanumSquare ×816 · Nunito Sans 12pt ExtraLight ×488 · Nunito Sans 12pt ExtraLight 12pt ×245 · Apple SD Gothic Neo ×37 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 5px | |
| Max width | 1180px | |
| Section gap | 서브 페이지: 히어로 h460이 y590에서 끝나고 첫 섹션이 y650~685에서 시작(60~95px) | |
| Header | 170px absolute | |
| Grid | 홈 슬라이더·프로모션 밴드는 1440 풀블리드(1440×620 5장 · 1440×408 4장), 그 외는 1180 안에서 나뉜다 — 원두 산지 5×3 385×270 gap13 · 원두 블렌딩 3×3 339×260 gap21 · MD 추천 4×4 320×360 gap74 · MD 선물세트 8×4 288×160 gap9 · 창업 지역사무소 4×4 280×129 gap20 · 경영철학 3×3 354×150 gap0 · 매장검색 지도 24×6 256×256 gap0 | |
| Card Padding | 카드 자체 패딩은 0 — 항목 간 거터(0·9·13·20·21·34·74px)로만 분리한다 | |
| Button Padding | 0px. 버튼 4종 전부 padding 0이고 크기를 width·height·line-height로 만든다 |
Border Radius
| Role | Value | Preview |
|---|---|---|
| standard | 3px | 18회 · 버튼·링크 — 사실상 이 사이트의 유일한 라운드 |
| tab | 5px | 9회 · 탭 |
| list | 8px | 8회 · 목록 블록(ul) |
| image | 15px | 2회 · 이미지 |
| pill | 20px | 2회 · '자세히 보기' 네이비 버튼(높이 대비 알약) |
| button | 22px | 1회 · 버튼 1건 |
| media | 30px | 1회 · 비디오 프레임 |
Guidelines
Do
- 국문 대형 제목은 48px/100 lh1.20 NanumSquare 한 줄 + 18px 본문으로 여는 460px 블록을 그대로 쓴다 — 7페이지가 같은 규격이다
- 콘텐츠는 1180px 안에서 나누고, 슬라이더·프로모션 밴드만 1440 풀블리드로 뺀다(1440×620 · 1440×408)
- 간격은 5px 계열로 잡는다 — 30 · 10 · 15 · 20 · 5 · 40 · 50 (30px×187이 최빈)
- 본문색은 #464646(9.44:1), 강조는 #202023(16.25:1). 흰 지면 위에서 이 둘만으로 위계를 만든다
- 액션 버튼은 네이비 #002F6C + 흰 텍스트 14px/500(12.94:1) 하나로 통일한다
- 색면은 페이지당 하나만 — 홈 크림 #FCE1A6(h685), 창업안내 #D1E2EA(h202)
- 표는 라운드 없이 1px #D9D9D9 격자로 만든다(1160×43 행)
Don't
- NanumSquare에 weight 100·700·900을 걸어 굵기 위계를 만들지 않는다 — 자체 호스팅 파일이 NanumSquare.woff 단일 페이스라 얇아지지 않고 굵기는 브라우저 합성이다(해석·미확인)
- 한글 서체를 선언만 하고 로드하지 않는 구조를 따라 하지 않는다 — 브랜드 사이트 6페이지의 한글 5,913글리프가 기기 설치 NanumGothic으로 그려진다(폰트 URL 45개 중 NanumGothic 0)
- 네이비를 여러 값으로 흩지 않는다 — #002F6C · #00355C · #1D326C · #1F3A93 · #233E83 · #243C84 여섯 값이 공존한다
- 푸터 #262626 위에 #818181(3.88:1) · #6C6C6C(2.88:1)를 쓰지 않는다 — 전부 AA 미달이다
- 제목 행간을 1 미만으로 누르지 않는다(40/900 lh0.55 · 36/700 lh0.61) — 국문은 받침이 잘릴 위험이 있다
- 라운드를 3 · 5 · 8 · 15 · 20 · 22 · 30px으로 흩지 않는다 — 41회밖에 안 쓰면서 값이 7종이다
- 브랜드 기본색을 semantic.primary로 두고 실제로는 3회만 쓰지 않는다(#90470C count 3, 1페이지)




