예술의전당
홈은 900px 포스터 슬라이더가 다 하고, 조판은 하위 8템플릿이 공유하는 251px 타이틀 밴드 48px/500 하나로 끝난다 — 자간·행간을 건드리지 않는 공공 목록 사이트.
예술의전당은 공연·전시 일정을 파는 공공 문화시설 사이트로, 첫 화면을 900px 포스터 슬라이더에 통째로 내주고 글자로는 아무 말도 하지 않습니다. 하위 8개 템플릿은 251px 짜리 회색 타이틀 밴드에 48px 대분류 이름을 얹는 한 가지 골격을 그대로 반복해, 메인과 하위가 갈리지 않고 한 벌로 굴러가는 편입니다. 한글 29,448글리프를 Pretendard 한 서체가 전부 그리고, 자간과 행간은 50개 스타일 중 각각 4개·9개에만 지정돼 사실상 브라우저 기본값으로 둡니다. 국문 히어로 조판을 얻을 곳은 아니지만, 공연 목록·게시판·회차 카드가 많은 기관 사이트의 IA와 카드 밀도를 볼 때 참고가 됩니다.
https://www.sac.or.krColor Palette
Primary
Label
Line
Background
Static
Accent
Typography
Pretendard · 300 / 400 / 500 / 600 / 700display·heading·body·ui·caption, 한글 100%
NanumSquare · 400선언·로드만 (렌더 0글리프)
Apple SD Gothic Neo · 400폴백 (라틴 13글리프)
Type Scale크기 기준은 layout
page-title48px · 500 · normal
다람쥐 헌 쳇바퀴
h235px · 700 · 1
다람쥐 헌 쳇바퀴
h330px · 700 · normal
다람쥐 헌 쳇바퀴
card-title25.5px · 700 · normal
다람쥐 헌 쳇바퀴
lead24px · 500 · normal
다람쥐 헌 쳇바퀴
h420px · 700 · 1.5
다람쥐 헌 쳇바퀴
body-lg20px · 400 · normal
다람쥐 헌 쳇바퀴
body17px · 400 · normal
다람쥐 헌 쳇바퀴
body-sm16px · 400 · 1.56
다람쥐 헌 쳇바퀴
link15px · 400 · normal
다람쥐 헌 쳇바퀴
nav15px · 700 · normal
다람쥐 헌 쳇바퀴
caption11px · 700 · 1.09
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard 29,448글리프 100% (CDP 1440, 10페이지). 페이스별로 Pretendard 24,379(82.8%) · Pretendard Light 2,816(9.6%) · Pretendard Medium 1,869(6.3%) · Pretendard SemiBold 374(1.3%) · Pretendard Black 10(0.03%). 선언 1순위도 Pretendard 하나라 선언과 실측이 일치한다 — 이 배치의 공공기관 네 곳 중 유일하다. 함께 선언된 NanumSquare_acR.woff는 렌더 0글리프다 |
| hangulWeights | 400 22,512(주력) · 300 2,816(Pretendard Light — '입장권 운영안내' 한 페이지가 2,816 전부를 쓴다) · 500 1,869 · 700 1,858 · 600 374. 700 웨이트의 CDP 보고명이 'Pretendard'라 페이스명과 웨이트가 1:1로 대응하지 않는다 |
| body | 17px/400 lh normal (count 16) · 16px/400 lh1.56 (count 10, 행간이 지정된 유일한 본문 단) · 15px/400 (count 38, 전체 최다) |
| sub | 24px/500 (count 5, 섹션 리드) · 20px/400 ls−1px (count 14, 카드 제목·목록 항목) |
| label | 15px/700 (count 22, GNB 대분류) · 12px/700 (count 10) · 11px/700 lh1.09 (count 9, 일정표 배지) |
| mixing | 라틴 전용 서체가 없어 국영문을 Pretendard 한 서체가 그린다. 페이지 단위로 서체가 갈리는 곳도 없다 — 10페이지 전부 Pretendard 단일이다. 라틴 잔여는 Apple SD Gothic Neo 13글리프 · Lucida Grande 3글리프뿐이고, 이메일 주소(classic@nol-universe.com 등)와 회차·요금 숫자가 라틴 몫의 대부분이다 |
| hangulHeadings | 있으나 작다 — 최대는 하위 8템플릿 공통 타이틀 밴드의 48px/500이고 그 내용은 '방문·이용'·'대관안내'·'기관소개'·'공연·전시'·'회원서비스' 같은 4~5자 대분류 라벨이다(1440 실측, bg rgb(65,65,76) 251px). 그다음이 월간일정 35px/700 · 게시판 본문 30px/700이다. **홈에는 국문 대형 제목이 한 줄도 없다** — 900px 히어로가 포스터 슬라이더이고 그 안의 최대 텍스트가 슬라이드 캡션 25.5px/700이다 |
| verdict | 국문 히어로 레퍼런스로는 부적합하다 — 48px/500이 사이트 최대이고 그마저 4~5자 라벨이라 문장 조판의 근거가 안 된다. 대신 두 가지로 쓸 수 있다. ① **자간·행간을 지정하지 않은 국문 지면이 어떻게 읽히는지의 대조군**: raw 50개 스타일 중 자간 4건·행간 9건뿐이라 lh normal 본문의 실제 예시다(권장이 아니라 반례로 본다). ② **공연 목록·게시판 조판**: 169×270 세로 포스터 카드 49개, 1060×59 게시판 행, 7열 달력 같은 밀도 높은 국문 목록의 실측값이 필요할 때 참고가 된다 |
| rendered | Pretendard ×24379 · Pretendard Light ×2816 · Pretendard Medium ×1869 · Pretendard SemiBold ×374 · Pretendard Black ×10 |
영문 · Latin국문과 동일
| latinFont | Pretendard 24,839글리프(99.9%) · Apple SD Gothic Neo 13글리프(0.1%) · Lucida Grande 3글리프(0.0%) |
| latinWeights | 실측 페이스 Light · Medium · Black · SemiBold |
| share | 라틴 24,855글리프 / 한글 29,448글리프 — 지면의 45.8%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Pretendard를 쓰는 단: page-title 48px/500 · h2 35px/700 · h3 30px/700 · card-title 25.5px/700 · lead 24px/500 · h4 20px/700 · body-lg 20px/400 · body 17px/400 · body-sm 16px/400 · link 15px/400 · nav 15px/700 · caption 11px/700 |
| mixing | 국영문 혼용 노드 1,013개(전체 2,663개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 45.8%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 99.9%를 그리는 Pretendard가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard |
| rendered | Pretendard ×22715 · Pretendard Light ×1085 · Pretendard Medium ×983 · Pretendard Black ×35 · Pretendard SemiBold ×21 · Apple SD Gothic Neo ×13 · Lucida Grande ×3 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 10px | |
| Max width | 1280px | |
| Section gap | 홈은 히어로 끝(900) → §1 시작(1085) 185 | |
| Header | 109px fixed | |
| Grid Cards | 목록 상단 공연 카드 49개 169×270(아카데미)·169×286(월간일정), 거터 20, r 0 · 홈 알림판 3열 295×308 거터 25 · 패키지 4열 262×180 거터 48 · 대관 4열 192×258 거터 0 | |
| Grid Board | 게시판 목록 행 1060×36(유실물 3행)·1060×59(30행)·1060×60(정보공개 14행) · 아카데미 안내 5열 208×92 거터 20 r12 | |
| Card Padding | 월간일정 7열 192×1,505(달력 한 열이 한 요일) | |
| Button Padding | 10×55 (검색, r0) · 10×20 (+ 더보기, r0) · 12×60/12×40 (매뉴얼 확인하기, r0) · 5×10 (파일 다운로드, r0) | |
| Header Home | 홈만 101px fixed transparent — 히어로 위에 겹친다. 하위 9페이지는 109px fixed 흰색 |
Border Radius
| Role | Value | Preview |
|---|---|---|
| square | 0px | 13회 · 버튼 8개·인풋 5개 전부 — 샘플 컴포넌트에 라운드가 하나도 없다 |
| box | 3px | 5회 · 작은 박스 |
| standard | 5px | 193회 · div 박스 표준 |
| — | 10px 0px | 9회 · 탭 ul 상단만 둥근 모서리 |
| card | 12px | 5회 · 아카데미 안내 5열 카드 208×92 |
| — | 13px | 18회 · 버튼 (관측만) |
| — | 15px | 4회 · 관측만 |
| — | 18px | 3회 · 버튼 (관측만) |
| — | 22px | 1회 · 버튼 (관측만) |
| — | 23px | 4회 · a/span (관측만) |
| image | 25px | 280회 · 이미지 라운드 표준 — 라운드 총량의 절반 이상을 이미지가 쓴다 |
| — | 40px | 1회 · 버튼 (관측만) |
| — | 50px | 3회 · span (관측만) |
| — | 70px | 20회 · 버튼 (관측만) |
| pill | 100px | 6회 · li/button 알약 |
| circle-half | 50% | 28회 · 원형 버튼 |
| circle | 100% | 47회 · 슬라이더 페이지네이션 점 17×17 등 |
Guidelines
Do
- 국문은 Pretendard 한 서체로 끝낸다 — 한글 29,448글리프 100%가 Pretendard 5페이스(Regular 82.8% · Light 9.6% · Medium 6.3% · SemiBold 1.3% · Black 0.03%)이고 선언 1순위와도 일치한다
- 하위 페이지는 y=110부터 1440×251 타이틀 밴드(bg #41414C, 48px/500 흰 글자)로 연다 — 8개 템플릿이 같은 골격을 쓴다
- 본문 기준은 17px/400(count 16)과 목록 15px/400(count 38, 최다). 긴 단락만 16px/400 lh1.56으로 내린다
- 액센트 #E6002D는 글자와 1px 테두리(rgb(237,26,59))에만 쓴다 — 96회 전부 텍스트·보더이고 배경 사용이 0이다
- 라운드는 이미지 25px(280회)·박스 5px(193회) 둘로 잡고 버튼·인풋은 0px으로 각지게 둔다(샘플 버튼 8·인풋 5 전부 r0)
- 카드 썸네일 위 텍스트는 하단 그라디언트 rgba(0,0,0,.49) 35% → 투명(9회)으로 대비를 만든다
- 모션은 0.3s ease-in-out 하나로 통일한다 — 892회 중 690회가 이 값이고 링크 65 · 버튼 4 컨텍스트가 전부다
Don't
- #878787(3.59:1, 141쌍)·#A4A4A4(2.49:1, 70쌍)을 본문에 쓰지 않는다 — 흰 지면에서 AA 미달이다
- 카테고리 파스텔 4색 위에 흰 글자를 얹지 않는다 — #95C19C 2.02 · #95ABC1 2.37 · #B495C1 2.62 · #9395E2 2.75로 93쌍 전부 AA 미달이다
- #E6002D 면 위에 #555555 글자를 놓지 않는다 (1.56:1, 56쌍)
- 국문 히어로 조판을 여기서 가져오지 않는다 — 홈 900px 안의 최대 국문이 25.5px/700이고 48px/500 밴드는 4~5자 대분류 라벨이다
- 자간·행간을 그대로 옮기지 않는다 — raw 50개 스타일 중 자간 지정 4건·행간 지정 9건뿐이라 나머지는 브라우저 기본값이다. 국문 본문에 lh normal은 권하지 않는다
- #007AFF를 브랜드 색으로 쓰지 않는다 — Swiper 기본 화살표 색 8회(1페이지)이지 조판 선택이 아니다
- 웹폰트를 상대 경로로 선언하지 않는다 — 27개 파일이 18개 디렉토리에서 각각 요청돼 URL이 252개가 됐고, 같은 방식으로 걸린 NanumSquare_acR.woff는 한 글자도 그리지 않는다
- 라운드를 16종으로 흩지 않는다 — 25·5·0 세 값 밖의 13종은 합쳐 100회 남짓이다
