표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Gradient Design
부드러운 색상 전환을 활용하여 깊이감과 현대적인 느낌을 제공합니다.
- YEAR
- 2016
- MOOD
- 화려한 · 친근·발랄
- PRIMARY#667EEA
- SECONDARY#764BA2
- ACCENT#F093FB
- BG
- SURFACE
취급 표시
- 크게 둥근 모서리
- 가는 테두리
- 번지는 바탕
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 3단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 3단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 3단계
- 화려한
- 친근·발랄
어디에 쓰나
실제로 쓰는 곳
- Instagram 로고
- Slack 구 로고
- 많은 SaaS 랜딩 페이지
사용 사례
- SaaS 랜딩 페이지
- 앱 아이콘
- 배경 디자인
- CTA 버튼 강조
이런 프로젝트에 맞습니다
- SaaS 랜딩
- 앱 아이콘
- CTA 버튼
- 배경 디자인
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
2016년 Instagram의 그라데이션 로고 변경 이후 웹 디자인 전반에 급속 확산.
핵심 원칙
- 부드러움
- 깊이
- 생동감
주요 특징
- 부드러운 색상 전환
- 다층 그라데이션
- 생동감 있는 색상
- 깊이감
- 현대적 감각
장점과 한계
장점
- 시각적으로 생동감 있고 현대적
- CSS linear-gradient로 쉽게 구현
- 배경으로 활용 시 콘텐츠 돋보임
한계
- 남발 시 눈에 피로
- 인쇄 시 색상 재현 어려움
- 색약·색맹 사용자 고려 필요
컬러 시스템
그라데이션 자체가 색상 시스템. 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 기법.
접근성
그라데이션 배경 위 텍스트는 양 끝 모두 대비율 확인 필요. 단색 텍스트보다 복잡함.
자주 묻는 질문
Gradient Design이란 무엇인가요?
부드러운 색상 전환을 활용하여 깊이감과 현대적인 느낌을 제공합니다. 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 랜딩 페이지 등이 있습니다.