# Gradient Design — 디자인 스타일 가이드
## 기본 정보
- **ID**: gradient-design
- **카테고리**: visual-style
- **연도**: 2016
## 설명
부드러운 색상 전환을 활용하여 깊이감과 현대적인 느낌을 제공합니다.
## 역사·배경
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 기법.
## 사용 사례
- SaaS 랜딩 페이지
- 앱 아이콘
- 배경 디자인
- CTA 버튼 강조
## 추천 프로젝트 유형
- SaaS 랜딩
- 앱 아이콘
- CTA 버튼
- 배경 디자인
## 장점
- 시각적으로 생동감 있고 현대적
- CSS linear-gradient로 쉽게 구현
- 배경으로 활용 시 콘텐츠 돋보임
## 단점·한계
- 남발 시 눈에 피로
- 인쇄 시 색상 재현 어려움
- 색약·색맹 사용자 고려 필요
## 실제 사용 제품·서비스
- Instagram 로고
- Slack 구 로고
- 많은 SaaS 랜딩 페이지
## 접근성
그라데이션 배경 위 텍스트는 양 끝 모두 대비율 확인 필요. 단색 텍스트보다 복잡함.
## 관련 스타일
- [aurora-design](https://ui.buildersgate.com/styles/aurora-design)
- [glassmorphism](https://ui.buildersgate.com/styles/glassmorphism)
- [duotone](https://ui.buildersgate.com/styles/duotone)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- 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)
### 헤더
- background: linear-gradient(135deg, #667EEA 0%, #764BA2 50%, #F093FB 100%)
- textColor: #FFFFFF
- accentColor: #F093FB
### 타이포그래피
- fontFamily: Montserrat, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0.02em
### 스페이싱
- unit: 8px
- scale: 1.1
### 그림자 (Shadows)
- sm: 0 4px 15px rgba(102, 126, 234, 0.4)
- md: 0 8px 30px rgba(102, 126, 234, 0.4)
- lg: 0 15px 50px rgba(102, 126, 234, 0.5)
- xl: 0 20px 70px rgba(102, 126, 234, 0.6)
### Border Radius
- none: 0
- sm: 10px
- md: 20px
- lg: 30px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: rgba(255, 255, 255, 0.3)
### 이펙트
- blur: 10px
- opacity: 0.9
- transition: all 0.5s ease-in-out
### 애니메이션
- duration: 500ms
- easing: ease-in-out
### 컴포넌트 토큰
- 버튼: shape=pill / hoverEffect=glow / textTransform=none
- 카드: style=glass / hoverEffect=glow
- 인풋: style=filled / focusEffect=glow
- 배지: shape=pill / style=subtle
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=24
### 레이아웃
- containerStyle: boxed
- sectionSpacing: spacious
### 특수 효과
- glassmorphism: true
- gradientText: true
- animatedBackground: true
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: Gradient Design이란 무엇인가요?
A: 부드러운 색상 전환을 활용하여 깊이감과 현대적인 느낌을 제공합니다. 2016년 Instagram의 그라데이션 로고 변경 이후 웹 디자인 전반에 급속 확산.
### Q: Gradient Design의 핵심 디자인 원칙은 무엇인가요?
A: Gradient Design의 핵심 원칙은 부드러움, 깊이, 생동감입니다.
### Q: Gradient Design은 어떤 프로젝트에 적합한가요?
A: Gradient Design은 SaaS 랜딩 페이지, 앱 아이콘, 배경 디자인, CTA 버튼 강조, SaaS 랜딩, 앱 아이콘, CTA 버튼, 배경 디자인 등의 프로젝트에 적합합니다.
### Q: Gradient Design의 장단점은 무엇인가요?
A: 장점으로는 시각적으로 생동감 있고 현대적, CSS linear-gradient로 쉽게 구현, 배경으로 활용 시 콘텐츠 돋보임이 있습니다. 단점으로는 남발 시 눈에 피로, 인쇄 시 색상 재현 어려움, 색약·색맹 사용자 고려 필요이 있습니다.
### Q: Gradient Design에서 색상은 어떻게 사용하나요?
A: 그라데이션 자체가 색상 시스템. 2~3색 혼합 그라데이션이 브랜드 정체성 색상 역할은 gradient-start: 그라데이션 시작 색 — primary, gradient-end: 그라데이션 끝 색 — secondary 또는 accent, background: 그라데이션 또는 매우 연한 단색입니다. 주의사항: 단색 버튼·배경 사용 금지 — 그라데이션 우선, 3색 이상 그라데이션은 무지개처럼 번잡해질 수 있으므로 주의.
### Q: Gradient Design에 어울리는 폰트 스타일은 무엇인가요?
A: Gradient Design에는 현대적이고 세련된 산세리프. 그라데이션의 역동성과 어울리는 느낌 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: gradient text(텍스트 자체 그라데이션)는 굵은 weight에서만 효과적, 텍스트 그라데이션 남발 금지 — 핵심 heading에만.
### Q: Gradient Design 디자인에서 하면 안 되는 것은 무엇인가요?
A: Gradient Design에서 피해야 할 것: 단색 요소만으로 구성 금지 — 그라데이션 요소 반드시 포함, 색상 그라데이션과 텍스트 그라데이션 동시 남발 금지.
### Q: Gradient Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Gradient Design을 적용한 대표적인 제품·서비스로는 Instagram 로고, Slack 구 로고, 많은 SaaS 랜딩 페이지 등이 있습니다.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=gradient-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=gradient-design&merged=true
부드러운 색상 전환을 활용하여 깊이감과 현대적인 느낌을 제공합니다. 2016년 Instagram의 그라데이션 로고 변경 이후 웹 디자인 전반에 급속 확산.
Gradient Design의 핵심 디자인 원칙은 무엇인가요?
Gradient Design의 핵심 원칙은 부드러움, 깊이, 생동감입니다.
Gradient Design은 어떤 프로젝트에 적합한가요?
Gradient Design은 SaaS 랜딩 페이지, 앱 아이콘, 배경 디자인, CTA 버튼 강조, SaaS 랜딩, 앱 아이콘, CTA 버튼, 배경 디자인 등의 프로젝트에 적합합니다.
Gradient Design의 장단점은 무엇인가요?
장점으로는 시각적으로 생동감 있고 현대적, CSS linear-gradient로 쉽게 구현, 배경으로 활용 시 콘텐츠 돋보임이 있습니다. 단점으로는 남발 시 눈에 피로, 인쇄 시 색상 재현 어려움, 색약·색맹 사용자 고려 필요이 있습니다.
Gradient Design에서 색상은 어떻게 사용하나요?
그라데이션 자체가 색상 시스템. 2~3색 혼합 그라데이션이 브랜드 정체성 색상 역할은 gradient-start: 그라데이션 시작 색 — primary, gradient-end: 그라데이션 끝 색 — secondary 또는 accent, background: 그라데이션 또는 매우 연한 단색입니다. 주의사항: 단색 버튼·배경 사용 금지 — 그라데이션 우선, 3색 이상 그라데이션은 무지개처럼 번잡해질 수 있으므로 주의.
Gradient Design에 어울리는 폰트 스타일은 무엇인가요?
Gradient Design에는 현대적이고 세련된 산세리프. 그라데이션의 역동성과 어울리는 느낌 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: gradient text(텍스트 자체 그라데이션)는 굵은 weight에서만 효과적, 텍스트 그라데이션 남발 금지 — 핵심 heading에만.
Gradient Design 디자인에서 하면 안 되는 것은 무엇인가요?
Gradient Design에서 피해야 할 것: 단색 요소만으로 구성 금지 — 그라데이션 요소 반드시 포함, 색상 그라데이션과 텍스트 그라데이션 동시 남발 금지.
Gradient Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Gradient Design을 적용한 대표적인 제품·서비스로는 Instagram 로고, Slack 구 로고, 많은 SaaS 랜딩 페이지 등이 있습니다.