Design System · v2.0 — Pretendard
← Home

Design Foundations · 2026

지대모를
구성하는
시각 언어

랜딩 페이지의 Pretendard 시스템을 단일 진실의 원천으로 삼는다. 한글·라틴·숫자가 한 가족 안에서 무게 대비로 위계를 만들고, 메타·라벨·날짜만 DM Mono로 분리한다.

Version v2.0
Tokens system/tokens.css
Mode Dark · Pretendard
01

— 따뜻한 어둠, 황금, 그리고 다섯 가지 입장

거의 검정에 가까운 따뜻한 바탕에 황금(gold)을 단일 주조색으로 둔다. 세션마다 다루는 주제의 결을 시각적으로 구분하기 위해 러스트·티얼·블루·퍼플 네 가지 보조 색을 같은 채도·명도 대역에 배치했다.

Surface · 표면

Canvas
bg
#0d0d0f
Raised
bg-2
#131318
Card
bg-3
#17171c
Hover
bg-4
#1c1c22
Ink
text
#ece7dc

Primary · 황금

Brand
gold
#c9a96e
Light
gold-light
#e8c98a
Dim
gold-dim
#7a6030
Tint 8%
gold-tint
α 0.08
Line
line
α 0.20

Secondary · 보조 입장

Heat
rust
#b84d35
Depth
teal
#5a9a8e
Analytic
blue
#6a88b5
Critique
purple
#7c5c9c
Spectrum
accent set
4 hues

Ink · 글자

Primary
text
#ece7dc
Dim
text-dim
#8d8478
Muted
text-muted
#4a4540
Line
line-dim
α 0.06
Faint
line-faint
α 0.03
02

서체 — Pretendard 한 가족, 무게로 위계를 만든다

한글·라틴·숫자 모두 Pretendard Variable 한 가족 안에서 작동한다. 위계는 서체 교체가 아닌 무게(200–900)자간의 대비로 만든다. DM Mono는 메타데이터·날짜·라벨처럼 '기계의 어휘'에만 쓴다. 강조는 이탤릭이 아닌 .accent 클래스로 황금 색을 입힌다.

Display Pretendard · 900
clamp(7rem, 18vw, 18rem)
ls −0.06em · lh 0.86
지대모
Section Pretendard · 800
clamp(2rem, 4.5vw, 3.5rem)
ls −0.03em · lh 1.15
사회는 무엇에 보상하는가
Lede Pretendard · 500
1.2rem · lh 1.8
ls −0.01em

민주주의는 200년도 안 됐지만 봉건제는 1000년 가까이 갔다. 그 비결은 서로를 떠받치는 상호강화 구조에 있었다.

Prose Pretendard · 400
0.95rem · lh 1.95

기존에는 이란이 호르무즈 해협을 통제할 수 있다는 가능성을 모두가 알고 있었지만, 실제로 그 통제력을 적극적으로 행사해 세계 무역 질서에 대한 지렛대로 쓴 적은 없었다. 이번 전쟁은 달랐다.

Eyebrow DM Mono · 400
0.74rem · ls 0.32em

Archive · Since 2020

Label DM Mono · 400
0.65rem · ls 0.25em

Economy · Technology · Education

200 · ExtraLight 지대모 — 지적 대화를 위한 모임
400 · Regular 지대모 — 지적 대화를 위한 모임
500 · Medium 지대모 — 지적 대화를 위한 모임
600 · SemiBold 지대모 — 지적 대화를 위한 모임
700 · Bold 지대모 — 지적 대화를 위한 모임
800 · ExtraBold 지대모 — 지적 대화를 위한 모임
900 · Black 지대모 — 지적 대화를 위한 모임
03

간격 — 8px 베이스 스케일

모든 간격은 8px 배수로 정의된다. 세션 페이지는 큰 호흡(96–128px)을 섹션 사이에 두고, 컴포넌트 내부에서는 작은 호흡(8–32px)을 쓴다.

space-1
space-2
space-3
space-4
space-5
space-6
space-7
space-8
04

