# Duotone

> 이미지를 두 가지 대비되는 색상으로 처리하여 강렬하고 독특한 시각적 효과를 만듭니다.

- 층: 스타일 (시각적 스타일)
- ID: duotone
- 연도: 2015
- 무드 태그: 화려한, 친근·발랄
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/duotone

## 정의

이미지를 두 가지 대비되는 색상으로 처리하여 강렬하고 독특한 시각적 효과를 만듭니다.

## 역사·배경

인쇄 기법에서 유래. 디지털에서는 Spotify의 적극 활용으로 2015~2016년 트렌드로 부상.

## 주요 특징

- 2색 컬러 팔레트
- 높은 대비
- 브랜드 색상 활용
- 이미지 필터 효과
- 대담한 시각적 임팩트

## 핵심 원칙

- 색상 대비
- 시각적 통일성
- 브랜드 정체성

## 컬러 시스템

두 가지 색만. 이미지를 포함한 모든 것이 두 색의 조합으로 표현

### 색상 역할

- color-1: 어두운 색 (주로 짙은 색) — 그림자·배경 역할
- color-2: 밝은 색 (주로 밝은 강조색) — 하이라이트·강조 역할

### 색상 제약

- 세 번째 색 사용 절대 금지
- 이미지도 두 색으로 처리 (CSS mix-blend-mode 또는 필터)
- 두 색 간 명도 차이 충분히 — 작으면 구분 안 됨

### 다크모드 전략

color-1을 더 어둡게, color-2를 더 밝게. 비율만 조정

### 대비 요구사항

텍스트는 두 색 중 하나 위에만 배치 — 그 위에서 대비 확인

## 타이포그래피

- 폰트 성격: 두 색의 대담한 조합에 어울리는 강렬한 폰트
- 권장 폰트 수: 최대 1개
- 타입 스케일: 1.333 (Perfect Fourth)

### 타이포그래피 제약

- 텍스트 색은 두 색 중 하나만 사용
- heading은 color-2 (밝은 색)로 강조 가능

## 설계 제약

### 하면 안 되는 것

- 세 번째 색 추가 금지
- 이미지를 원본 컬러 그대로 사용 금지 — 반드시 duotone 처리

### 반드시 포함할 것

- 모든 이미지에 duotone 필터 적용
- 두 색의 극명한 대비

### 모션 가이드

두 색 간 색상 전환 애니메이션 가능. hover 시 color-1·2 반전 효과.

## 무드 프로파일

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

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

## 사용 사례

- 음악·엔터테인먼트 브랜딩
- 이벤트 포스터
- 소셜 미디어 콘텐츠
- 뮤직 앱 UI

## 추천 프로젝트 유형

- 음악·엔터테인먼트
- 이벤트 포스터
- 소셜 콘텐츠
- 뮤직 앱 UI

## 장단점

### 장점

- 이미지에 강력한 브랜드 색상 입힘
- 이질적인 사진들을 통일감 있게 처리
- 인상적이고 기억에 남는 비주얼

### 단점·한계

- 사진 디테일 손실
- 두 색상 이외의 정보 전달 어려움
- 지나치면 단조로울 수 있음

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

- Spotify (로고·앨범 처리)
- Squarespace 템플릿

## 자주 묻는 질문

### Q1. Duotone이란 무엇인가요?

이미지를 두 가지 대비되는 색상으로 처리하여 강렬하고 독특한 시각적 효과를 만듭니다. 인쇄 기법에서 유래. 디지털에서는 Spotify의 적극 활용으로 2015~2016년 트렌드로 부상.

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

Duotone의 핵심 원칙은 색상 대비, 시각적 통일성, 브랜드 정체성입니다.

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

Duotone은 음악·엔터테인먼트 브랜딩, 이벤트 포스터, 소셜 미디어 콘텐츠, 뮤직 앱 UI, 음악·엔터테인먼트, 이벤트 포스터, 소셜 콘텐츠, 뮤직 앱 UI 등의 프로젝트에 적합합니다.

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

장점으로는 이미지에 강력한 브랜드 색상 입힘, 이질적인 사진들을 통일감 있게 처리, 인상적이고 기억에 남는 비주얼이 있습니다. 단점으로는 사진 디테일 손실, 두 색상 이외의 정보 전달 어려움, 지나치면 단조로울 수 있음이 있습니다.

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

두 가지 색만. 이미지를 포함한 모든 것이 두 색의 조합으로 표현 색상 역할은 color-1: 어두운 색 (주로 짙은 색) — 그림자·배경 역할, color-2: 밝은 색 (주로 밝은 강조색) — 하이라이트·강조 역할입니다. 주의사항: 세 번째 색 사용 절대 금지, 이미지도 두 색으로 처리 (CSS mix-blend-mode 또는 필터).

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

Duotone에는 두 색의 대담한 조합에 어울리는 강렬한 폰트 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 텍스트 색은 두 색 중 하나만 사용, heading은 color-2 (밝은 색)로 강조 가능.

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

Duotone에서 피해야 할 것: 세 번째 색 추가 금지, 이미지를 원본 컬러 그대로 사용 금지 — 반드시 duotone 처리.

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

Duotone을 적용한 대표적인 제품·서비스로는 Spotify (로고·앨범 처리), Squarespace 템플릿 등이 있습니다.

## 참고 디자인 토큰

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

### 색상

- primary: #1DB954
- secondary: #191414
- accent: #1ED760
- background: #000000
- surface: #121212
- text: #FFFFFF
- textSecondary: #B3B3B3
- border: #282828

### 타이포그래피

- fontFamily: Circular, Helvetica, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: -0.01em

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

- spacing: unit 8px × scale 1
- borderRadius: sm 4px / md 8px / lg 12px / full 9999px
- shadow sm: 0 2px 4px rgba(0, 0, 0, 0.5)
- shadow md: 0 4px 8px rgba(0, 0, 0, 0.6)
- shadow lg: 0 8px 16px rgba(0, 0, 0, 0.7)
- border: 1px solid #282828

### 컴포넌트 형태

- button: rounded / hover darken / text none
- card: flat / hover darken
- input: outlined / focus glow
- badge: rounded / solid
- icon: lucide / stroke 2 / size 24px
- layout: boxed / section normal
- animation: 200ms ease
- specialEffects: gradientText

## 관련 링크

### 관련 스타일

- [Monochrome Design](https://ui.buildersgate.com/styles/monochrome)
- [Gradient Design](https://ui.buildersgate.com/styles/gradient-design)
- [Maximalism](https://ui.buildersgate.com/styles/maximalism)

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

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

### 비교

- [Duotone vs Gradient Design](https://ui.buildersgate.com/compare/duotone-vs-gradient-design)
- [Duotone vs Maximalism](https://ui.buildersgate.com/compare/duotone-vs-maximalism)
- [Duotone vs Monochrome Design](https://ui.buildersgate.com/compare/duotone-vs-monochrome)

### 쓰임새별 추천

- [이커머스·쇼핑몰](https://ui.buildersgate.com/for/ecommerce)
- [커뮤니티·소셜](https://ui.buildersgate.com/for/community)
- [브랜드 사이트](https://ui.buildersgate.com/for/brand-site)

---

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

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