DDP 동대문디자인플라자

메인은 SUIT 60px/800 국문 히어로에 자간 −4%, 그 뒤 78개 게시판 템플릿은 Noto Sans KR에 자간 −0.5px 고정 — 한 도메인에 조판 체계가 둘이다.

DDP는 서울디자인재단이 운영하는 동대문디자인플라자의 공식 사이트로, 리뉴얼된 메인과 게시판으로 굴러가는 하위 페이지가 사실상 다른 사이트처럼 보입니다. 메인은 SUIT ExtraBold 60px 국문 히어로에 자간 −4%를 걸어 최근 국문 조판을 따르지만, 하위 78개 템플릿은 Noto Sans KR로 바뀌고 자간이 크기와 상관없이 −0.5px로 고정됩니다. 헤더 높이가 60px과 111px로 갈리고 콘텐츠 폭도 1392·1240·780 세 종류라, 리뉴얼이 첫 화면에서 멈춘 공공 사이트의 전형을 그대로 볼 수 있습니다. 대분류 다섯 개와 게시판 일곱 종으로 짜인 정보구조가 통째로 남아 있어, 전시·프로그램 일정을 다루는 기관 사이트를 설계할 때 참고가 됩니다.

https://www.ddp.or.kr

Color Palette

Primary

Label

Fill

Line

Background

Accent

Typography

SUIT · 400 / 500 / 600 / 700 / 800display·heading·nav (메인 전용)

Noto Sans KR · 400 / 500 / 600 / 700heading·body·ui (하위 페이지 전부)

Apple SD Gothic Neo · 400fallback (OS 폰트)

Type Scale1440 layout 기준이며 raw(1920)와 크기가 같다(clamp·vw 미사용)

display60px · 800 · 1.5

다람쥐 헌 쳇바퀴

h154px · 800 · 1.5

다람쥐 헌 쳇바퀴

h1-sub48px · 500 · 1.2

다람쥐 헌 쳇바퀴

h240px · 800 · 1.5

다람쥐 헌 쳇바퀴

h330px · 700 · 1.6

다람쥐 헌 쳇바퀴

lead24px · 500 · 1.2

다람쥐 헌 쳇바퀴

h420px · 600 · 1.6

다람쥐 헌 쳇바퀴

nav16px · 700 · 1.5

다람쥐 헌 쳇바퀴

body16px · 400 · 1.2

다람쥐 헌 쳇바퀴

label14px · 500 · 1.5

다람쥐 헌 쳇바퀴

