# Monochrome Design

> 단일 색상의 다양한 톤과 음영을 사용하여 세련되고 일관된 느낌을 줍니다.

- 층: 스타일 (시각적 스타일)
- ID: monochrome
- 연도: Timeless
- 무드 태그: 미니멀, 럭셔리
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/monochrome

## 정의

단일 색상의 다양한 톤과 음영을 사용하여 세련되고 일관된 느낌을 줍니다.

## 주요 특징

- 단일 색상 기반
- 톤과 음영 활용
- 명확한 대비
- 우아한 느낌
- 집중력 향상

## 핵심 원칙

- 일관성
- 세련됨
- 집중

## 컬러 시스템

단 하나의 색상(또는 흑백)만. 명도와 채도의 변화만으로 모든 계층을 표현

### 색상 역할

- base: 선택한 단일 색상 (또는 흑백)
- light-variant: base의 밝은 버전 — 배경, 카드
- dark-variant: base의 어두운 버전 — 텍스트, 아이콘
- tint: base에 흰색 혼합한 버전 — 서브 영역
- shade: base에 검정 혼합한 버전 — 강조, 호버

### 색상 제약

- 두 번째 색상 추가 금지 — 단일 색 계열만
- 채도 완전히 없애면 흑백(monochrome) — 채도 있으면 single-hue monochrome, 둘 다 허용
- 텍스트와 배경의 명도 차이 반드시 충분히

### 다크모드 전략

light/dark variant 반전. base 색상 자체는 유지

### 대비 요구사항

WCAG AAA (7:1) 권장 — 색상이 없을수록 명도 대비가 전부

## 타이포그래피

- 폰트 성격: 폰트가 단조로운 색을 보완하는 핵심 — 개성 있는 폰트 선택 권장
- 권장 폰트 수: 최대 2개
- 타입 스케일: 1.333 이상 — 색 없이 위계를 크기로 강하게 표현

### 타이포그래피 제약

- 폰트 weight 대비 충분히 — 색 없이 계층 구분 수단
- letter-spacing으로 분위기 차별화 가능

## 설계 제약

### 하면 안 되는 것

- 두 번째 색상 사용 금지
- 색상으로 강조 표현 금지 — 크기·굵기·여백만 사용

### 반드시 포함할 것

- 명도 계층 최소 3단계 (배경/중간/텍스트)
- strong/weak 텍스트 계층으로 정보 위계 표현

### 모션 가이드

선택적. 사용 시 opacity 또는 scale 변화. 색상 변화 없음.

## 무드 프로파일

4축 각각 −2 ~ +2 정수. 취향 테스트(/fit)와 비교 페이지가 같은 좌표를 쓴다.

- 밀도: -1 (여백 −2 ↔ +2 빽빽)
- 온도감: 0 (차가움 −2 ↔ +2 따뜻함)
- 시대감: 0 (레트로 −2 ↔ +2 미래적)
- 격식: 0 (자유분방 −2 ↔ +2 격식)

## 사용 사례

- 패션·럭셔리 브랜드
- 포트폴리오
- 사진작가 사이트
- 편집 디자인

## 추천 프로젝트 유형

- 패션·럭셔리
- 포트폴리오
- 사진작가 사이트
- 편집 디자인

## 장단점

### 장점

- 색상 충돌 없이 항상 조화로움
- 고급스럽고 세련된 이미지
- 타이포그래피와 구조가 돋보임

### 단점·한계

- 지루하거나 단조로울 수 있음
- 상태·카테고리 구분에 색상 사용 불가
- 활기차고 에너지 넘치는 브랜드엔 부적합

## 실제 사용 제품·서비스

- Chanel 웹사이트
- 일부 사진작가 포트폴리오

## 자주 묻는 질문

### Q1. Monochrome Design이란 무엇인가요?

단일 색상의 다양한 톤과 음영을 사용하여 세련되고 일관된 느낌을 줍니다.

### Q2. Monochrome Design의 핵심 디자인 원칙은 무엇인가요?

Monochrome Design의 핵심 원칙은 일관성, 세련됨, 집중입니다.

### Q3. Monochrome Design은 어떤 프로젝트에 적합한가요?

Monochrome Design은 패션·럭셔리 브랜드, 포트폴리오, 사진작가 사이트, 편집 디자인, 패션·럭셔리, 포트폴리오, 사진작가 사이트, 편집 디자인 등의 프로젝트에 적합합니다.

### Q4. Monochrome Design의 장단점은 무엇인가요?

