타이포그래피 택소노미
타입 기초 원리, 서체 분류, 역할 위계, 조판 규칙, 한글 조판까지. 기획과 콘텐츠 의도에 맞는 타이포 패턴을 66개 키워드로 도출합니다.
콘텐츠 의도를 타이포 패턴으로
타이포그래피는 추상 원리에서 시작해 서체 분류, 역할 위계, 조판, 반응, 표현으로 내려갑니다. 이 사전은 그 일곱 단계를 따라 읽고, 각 패턴마다 어떤 콘텐츠·의도에 맞는지 표시합니다. 추천의 중심은 역할 위계(Display, Body, Label) 이고, 서체 분류는 서술 메타로만 둡니다. 표현·실험(키네틱, 브루탈리즘) 은 태도 층으로 따로 다룹니다.
1.
기초 원리
도구와 무관한 타입의 문법
타입 스케일 · 위계 · 단위 · 해부학2.
서체 분류
이 서체는 어떤 종류인가
라틴(Vox-ATypI) · 한글(명조 · 고딕)3.
역할·위계 시스템
이 텍스트의 역할은 무엇인가
Display · Headline · Body · Label4.
조판 규칙
텍스트를 어떻게 짜는가
줄길이 · 행간 · 자간 · 한글 조판5.
반응·유동 거동
뷰포트에 따라 어떻게 변하나
fluid clamp · 가변 폰트 · 폰트 로딩6.
페어링·조합
서체를 무엇과 짝짓나
한영 섞어짜기 · 세리프 · 산스 페어링7.
표현·실험
어떤 태도를 입히나
키네틱 · 브루탈리스트 · 해체 타이포Best For
어떤 기획·콘텐츠·의도에 맞나
Maturity
foundational / mainstream / emerging / experimental
Durability
지속 원리(principle) 인가 일시 유행(trend) 인가
Spec
타입 스케일·행간·자간·줄길이 같은 타이포 스펙
Build
트리거되는 CSS 속성·토큰
Pairing
함께 쓰면 좋은 조합과 충돌하는 조합
7
Parts18
Categories66+
Keywords타이포 기초 원리
도구·화면과 무관하게 적용되는 타입의 문법: 13개 키워드
크기 단계를 한 비율로 묶어 조화로운 위계를 만드는 체계.
Modular Scale
모듈러 스케일 · foundational · standard= Type Scale Ratio, 타입 스케일 비율한 비율(1.2·1.25·1.333·1.5·1.618 등)을 곱해 만든 조화로운 크기열. 폰트 크기를 그때그때 정하는 대신 공통 비율로 단계를 도출한다.
용도: UI·대시보드는 1.2~1.25(minor·major third), 에디토리얼·마케팅은 1.333~1.618지양: UI 에 1.618(golden) 은 과대비라 단계가 띈다"타입 스케일은 1.25 major third 기준"Vertical Rhythm
수직 리듬 · foundational · standard줄간격과 여백을 한 단위(예 8px)의 배수로 묶어 세로 흐름을 통일하는 원리. 인쇄의 베이스라인 그리드를 웹에서 근사한다.
용도: 롱폼 본문, 다단 텍스트의 줄 정렬지양: 이미지·blockquote 가 섞인 가변 콘텐츠에선 리듬이 깨진다Baseline Grid
베이스라인 그리드 · foundational · standard모든 줄의 밑선을 공통 가로 격자에 맞춰 세로 리듬을 통일하는 체계. Müller-Brockmann Grid Systems(1981) 의 정전 원리. 인쇄에선 엄격, 웹에선 수직 리듬으로 근사.
용도: 인쇄 수준 타이포, 다단 본문의 줄 정렬지양: 반응형 이미지·가변 높이 콘텐츠와 혼재크기·굵기·공간으로 시선의 순서를 만드는 원리.
Visual Hierarchy
시각 위계 · foundational · standard크기·굵기·위치·공간의 조합으로 읽는 순서를 만드는 것. Bringhurst 의 제1원칙 "타이포그래피는 콘텐츠를 섬긴다" 가 철학적 기반. 의미 구조(h1-h6) 와 시각 스타일이 일치해야 접근성·SEO 를 함께 충족한다.
용도: 모든 텍스트 화면의 기본 골격지양: 의미 태그(h1-h6) 를 시각 효과로만 쓰는 것(접근성·SEO 훼손)Size Contrast
크기 대비 · foundational · standard큰 제목과 작은 본문의 크기 차로 위계를 만드는 가장 직접적인 수단. 모듈러 스케일 안에서 단계를 떼어 쓴다.
용도: 헤드라인 강조, 정보 우선순위 표현지양: 중간 단계 없이 양극단만 두면 위계가 아니라 충돌로 읽힌다Weight Contrast
굵기 대비 · foundational · standard같은 크기에서 굵기 차이로 강조를 만드는 수단. 색·크기 변화 없이 위계를 만들 수 있어 절제된 화면에 적합.
용도: 미니멀 UI, 라벨·강조어, 색을 아끼는 화면지양: bold 남발은 강조력을 소진시킨다크기와 줄길이를 어떤 단위로 재는가의 결정.
rem (root em)
rem 단위 · mainstream · standard= root em루트 폰트 크기에 상대적인 단위. 사용자가 기본 폰트를 키우면 rem 기반 크기가 비례 확대된다. 접근성의 기본 단위.
용도: 모든 폰트 크기·spacing 의 기본 단위지양: px 고정(사용자 기본폰트·줌 무시로 접근성 실패)ch unit
ch 단위 · mainstream · standard'0' 글자의 advance 폭에 상대적인 단위. 라틴 본문 줄길이를 글자 수로 제한할 때 쓴다(max-inline-size: 66ch).
용도: 라틴 본문 줄길이 제한지양: CJK·한글 본문(전각 폭을 0 글자폭이 못 예측해 부정확)CPL (Characters Per Line)
줄당 글자 수 · mainstream · standardCJK·한글 본문 줄길이를 글자 수로 재는 단위. ch 가 전각에 부정확하므로 한글은 CPL 로 잰다.
용도: 한글·CJK 본문 줄길이 기준글자꼴의 물리 구조. "왜 이 크기에서 읽히나" 를 서체 선택 결정에 연결한다.
x-height
엑스하이트 · foundational · standard소문자 본체 높이(어센더·디센더 제외). 큰 x-height 는 같은 pt 에서 더 커 보여 작은 크기에서도 읽힌다.
용도: 큰 x-height 서체는 소형 UI·모바일 본문에 유리지양: 큰 x-height 서체를 과대 leading 과 결합하면 느슨해진다Cap height
캡하이트 · foundational · standard베이스라인에서 대문자 상단까지의 높이. all-caps 헤딩의 광학 정렬과 line-height 산정 기준.
용도: all-caps 라벨·헤딩의 정렬 기준Counter & Aperture
카운터·어퍼처 · foundational · standard글자 내부의 닫힌 공간(counter) 과 열린 정도(aperture). 넓은 aperture 산세리프는 작은 크기·저해상에서 가독성이 높다.
용도: 넓은 aperture 서체는 캡션·폼·모바일 본문지양: 좁은 aperture 서체를 소형 본문에Stroke Contrast
획 대비 · foundational · standard굵은 획과 가는 획의 차이. 고대비(Didone) 는 디스플레이 전용, 저대비는 본문용이라는 크기별 서체 선택의 분기 기준.
용도: 크기에 따른 서체 선택 분기지양: 고대비 서체를 소형 본문에(헤어라인 소실)서체 분류
이 서체는 어떤 종류인가. Vox-ATypI(라틴)는 ATypI 가 2021 폐기한 서술 메타로만 둔다: 13개 키워드
Vox-ATypI 분류 어휘. 2021-04-27 ATypI 가 공식 폐기했고 2025-11 기준 대체안 미발표. 서체 톤 지시 키워드로만 유효하다.
Humanist / Venetian Serif
휴머니스트 세리프 · foundational · standard15세기 베네치아 기원, 낮은 획대비, 기울어진 축. 따뜻한 본문용.
용도: 장문 본문, 인문서, 따뜻한 에디토리얼지양: 데이터 밀집 UI, 초소형 캡션Garalde Serif
개럴드 세리프 · foundational · standardGaramond·Caslon 류, 16~17세기, 우아하고 중간 대비. 책·롱폼 본문.
용도: 책, 롱폼 본문Transitional Serif
트랜지셔널 세리프 · foundational · standardBaskerville 류, 수직축, 중간 대비. 본문·제목 양용.
용도: 신문·잡지 본문, 제목 양용Didone Serif
디돈 세리프 · foundational · standardBodoni·Didot 류, 극단적 획대비, 가는 헤어라인 세리프. 대형 디스플레이 전용.
용도: 패션·럭셔리 헤드라인, 대형 디스플레이지양: 본문, 저해상·소형(헤어라인 소실)Slab Serif
슬랩 세리프 · mainstream · standard기하학적 두꺼운 세리프. 강한 헤드라인·포스터.
용도: 강조 헤드라인, 포스터지양: 섬세한 본문Grotesque / Neo-Grotesque Sans
그로테스크 산세리프 · mainstream · standard= Neo-Grotesque SansHelvetica·Inter·Geist 류. UI·본문·헤드라인 전방위. SaaS 지배 서체.
용도: UI, 본문, 헤드라인 전방위지양: 모든 텍스트에 Inter 일색은 브랜드 목소리를 지운다(ai-slop "Inter 도배")Humanist Sans
휴머니스트 산세리프 · mainstream · standard손글씨 비례를 품은 산세리프(FF Meta·Myriad 류). 넓은 aperture 로 가독성 높음.
용도: 본문, 긴 글, 한글 고딕과 페어링Geometric Sans
지오메트릭 산세리프 · mainstream · standard원·사각의 기하 형태 기반 산세리프(Futura·Poppins 류). 디스플레이·브랜딩.
용도: 브랜딩, 헤드라인지양: 장문 본문(균질 형태로 가독성 저하)W3C KLREQ 부록 B 기준의 국문 서체 갈래. style(꼴) 과 width(비례폭·고정폭) 2축으로 본다.
Myeongjo (Batang)
명조 (바탕) · foundational · standard= 바탕, 부리 계열붓글씨 기원의 부리(serif) 계열 국문 서체. 획에 맺음이 있고 본문 가독성이 높다.
용도: 장문 본문, 인쇄·출판, 차분한 톤지양: 저해상 소형 UIGothic (Dotum)
고딕 (돋움) · mainstream · standard= 돋움, 민부리 계열맺음 없는 민부리(sans) 계열 국문 서체. UI·본문 표준. Pretendard 가 대표 본문 서체.
용도: UI, 본문, 화면 전방위Handwriting
손글씨 · mainstream · practice손으로 쓴 듯한 국문 서체. 장식·감성 표현용.
용도: 브랜딩, 감성 카피, 짧은 문구지양: 본문·UI(가독성·중립성 저하)Display Hangul
제목용 국문 · mainstream · practice큰 크기에서 개성을 드러내는 제목 전용 국문 서체. 본문 가독성보다 인상 우선.
용도: 제목, 히어로, 포스터지양: 본문·소형 텍스트Proportional vs Fixed-width Hangul
비례폭·고정폭 한글 · mainstream · standardKLREQ §4.1.1 의 한글 폭 구분. 명조/고딕 꼴 축과 직교하는 별도 분류. 고정폭은 표·코드 정렬용.
용도: 고정폭은 표·코드·숫자 정렬, 비례폭은 일반 본문역할·위계 시스템
이 텍스트의 역할은 무엇인가. M3·KRDS 가 수렴한 추천 척추: 5개 키워드
Display/Headline/Title/Body/Label 의 역할별 티어. 각 티어가 pc·mobile 사이즈·굵기·행간 토큰을 가진다.
Display
디스플레이 · mainstream · standard화면에서 가장 큰 텍스트. 브랜드 스테이트먼트·히어로용. KRDS Display Large 기준 pc 60px / mobile 44px, 굵기 700, 행간 150%.
용도: 히어로, 브랜드 메시지, 텍스트-온리 랜딩지양: 정보 밀도 높은 화면Headline
헤드라인 · mainstream · standard섹션·페이지 제목. Display 보다 작지만 본문보다 큰 강조 텍스트.
용도: 섹션 제목, 페이지 헤딩Title
타이틀 · mainstream · standard카드·블록 단위의 작은 제목. 본문 위 한 단계 강조.
용도: 카드 제목, 리스트 헤더, 폼 섹션Body
본문 · mainstream · standard읽기 위한 본문 텍스트. 한글 베이스(Pretendard GOV) 는 광학적으로 작게 렌더되어 KRDS 가 본문 17px 를 권한다. 행간 150%.
용도: 문단, 설명, 읽기 콘텐츠Label
라벨 · mainstream · standard버튼·태그·캡션 등 UI 요소의 짧은 텍스트. 가장 작은 역할 티어.
용도: 버튼, 태그, 캡션, 폼 라벨지양: text.disabled 토큰을 본문 보조 텍스트에 쓰는 것(저대비)조판 규칙
텍스트를 어떻게 짜는가. 줄길이·행간·자간·한글 조판·미시 타이포: 14개 키워드
한 줄에 몇 글자, 줄 사이를 얼마나 띄우는가. Bringhurst 정전 수치.
Line Length (Measure)
줄길이 (measure) · foundational · standard= measure, 한 줄 글자 수한 줄의 글자 수. 단일 컬럼 45~75자(66 이상적), 멀티컬럼 40~50자. 한글은 50자 속독 최적, a11y 상한 40자(CJK = 비CJK 의 절반).
용도: 본문 블록지양: 풀폭 텍스트, 대시보드Leading (line-height)
행간 (leading) · foundational · standard베이스라인 간 거리. 웹은 unitless 권장, 본문 1.4~1.6(한글 150%). 황금비 1.618 은 가이드일 뿐 x-height·measure 로 조정한다.
용도: 본문 1.5 안팎, 헤드라인은 더 타이트지양: "타입+2pt"·"1.5" 를 못박힌 상수로 적용(Bringhurst 도 가변으로 다룸)Justified Minimum
양끝맞춤 하한 · foundational · standard양끝맞춤(justify) 시 줄당 38~40자 미만이면 단어 사이 흰 구멍("white acne") 이 생긴다는 Bringhurst 하한.
용도: 양끝맞춤 본문은 줄당 38자 이상 확보지양: 좁은 컬럼에서 justify(흰 구멍)Hyphenation
하이프네이션 · mainstream · standard긴 단어를 줄 끝에서 나누는 규칙. Bringhurst: 뒤 2자 이상 남기고 앞 3자 이상 가져가며, 연속 3줄 초과 금지.
용도: 양끝맞춤 본문, 좁은 컬럼 라틴 텍스트지양: 한글(음절 단위라 하이프네이션 불필요)W3C KLREQ 정규 규칙. 한글 본문 자간 기본은 0.
Tracking (letter-spacing)
자간 (tracking) · foundational · standardKLREQ §7.3.1: 한글·한자·가나 본문 자간 기본값은 0. 음수 자간은 디스플레이 한정 예외, 넓혀짜기는 양끝맞춤 보조.
용도: 본문 0(기본), 디스플레이는 tight, 양끝맞춤은 loose지양: 본문에 음수 자간 남용(표준은 0)Jangpyeong (width scaling)
장평 · mainstream · standard글자의 가로 폭 비율 조절. 제목에서 인상을 바꾸거나 좁은 폭에 맞출 때 쓴다.
용도: 제목 인상 조절, 폭 맞춤지양: 본문 장평 변형(가독성 저하)word-break: keep-all
줄바꿈 (keep-all) · mainstream · standardKLREQ §7.1: 한글 본문은 단어 단위로 줄바꿈(keep-all). BudouX 공식 README 도 한국어는 keep-all 을 권한다. auto-phrase 는 일본어용이라 한국어 미적용.
용도: 한국어 헤딩·짧은 텍스트지양: 좁은 폭의 긴 단어(오버플로 가능, 소형 화면 해제 고려)Paragraph Indent
들여짜기 · foundational · standardKLREQ §7.2.3: 단락 첫줄 들여짜기(전각 1자 관습) 또는 내어짜기. 단락 구분 수단.
용도: 인쇄·출판형 본문의 단락 구분지양: 단락 간 여백(margin) 과 들여짜기 중복 적용OpenType 기능으로 숫자·글자를 정교하게 제어한다.
Tabular Numbers
고정폭 숫자 · mainstream · standard모든 숫자 폭을 같게 맞추는 OpenType 기능(tnum). 표·가격·데이터의 세로 정렬에 필수.
용도: 표, 가격, 대시보드 수치, 카운터지양: 본문 인라인 숫자(올드스타일이 더 자연스러움)Oldstyle Numbers
올드스타일 숫자 · mainstream · standard어센더·디센더를 가진 본문용 숫자(onum). 본문 흐름에 자연스럽게 섞인다.
용도: 본문 인라인 숫자, 에디토리얼지양: 표·정렬이 필요한 수치Slashed Zero
슬래시 제로 · mainstream · standard0 과 O 를 구분하는 빗금 친 0(zero). 코드·일련번호·데이터에서 혼동 방지.
용도: 코드, 일련번호, 데이터font-feature-settings
폰트 피처 설정 · mainstream · standard리거처·스몰캡스·스타일 세트 등 저수준 OpenType 기능 제어. 가능하면 표준 font-variant-* 속성을 우선한다.
용도: 서체 고유 기능(리거처·스몰캡스) 활성화지양: 표준 font-variant-* 로 되는 것을 저수준으로 처리CSS 가 줄바꿈 위치를 다듬어 미관·가독성을 높인다.
text-wrap: balance
균형 줄바꿈 · emerging · standard헤딩 줄들을 균등 폭으로 분배. 줄 수를 늘리지 않는 최소 폭을 이진 탐색한다. Chromium ≤6줄·Firefox ≤10줄 초과 시 일반 wrap.
용도: 헤딩, 카드 타이틀, CTA, 짧은 텍스트지양: 긴 본문(성능), 카드처럼 경계 있는 컨테이너(우측 여백 불균형)text-wrap: pretty
고아단어 방지 · emerging · standard본문 마지막 몇 줄을 조정해 고아 단어(orphan) 를 막는다. 전체 재균형이 아니라 끝부분만 다듬는 느린 알고리즘.
용도: 블로그 본문, 아티클, 긴 텍스트지양: 전체 줄 재균형을 기대하는 경우반응·유동 거동
뷰포트·컨테이너에 따라 타입이 어떻게 변하는가: 7개 키워드
뷰포트와 폰트 축에 따라 크기·형태가 연속 변한다.
Fluid Typography (clamp)
유동 타이포 (clamp) · mainstream · standardclamp(min, vw+rem, max) 로 브레이크포인트 없이 크기를 연속 조절. 큰/강조 텍스트용이고 본문에는 부적합(범위가 몇 px 뿐).
용도: Display·Headline 등 큰 텍스트지양: 본문(범위 작음), 순수 vw(줌 불응)Variable Fonts
가변 폰트 · mainstream · standard한 파일에 weight·width·opsz 등 축을 담은 폰트. 굵기를 이산 값이 아니라 연속 범위로 다룬다. 2018 이후 브라우저 지원.
용도: 여러 굵기 사용, 반응형, 키네틱, 파일 절감지양: 단일 굵기만 필요할 때(과투자)Optical Sizing (opsz)
광학 사이징 (opsz) · mainstream · standard크기에 맞춰 글자꼴을 보정하는 가변 축. 작은 글자는 굵은 획·큰 x-height, 큰 글자는 섬세·고대비. 폰트에 축이 있으면 기본 활성.
용도: 본문~디스플레이를 한 서체로 폭넓게 쓸 때뷰포트가 아니라 부모 컨테이너 크기에 반응한다.
Container Query Units (cqi)
컨테이너 쿼리 단위 · emerging · standard컨테이너 inline 크기의 1%(cqi). 카드·사이드바·대시보드 등 컴포넌트 단위 반응형 타이포. 2023 브라우저 지원.
용도: 카드·사이드바 등 컴포넌트 단위 반응형지양: 컨테이너가 자기 자신을 쿼리하는 경우폰트 로딩 전략이 가시성과 레이아웃 시프트를 좌우한다.
font-display
폰트 디스플레이 · mainstream · standard폰트 로딩 중 렌더 전략. swap(FOUT)=본문 가시성, optional=성능 우선, block(FOIT)=아이콘 폰트 한정.
용도: swap=본문, optional=성능 우선, block=아이콘 폰트지양: block 을 본문에(LCP 악화)FOUT / FOIT
폰트 깜빡임 · mainstream · standard무스타일 텍스트 깜빡임(FOUT, swap) / 비가시 텍스트 깜빡임(FOIT, block). 로딩 전략의 결과로 나타나는 현상.
용도: 로딩 전략 선택 시 트레이드오프 이해Fallback Metrics (CLS)
폴백 메트릭 정합 · emerging · standardsize-adjust·ascent-override 로 폴백 폰트 메트릭을 웹폰트에 맞춰 레이아웃 시프트(CLS) 를 제거한다.
용도: 웹폰트 교체 시 CLS 제거페어링·조합
서체를 무엇과 짝짓는가. 한영 혼용과 서체 짝짓기: 7개 키워드
KLREQ §7.3.2 섞어짜기. 한글과 라틴을 한 문장에 자연스럽게 섞는 보정.
Hangul-Latin Mixed Setting
한영 섞어짜기 · mainstream · standard= 섞어짜기, Composite Font한글 본문에 라틴·숫자를 섞을 때 크기·기준선·굵기를 시각 보정하는 조판. 합성글꼴(Composite Font) 이 멘탈모델 원형.
용도: 한글 본문에 영문·숫자가 섞이는 모든 화면Latin Scale Adjustment
라틴 크기 보정 · mainstream · practice같은 pt 에서 라틴이 한글보다 작아 보이는 문제 보정. Adobe 는 em-box 기준 약 105%, 타입코드는 cap-height 기준 80~90%. 측정 기준이 다른 같은 결론.
용도: 한영 혼용 본문의 라틴 크기 맞춤Baseline Shift (pairing)
기준선 보정 · mainstream · standard한글은 활자틀 시각중심, 라틴은 baseline 기준이라 라틴이 처져 보인다. multilingual.js(한국타이포그라피학회 査読) 는 라틴 span 에 top -0.05em, letter-spacing -0.02em 적용.
용도: 한영 혼용 시 라틴·숫자의 세로 정렬Stroke Weight Match
획 굵기 맞춤 · mainstream · practice라틴이 한글보다 약간 두꺼운 경우가 많아 인위적으로 굵기를 맞춰 판면 질감을 균일화한다. 정량 수치 없는 시각 판단.
용도: 한영 혼용 판면의 질감 통일지양: 단일 정량값 기대(폰트마다 다름)둘 이상 서체를 대비로 묶어 위계를 만든다.
Serif + Sans Pairing
세리프·산스 페어링 · mainstream · practice세리프 제목과 산세리프 본문(또는 반대) 의 양식 대비. 명조→Garald 계, 고딕→네오휴머니스트 산스가 정석 페어.
용도: 에디토리얼, 위계가 분명한 콘텐츠Neo-serif + Monospace Pairing
네오세리프·모노 페어링 · emerging · practice우아한 세리프 헤딩에 데이터·메타용 모노스페이스를 더하는 조합. 모노에 tabular-nums 를 함께 쓴다.
용도: 테크·데이터 제품의 에디토리얼 톤지양: 본문 가독성이 최우선인 장문Style Match
양식 매칭 · mainstream · practice페어링할 두 서체의 양식·시대·획 특성을 맞추는 원칙. 숫자는 항상 라틴 설정을 따른다.
용도: 서체 페어링의 일관성 확보표현·실험 타이포
어떤 태도를 입히는가. 정의 가능한 표현 메커니즘만 항목화한다: 7개 키워드
주목·정체성을 위해 가독성 규범을 의도적으로 변형한다. 본문 영역 적용 금지.
Kinetic Typography
키네틱 타이포그래피 · emerging · practice움직이는 텍스트. Brownie 의 temporal typography(motion: scrolling·dynamic layout / fluid) 가 학술 분류. GSAP 무료화로 진입장벽 하락.
용도: 히어로, 인터랙티브 브랜딩, 스크롤 스토리텔링지양: 전정장애·모션 민감 사용자, 본문 가독성 영역Oversized Display
오버사이즈 디스플레이 · mainstream · practice48~120px+ 대형 헤드라인. 텍스트가 히어로 이미지를 대체. opsz 축·fluid clamp 와 연결.
용도: 히어로, 브랜드 스테이트먼트, 텍스트-온리 랜딩지양: 본문, 정보 밀도 화면Brutalist Typography
브루탈리스트 타이포 · emerging · practice날것의 거친 타입, 시스템 폰트, 고대비, 0px 기하. 의도된 반세련으로 차별화(UMich Dialectic 査読 분석 대상).
용도: 아트디렉션 강한 랜딩, 캠페인, 차별화지양: 본문·폼·내비게이션, 접근성 필수 페이지Anti-design Typography
안티디자인 타이포 · experimental · practice의도적 미숙함·불완전성을 연출하는 타입. 브루탈리즘이 거친 진정성이라면 이건 "미숙성 위장" 으로 의도가 다르다.
용도: 인디 브랜드, 패션, 카운터컬처 톤지양: 신뢰·명료성이 중요한 제품, 본문위계·가독성·그리드를 의도적으로 전복해 감정·주목과 거래한다. 웹 접근성(WCAG 1.4.x) 과 정면충돌.
Deconstructed / Experimental Type
해체 타이포 · experimental · practice위계·정렬·가독성을 의도적으로 파괴. 계보는 Weingart→Cranbrook(McCoy)→Carson/Emigre. 가독성을 감정·주목과 맞바꾼다.
용도: 아트디렉션 강한 랜딩, 전시, 포스터, 단발 캠페인지양: 본문·UI·접근성 필수 페이지, 다국어Overlapping / Layered Type
중첩 레이어 타이포 · experimental · practice텍스트와 이미지·텍스트를 겹쳐 깊이를 만든다. 히어로·표지용.
용도: 히어로, 표지, 아트워크지양: 대비비(WCAG 1.4.3) 확보가 어려운 경우Reverse / Disrupted Reading
역방향·비선형 읽기 · experimental · practice읽기 순서를 역방향·비선형으로 흩뜨린다. 시각 순서와 DOM 순서가 어긋날 위험.
용도: 인쇄·정적 아트워크지양: 스크린리더 논리 순서가 필요한 모든 화면디자인과 개발을 잇는 언어를 배웁니다
디자인 사고로 제품을 설계하는 바이브 코딩
6섹션 · 18챕터
Vibe Design Starter Kit
디자인 사고로 제품을 설계하는 바이브 코딩
바이브 디자인: 새로운 사고에 적응하기
꼭 필요한 만큼의 디자인 시스템
제품으로서의 확장: UX로 로직 제어하기
내 프로젝트에 적용해보기 - 챌린지
디자인 에이전트: 이성과 감성사이의 파이프라인
실전 서비스 운영 시나리오 대응