쉐이드 및 UI 계층 구조 가이드 - 그레이 스케일 디자인, 시각적 계층 구조 및 전문적인 인터페이스 시스템 마스터하기
그레이는 디자이너의 도구 상자에서 가장 다재다능한 도구입니다. 웹사이트의 시각적 계층 구조 (Visual Hierarchy)를 정의합니다. 서로 다른 그레이 쉐이드를 사용하면 사용자가 기본 헤더, 보조 텍스트 및 비활성화된 버튼을 쉽게 구분할 수 있습니다. 2026년에는 디지털 인터페이스에 인간적인 터치를 더하기 위해 "웜 그레이 (그레이지)"로 이동하는 추세를 보이고 있습니다.
쿨 그레이(파란색 언더톤)는 현대성과 효율성을 투영하며 SaaS와 핀테크에서 주로 사용됩니다. 웜 그레이(갈색/노란색 언더톤)는 유기적이고 친근한 느낌을 주어 이커머스와 웰빙 플랫폼에 완벽합니다.
파란색 언더톤이 현대적이고 효율적인 느낌을 줍니다
추천: 기술 SaaS, 핀테크, 기업용 프로젝트
갈색/노란색 언더톤이 유기적인 따뜻함을 더합니다
추천: 이커머스, 웰빙, 라이프스타일
시각적 깊이를 위한 5단계 그레이 스케일
SaaS 인터페이스를 위한 쿨 그레이
유기적인 느낌을 위한 웜 그레이 (그레이지)
전문적이고 균형 잡힌 느낌 - 기업용 UI에 완벽함
#708090
rgb(112, 128, 144)
hsl(210, 13%, 50%)
주요 활용 사례:
반사적이고 프리미엄한 느낌 - 디자인에 우아함 추가
#C0C0C0
rgb(192, 192, 192)
hsl(0, 0%, 75%)
주요 활용 사례:
현대적이고 효율적인 느낌 - 기술 인터페이스에 이상적
#909090
rgb(144, 144, 144)
hsl(0, 0%, 56%)
주요 활용 사례:
유기적이고 친근한 느낌 - 디지털 인터페이스에 인간적인 터치
#B8A99A
rgb(184, 169, 154)
hsl(30, 17%, 66%)
주요 활용 사례:
스모크 (Smoke)
#F5F5F5
플래티넘 (Platinum)
#E0E0E0
라이트 그레이 (Light Gray)
#D3D3D3
실버 (Silver)
#C0C0C0
다크 그레이 (Dark Gray)
#A9A9A9
그레이 (Gray)
#808080
딤 그레이 (Dim Gray)
#696969
미디엄 그레이 (Medium Gray)
#505050
딥 그레이 (Deep Gray)
#404040
차콜 (Charcoal)
#303030
다크 차콜 (Dark Charcoal)
#202020
니어 블랙 (Near Black)
#101010
헤더 배경
linear-gradient(135deg, #2D3748 0%, #718096 100%)카드 오버레이
linear-gradient(180deg, #4A5568 0%, #A0AEC0 100%)유기적인 배경
linear-gradient(135deg, #6B5B52 0%, #C4B8AC 100%)프리미엄 엑센트
linear-gradient(135deg, #C0C0C0 0%, #E8E8E8 100%)#FFFFFF
깔끔한 대비 - 미니멀리즘의 매력
#000000
강렬한 존재감 - 드라마틱한 효과
#000080
기업용 스타일 - 전문적인 신뢰
#8B4513
전원적인 느낌 - 유기적인 따뜻함
그레이는 균형, 중립, 타협을 상징합니다. 블랙과 화이트 사이에 위치하여 극단 사이의 가교 역할을 합니다.
그레이는 전문성, 성숙함, 권위를 전달합니다. 안정성을 전달하기 위해 기업 환경에서 널리 사용됩니다.
실버와 쿨 그레이는 세련미와 고급스러움을 암시합니다. 럭셔리 브랜드 및 프리미엄 경험과 관련이 있습니다.
쿨 그레이는 현대 기술 디자인을 지배하며 혁신, 효율성, 미래 지향적인 접근 방식을 나타냅니다.
화이트에 가까운 색부터 블랙에 가까운 색까지 5-9단계의 그레이 스케일을 만드세요. 텍스트, 테두리, 배경, 비활성화 상태에 일관되게 사용하세요.
기술/금융 분야에는 쿨 그레이(블루 계열)를 선택하세요. 라이프스타일, 웰빙, 이커머스 브랜드에는 웜 그레이(그레이지 계열)를 사용하세요.
그레이 쉐이드를 사용하여 계층 구조를 설정하세요. 제목은 더 어둡게, 본문 텍스트는 중간 정도로, 메타데이터와 캡션은 더 밝게 사용합니다.
순수한 50% 그레이(#808080)는 단조로워 보일 수 있습니다. 더 자연스럽고 매력적인 결과를 위해 그레이에 미묘한 따뜻함이나 차가움을 더해 보세요.
| 색상 이름 | HEX | RGB | HSL | 화이트 대비 |
|---|---|---|---|---|
| 슬레이트 그레이 (Slate Gray) | #708090 | rgb(112, 128, 144) | hsl(210, 13%, 50%) | AA |
| 실버 (Silver) | #C0C0C0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) | AA |
| 쿨 그레이 (Cool Gray) | #909090 | rgb(144, 144, 144) | hsl(0, 0%, 56%) | AA |
| 웜 그레이 (Warm Gray / Greige) | #B8A99A | rgb(184, 169, 154) | hsl(30, 17%, 66%) | AA |
.gray-scale {
/* 5단계 기업용 그레이 스케일 */
background: linear-gradient(135deg, #2D3748 0%, #CBD5E0 100%);
}.tech-gray {
/* SaaS 인터페이스를 위한 쿨 그레이 */
background: linear-gradient(180deg, #4A5568 0%, #A0AEC0 100%);
}.warm-gray {
/* 그레이지 - 유기적인 느낌을 위한 웜 그레이 */
background: linear-gradient(135deg, #6B5B52 0%, #C4B8AC 100%);
}그레이는 시각적 계층 구조의 기초입니다. 전략적으로 사용하여 인터페이스를 통해 사용자를 안내하세요.
Discover our complete collection of color guides with HEX codes, palettes, and design inspiration.