국립국악원
한 도메인 안에 조판 체계가 둘이다 — 본사이트는 notokr에 자간 −1px·행간 1.5, 국악사전(/ency)은 Noto Sans KR에 자간 −0.45px·행간 1.4로 갈린다.
국립국악원은 한 주소 안에 성격이 다른 두 사이트가 들어 있습니다. 본사이트는 1,140px 짜리 공연 슬라이더로 열고 그 아래를 카드 그리드로 채우는 전형적인 기관 홈이고, 별도로 붙은 국악사전(/ency)은 흰 지면에 46.8px 카테고리 제목만 세우는 아카이브형 화면입니다. 두 쪽이 웹폰트 파일부터 갈려서 본사이트는 자체 호스팅 notokr에 자간 −1px·행간 1.5, 국악사전은 Noto Sans KR에 자간 −0.45px·행간 1.4를 쓰기 때문에 같은 도메인인데 글줄의 인상이 다릅니다. 국문 대형 히어로를 찾는 용도로는 맞지 않고, 하나의 기관이 서비스별로 조판을 따로 가져갈 때 무슨 일이 벌어지는지 보는 대조군으로 쓰기 좋습니다.
https://www.gugak.go.krColor Palette
Primary
Label
Line
Background
Static
Accent
Typography
NotoKR (notokr-*.woff) · 100 / 300 / 400 / 500 / 900본사이트(`/`·`/site/*`) 전 단
Noto Sans KR · 300 / 400 / 500 / 700국악사전(`/ency/*`) 전 단
Apple SD Gothic Neo · 400 / 500 / 700폴백 (한글 124글리프 · 라틴 88글리프)
SEOULMILK-500mL · 400선언·로드만 (렌더 0글리프)
Material Icons · 400아이콘
Type Scale**이 사이트의 타입 스케일은 하나가 아니라 둘이다
ency-category46.8px · 500 · 1.4
다람쥐 헌 쳇바퀴
month41px · 900 · 1
Handgloves 123
h230px · 900 · 1
Handgloves 123
ency-h228.8px · 700 · 1.4
다람쥐 헌 쳇바퀴
ency-h321.6px · 700 · 1.4
다람쥐 헌 쳇바퀴
lead20px · 500 · 1
Handgloves 123
link18px · 400 · 1.5
Handgloves 123
ency-link18px · 400 · 1.4
다람쥐 헌 쳇바퀴
body16px · 400 · 1.8
Handgloves 123
ency-body16px · 400 · 1.4
다람쥐 헌 쳇바퀴
body-sm14px · 400 · 1.8
Handgloves 123
caption12px · 400 · 1.5
Handgloves 123
국문 · Korean
| hangulFont | 한글 13,857글리프가 두 서체군으로 갈린다 — NotoKR 계열 8,295(59.9%: Regular 5,798 · Medium 1,263 · DemiLight 716 · Bold 437 · Light 81)이 본사이트를, Noto Sans KR 계열 5,418(39.1%: Regular 3,126 · Medium 2,040 · Light 252)이 국악사전(/ency)을 그린다. 나머지는 Apple SD Gothic Neo 124(0.9%)와 'OTS derived font' 20이다. 선언 1순위는 Noto Sans KR이고 SEOULMILK-500mL·notokr·Font Awesome이 뒤따르는데, **선언 2순위 SEOULMILK-500mL(서울우유체)은 한 글자도 그리지 않는다** |
| hangulWeights | 400 8,607(NotoKR-Regular 5,798 · Noto Sans KR 2,698) · 500 3,068(Noto Sans KR Medium 1,771 · NotoKR-Medium 1,257) · 900 397(NotoKR-Bold 355 — 홈 섹션 제목 30px/900과 월 표시 41px/900) · 300 926 · 700 503 · 100 81. 900을 실제로 쓰는 것이 이 사이트의 특징이고, 그마저 NotoKR-Bold 파일이 대신 그린다 |
| body | 본사이트 16px/400 lh1.8 ls−1px (count 14) · 14px/400 lh1.8 ls−1px (count 24, 본사이트 최다) / 국악사전 16px/400 lh1.4 ls−0.45px (count 31, 전체 최다) |
| sub | 본사이트 20px/500 lh1.0 ls−1.43px (count 8) · 18px/400 lh1.5 ls−1.4px (count 14) / 국악사전 21.6px/700 lh1.4 · 18px/500 lh1.4 ls−0.45px (count 6) |
| label | 14px/900 lh2.07 ls−0.78px (count 9, 배지) · 14px/500 lh1.0 ls−0.88px (count 7) · 13px/400 lh1.5 ls−1px (count 14) · 12px/400 lh1.5 ls−1px (count 4) |
| mixing | 국영문을 각 서체가 그대로 맡는다 — 라틴 전용 서체가 없고 NotoKR·Noto Sans KR가 라틴도 그린다. 페이지 단위 분리이므로 한 줄 안에서 서체가 갈리는 곳은 관측되지 않았다. 라틴 잔여는 Helvetica 6 · Font Awesome 6 Brands 3 · PingFang SC 2 글리프뿐이다. 다만 **국악사전 음원 목록에서는 Apple SD Gothic Neo가 한글 74글리프를 그린다** — 웹폰트가 아니라 OS 폰트라 Mac/Windows에서 다르게 보인다 |
| hangulHeadings | 있으나 짧다 — 최대는 국악사전 카테고리 제목 46.8px/500(1440 실측, raw 1920에서는 52px/500 count 6)이고 내용은 '이미지'·'동영상'·'음원'·'3D 악기'·'국악사·이론 편' 같은 2~7자 라벨이다. 본사이트 최대는 41px/900 '2026. 09'(월 표시, 국문이 아니다)이고 국문 제목은 30px/900 '교육/경연 대회'·'학술 자료'·'국악연주단 소개'가 최대다. **홈 히어로의 64px/400은 국문 제목이 아니라 슬라이더 이전 버튼의 접근성 라벨('메인 슬라이드 이전')이다** — raw에서도 context가 `ui`이고 count가 4(=prev/next × 2페이지)다 |
| verdict | 국문 히어로 레퍼런스로는 부적합하다 — 폴드를 1,140px 슬라이더가 통째로 덮고 그 위에 조판된 국문 카피가 없으며, 사이트 최대 국문 제목 46.8px/500도 2~7자 카테고리 라벨이다. 이 사이트의 값은 **자간 체계의 대조군**에 있다: 한 도메인 안에서 본사이트 −1px / 국악사전 −0.45px, 행간 1.50~1.80 / 1.40으로 두 절대 자간이 나란히 굴러가므로, 같은 18px 링크가 −7.8%와 −2.5%로 어떻게 달라 보이는지를 한 사이트 안에서 비교할 수 있다. 본문 행간 1.8(16px·14px)은 국문 가독 기준(1.5~1.7)을 넘겨 잡은 드문 사례이므로 긴 안내문 조판을 잡을 때 참고가 된다 |
| rendered | NotoKR-Regular ×5798 · Noto Sans KR ×3126 · Noto Sans KR Medium ×2040 · NotoKR-Medium ×1263 · NotoKR-DemiLight ×716 · NotoKR-Bold ×437 · Noto Sans KR Light ×252 · Apple SD Gothic Neo ×124 · NotoKR-Light ×81 · OTS derived font ×20 |
영문 · Latin국문과 동일
| latinFont | Noto Sans KR 3,361글리프(44.8%) · NotoKR-Regular 3,159글리프(42.1%) · NotoKR-DemiLight 399글리프(5.3%) · NotoKR-Medium 360글리프(4.8%) |
| latinWeights | 실측 페이스 Regular · Medium · Light · Bold |
| share | 라틴 7,508글리프 / 한글 13,857글리프 — 지면의 35.1%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Noto Sans KR를 쓰는 단: ency-category 46.8px/500 · ency-h2 28.8px/700 · ency-h3 21.6px/700 · ency-link 18px/400 · ency-body 16px/400 |
| mixing | 국영문 혼용 노드 564개(전체 1,580개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 35.1%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 44.8%를 그리는 Noto Sans KR가 한글도 39.1% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Noto Sans KR · NotoKR-Regular · NotoKR-DemiLight · NotoKR-Medium |
| rendered | NotoKR-Regular ×3159 · Noto Sans KR ×1995 · Noto Sans KR Medium ×946 · Noto Sans KR Light ×420 · NotoKR-DemiLight ×399 · NotoKR-Medium ×360 · NotoKR-Bold ×127 · Apple SD Gothic Neo ×88 · Helvetica ×6 · NotoKR-Light ×3 · Font Awesome 6 Brands Regular ×3 · PingFang SC ×2 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 8px | |
| Max width | 1240px | |
| Docs width | 1200px | |
| Section gap | 홈은 섹션이 붙어 있다 — §0 끝(1172) = §1 시작(1172), §1 끝(1719) = §2 시작(1719)로 여백 0이고 대신 섹션 안쪽 패딩(25/25 | |
| Header | 99px relative | |
| Grid Cards | 홈 박물관 4열 262×220 거터 30 r8 · 교육/경연 2열 570×145 r8 · 학술자료 3열 165×282 거터 20 · 연주단 4열 285×244 거터 30 r8 shadow rgba(0,0,0,.1) 0 15px 25px · 하단 링크 4열 310×41 | |
| Grid Ency Grid | 국악사전 미디어 그리드 3열 376×314 거터 37(이미지·동영상, 9~12개) · 3열 376×271 거터 37(국악이야기) · 3열 376×198 거터 36(3D 악기) · 음원은 1열 1200×63 9행 | |
| Grid Calendar | 월간공연일정 7열 171×974 거터 0 — 한 열이 한 요일 | |
| Card Padding | 국악사전 상세 목록 행 1146×120(패딩 36/49) · 홈 공지 5행 664×34 | |
| Button Padding | 12×0/12×30 (전체일정보기, r4, 20px/500, border 2px solid rgb(35,46,53)) · 6×13 (달력/리스트 토글, r4 부분) · 5 (전체보기, r4) · 0×45 (목록, r0) | |
| Header Note | 99px relative 헤더와 300px rgb(34,34,34) 푸터는 **국악사전(/ency/*) 7페이지의 값**이다. 본사이트 3페이지(홈·/site/main/index001·월간공연일정)는 추출기가 헤더·푸터를 찾지 못해 null이며, 홈의 검정 GNB는 §0 히어로 블록(div#header)에 통째로 묶여 들어갔다(데이터 결함) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| — | 3px | 8회 · 관측만 |
| standard | 4px | 176회 · 버튼·칩 표준 (국악누리 전체보기 등). 변형으로 `4px 4px 0 0` 69회(탭 상단)·`0 0 4px 4px` 99회(탭 패널 하단)·`0 4px 4px 0` 1회·`4px 0 0 4px` 1회(좌우 토글) |
| — | 4.8px | 9회 · 모달 (관측만) |
| — | 5px | 7회 · a/모달 (관측만) |
| image | 6px | 23회 · 이미지·썸네일 |
| card | 8px | 105회 · 홈 카드 표준 — 262×220 · 570×145 · 285×244 |
| chip | 13px | 95회 · span 칩 |
| — | 16px | 6회 · 모달 (관측만) |
| — | 19px | 4회 · 모달 (관측만) |
| — | 22px | 3회 · p (관측만) |
| — | 50px | 1회 · span (관측만) |
| circle-half | 50% | 4회 · 원형 요소 |
| circle | 100% | 156회 · 슬라이더 페이지네이션 점 20×20·아이콘 버튼 |
Guidelines
Do
- 한 기관 안에서 서비스별로 조판을 나눌 거라면 이 사이트처럼 **자간 규칙까지 통째로** 나눈다 — 본사이트 −1px / 국악사전 −0.45px, 행간 1.50 / 1.40으로 두 체계가 서로 섞이지 않는다
- 본문 행간을 1.8까지 올린다 — 본사이트 16px/400 lh1.8(count 14) · 14px/400 lh1.8(count 24)로 국문 가독 기준(1.5~1.7)보다도 넓다
- 지면 기본값을 흰색이 아니라 연청 #F0F6FB로 잡고 카드만 흰색으로 띄운다(semantic.background = rgb(240,246,251), 홈 §2·§4·§6)
- 적색 액센트는 #A20000처럼 어둡게 잡는다 — 흰 글자 8.28:1로 배경으로도 쓸 수 있다(대비를 확보한 유일한 채도색)
- 라운드는 4px(버튼·탭 176회)과 8px(카드 105회) 둘로 잡고, 탭은 `4px 4px 0 0` + `0 0 4px 4px` 부분 라운드로 맞물린다
- 카드 그림자는 rgba(0,0,0,.1) 0 15px 25px 한 종류로 통일한다(홈 연주단 카드)
- 모션은 0.2s / 0.3s 두 값에 ease와 ease-out을 반씩(138회씩) 쓴다 — keyframes는 0건이다
Don't
- 연청 지면 #F0F6FB 위에 흰 글자를 얹지 않는다 (1.09:1, 48쌍 — 이 사이트 최악의 대비쌍)
- #297FCA(4.21:1, 27쌍) · #008EFC(3.35:1, 23쌍) · #8492B4(3.11:1, 26쌍) · #999999(2.85:1)를 본문·링크 색으로 쓰지 않는다 — 넷 다 흰 지면에서 AA 미달이다
- 절대 자간(−1px)을 12px까지 그대로 내리지 않는다 — 12px에서 −8.3%가 돼 글자가 붙는다. 크기별 비율 자간으로 바꿀 것
- 슬라이더 컨트롤의 접근성 라벨을 히어로 카피로 오해하지 않는다 — 홈 '64px/400'은 '메인 슬라이드 이전'이고 raw에서도 context가 `ui`(count 4)다
- 웹폰트를 선언만 하고 방치하지 않는다 — SEOULMILK-500mL(3포맷) · NanumBarunGothic-YetHangul(3포맷) · Source Sans Pro(2파일)가 CDP 렌더 0글리프다
- OS 폰트에 한글을 맡기지 않는다 — Apple SD Gothic Neo가 124글리프를 그리고 그중 74가 국악사전 음원 목록 한 페이지에 몰려 있다(Windows에서 다르게 보인다)
- 히어로를 폴드 밖까지 늘리지 않는다 — 홈 슬라이더가 1,140px으로 900 폴드를 240px 넘겨 다음 섹션이 첫 화면에 걸리지 않는다
