이디야커피

흰 지면에 사진을 얹고 국문 제목은 48px 얇은 나눔스퀘어 한 줄 — 라운드 41회·그림자 31회뿐인 각진 기업 지면.

이디야커피 사이트는 흰 지면 위에 사진을 크게 얹고 국문 제목 한 줄로 여는 기업·프랜차이즈형 웹사이트입니다. 서브 페이지 7곳이 48px weight 100 나눔스퀘어로 국문 제목을 세워, 얇은 국문 대형 제목의 국내 사례로 볼 만합니다. 다만 한 도메인 안에서 브랜드 사이트(/contents)와 기업 사이트(/C)가 서로 다른 한글 서체로 그려지고, 브랜드 쪽 한글은 웹폰트가 아니라 기기에 설치된 나눔고딕으로 나옵니다. 라운드가 41회뿐이고 자간을 지정한 단이 44단 중 2단인 각진 지면이라, 장식보다 정보 전달이 앞서는 프랜차이즈·기업 사이트의 구조와 국문 제목 조판을 참고할 때 쓰기 좋습니다.

https://www.ediya.com

Color 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

hangulFontNoto 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%, 자체 호스팅 제목 전용). 한 도메인에서 한글 서체가 경로별로 갈린다
hangulWeights400 압도(15,940글리프) · 500(860) · 900(384, NanumGothic 346) · 700(183) · 300(610) · 100(167, 48px 제목 전용) · 600(42)
body16px w400 lh1.60(count 10) · 13px w400 lh1.70(count 19, 최다) · 15px w400 lh1.70(count 11)
sub18px w400 lh1.30 NanumSquare(count 6) · 20px w300 lh1.70 Noto Sans KR(count 3) — 서브 페이지 히어로 본문은 18px
label13px 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 폰트다). 쓸 만한 것은 국문 제목–본문 규격과 기업·프랜차이즈 페이지의 섹션 골격이다
renderedNoto Sans KR Thin ×9378 · NanumGothic ×5913 · Apple SD Gothic Neo ×1526 · NanumSquare ×1369
영문 · Latin영문 전용
latinFontNoto 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개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNoteNunito 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
renderedNoto 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

PurposeValuePreview
Densitycompact
Base unit5px
Max width1180px
Section gap서브 페이지: 히어로 h460이 y590에서 끝나고 첫 섹션이 y650~685에서 시작(60~95px)
Header170px 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 Padding0px. 버튼 4종 전부 padding 0이고 크기를 width·height·line-height로 만든다

Border Radius

RoleValuePreview
standard3px 18회 · 버튼·링크 — 사실상 이 사이트의 유일한 라운드
tab5px 9회 · 탭
list8px 8회 · 목록 블록(ul)
image15px 2회 · 이미지
pill20px 2회 · '자세히 보기' 네이비 버튼(높이 대비 알약)
button22px 1회 · 버튼 1건
media30px 1회 · 비디오 프레임

Guidelines

Do

Don't

Pages

More like this