# Duotone — 디자인 스타일 가이드
## 기본 정보
- **ID**: duotone
- **카테고리**: visual-style
- **연도**: 2015
## 설명
이미지를 두 가지 대비되는 색상으로 처리하여 강렬하고 독특한 시각적 효과를 만듭니다.
## 역사·배경
인쇄 기법에서 유래. 디지털에서는 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 반전 효과.
## 사용 사례
- 음악·엔터테인먼트 브랜딩
- 이벤트 포스터
- 소셜 미디어 콘텐츠
- 뮤직 앱 UI
## 추천 프로젝트 유형
- 음악·엔터테인먼트
- 이벤트 포스터
- 소셜 콘텐츠
- 뮤직 앱 UI
## 장점
- 이미지에 강력한 브랜드 색상 입힘
- 이질적인 사진들을 통일감 있게 처리
- 인상적이고 기억에 남는 비주얼
## 단점·한계
- 사진 디테일 손실
- 두 색상 이외의 정보 전달 어려움
- 지나치면 단조로울 수 있음
## 실제 사용 제품·서비스
- Spotify (로고·앨범 처리)
- Squarespace 템플릿
## 관련 스타일
- [monochrome](https://ui.buildersgate.com/styles/monochrome)
- [gradient-design](https://ui.buildersgate.com/styles/gradient-design)
- [maximalism](https://ui.buildersgate.com/styles/maximalism)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- primary: #1DB954
- secondary: #191414
- accent: #1ED760
- background: #000000
- surface: #121212
- text: #FFFFFF
- textSecondary: #B3B3B3
- border: #282828
### 헤더
- background: linear-gradient(135deg, #1DB954 0%, #191414 100%)
- textColor: #FFFFFF
- accentColor: #1ED760
### 타이포그래피
- fontFamily: Circular, Helvetica, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: -0.01em
### 스페이싱
- unit: 8px
- scale: 1
### 그림자 (Shadows)
- sm: 0 2px 4px rgba(0, 0, 0, 0.5)
- md: 0 4px 8px rgba(0, 0, 0, 0.6)
- lg: 0 8px 16px rgba(0, 0, 0, 0.7)
- xl: 0 16px 32px rgba(0, 0, 0, 0.8)
### Border Radius
- none: 0
- sm: 4px
- md: 8px
- lg: 12px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: #282828
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.2s ease
### 애니메이션
- duration: 200ms
- easing: ease
### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=darken / textTransform=none
- 카드: style=flat / hoverEffect=darken
- 인풋: style=outlined / focusEffect=glow
- 배지: shape=rounded / style=solid
- 아이콘: package=lucide / strokeWidth=2 / defaultSize=24
### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal
### 특수 효과
- glassmorphism: false
- gradientText: true
- animatedBackground: false
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: Duotone이란 무엇인가요?
A: 이미지를 두 가지 대비되는 색상으로 처리하여 강렬하고 독특한 시각적 효과를 만듭니다. 인쇄 기법에서 유래. 디지털에서는 Spotify의 적극 활용으로 2015~2016년 트렌드로 부상.
### Q: Duotone의 핵심 디자인 원칙은 무엇인가요?
A: Duotone의 핵심 원칙은 색상 대비, 시각적 통일성, 브랜드 정체성입니다.
### Q: Duotone은 어떤 프로젝트에 적합한가요?
A: Duotone은 음악·엔터테인먼트 브랜딩, 이벤트 포스터, 소셜 미디어 콘텐츠, 뮤직 앱 UI, 음악·엔터테인먼트, 이벤트 포스터, 소셜 콘텐츠, 뮤직 앱 UI 등의 프로젝트에 적합합니다.
### Q: Duotone의 장단점은 무엇인가요?
A: 장점으로는 이미지에 강력한 브랜드 색상 입힘, 이질적인 사진들을 통일감 있게 처리, 인상적이고 기억에 남는 비주얼이 있습니다. 단점으로는 사진 디테일 손실, 두 색상 이외의 정보 전달 어려움, 지나치면 단조로울 수 있음이 있습니다.
### Q: Duotone에서 색상은 어떻게 사용하나요?
A: 두 가지 색만. 이미지를 포함한 모든 것이 두 색의 조합으로 표현 색상 역할은 color-1: 어두운 색 (주로 짙은 색) — 그림자·배경 역할, color-2: 밝은 색 (주로 밝은 강조색) — 하이라이트·강조 역할입니다. 주의사항: 세 번째 색 사용 절대 금지, 이미지도 두 색으로 처리 (CSS mix-blend-mode 또는 필터).
### Q: Duotone에 어울리는 폰트 스타일은 무엇인가요?
A: Duotone에는 두 색의 대담한 조합에 어울리는 강렬한 폰트 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 텍스트 색은 두 색 중 하나만 사용, heading은 color-2 (밝은 색)로 강조 가능.
### Q: Duotone 디자인에서 하면 안 되는 것은 무엇인가요?
A: Duotone에서 피해야 할 것: 세 번째 색 추가 금지, 이미지를 원본 컬러 그대로 사용 금지 — 반드시 duotone 처리.
### Q: Duotone을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Duotone을 적용한 대표적인 제품·서비스로는 Spotify (로고·앨범 처리), Squarespace 템플릿 등이 있습니다.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=duotone
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=duotone&merged=true
인쇄 기법에서 유래. 디지털에서는 Spotify의 적극 활용으로 2015~2016년 트렌드로 부상.
#1DB954
핵심 원칙
1
색상 대비
2
시각적 통일성
3
브랜드 정체성
주요 특징
2색 컬러 팔레트
높은 대비
브랜드 색상 활용
이미지 필터 효과
대담한 시각적 임팩트
장단점
장점
+이미지에 강력한 브랜드 색상 입힘
+이질적인 사진들을 통일감 있게 처리
+인상적이고 기억에 남는 비주얼
단점 / 한계
−사진 디테일 손실
−두 색상 이외의 정보 전달 어려움
−지나치면 단조로울 수 있음
적합한 사용처
사용 사례
음악·엔터테인먼트 브랜딩
이벤트 포스터
소셜 미디어 콘텐츠
뮤직 앱 UI
이런 프로젝트에 추천
음악·엔터테인먼트이벤트 포스터소셜 콘텐츠뮤직 앱 UI
실제 사용 예시
Spotify (로고·앨범 처리)Squarespace 템플릿
UI 컴포넌트 예제
이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.
Classic Duotone Effect
두 가지 색상으로 처리된 이미지 효과
🏔️
🌊
🌅
Spotify-Inspired Duotone
Spotify의 대표적인 녹색-검정 듀오톤
🎵
Playlist Name
50 songs • 3h 20min
Various Color Combinations
다양한 듀오톤 색상 조합
Red • Blue
Yellow • Purple
Cyan • Pink
Orange • Indigo
Brand Duotone Cards
브랜드 색상을 활용한 듀오톤 카드
🎧
Music
Discover new sounds every day
📱
App
Experience the new design
High Contrast Duotone
높은 대비의 듀오톤 효과
🌙
☀️
Duotone Text Backgrounds
듀오톤 배경 위의 텍스트
Creative Design
Bold colors for bold ideas
Fresh Approach
Innovation meets tradition
Duotone Gallery
듀오톤이 적용된 이미지 갤러리
🏔️
🌊
🌅
🌲
🏜️
🌸
🌊
🌤️
Duotone Buttons
듀오톤 그라데이션을 사용한 버튼
자주 묻는 질문
Duotone이란 무엇인가요?
이미지를 두 가지 대비되는 색상으로 처리하여 강렬하고 독특한 시각적 효과를 만듭니다. 인쇄 기법에서 유래. 디지털에서는 Spotify의 적극 활용으로 2015~2016년 트렌드로 부상.
Duotone의 핵심 디자인 원칙은 무엇인가요?
Duotone의 핵심 원칙은 색상 대비, 시각적 통일성, 브랜드 정체성입니다.
Duotone은 어떤 프로젝트에 적합한가요?
Duotone은 음악·엔터테인먼트 브랜딩, 이벤트 포스터, 소셜 미디어 콘텐츠, 뮤직 앱 UI, 음악·엔터테인먼트, 이벤트 포스터, 소셜 콘텐츠, 뮤직 앱 UI 등의 프로젝트에 적합합니다.
Duotone의 장단점은 무엇인가요?
장점으로는 이미지에 강력한 브랜드 색상 입힘, 이질적인 사진들을 통일감 있게 처리, 인상적이고 기억에 남는 비주얼이 있습니다. 단점으로는 사진 디테일 손실, 두 색상 이외의 정보 전달 어려움, 지나치면 단조로울 수 있음이 있습니다.
Duotone에서 색상은 어떻게 사용하나요?
두 가지 색만. 이미지를 포함한 모든 것이 두 색의 조합으로 표현 색상 역할은 color-1: 어두운 색 (주로 짙은 색) — 그림자·배경 역할, color-2: 밝은 색 (주로 밝은 강조색) — 하이라이트·강조 역할입니다. 주의사항: 세 번째 색 사용 절대 금지, 이미지도 두 색으로 처리 (CSS mix-blend-mode 또는 필터).
Duotone에 어울리는 폰트 스타일은 무엇인가요?
Duotone에는 두 색의 대담한 조합에 어울리는 강렬한 폰트 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 텍스트 색은 두 색 중 하나만 사용, heading은 color-2 (밝은 색)로 강조 가능.
Duotone 디자인에서 하면 안 되는 것은 무엇인가요?
Duotone에서 피해야 할 것: 세 번째 색 추가 금지, 이미지를 원본 컬러 그대로 사용 금지 — 반드시 duotone 처리.
Duotone을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Duotone을 적용한 대표적인 제품·서비스로는 Spotify (로고·앨범 처리), Squarespace 템플릿 등이 있습니다.