# Gradient Design

> 부드러운 색상 전환을 활용하여 깊이감과 현대적인 느낌을 제공합니다.

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

## 정의

부드러운 색상 전환을 활용하여 깊이감과 현대적인 느낌을 제공합니다.

## 역사·배경

2016년 Instagram의 그라데이션 로고 변경 이후 웹 디자인 전반에 급속 확산.

## 주요 특징

- 부드러운 색상 전환
- 다층 그라데이션
- 생동감 있는 색상
- 깊이감
- 현대적 감각

## 핵심 원칙

- 부드러움
- 깊이
- 생동감

## 컬러 시스템

그라데이션 자체가 색상 시스템. 2~3색 혼합 그라데이션이 브랜드 정체성

### 색상 역할

- gradient-start: 그라데이션 시작 색 — primary
- gradient-end: 그라데이션 끝 색 — secondary 또는 accent
- background: 그라데이션 또는 매우 연한 단색
- text: 그라데이션 위에서 가독성 확보 (주로 흰색)

### 색상 제약

- 단색 버튼·배경 사용 금지 — 그라데이션 우선
- 3색 이상 그라데이션은 무지개처럼 번잡해질 수 있으므로 주의
- 그라데이션 방향 일관성 유지 (135deg 또는 to right 통일)

### 다크모드 전략

어두운 배경 위 vivid 그라데이션으로 더욱 강렬하게. 또는 그라데이션 채도 낮추기

### 대비 요구사항

그라데이션 위 텍스트는 시작/끝 양쪽 모두 대비 확인 필수

## 타이포그래피

- 폰트 성격: 현대적이고 세련된 산세리프. 그라데이션의 역동성과 어울리는 느낌
- 권장 폰트 수: 최대 2개
- 타입 스케일: 1.25 (Major Third)

### 타이포그래피 제약

- gradient text(텍스트 자체 그라데이션)는 굵은 weight에서만 효과적
- 텍스트 그라데이션 남발 금지 — 핵심 heading에만

## 설계 제약

### 하면 안 되는 것

- 단색 요소만으로 구성 금지 — 그라데이션 요소 반드시 포함
- 색상 그라데이션과 텍스트 그라데이션 동시 남발 금지

### 반드시 포함할 것

- 브랜드 그라데이션 정의 (from-color, to-color, direction)
- 그라데이션 hover 시 shift 효과 (background-position animation)

### 모션 가이드

그라데이션 색상이 서서히 이동하는 animated gradient 허용. CSS animation background-position 기법.

## 무드 프로파일

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

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

## 사용 사례

- SaaS 랜딩 페이지
- 앱 아이콘
- 배경 디자인
- CTA 버튼 강조

## 추천 프로젝트 유형

- SaaS 랜딩
- 앱 아이콘
- CTA 버튼
- 배경 디자인

## 장단점

### 장점

- 시각적으로 생동감 있고 현대적
- CSS linear-gradient로 쉽게 구현
- 배경으로 활용 시 콘텐츠 돋보임

### 단점·한계

- 남발 시 눈에 피로
- 인쇄 시 색상 재현 어려움
- 색약·색맹 사용자 고려 필요

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

- Instagram 로고
- Slack 구 로고
- 많은 SaaS 랜딩 페이지

## 접근성

그라데이션 배경 위 텍스트는 양 끝 모두 대비율 확인 필요. 단색 텍스트보다 복잡함.

## 자주 묻는 질문

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

부드러운 색상 전환을 활용하여 깊이감과 현대적인 느낌을 제공합니다. 2016년 Instagram의 그라데이션 로고 변경 이후 웹 디자인 전반에 급속 확산.

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

Gradient Design의 핵심 원칙은 부드러움, 깊이, 생동감입니다.

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

Gradient Design은 SaaS 랜딩 페이지, 앱 아이콘, 배경 디자인, CTA 버튼 강조, SaaS 랜딩, 앱 아이콘, CTA 버튼, 배경 디자인 등의 프로젝트에 적합합니다.

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

