국립극장
흰 지면에 검정 본문과 청록 한 점, 큰 글자는 조판이 아니라 공연 포스터가 맡는다.
국립극장 누리집은 흰 지면·검정 글자·청록 한 색으로만 구성된 공공 공연장 사이트입니다. 화면에서 가장 큰 글자는 조판이 아니라 648px 높이의 공연 포스터 슬라이드 안에 들어 있고, DOM의 국문 제목은 37.8px에서 멈추기 때문에 국문 히어로 조판 레퍼런스로는 맞지 않습니다. 대신 공연 목록·예매 동선을 카드 그리드(5열 214×378 포스터 · 7열 426×408)와 게시판 목록(1,404×72 행 · 표 1,405×44 154행)으로 나눠 쓰는 방식, 그리고 크기와 무관하게 자간을 −0.5px로 고정한 조판 규칙을 참고할 만합니다. 공공기관 공연장·문화기관 사이트의 정보 구조와 목록 UI를 설계할 때 골격 레퍼런스로 쓰기 좋습니다.
https://www.ntok.go.krColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Pretendard · 400 / 500 / 600 / 700heading·body·ui·link — 한글·라틴 겸용 주 서체
S-Core Dream · 400 / 500 / 600 / 700보조 제목·강조 (4 Regular · 5 Medium · 6 Bold)
Apple SD Gothic Neo · 400 / 500 / 600 / 700 / 900한글 폴백 (웹폰트 아님)
Montserrat · 400 / 600라틴 캡션 (관측만)
remixicon · xeicon · 400아이콘 폰트
Type Scaleraw(1920)와 layout(1440)의 제목 px이 같다(37
page-title37.8px · 700 · 1
다람쥐 헌 쳇바퀴
section-title33.3px · 700 · 1.08
다람쥐 헌 쳇바퀴
overlay-nav28.8px · 400 · 1.3
다람쥐 헌 쳇바퀴
gnb25.2px · 600 · 1.5
다람쥐 헌 쳇바퀴
group-title21.6px · 700 · 1.3
다람쥐 헌 쳇바퀴
body-lg19.8px · 600 · 1.36
다람쥐 헌 쳇바퀴
body18px · 400 · 1
다람쥐 헌 쳇바퀴
body-sm16.2px · 400 · 1
다람쥐 헌 쳇바퀴
caption14.4px · 400 · 2.31
다람쥐 헌 쳇바퀴
micro13.95px · 400 · 1
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard(웹폰트, self-hosted woff2 4단) + S-Core Dream(웹폰트, 3단) + Apple SD Gothic Neo(macOS OS 폰트 폴백). 홈 프로브(CDP isCustomFont)는 한글 1,460글리프를 이름 미보고 서체(OTS derived font)=Pretendard가, 187글리프를 S-Core Dream 4/5/6이 그렸고 369글리프만 Apple SD Gothic Neo였다. 10페이지 집계로 넓히면 Apple SD Gothic Neo 15,558(62.4%) · Pretendard 9,274(37.2%)로 뒤집힌다 |
| hangulWeights | 400·500·600·700 4단(Pretendard woff2 4파일과 일치). 10페이지 hangulByWeight — 500 최다(Apple SD 7,412 + Pretendard 2,447) · 700(4,266+886) · 600(1,581+2,652) · 400(2,290+3,193) · 900은 9글리프뿐. 580~599 사이 자잘한 웨이트 96글리프는 합성 값으로 보인다(미확인) |
| body | 18px w400 lh1.00 자간 −0.5px(−2.78%), count 23 |
| sub | 19.8px w600 lh1.36 자간 −0.5px(−2.53%), count 18 |
| label | 16.2px w400/600 자간 −0.5px(−3.09%) · 14.4px w400 lh2.31(−3.47%) · 퀵메뉴 13.5px/400 |
| mixing | 국영문을 한 서체가 그린다 — Pretendard 스택 하나에 SCDream·xeicon·Montserrat·NotoSans·돋움·Dotum·굴림·remixicon·Gulim·AppleGothic·UnDotum·Arial·Tahoma·Verdana 14단 폴백이 붙은 공공기관 legacy 스택이다. Montserrat는 8.1~18px 캡션 12회뿐이라 영문 디스플레이 층이 따로 없다. 혼용 노드 810개를 전부 한글 프로브로 재측정했다(mixedProbed 810/810) |
| hangulHeadings | DOM 최대 국문 제목은 37.8px/700 서브페이지 제목 밴드이고 10페이지 중 6페이지에서 그 문자열이 '메뉴명없음'이다. h1은 10페이지 전부 비어 있다. 홈 폴드에서 가장 큰 DOM 텍스트는 18.9px 슬라이드 번호이며 '2026 아트인시리즈' 같은 대형 국문은 포스터 이미지 안에 있다. 40px 이상 국문 제목 0건 |
| verdict | 국문 히어로·대형 제목 레퍼런스로 부적합 — 큰 글자를 조판이 아니라 포스터 이미지가 맡고 DOM 국문 제목은 37.8px에서 멈춘다. 유효한 쓰임은 셋이다. ① 자간 −0.5px 절대값 고정(482/503회)이 만드는 크기별 상대 자간 편차(−1.11%~−3.47%) 사례 ② 0.9 배수 고정 px 사다리와 페이지 확대·축소 버튼을 함께 둔 공공기관 접근성 조판 ③ 공연 목록·예매 동선의 목록 UI 골격. 다만 **한글이 웹폰트로 그려지지 않는 구간이 있다** — 단원 소개·연간 공연일정 템플릿은 `맑은 고딕`을 폴백 없이 선언해(스타일 20종 56회) macOS에서 Apple SD Gothic Neo로, Windows에서 맑은 고딕으로 그려지므로 두 OS에서 다르게 보인다 |
| rendered | Apple SD Gothic Neo ×15558 · OTS derived font ×9274 · remixicon ×102 · xeicon ×6 |
영문 · Latin국문과 동일
| latinFont | Apple SD Gothic Neo 18,969글리프(82.2%) · OTS derived font 2,942글리프(12.8%) · S-Core Dream 4 692글리프(3.0%) · Montserrat 202글리프(0.9%) |
| latinWeights | 실측 페이스 Regular · Thin · Medium · Bold |
| share | 라틴 23,069글리프 / 한글 24,940글리프 — 지면의 48.1%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Apple SD Gothic Neo를 쓰는 단: group-title 21.6px/700 |
| mixing | 국영문 혼용 노드 810개(전체 3,062개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 48.1%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 82.2%를 그리는 Apple SD Gothic Neo가 한글도 62.4% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Apple SD Gothic Neo · OTS derived font · remixicon |
| rendered | Apple SD Gothic Neo ×18969 · OTS derived font ×2942 · S-Core Dream 4 Regular ×692 · Montserrat Thin ×202 · S-Core Dream 5 Medium ×151 · S-Core Dream 6 Bold ×104 · remixicon ×5 · AppleGothic ×4 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 9px | |
| Max width | 1368px | |
| Section gap | 고정 리듬 없음 — 홈 섹션 경계 실측 간격이 72px(648→720) | |
| Header | 198px fixed (홈·이벤트 2페이지) / relative (서브 8페이지) | |
| Grid Home Cards | 공연 카드 7열 426×408, 거터 31 (섹션 y720 h408) | |
| Grid Notice List | 게시판 3열 338×167, 거터 27, 6건 (홈 y1315 h476) | |
| Grid Poster List | 공연 포스터 5열 214×378, 거터 47, 10건 (예술단 작품 목록, 세로비 1:1.77) | |
| Grid Member Cards | 단원 카드 3열 429×495(창극단)·429×712(무용단)·429×1111(국악관현악단), 거터 0 | |
| Grid Quick Strip | 퀵링크 6열 234×112, 거터 0 (홈 y3650 h156) | |
| Grid Footer Sns | SNS 6열 140×24, 거터 0 | |
| List Rows | 교육 강좌 목록 1,404×72 10행 · 연간 공연일정 표 1,405×44 154행 | |
| Button Padding | 9px 30px(상세보기 알약 r30) · 0 18px(유관사이트 셀렉트) · 0 13.5px(필터 '전체') · 0 0 0 24.3px(퀵메뉴 탭) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| hairline | 2px | 4회 · div·svg 관측만 |
| small | 4px | 12회 · div 소형 박스 |
| — | 10px | 2회 · 관측만 |
| speech | 18px 18px 18px 0px | 9회 · 말풍선형 버튼(좌하단만 직각) |
| pill | 27px | 38회 · 칩·태그 (span·em·div) |
| pill-button | 30px | 2회 · 포스터 위 '상세보기' 버튼 (pad 9×30) |
| tab | 90px 0px 0px 90px | 4회 · 우측 고정 퀵메뉴 탭 — 좌측만 둥글다 |
| circle | 50% | 195회 · SNS·아이콘 버튼·슬라이더 페이지네이션 (최다) |
Guidelines
Do
- 지면은 #FFFFFF 단일로 두고 텍스트를 #111111(3,245회) → #444444(884회) → #666666(150회) 3단으로만 내린다
- 자간은 크기와 무관하게 −0.5px 절대값으로 고정한다(503회 중 482회, 95.8%). 예외는 +0.9px 4회뿐이다
- 제목·본문 px을 0.9 배수 사다리(37.8 · 33.3 · 25.2 · 19.8 · 18 · 16.2 · 14.4)로 잡고 뷰포트에 반응시키지 않는다 — 1920과 1440에서 값이 같다
- 모서리는 0px을 기본으로 두고 원형 50%(195회) · 알약 27px(38회)만 예외로 쓴다 — 카드·이미지·입력창은 전부 직각이다
- 깊이는 그림자가 아니라 1px 선으로 만든다(0/0/1/1 solid rgb(68,68,68) 616회 · 1px solid rgb(130,130,130) 128회)
- 청록 #008494는 검색 버튼 배경과 슬라이드 활성 표시(33회)에만 쓰고 본문·링크 색으로 번지지 않게 한다
- 모션은 0.2s ease(334회)·0.3s(117회)까지만. 스크롤 구동 전환은 0건이고 Swiper 슬라이드 외 연출이 없다
- 콘텐츠 폭을 본체 1368px과 예술단 서브사이트 1260px 두 갈래로 나누고, 헤더는 198px 3단으로 통일한다
Don't
- 브랜드 청록 #008494 위에 흰 텍스트를 본문 크기로 쓰지 않는다 — 4.44:1로 AA 미달인데 28회 쓰였다(사이트 최다 미달 쌍)
- #919191(3.15:1 ×14) · #007DDA(4.25:1 ×14) · #777777(4.48:1 ×27) · #737373 on #F5F5F5(4.35:1 ×12)를 텍스트에 쓰지 않는다 — WCAG 31쌍 중 6쌍 105회가 AA 미달이다
- `font-family: 맑은 고딕`을 폴백 없이 선언하지 않는다(스타일 20종 56회, fallbacks null) — Windows 전용 서체라 macOS에선 Apple SD Gothic Neo로 떨어져 같은 사이트 안에서 조판이 갈린다
- rgba(0,0,0,0.25) 8px 8px 15px 같은 대각선 그림자(34회)를 재현하지 않는다 — 오프셋이 블러의 절반이라 면이 기울어 보이고, 5종 63회가 단계 체계 없이 흩어져 있다
- 페이지 제목 밴드를 '메뉴명없음'으로 내보내지 않는다 — 10페이지 중 6페이지의 37.8px/700 h2가 실제로 그 문자열이고 h1은 10페이지 전부 비어 있다
- 목록 표를 페이지네이션 없이 펼치지 않는다 — 연간 공연일정이 154행 6,847px 한 장(docHeight 7,876)이다
- 이 사이트를 국문 히어로 조판 레퍼런스로 쓰지 않는다 — 폴드에서 큰 글자는 전부 포스터 이미지 안이고 DOM 국문 제목은 37.8px에서 멈춘다
- 본문 line-height를 1.00으로 두지 않는다 — 18px/400 기준단(23회)과 16.2px 링크단이 lh 1.00으로 잡혀 국문 여러 줄에서 줄이 붙는다
