국립현대미술관 MMCA
흰 지면에 검정 한 색, 라운드 0의 전시 이미지를 1380px 폭으로 깔고 글자는 40px에서 멈춘다.
국립현대미술관 홈은 전시·소장품 이미지를 1440 뷰포트에서 1380px 폭(좌우 여백 30px)으로 깔고, 글자는 검정 한 색으로만 얹는 공공 미술관 포털입니다. 화면에 보이는 텍스트 174곳 중 163곳이 #000000이고 웨이트도 400·600 두 단뿐이며, 자간과 행간을 지정한 곳이 사실상 없어 서체 기본값 그대로 조판됩니다. 국문 제목이 있긴 하지만 히어로 전시명 40px/600에서 멈추고 24px과 15px 사이에 중간 단이 비어 있어, 대형 국문 히어로보다는 이미지가 많은 목록·포털형 화면의 조판 기준으로 참고하기 좋습니다. 카드와 이미지의 모서리 반경이 전부 0이고 그림자도 1건뿐이라, 장식을 빼고 사진으로만 지면을 만드는 구성을 볼 때 유용합니다.
https://www.mmca.go.krColor Palette
Label
Line
Background
Static
Accent
Typography
Spoqa Han Sans Neo · 400 / 600국문·라틴 전 단(제목·본문·UI)
Inter · 400 / 600라틴·숫자 (날짜·전화번호·영문 라벨)
Apple SD Gothic Neo · 400폴백
Helvetica · 400폴백
Type Scalepx는 1440(layout
hero40px · 600 · 1.25
다람쥐 헌 쳇바퀴
card-title28px · 600 · 1.25
다람쥐 헌 쳇바퀴
notice-link28px · 400 · 1.25
다람쥐 헌 쳇바퀴
section-title26px · 600 · 1.23
다람쥐 헌 쳇바퀴
nav24px · 600 · 1.71
다람쥐 헌 쳇바퀴
link-card-title24px · 600 · 1.25
다람쥐 헌 쳇바퀴
body15px · 400 · 1.53
다람쥐 헌 쳇바퀴
meta-strong15px · 600 · 1.27
다람쥐 헌 쳇바퀴
footnote13px · 400 · 1.27
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Spoqa Han Sans Neo — self-host 웹폰트(SpoqaHanSansNeo-Regular.woff2 · Bold.woff2). 한글 2,251글리프 중 Regular 1,461(64.9%) · Bold 786(34.9%) · Inter SemiBold 4(0.2%) |
| hangulWeights | 400(Regular 1,399글리프) · 600(Bold 786글리프) 두 단뿐. 300·700은 화면 밖 레이어에만 있다 |
| body | 15px/400, line-height 지정 없음(브라우저 normal = 1.267 실측). 지정된 곳은 메뉴 하위 링크 23px(1.53)·푸터 21px(1.4) |
| sub | 카드 제목 28px/600 · 섹션 제목 26px/600(1920에선 28px) · 링크 카드 제목 24px/600 — 전부 line-height 미지정(1.25) |
| label | 메타 강조 15px/600 · 태그 칩 15px/400(높이 25 · 패딩 0 10 · r13 · 1px solid #333) · 각주 13px/400 |
| mixing | 국문과 라틴을 한 서체(Spoqa Han Sans Neo)가 같이 그리고, 날짜·전화번호 같은 숫자 문자열만 Inter 15px으로 갈린다(라틴 414글리프 = 32.5%). 큰 글씨는 전부 Spoqa이므로 국영문 대비를 조판으로 쓰지 않는다 |
| hangulHeadings | 있다. 화면 최대 텍스트가 국문이다 — 히어로 전시명 40px/600 '이것은 개념미술이 (아니)다'를 Spoqa Han Sans Neo Bold가 그린다(fontsrc.json 한글 Bold maxSize 40 · 1440 DOM 실측 40px/600). 그다음이 카드 제목 28px/600 국문이다. raw(1920)의 43.005px은 화면 밖 '국립현대미술관 스마트 검색' 레이어 제목이므로 국문 히어로로 세지 않는다 |
| verdict | 국문 제목이 지면을 끌지만 40px에서 멈춘다 — 라이브러리 상위(SI빌리지 100px · 카카오뱅크 90px)에 비해 작아 대형 국문 히어로 레퍼런스로는 약하다. 대신 **검정 한 색 · 웨이트 두 단 · 자간 0 · 행간 미지정**으로만 굴러가는 조판이라, 이미지가 많은 공공·문화기관 포털의 국문 조판 기준으로 인용하기 좋다. 웹폰트 판정은 안전하다 — Spoqa Regular·Bold 모두 isCustomFont=true(다운로드된 웹폰트)이고, OS 폰트가 그린 한글은 Apple SD Gothic Neo 8글리프(최대 15px)뿐이라 Mac/Windows 차이가 조판에 영향을 주지 않는다 |
| rendered | Spoqa Han Sans Neo ×1461 · Spoqa Han Sans Neo Bold ×786 · Inter SemiBold ×4 |
영문 · Latin영문 전용
| latinFont | Spoqa Han Sans Neo 750글리프(59.0%) · Inter 495글리프(38.9%) · Helvetica 18글리프(1.4%) · Apple SD Gothic Neo 9글리프(0.7%) |
| latinWeights | 실측 페이스 Bold · SemiBold |
| share | 라틴 1,272글리프 / 한글 2,251글리프 — 지면의 36.1%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Spoqa Han Sans Neo를 쓰는 단: hero 40px/600 · card-title 28px/600 · notice-link 28px/400 · section-title 26px/600 · nav 24px/600 · link-card-title 24px/600 · body 15px/400 · meta-strong 15px/600 · footnote 13px/400 |
| mixing | 국영문 혼용 노드 미측정 — 이 사이트의 fonts.json이 혼용 분리 이전 스키마다(mixedNodes 키 없음). 재추출하면 채워진다 |
| roleNote | Inter 영문 전용(38.9%) |
| verdict | 영문 전용 서체가 있다 — Inter 라틴 38.9% / 한글 0.2%. 다만 타입 스케일에 이 서체로 지정된 단이 없다 — 디스플레이 레퍼런스로 보기 어렵다 |
| sharedWithKorean | 국문과 같은 서체: Spoqa Han Sans Neo · Inter |
| rendered | Spoqa Han Sans Neo ×528 · Inter ×414 · Spoqa Han Sans Neo Bold ×222 · Inter SemiBold ×81 · Helvetica ×18 · Apple SD Gothic Neo ×9 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 5px | |
| Max width | 1380px | |
| Section gap | 섹션 패딩 상 40px / 하 99px (8섹션 중 6섹션이 동일) → 섹션 사이 실질 간격 139px | |
| Header | 203px absolute | |
| Grid Cards | 4열 317px + 거터 37px = 1379 ≈ 콘텐츠 1380 (미술관 4관·링크 카드) | |
| Grid Carousel | 캐러셀 아이템 400px + 거터 15px (전시 6개 400×634 노출) / 소장품은 폭 400 고정·높이 287~500 가변 | |
| Card Padding | 카드에 안쪽 패딩이 없다 — 이미지가 카드 폭을 그대로 채우고 텍스트가 이미지 아래에 붙는다 | |
| Button Padding | CTA 0 30px (높이 46px, r24) · 태그 칩 0 10px (높이 25px, r13) | |
| Gutter | 좌우 여백 30px 고정 (콘텐츠 1380 / 뷰포트 1440 = 95.8%) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| none | 0px | 3회 · 카드·이미지·캐러셀 아이템 전부(layout.json repeated radius 0px ×3). 이 사이트의 기본값이다 |
| micro | 3px | 1회 · 단일 div |
| chip | 13px | 33회 · 태그 칩 50~105×25 (전시·교육·필름앤비디오·다원예술…) |
| dialog | 15px | 13회 · 레이어·다이얼로그 |
| button | 24px | 13회 · CTA 버튼('전시 예약 바로가기' 높이 46 · 패딩 0 30 · 1px solid #000) |
| fab | 50px | 1회 · '스마트 검색' 플로팅 버튼 |
| pill | 500px | 8회 · 아이콘 요소(i 태그) |
| circle | 50% | 8회 · 캐러셀 좌우 화살표 버튼 |
| circle | 100% | 2회 · '상단으로 이동' 버튼(bg #fff · 1px solid #000) · 회원가입 배지 90×90 |
Guidelines
Do
- 텍스트는 #000000 한 색으로 간다 — 가시 텍스트 174곳 중 163곳이 검정이고 보조는 #949494 9곳뿐이다
- 웨이트를 400·600 두 단으로 묶는다. 600은 Bold 파일(SpoqaHanSansNeo-Bold.woff2)로 렌더된다
- 카드·이미지의 모서리는 0px으로 두고 라운드는 칩(13)·버튼(24)·원형(50%)에만 준다
- 콘텐츠 폭을 1380(뷰포트의 95.8%)까지 밀고 좌우 여백은 30px만 남긴다
- 섹션 리듬은 상 40 / 하 99px 고정 — 8섹션 중 6섹션이 같은 값이다
- 반복 단위는 두 개만 쓴다: 4열 317 + 거터 37, 캐러셀 400 + 거터 15
- 간격은 5px 배수(10·15·20·25·30·40)로 잡는다 — 5의 배수 154회 대 8의 배수 16회
- 모션은 0.2s ease 하나로 통일한다(50/57회)
Don't
- #007AFF를 브랜드 색으로 쓰지 않는다 — Swiper 기본 테마가 CSS에 남은 것이고 화면 실측 관측 0회다
- #949494를 본문에 쓰지 않는다(#fff 대비 3.03:1, AA 미달 9곳)
- 16~22px 중간 단을 만들지 않는다 — 이 사이트는 24px에서 15px으로 한 번에 떨어진다
- 자간을 건드리지 않는다. 선언된 letter-spacing은 화면 밖 스킵 링크의 −1.5px 하나뿐이다
- 그림자로 띄우지 않는다 — 홈 전체에 box-shadow 1건, 그라디언트 0건이다
- 다크 섹션·컬러 배경 밴드를 만들지 않는다(8/8 섹션 bg #FFFFFF)
- 헤더를 스크롤 고정으로 만들지 않는다 — #header는 absolute 203px이고 스크롤하면 사라진다
- 스크롤 구동 연출을 기대하지 않는다(motion.json 라이브러리 0 · 전환 0 · ScrollTrigger 0)