히어로 — 모노 아이브로우, Pretendard 타이틀, 메타 트리오

모든 세션 페이지의 첫 화면은 라디얼 글로우 + 옅은 그리드 위에 세 가지 요소(아이브로우 · 타이틀 · 메타)를 쌓는다. 메타는 항상 일시 · 주제 · 형식의 트리오.

지적 대화를 위한 모임 · Session Report

온디바이스 AI,
무제한 지능의 시대

일시 2026.04.19
주제 하드웨어 · AI · 시장
형식 7 sections
05

구성 요소 — 카드, 인용, 콜아웃, 타임라인

본문에서 반복적으로 등장하는 다섯 가지 패턴. 모두 같은 컬러 토큰(--c)을 받아서 강조 색만 바꿔 쓸 수 있다.

테크노크라트, 팔란티어,
그리고 AI의 군사화

테크노크라트는 단순한 기업인이 아니다. 데이터, 플랫폼, 알고리즘을 통해 사회 구조를 재설계할 수 있다고 믿는 새로운 권력층이다.

항행의 자유의 붕괴

국제해상질서의 핵심인 항행의 자유가 이란의 전략 자산화로 인해 도전을 받는다.

AI 표적 식별 위험

팔란티어의 표적 식별은 잘못된 데이터로 민간인 피해를 만들 수 있다.

봉건제 유비

귀족·성직자·기사 구조가 금융·복음·테크노크라트로 환생한다.

AI 감시사회

SNS 흔적을 크롤링·분석하는 일이 누구나 가능한 시대.

이 상호강화 구조가 봉건제를 1000년 버티게 했다. 성직자와 귀족은 기사들에게 전쟁을 공급하고, 기사들은 체제를 물리력으로 보호하고, 귀족은 나머지 둘을 재정적으로 뒷받침했다.

핵심 전망

이란의 핵개발은 이제 막기 어려워졌다. 저 정도 규모의 피해와 안보 위협을 겪고도 핵개발을 하지 않을 나라는 없다. 핵개발은 선택이 아니라 생존의 문제로 전환되었다.

미국 평화협상안의 실패

미국이 제시한 평화협상안은 현재 상황을 제대로 이해하지 못한 결과였다.

이스라엘의 외교적 고립

이스라엘은 문제 해결에 도움도 안 되면서 사고만 계속 친다. 국제사회는 피로감을 느낀다.

미국의 유일한 출구

실질적 패배를 인정하면서도 정신적으로는 승리한 것처럼 포장하며 전쟁을 마무리하는 것뿐.

이란 핵개발 불가피 호르무즈 통행료 시대 팔란티어 AI 군사화 피터 틸의 위험성 봉건제 유비 세 집단 상호강화 아이폰 폴드 온디바이스 AI AI 감시사회 미국 민주주의 위기
06

토큰 — 한 줄로 가져다 쓰는 시스템

새 세션 페이지를 만들 때 <link rel="stylesheet" href="system/tokens.css"> 한 줄만 추가하면 아래 변수와 컴포넌트가 즉시 사용 가능하다. 폰트(Pretendard, DM Mono)는 토큰 파일이 직접 임포트한다.

TokenValueUse
--bg#0d0d0f페이지 바탕
--bg-2#131318오버뷰 스트립, 결론 섹션
--bg-3#17171c카드 표면
--gold#c9a96e주조색, 아이브로우, 보더 강조
--rust#b84d35긴장·열기·문제 제기
--teal#5a9a8e구조 분석, 유비
--blue#6a88b5경제·시장·분석
--purple#7c5c9c비판·전망·민주주의
--text#ece7dc본문 ink
--text-dim#8d8478본문 보조
--linergba(201,169,110, 0.20)골드 디바이더
--font-displayPretendard Variable모든 한글·라틴·숫자 본문 / 헤드라인
--font-monoDM Mono메타 · 라벨 · 날짜 · 코드
--font-serif-kr
--font-serif-en
--font-sans
→ var(--font-display)v1 호환용 alias. 신규 페이지에서는 사용하지 말 것.