사흘 이내 로스팅
주문이 모이면 그때 볶습니다. 미리 볶아 쌓아두지 않습니다.
Duotone vs Gradient Design
커피 구독 브랜드 LUMA 의 같은 랜딩 한 페이지를 두 스타일 규칙으로 각각 다시 지어 나란히 놓았습니다. 콘텐츠는 같고, 규칙만 다릅니다.
같은 씬, 두 벌
무드 대비
4축 좌표(-2 ~ +2)를 같은 눈금 위에 겹쳐 놓았습니다. 축은 정규화하지 않습니다 — 두 점이 붙어 있으면 실제로 가까운 것입니다.
무드 4축 수치(−2에서 +2 사이): 밀도 — Duotone 0, Gradient Design 0. 온도감 — Duotone 0, Gradient Design 0. 시대감 — Duotone 0, Gradient Design 0. 격식 — Duotone -1, Gradient Design 0.
나란히 놓고 보기
Duotone
- YEAR
- 2015
- MOOD
- 화려한 · 친근·발랄
Gradient Design
- YEAR
- 2016
- MOOD
- 화려한 · 친근·발랄
주요 특징
Duotone
- 2색 컬러 팔레트
- 높은 대비
- 브랜드 색상 활용
- 이미지 필터 효과
- 대담한 시각적 임팩트
Gradient Design
- 부드러운 색상 전환
- 다층 그라데이션
- 생동감 있는 색상
- 깊이감
- 현대적 감각
장점과 한계
Duotone
장점
- 이미지에 강력한 브랜드 색상 입힘
- 이질적인 사진들을 통일감 있게 처리
- 인상적이고 기억에 남는 비주얼
한계
- 사진 디테일 손실
- 두 색상 이외의 정보 전달 어려움
- 지나치면 단조로울 수 있음
Gradient Design
장점
- 시각적으로 생동감 있고 현대적
- CSS linear-gradient로 쉽게 구현
- 배경으로 활용 시 콘텐츠 돋보임
한계
- 남발 시 눈에 피로
- 인쇄 시 색상 재현 어려움
- 색약·색맹 사용자 고려 필요
역사와 배경
Duotone
인쇄 기법에서 유래. 디지털에서는 Spotify의 적극 활용으로 2015~2016년 트렌드로 부상.
Gradient Design
2016년 Instagram의 그라데이션 로고 변경 이후 웹 디자인 전반에 급속 확산.
자주 묻는 질문
Duotone vs Gradient Design, 무엇이 다른가요?
Duotone — 이미지를 두 가지 대비되는 색상으로 처리하여 강렬하고 독특한 시각적 효과를 만듭니다. Gradient Design — 부드러운 색상 전환을 활용하여 깊이감과 현대적인 느낌을 제공합니다. 무드 좌표에서 가장 벌어지는 축은 격식입니다 — Duotone 쪽은 자유분방함 쪽에, Gradient Design 쪽은 중간 쪽에 서 있습니다.
언제 Duotone 쪽, 언제 Gradient Design 쪽을 골라야 하나요?
음악·엔터테인먼트 · 이벤트 포스터 · 소셜 콘텐츠 같은 화면이라면 Duotone 쪽이 오래 버팁니다. 반대로 SaaS 랜딩 · 앱 아이콘 · CTA 버튼 쪽 그림이라면 Gradient Design 쪽으로 기웁니다. 둘 다 걸린다면 같은 씬을 입힌 두 데모를 나란히 보고 결정하는 편이 빠릅니다.
Duotone vs Gradient Design, 장단점은 어떻게 갈리나요?
Duotone 쪽 — 강점은 이미지에 강력한 브랜드 색상 입힘 · 이질적인 사진들을 통일감 있게 처리, 짚고 갈 한계는 사진 디테일 손실 · 두 색상 이외의 정보 전달 어려움입니다. Gradient Design 쪽 — 강점은 시각적으로 생동감 있고 현대적 · CSS linear-gradient로 쉽게 구현, 짚고 갈 한계는 남발 시 눈에 피로 · 인쇄 시 색상 재현 어려움입니다.