caption12px · 400 · 1.5

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Noto Sans KR 20,333글리프(86.8%) + SUIT 계열 2,802(12.0%) + Apple SD Gothic Neo 300(1.3%). 선언 1순위는 SUIT지만 실제로 한글의 대부분을 그리는 것은 구글에서 받는 Noto Sans KR이다 — SUIT는 홈(1,852글리프)과 전 페이지 GNB(75글리프씩)에만 산다. CDP 보고명 'Noto Sans KR Thin'은 가변 폰트의 첫 명명 인스턴스로 보이며 실제 렌더 웨이트는 400·500·600·700이다(미확인)
hangulWeights	400 주력(Noto 15,538 · Apple SD Gothic Neo 300 · SUIT 57) · 700(Noto 1,836 · SUIT 1,544) · 500(Noto 2,567 · SUIT Medium 357) · 800(SUIT ExtraBold 779, 홈 히어로·섹션 제목 전용) · 600(Noto 392 · SUIT SemiBold 48)
body	16px w400 lh1.2 ls−0.5px (count 24, 최다 스타일) · 굵은 본문은 16px w700 lh1.5 ls−0.5px (count 10)
sub	24px w500 lh1.2 ls−0.5px (게시글 상세 헤드 제목) · 30px w500 lh1.6 (목록 페이지 리드 '카테고리별 일정을 확인해보세요.')
label	SUIT 14px w500 ls−0.56px (count 16) · Noto Sans KR 14px w500 ls−0.56px (count 8) · 12px w400 ls−0.5px (count 8)
mixing	라틴 전용 서체가 따로 없어 국영문을 같은 서체가 그린다. 홈은 SUIT, 하위는 Noto Sans KR로 페이지 단위 분리이며 한 줄 안에서 서체가 갈리는 곳은 GNB뿐이다 — 하위 페이지의 GNB 라벨 '공간안내'는 SUIT×4 + Noto Sans KR×2로 한 단어가 두 서체에 나뉘어 그려진다(폰트 로드 타이밍 추정, 미확인). 라틴 잔여는 Arial 8글리프 · Helvetica 2글리프뿐이다
hangulHeadings	있음 — 홈 히어로 '서울라이트' 60px/800 SUIT ExtraBold(1440 실측, 지면 rgb(26,29,46) 900px)와 섹션 제목 54px/800 '프로그램' · 40px/800 4곳('체험 및 이벤트'·'DDP 구석구석'·'DDP 소식'·'운영정보')이 전부 순국문이다. 다만 60px·54px 단은 홈 1페이지에만 있고, 하위 78개 템플릿에서 국문 최대는 48px/500(건축투어 '투어')·30px/700(게시글 본문 제목)까지다
verdict	국문 대형 조판 레퍼런스로 유효하되 범위가 홈 1페이지다 — 60px/800 + lh1.5 + 자간 −4%는 국문 히어로 값으로 그대로 쓸 수 있고, 40px/800 섹션 제목까지 같은 −4% 비율이 이어져 크기별 자간 규칙(비례)의 예시가 된다. 반대로 하위 페이지는 크기와 무관한 −0.5px 절대 자간·lh1.2로 완전히 다른 체계라 같은 사이트 안에서 '하면 안 되는 쪽'의 예시로 쓰는 편이 정확하다. 본문 조판 레퍼런스로는 lh1.2가 국문 가독 기준(1.5~1.7)에 크게 못 미쳐 권하지 않는다
rendered	Noto Sans KR Thin ×20333 · SUIT ×1601 · SUIT ExtraBold ×792 · SUIT Medium ×357 · Apple SD Gothic Neo ×300 · SUIT SemiBold ×52

영문 · Latin국문과 동일

