---
type: knowledge
domain: design
status: active
last-reviewed: 2026-07-13
---

# 디자인 스타일 카탈로그

> 한 줄 정의
> 프로젝트 시작 시 스타일 방향을 고르는 카탈로그. 18종 각각에 팔레트·타이포·핵심 CSS 레시피와 미리보기 이미지가 정리돼 있다 — "예쁘게, 모던하게" 대신 여기서 이름 하나를 집어 커밋한다 ([[디자인 프로세스와 평가]]의 스타일 DNA 원칙).

## 스타일 18종 요약

| 스타일 | 무드 | 대표 적합 제품 | 시그니처 |
|--------|------|---------------|----------|
| [[그레인 블러]] | 몽환·아날로그·분위기 | 음악·크리에이티브 랜딩 | 블러 글로우 + 필름 그레인 |
| [[리퀴드 글라스]] | 투명·부양·애플 2025 | 앱 크롬·미디어 오버레이 | backdrop-filter 유리 + specular |
| [[하프톤 도트]] | 인쇄·팝·유스 | 포스터형 랜딩·이벤트 | 망점 페이드 + 판 어긋남 |
| [[나이브 디자인]] | 손맛·유쾌·그림책 | 키즈·교육·커뮤니티 | 삐뚤 블롭 + 손글씨 + 원색 |
| [[데이터 디자인]] | 정밀·신뢰·도면 | 대시보드·핀테크·리포트 | 모눈 + tabular 숫자 + 축·주석 |
| [[서베일런스]] | 긴장·감시·기계 | 보안·모니터링·게임 | 스캔라인 + 바운딩 박스 + 포스퍼 그린 |
| [[페이퍼 컷아웃]] | 공작·콜라주·온기 | 키즈·이벤트·로컬 브랜드 | blur 0 통짜 그림자 + 지그재그 |
| [[택타일 아날로그]] | 물성·수집·레트로 | 아카이브·노트·굿즈 | 라벨·도장·테이프·바코드 |
| [[네오브루탈리즘]] | 날것·팝·반항 | 크리에이터 이코노미·포트폴리오 | 잉크 테두리 + blur 0 잉크 그림자 + 부딪히는 원색 |
| [[스위스 인터내셔널]] | 규율·객관·타이포 | 에이전시·문화·시스템 뼈대 | 12컬럼 비대칭 그리드 + 시그널 레드 1색 |
| [[에디토리얼 매거진]] | 조판·읽기·품격 | 미디어·블로그·브랜드 스토리 | 세리프 디스플레이 + 드롭캡 + 괘선 |
| [[벤토 그리드]] | 진열·밀도·쇼케이스 | 제품 기능 소개·마케팅 | 크기 다른 셀 짜맞춤 + 히어로 셀 |
| [[Y2K 크롬]] | 광택·낙관·레트로퓨처 | 음악·패션·드롭 캠페인 | 크롬 텍스트 + 아쿠아 버튼 + 스파클 |
| [[클레이모피즘]] | 말랑·통통·장난감 | 키즈·교육·게임화 | 큰 radius + 이중 inset 그림자 + 파스텔 |
| [[다크 럭셔리]] | 절제·어둠·프리미엄 | 부티크·주얼리·멤버십 | 거의-검정 + 얇은 세리프 + 금 1% |
| [[시빅 인스티튜셔널]] | 명확·실용·공공 신뢰 | 민원·공기업·대학 행정 | 실제 과업 + KRDS 시멘틱 토큰 + 제한 조건 선공개 |
| [[정책 리포트]] | ⚠ 재설계 필요 | 국책연구·백서·연차보고 | 문서번호 + 명조 표제 + 괘선·초록·각주 |
| [[디플로매틱 프로토콜]] | ⚠ 재설계 필요 | 대사관·재단·공식 행사 | 미드나이트 블루 + 브라스 1px + 대칭축 |

## 선택 가이드 — 제품 성격에서 출발

- **숫자를 믿게 해야 한다** → [[데이터 디자인]]. 어둡고 긴장감 있게 → [[서베일런스]].
- **분위기를 팔아야 한다** → [[그레인 블러]]. 시스템 UI가 세련돼야 → [[리퀴드 글라스]].
- **따뜻하고 사람 손을 타야 한다** → 그린 느낌 [[나이브 디자인]] / 오린 느낌 [[페이퍼 컷아웃]] / 어른의 수집 감성 [[택타일 아날로그]].
- **한 장 포스터처럼 세게** → [[하프톤 도트]].
- **날것의 에너지로 튀어야 한다** → [[네오브루탈리즘]]. 반짝이던 2000년의 미래로 → [[Y2K 크롬]].
- **타이포와 여백만으로 정면승부** → [[스위스 인터내셔널]]. 읽는 경험이 제품이면 → [[에디토리얼 매거진]].
- **기능·스펙을 한 화면에 진열** → [[벤토 그리드]].
- **비싸 보여야 한다** → [[다크 럭셔리]]. 말랑하고 귀엽게 3D → [[클레이모피즘]].
- **공공기관답되 낡지 않아야 한다** → 민원·신청 화면은 v2로 재설계된 [[시빅 인스티튜셔널]]을 사용한다. [[정책 리포트]]·[[디플로매틱 프로토콜]]은 아직 반려 상태다.

축으로 보면: 물성(종이·유리·점토) ↔ 무물성(데이터), 온기(나이브·컷아웃·클레이) ↔ 긴장(서베일런스), 분위기(그레인·글라스) ↔ 정보(데이터·벤토), 규율(스위스·에디토리얼·기관형 3종) ↔ 날것(네오브루탈·Y2K), 절제된 공신력(시빅·정책·프로토콜) ↔ 절제된 과시(다크 럭셔리) ↔ 광택의 과잉(Y2K 크롬).

## 사용 규칙

1. **하나만 고른다.** 스타일 혼합은 시그니처 충돌 — 섞고 싶으면 주 스타일 1 + 타 스타일의 부품 1개까지.
2. 고른 문서의 **팔레트·타이포 표를 그대로 토큰으로 커밋**한 뒤 코드를 시작한다 (hex를 다시 발명하지 않는다).
3. 각 문서의 "흔한 실수"가 곧 리뷰 체크리스트다 — 구현 후 대조.
4. AI에게 맡길 때는 스타일 문서명 + DNA 표를 컨텍스트로 넘긴다 ([[디자인 프로세스와 평가]]의 AI 위임 절).
5. 스타일명만 보고 포스터형 시안을 만들지 않는다. 실제 사용자·과업·카피·상태를 먼저 넣고 [[AI 티 없는 웹디자인 원칙]]을 통과한다.

> [!TIP] 라이브 데모
> 기존 15종 데모는 `스타일/_previews/스타일-데모.html`에 있다. 시빅 v2는 `스타일/_previews/시빅-인스티튜셔널.html`에서 실제 반응형 페이지로 확인한다. 기관형 v1 묶음 `스타일/_previews/기관형-스타일-데모.html`은 반려된 실패 비교 자료이며 정책·프로토콜도 재설계 전까지 복사하지 않는다.

## 관련 문서

- [[UI 시각 체계]] · [[디자인 프로세스와 평가]] · [[AI 티 없는 웹디자인 원칙]] · [[디자인-체크리스트]]