장점으로는 색상 충돌 없이 항상 조화로움, 고급스럽고 세련된 이미지, 타이포그래피와 구조가 돋보임이 있습니다. 단점으로는 지루하거나 단조로울 수 있음, 상태·카테고리 구분에 색상 사용 불가, 활기차고 에너지 넘치는 브랜드엔 부적합이 있습니다.

### Q5. Monochrome Design에서 색상은 어떻게 사용하나요?

단 하나의 색상(또는 흑백)만. 명도와 채도의 변화만으로 모든 계층을 표현 색상 역할은 base: 선택한 단일 색상 (또는 흑백), light-variant: base의 밝은 버전 — 배경, 카드, dark-variant: base의 어두운 버전 — 텍스트, 아이콘입니다. 주의사항: 두 번째 색상 추가 금지 — 단일 색 계열만, 채도 완전히 없애면 흑백(monochrome) — 채도 있으면 single-hue monochrome, 둘 다 허용.

### Q6. Monochrome Design에 어울리는 폰트 스타일은 무엇인가요?

Monochrome Design에는 폰트가 단조로운 색을 보완하는 핵심 — 개성 있는 폰트 선택 권장 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 폰트 weight 대비 충분히 — 색 없이 계층 구분 수단, letter-spacing으로 분위기 차별화 가능.

### Q7. Monochrome Design 디자인에서 하면 안 되는 것은 무엇인가요?

Monochrome Design에서 피해야 할 것: 두 번째 색상 사용 금지, 색상으로 강조 표현 금지 — 크기·굵기·여백만 사용.

### Q8. Monochrome Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Monochrome Design을 적용한 대표적인 제품·서비스로는 Chanel 웹사이트, 일부 사진작가 포트폴리오 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #000000
- secondary: #666666
- accent: #AAAAAA
- background: #FFFFFF
- surface: #F5F5F5
- text: #000000
- textSecondary: #666666
- border: #CCCCCC

### 타이포그래피

- fontFamily: 'Courier New', 'Noto Sans KR', monospace
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0em
- titleFont: Courier New, monospace

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1
- borderRadius: sm 2px / md 4px / lg 8px / full 9999px
- shadow sm: 0 1px 2px rgba(0,0,0,0.2)
- shadow md: 0 2px 4px rgba(0,0,0,0.2)
- shadow lg: 0 4px 8px rgba(0,0,0,0.2)
- border: 1px solid #CCCCCC

### 컴포넌트 형태

- button: square / hover darken / text none
- card: flat / hover darken
- input: outlined / focus border
- badge: square / solid
- icon: lucide / stroke 1.5 / size 20px
- layout: boxed / section normal
- animation: 200ms ease

## 관련 링크

### 관련 스타일

- [Minimalism](https://ui.buildersgate.com/styles/minimalism)
- [Swiss Design (국제 타이포그래피 양식)](https://ui.buildersgate.com/styles/swiss-design)
- [Dark Mode Design](https://ui.buildersgate.com/styles/dark-mode)

### 데모 (같은 화면, 이 스타일로)

- [브랜드 랜딩 데모](https://ui.buildersgate.com/demo/brand/monochrome)
- [SaaS 대시보드 데모](https://ui.buildersgate.com/demo/saas/monochrome)
- [커머스 데모](https://ui.buildersgate.com/demo/commerce/monochrome)

### 비교

- [Monochrome Design vs Dark Mode Design](https://ui.buildersgate.com/compare/dark-mode-vs-monochrome)
- [Monochrome Design vs Duotone](https://ui.buildersgate.com/compare/duotone-vs-monochrome)
- [Monochrome Design vs Minimalism](https://ui.buildersgate.com/compare/minimalism-vs-monochrome)
- [Monochrome Design vs Swiss Design (국제 타이포그래피 양식)](https://ui.buildersgate.com/compare/monochrome-vs-swiss-design)

### 쓰임새별 추천

- [SaaS 대시보드](https://ui.buildersgate.com/for/saas-dashboard)
- [이커머스·쇼핑몰](https://ui.buildersgate.com/for/ecommerce)
- [포트폴리오](https://ui.buildersgate.com/for/portfolio)
- [핀테크·금융 서비스](https://ui.buildersgate.com/for/fintech)
- [기업·공공 사이트](https://ui.buildersgate.com/for/corporate-public)
- [브랜드 사이트](https://ui.buildersgate.com/for/brand-site)

---

HTML 버전: https://ui.buildersgate.com/styles/monochrome

이 문서는 https://ui.buildersgate.com/styles/monochrome.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.