latinFont	Noto Sans KR 21,687글리프(87.0%) · SUIT 3,224글리프(12.9%) · Apple SD Gothic Neo 19글리프(0.1%) · Arial 8글리프(0.0%)
latinWeights	실측 페이스 Thin · Medium · ExtraBold · SemiBold
share	라틴 24,940글리프 / 한글 23,435글리프 — 지면의 51.6%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Noto Sans KR를 쓰는 단: h1-sub 48px/500 · h3 30px/700 · lead 24px/500 · h4 20px/600 · body 16px/400 · caption 12px/400
mixing	국영문 혼용 노드 530개(전체 1,872개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	라틴 51.6%를 국문 서체가 그대로 그린다 — 영문용 선택 없음
verdict	영문 전용 서체 없음 — 라틴 87.0%를 그리는 Noto Sans KR가 한글도 86.8% 그린다. 국영문을 한 서체가 맡는다
sharedWithKorean	국문과 같은 서체: Noto Sans KR · SUIT · Apple SD Gothic Neo
rendered	Noto Sans KR Thin ×21687 · SUIT ×1591 · SUIT Medium ×1096 · SUIT ExtraBold ×481 · SUIT SemiBold ×56 · Apple SD Gothic Neo ×19 · Arial ×8 · Helvetica ×2

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	compact
Base unit	4px
Max width	1392px
Docs width	780px
Section gap	홈 섹션 padding-bottom 80(프로그램 타이틀·DDP 소식)
Header	60px fixed
Grid Cards	홈 프로그램 4열 262×512 gap 20 · 체험/이벤트 558×348 gap 20 · 구석구석 3열 451×299 gap 20 · 운영정보 5열 262×56 gap 20 — 거터는 전부 20px
Grid List	게시글 목록 행 779×146 / 779×113 · 검색 결과 행 1240×151 · 소식 목록 1222×58
Card Padding	게시글 상세 헤드 pad 90/90(높이 635) · 목록 페이지 히어로 없음
Button Padding	'오시는길 및 주차안내' 5 40 7 20 · 'Tour 건축투어' 5 10 5 5 · 필터 '전체' 0 30 0 10 · 셀렉트 8 40 8 14
Header Sub	하위 9개 페이지는 header 111px fixed rgb(2,4,3) — 홈(60px 반투명)과 높이·불투명도가 모두 다르다
Content Widths	1392(홈, 27회) · 1240(목록·소개·검색, 55~67회) · 780(게시글 상세, 9~81회)

Border Radius

Role	Value	Preview
—	2px	1회 · 관측만
standard	4px	91회 · 메뉴 항목·버튼 표준
small	5px	10회 · 이미지 썸네일
medium	8px	32회 · 메가메뉴 패널
card	12px	4회 · 카드
—	13px	10회 · 본문 안 강조 블록(p)
—	16px	1회 · 카드 1회
—	20px	7회 · 버튼
—	25px	9회 · 라벨 칩
circle	50%	23회 · 아이콘 버튼
circle	100%	29회 · 링크 아이콘
pill	9999px	41회 · 'Tour 건축투어' 알약 버튼·'위로 이동' 원형 버튼

Guidelines

홈 대형 국문은 SUIT ExtraBold 60/800 lh1.5에 자간 −4%(−2.4px). 54px(−2.16) · 40px(−1.6)도 같은 −4% 비율을 유지한다
하위 페이지 본문은 Noto Sans KR 16/400 lh1.2 자간 −0.5px — 40개 스타일 중 count 24로 가장 많이 쓰인 단이다
콘텐츠 폭을 용도별 3단으로 나눈다 — 홈 1392 · 목록/소개 1240 · 게시글 본문 780
게시글 상세는 회색 헤드(rgb(249,249,249) 635px, pad 90/90) 뒤에 흰 본문을 잇고, 211px 페이저(pad 40/120)로 닫는다
카드 그리드 거터는 20px 하나로 통일한다 — 262×512 · 558×348 · 451×299 · 262×56 전부 gap 20
어두운 면(rgb(26,29,46) 히어로 · rgb(26,26,26) 운영정보·푸터 208px) 위에서는 보조 텍스트를 #ADB6BD로 쓴다(8.46:1)
전환은 0.3s ease 하나로 맞춘다(992회, 전체 1,348회의 74%). 드롭다운만 0.4s cubic-bezier(0.4,0,0.2,1)

Don't

#777777을 흰 지면 본문에 쓰지 않는다 (4.48:1, AA 미달 79쌍). #A6A6A6은 2.43:1로 더 낮다(36쌍)
홈의 SUIT 조판(−4% 비례 자간·lh1.5)을 하위 페이지에 그대로 옮기지 않는다 — 하위는 Noto Sans KR·−0.5px 절대 자간·lh1.2로 다른 체계다
자간을 절대값으로 고정하지 않는다 — 같은 −0.5px이 48px에서 −1.0%, 12px에서 −4.2%가 되어 큰 글자는 헐겁고 작은 글자는 붙는다
라운드를 12종(2·4·5·8·12·13·16·20·25·50%·100%·9999px)으로 늘리지 않는다. 50%와 100%를 같은 원형 목적에 병용하지 않는다
로드만 하고 렌더에 안 쓰이는 웹폰트를 남기지 않는다 — PretendardVariable.woff2와 ubuntu-v19-latin-regular는 CDP 집계 0글리프다
헤더 높이를 페이지 종류마다 바꾸지 않는다 (홈 60px 반투명 · 하위 111px 불투명)
0.1px·0px 폰트 크기로 접근성 텍스트를 숨기지 않는다 (0.1px 10회 · 0px 13회 관측)