장점으로는 시각적으로 생동감 있고 현대적, CSS linear-gradient로 쉽게 구현, 배경으로 활용 시 콘텐츠 돋보임이 있습니다. 단점으로는 남발 시 눈에 피로, 인쇄 시 색상 재현 어려움, 색약·색맹 사용자 고려 필요이 있습니다.

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

그라데이션 자체가 색상 시스템. 2~3색 혼합 그라데이션이 브랜드 정체성 색상 역할은 gradient-start: 그라데이션 시작 색 — primary, gradient-end: 그라데이션 끝 색 — secondary 또는 accent, background: 그라데이션 또는 매우 연한 단색입니다. 주의사항: 단색 버튼·배경 사용 금지 — 그라데이션 우선, 3색 이상 그라데이션은 무지개처럼 번잡해질 수 있으므로 주의.

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

Gradient Design에는 현대적이고 세련된 산세리프. 그라데이션의 역동성과 어울리는 느낌 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: gradient text(텍스트 자체 그라데이션)는 굵은 weight에서만 효과적, 텍스트 그라데이션 남발 금지 — 핵심 heading에만.

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

Gradient Design에서 피해야 할 것: 단색 요소만으로 구성 금지 — 그라데이션 요소 반드시 포함, 색상 그라데이션과 텍스트 그라데이션 동시 남발 금지.

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

Gradient Design을 적용한 대표적인 제품·서비스로는 Instagram 로고, Slack 구 로고, 많은 SaaS 랜딩 페이지 등이 있습니다.

## 참고 디자인 토큰

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

### 색상

- primary: #667EEA
- secondary: #764BA2
- accent: #F093FB
- background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%)
- surface: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%)
- text: #FFFFFF
- textSecondary: #E0E0E0
- border: rgba(255, 255, 255, 0.3)

### 타이포그래피

- fontFamily: Montserrat, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0.02em

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

- spacing: unit 8px × scale 1.1
- borderRadius: sm 10px / md 20px / lg 30px / full 9999px
- shadow sm: 0 4px 15px rgba(102, 126, 234, 0.4)
- shadow md: 0 8px 30px rgba(102, 126, 234, 0.4)
- shadow lg: 0 15px 50px rgba(102, 126, 234, 0.5)
- border: 1px solid rgba(255, 255, 255, 0.3)

### 컴포넌트 형태

- button: pill / hover glow / text none
- card: glass / hover glow
- input: filled / focus glow
- badge: pill / subtle
- icon: lucide / stroke 1.5 / size 24px
- layout: boxed / section spacious
- animation: 500ms ease-in-out
- specialEffects: glassmorphism, gradientText, animatedBackground

## 관련 링크

### 관련 스타일

- [Aurora Design](https://ui.buildersgate.com/styles/aurora-design)
- [Glassmorphism](https://ui.buildersgate.com/styles/glassmorphism)
- [Duotone](https://ui.buildersgate.com/styles/duotone)

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

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

### 비교

- [Gradient Design vs Aurora Design](https://ui.buildersgate.com/compare/aurora-design-vs-gradient-design)
- [Gradient Design vs Duotone](https://ui.buildersgate.com/compare/duotone-vs-gradient-design)
- [Gradient Design vs Glassmorphism](https://ui.buildersgate.com/compare/glassmorphism-vs-gradient-design)

### 쓰임새별 추천

- [SaaS 대시보드](https://ui.buildersgate.com/for/saas-dashboard)
- [이커머스·쇼핑몰](https://ui.buildersgate.com/for/ecommerce)
- [제품 랜딩 페이지](https://ui.buildersgate.com/for/landing-page)
- [핀테크·금융 서비스](https://ui.buildersgate.com/for/fintech)
- [커뮤니티·소셜](https://ui.buildersgate.com/for/community)
- [모바일 앱](https://ui.buildersgate.com/for/mobile-app)

---

HTML 버전: https://ui.buildersgate.com/styles/gradient-design

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