한국문화예술위원회
미디어 없이 65px/400 국문 한 줄로 여는 900px 게이트웨이 — 자간은 50px부터 12px까지 −0.5px 절대 고정이고, 접근성 글자 크기 조절이 rem 배율로 지면 전체를 다시 잰다.
한국문화예술위원회는 이 배치의 공공기관 셋 가운데 유일하게 미디어 없이 글자로 첫 화면을 여는 사이트입니다. 첫 화면은 900px 한 장짜리 게이트웨이로, 65px 제목 한 줄과 운영 누리집 10개를 나열하는 것이 전부이고 실제 기관 홈은 `/main/arko/`에 따로 있습니다. 헤더에 글자 크기 5단 조절이 붙어 있는데 이 배율이 rem을 타고 여백까지 같이 늘려서, 실측 크기의 절반이 16.5·18.15·49.5px 같은 1.1 배수 값으로 나옵니다. 국문 대형 제목을 400 웨이트로 세우는 예시와 접근성 기능이 조판에 미치는 영향을 볼 때 참고가 됩니다.
https://www.arko.or.krColor Palette
Primary
Label
Line
Background
Static
Accent
Typography
NotoKR (notokr-*.woff2) · 400 / 500 / 700display·heading·body·ui — 한글 97.4%, 라틴 94.9%
NanumSquare · 400 / 700 / 800장식 제목 (한글 40글리프 · 라틴 151글리프)
Apple SD Gothic Neo · 400 / 700폴백 (한글 41글리프 · 라틴 303글리프)
Arial · 400폴백 (라틴 69글리프)
Type Scale**자간은 −0
display65px · 400 · 1.6
Handgloves 123
page-title50px · 400 · 1.6
Handgloves 123
h149.5px · 400 · 1.6
Handgloves 123
h245px · 700 · 1.6
다람쥐 헌 쳇바퀴
h336.3px · 700 · 1.6
Handgloves 123
h435px · 700 · 1.6
Handgloves 123
lead22px · 400 · 2.91
Handgloves 123
h519.8px · 400 · 1.6
Handgloves 123
body18.15px · 400 · 1.6
Handgloves 123
body-sm17.6px · 400 · 1.6
Handgloves 123
caption15px · 400 · 1.6
Handgloves 123
caption-sm12px · 400 · 1.6
Handgloves 123
국문 · Korean
| hangulFont | NotoKR-Regular 28,256글리프(97.4%) · NotoKR-Medium 660(2.3%) · Apple SD Gothic Neo 41(0.14%) · NanumSquare 40(0.14%). 총 28,997글리프. 선언 1순위(notokrRegular)와 실제가 일치하고, 사실상 **한 페이스가 전 지면을 그린다** — 라이브러리 공공기관 넷 중 서체 집중도가 가장 높다(ddp 86.8% · sac 82.8% · gugak 41.8%) |
| hangulWeights | 400 28,580(98.6%: NotoKR-Regular 27,886 · NotoKR-Medium 656 · Apple SD Gothic Neo 32 · NanumSquare 6) · 700 408(NotoKR-Regular 370 · NanumSquare 33) · 500 4. **웨이트가 사실상 하나다** — 65 · 50 · 49.5 · 35px 대형 제목까지 전부 400이고, 700은 NanumSquare 45px 섹션 제목과 게이트웨이 워드마크 36.3px에만 붙는다 |
| body | 18.15px/400 lh1.6 ls−0.5px (count 26, 전체 최다) · 17.6px/400 lh1.6 (count 11) · 16px/400 lh1.6 (count 15) · 15px/400 lh1.6 (count 21) |
| sub | 22px/400 lh2.91 (count 7, 리드) · 21px/400 lh2.86 (count 6) · 19.8px/400 lh1.6 (count 7, 게시판 목록 제목) |
| label | 16.5px/400 lh1.6 (count 11) · 14.3px/400 lh2.0 (count 1) · 14px/400 lh1.6 (count 4) · 12px/400 lh1.6 (count 1) |
| mixing | 라틴 전용 서체가 없어 NotoKR가 국영문을 함께 그린다. 다만 **NotoKR에 없는 글리프에서 OS 폰트가 튄다** — layout 폰트 샘플의 '글자·화면 설정' 18.15/400이 NotoKR-Regular×15 + Apple SD Gothic Neo로 잡히고(가운뎃점 '·'), Apple SD Gothic Neo가 라틴 303글리프·한글 41글리프를 그린다. Windows에서는 이 자리가 다른 서체로 대체된다. NanumSquare는 영문 워드마크·숫자(라틴 151 · 한글 40)에만 쓰인다 |
| hangulHeadings | **있다 — 이 배치에서 가장 크다.** 게이트웨이 `www.arko.or.kr/`의 65px/400 h2 '아르코 통합플랫폼'(1440 실측, bg #F2F5FA 900px, 부제 35px/400 '문화예술과 국민을 잇고,')이 사이트 최대이고, 하위 3템플릿 공통 페이지 타이틀 50px/400('공모안내'·'자료'·'전시·행사·공연·교육')과 본문 제목 49.5px/400('전체'·'민원 신청')이 그다음이다. 운영 누리집은 45px/700 NanumSquare로 섹션 제목('아르코미술관 이용안내'·'대관현황'·'대관시설')을 세운다. **미디어 없이 조판만으로 첫 화면을 여는 것은 라이브러리 공공기관 넷 중 여기뿐이다**(sac 900px 포스터 슬라이더 · gugak 1,140px 슬라이더 · ddp 900px 이미지 히어로) |
| verdict | 국문 대형 조판 레퍼런스로 **부분 유효**하다. 쓸 수 있는 것: ① 65px/400 · 50px/400 · 49.5px/400로 이어지는 **400 웨이트 대형 국문**의 실측값(자간 −0.5px · 행간 1.6). 굵기를 올리지 않고 크기만으로 위계를 만드는 예시라 hanwha 54px/300 · lunit 84px/500 계열과 나란히 볼 수 있다. ② 미디어 없이 900px 한 장을 조판으로 채우는 게이트웨이 구성. 쓰면 안 되는 것: 자간 −0.5px 절대 고정은 50px에서 −1.0% · 12px에서 −4.2%로 크기별 비율이 뒤집히므로 그대로 옮기면 작은 글자가 붙는다. 그리고 65 · 50 · 49.5 · 45 · 36.3 · 35px이 0.5~1px 간격으로 붙어 있어 **스케일로는 쓸 수 없다** — 정수 단과 1.1 배수 단이 접근성 배율 때문에 한 지면에 섞인 결과다 |
| rendered | NotoKR-Regular ×28256 · NotoKR-Medium ×660 · Apple SD Gothic Neo ×41 · NanumSquare ×40 |
영문 · Latin국문과 동일
| latinFont | NotoKR-Regular 8,513글리프(78.7%) · NotoKR-Medium 1,715글리프(15.9%) · Apple SD Gothic Neo 303글리프(2.8%) · NanumSquare 151글리프(1.4%) |
| latinWeights | 실측 페이스 Regular · Medium · Bold |
| share | 라틴 10,812글리프 / 한글 28,997글리프 — 지면의 27.2%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 NotoKR-Regular를 쓰는 단: display 65px/400 · page-title 50px/400 · h1 49.5px/400 · h3 36.3px/700 · h4 35px/700 · lead 22px/400 · h5 19.8px/400 · body 18.15px/400 · body-sm 17.6px/400 · caption 15px/400 · caption-sm 12px/400 |
| mixing | 국영문 혼용 노드 763개(전체 2,666개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 27.2%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 78.7%를 그리는 NotoKR-Regular가 한글도 97.4% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: NotoKR-Regular · NotoKR-Medium · Apple SD Gothic Neo · NanumSquare |
| rendered | NotoKR-Regular ×8513 · NotoKR-Medium ×1715 · Apple SD Gothic Neo ×303 · NanumSquare ×151 · Arial ×69 · NotoKR-Bold ×50 · Helvetica ×11 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | regular | |
| Base unit | 5.5px | |
| Max width | 1400px | |
| Section gap | 운영 누리집(아르코미술관·예술가의집)은 섹션 패딩 100/100으로 일정하다 — artcenter §1·§2, arthouse §1·§3·§4가 전부 100/100이고 §0만 0/0이다. 후원 사이트(/supp)는 75/75, 하위 게시판은 22/22 | |
| Header | 171px static | |
| Grid Cards | 게이트웨이 운영누리집 4열 290×214 거터 41 radius `60px 15px` bg #fff (10개) · ARKO 사업공모 395×214 거터 28 r20 (15개) · exhibit·education·event 290×433 거터 30 r20 (23개) · 공지사항 292×258 거터 20 (12개) | |
| Grid Subsite | 아르코미술관 전시 3열 300×438 거터 66 · 이용안내 2행 240×54 거터 19 · 일자 카드 3열 300×360 거터 65 · 후원상품 4열 328×416 거터 30 | |
| Grid Board | 게시판 목록 행 1037×63(정책연구 3행 반복) · 콘텐츠 아코디언 행 1400×89 · 1400×96 · 민원 목록 1400×61 10행 | |
| Card Padding | 탭 버튼 13.2×11 (=12×10 × 1.1) · 인풋 5.5×11 (=5×10 × 1.1) | |
| Button Padding | 13.2×11 (탭, r0, 17.6px/400) · 0 (검색, bg #383D53 16.5px/400) · 0 (마젠타 검색, r `48px 20px 48px 48px`, 26px/400) · 0×35 (인풋, r `45px 0 0 20px`) | |
| Header Note | 셸이 셋이다 — ① 본사이트 하위(게시판·콘텐츠·옴부즈만) 171px static 투명 + 274px rgb(51,51,51) 푸터 5그룹, ② 운영 누리집(아르코미술관·예술가의집·후원) 97px static 투명 + 197px(후원 172px) rgb(31,34,43) 푸터 4그룹, ③ 게이트웨이(`/`)는 헤더·푸터 없음. 기관 홈(`/main/arko/`)만 171px fixed 흰색이다 |
Border Radius
| Role | Value | Preview |
|---|---|---|
| — | 6px | 11회 · 버튼 (관측만) |
| — | 6.6px | 5회 · div — 6×1.1 배수값 (관측만) |
| — | 10px | 1회 · div (관측만) |
| chip | 12px | 63회 · 슬라이더 이전/다음 버튼 |
| — | 15px | 13회 · ul (관측만) |
| — | 17px | 1회 · button (관측만) |
| standard | 20px | 487회 · 카드·버튼 표준 — 라운드 총량의 60% |
| — | 23px | 1회 · a (관측만) |
| image | 25px | 29회 · 이미지·링크 |
| — | 27px | 3회 · a (관측만) |
| input | 30px | 22회 · 인풋 |
| — | 45px | 1회 · a (관측만) |
| — | 50px | 1회 · div (관측만) |
| — | 64px | 1회 · ul (관측만) |
| asymmetric-card | 60px 15px | 10회 · 게이트웨이 운영누리집 카드 290×214 — 대각선으로 마주 보는 모서리만 크게 굴린다 |
| asymmetric-tab | 42px 0px 0px 42px | 8회 · aside/h2 — 왼쪽만 반원 |
| asymmetric-panel | 0px 0px 20px 20px | 5회 · 드롭다운 패널 하단 |
| asymmetric-image | 0px 141px 141px 0px | 4회 · 이미지 — 오른쪽을 통째로 반원으로 자른다 |
| asymmetric-blob | 230px 50px | 2회 · div 블롭 형태 |
| asymmetric-search | 48px 20px 48px 48px | 1회 · 마젠타 검색 버튼 — 한 모서리만 덜 굴려 화살표처럼 보이게 한다 |
| circle-half | 50% | 17회 · 탭·span 원형 |
| circle | 100% | 66회 · 아이콘 링크 |
Guidelines
Do
- 미디어 없이 조판으로 여는 화면을 만들 때 65px/400 국문 한 줄 + 900px 한 장(bg #F2F5FA) 구성을 참고한다 — 라이브러리 공공기관 넷 중 유일한 사례다
- 자간을 −0.5px 하나로 고정한다 — 50px부터 12px까지 19개 단이 전부 같은 값이고 예외가 26px 한 건뿐이라 규칙이 실제로 지켜진다
- 행간은 1.60을 표준으로 잡고 리드 단만 2.0~2.91로 벌린다(22px lh2.91 · 21px lh2.86 · 25px lh2.00)
- 국문 대형 제목을 400 웨이트로 세운다 — 65 · 50 · 49.5 · 35px이 전부 400이고 700은 NanumSquare 45px 섹션 제목에만 쓴다
- 선택 상태는 면이 아니라 border-top 2px solid #3D52BB(142회)로 알린다 — 이 사이트의 유일한 굵은 보더다
- 페이지 타이틀에 밴드 색을 깔지 않는다 — y272부터 1440×282를 흰 지면 그대로 두고 여백으로 구획한다
- 라운드 20px(487회)을 표준으로 두되 강조가 필요한 자리에만 비대칭 라운드를 쓴다 — `60px 15px`(게이트웨이 카드 10개) · `0 141px 141px 0`(이미지) · `48px 20px 48px 48px`(검색 버튼) 식으로 7종 30회에 그친다
Don't
- #777777을 본문·탭 라벨에 쓰지 않는다 — 흰 지면 4.48:1로 AA 미달인데 508쌍으로 이 사이트 최다 미달쌍이다
- #4E75DC를 링크 색으로 쓰지 않는다 (4.28:1, 41쌍 AA 미달)
- 정수 스케일과 1.1 배수 스케일을 한 지면에 섞지 않는다 — 50·45·35·30·25·20·18·15px 단과 49.5·36.3·19.8·18.15·17.6·16.5·14.3px 단이 공존해 크기 위계가 0.5~1px 차이로 붙는다(49.5 대 50, 17.6 대 18)
- 절대 자간(−0.5px)을 12px까지 그대로 내리지 않는다 — 12px에서 −4.2%가 된다
- 웹폰트를 웨이트별로 다 로드하고 안 쓰지 않는다 — NanumSquare 4웨이트 8파일을 받아 한글 40글리프(0.14%)만 그린다
- 한 사이트에 셸을 셋 두지 않는다 — 헤더 171/97/없음 · 푸터 274 rgb(51,51,51) 5그룹 / 197 rgb(31,34,43) 4그룹 / 없음으로 갈려 같은 기관 안에서 화면 정체성이 흔들린다
- 게이트웨이와 기관 홈을 분리할 때 진입 경로를 확인한다 — `www.arko.or.kr/`(docH 900)와 `/main/arko/`가 둘 다 '홈'이라 첫 화면이 두 번 나온다
- 그라디언트를 6종으로 흩지 않는다 — 빨강→보라(5회) · 흰색→파랑 · 남색→살구 · 노랑 단색 등 서로 무관한 값들이 남아 있다
