page title

색상 팔레트는 UI 전반에서 시각적 일관성을 유지하며 주 색상, 보조 색상, 상태 색상 등 다양한 역할을 효과적으로 구분할 수 있도록 설계한다. 팔레트는 각 색상의 명도를 단계별로 구분하여 구성된다.

표준형 스타일의 색상 팔레트는 색상(Hue)과 채도(Saturation)를 기준으로 명도(Lightness)를 총 13단계로 구분하였으며, Gray의 0(White), 100(Black)을 제외한 다른 색상들은 11단계로 구성된다. 색상 팔레트는 시각적 일관성을 유지하며 다양한 화면에서 명확하고 균형 잡힌 시각 경험을 제공한다.

표준형 스타일은 사용자 접근성을 고려하여 일반 모드와 선명한 화면 모드를 제공한다.

색상 사용 시 색약자(특히 적록색맹과 청색맹 사용자)를 고려해야 한다. 색약자도 UI에서 각 기능과 상태를 정확히 인지할 수 있도록 하기 위해, 색상 외에 텍스트와 아이콘으로 정보를 보완하고, 특정 색상 조합(예: 적색과 녹색)을 피하거나 명도 차이를 조절하여 혼동을 줄인다. 모든 사용자가 정보를 쉽게 이해할 수 있도록 하여, 접근성을 높이는 데 중요한 역할을 한다.

색각이상자가 명확히 구분할 수 있는 색상

색각이상자가 구분하기 어려운 조합

색상 시스템은 주요 색상, 강조 색상, 그래픽 색상, 시스템 색상으로 구성된다. 주요 색상은 브랜드의 아이덴티티를 전달하며, Primary, Secondary, Gray 색상으로 구분된다. 강조 색상과 그래픽 색상은 사용자 주목을 유도하는 데 사용되며, 시스템 색상은 오류, 경고, 성공 등의 상태를 명확히 전달하는 역할을 한다.

표준형스타일의 색상 시스템은 매직넘버 준수와 각 색상에 대한 베이스 색상은 색각이상자를 위해 안전하게 설계되었다.

• Gray: 중립적 정보와 배경, 구분선, 글자
• Primary: 주요 상호작용 요소 (중요한 버튼, 링크 등)
• Secondary: 보조 상호작용 요소 (사이드 메뉴, 대부분의 UI 요소 등)
• Accent: 강조 요소로 제한적 사용 (새로운 알림, 중요 알림 배지 등)
• Graphic: 그래프나, 배너, 일러스트 등 보조 요소 (배너, 일러스트 등)
• System: 상태를 전달하는 색상 (Danger, Warning, Success, Info)

Secondary 색상은 primary 색상과 보조를 맞추며, 인터페이스에서 전체적인 보조적인 역할을 한다. 덜 중요한 액션을 표시하거나 구분을 위한 배경으로 사용한다.

Gray 색상은 주로 배경, 텍스트, 구분 선에 사용되며, 시각적 집중을 방해하지 않고 콘텐츠에 초점을 맞추도록 도와주는 중립적인 색상이다.

표준형 스타일의 그레이 색상은 주요 색상과 선명한 모드에서의 조화를 고려해 블루 그레이 계열을 사용한다.

색상 비율은 균형감 있게 유지하는 것이 중요하다. 60-30-10 원칙을 활용한 색상 비율을 적용한다.
60%는 배경 및 중립적인 색상, 30%는 보조 색상, 10%는 주요 기능이나 중요한 상호작용을 하는 색상으로 배치하여 시각적으로 조화로운 구성을 만든다.

사용자가 주목해야 하는 특정 상태나 이벤트 또는 알림 요소에만 강조(accent color)용으로 5% 이하 비율로 사용한다. 정보의 우선순위를 시각적으로 부각하며, 제한적인 사용으로 과부하를 방지한다.

그래픽 색상(graphic color)은 데이터 시각화 및 정보 전달을 위한 색상으로, 사용자에게 정보를 직관적으로 전달하는 역할을 한다. 주로 차트나 그래프, 인포그래픽과 같은 시각적 데이터나 배너, 일러스트 요소로 사용한다.

그래픽 색상은 표준형 스타일에서도 변형하여 사용가능하다.

시스템 색상은 주의, 경고, 성공 등의 상태를 사용자에게 직관적으로 전달하는 색상이다. 색상만으로 정보를 전달하기보다 아이콘이나 텍스트를 함께 사용하여 시각적 혼동을 최소화한다.

‘Warning’ 색상은 잠재적 위험이나 주의가 필요한 상황을 나타내며, 눈에 잘 띄는 노란색 계열을 사용해 사용자에게 경고의 의미를 전달한다.

1. 1.아이콘warning-50
2. 2.텍스트warning-60
3. 3.배경warning-5
4. 4.보더warning-10

1. 1.아이콘warning-20
2. 2.텍스트warning-20
3. 3.배경warning-95
4. 4.보더warning-90

‘Success’ 색상은 성공을 의미하며, 작업 완료 또는 긍정적 결과를 표시하는 데 사용된다. 일반적으로 녹색 계열을 사용하여 안정감과 긍정적인 피드백을 제공한다.

1. 1.아이콘success-50
2. 2.텍스트success-60
3. 3.배경success-5
4. 4.보더success-10

1. 1.아이콘success-20
2. 2.텍스트success-20
3. 3.배경success-95
4. 4.보더success-90

‘Information’ 색상은 참고 정보나 안내 메시지를 전달할 때 사용하며, 파란색 계열로 사용자에게 추가 정보를 제공한다.

1. 1.아이콘information-50
2. 2.텍스트information-60
3. 3.배경information-5
4. 4.보더information-10

1. 1.아이콘information-20
2. 2.텍스트information-20
3. 3.배경information-95
4. 4.보더information-90

배경 색상과 표면 색상은 일반 모드와 선명한 화면 모드로 나뉘며, elevation에 따라 단계적으로 색상을 조절한다.

기본 모드

배경에서 레이어가 쌓일 때 흰색의 surface와 색상 surface를 번갈아 가며 사용하며 border나 shadow를 함께 사용하여 고도를 표현한다.

• gray10(elevation-1)-gray0(elevation0)-gray5(elevation+1)-gray0(elevation+2)

선명한 화면 모드

배경에서 레이어가 쌓일수록 점차 밝아지게 표현한다.

• gray90(elevation-1)-gray100(elevation0)-gray95(elevation+1)-gray90(elevation+2)

글자 색상

gray-0(white) 배경 이외의 다른 색상의 배경을 고려하여 매직넘버를 설정하는 것이 좋다.

• 기본 모드: 최소 매직넘버 40, 본문은 매직넘버 50
• 선명한 화면 모드: 매직넘버 70, 본문 매직넘버 90(15:1)

타이포그래피 접근성

인풋 보더 색상

• 기본 모드: 매직넘버 50
• 선명한 화면 모드: 매직넘버 50 (두께 변화)

타이포그래피 접근성

아이콘 색상

• 기본 모드: 매직넘버 40
• 선명한 화면 모드: 매직넘버 70

텍스트와 아이콘 색상을 똑같은 색상을 사용하는 경우

상호 작용이 있는 요소의 상태 값은 점진적인 증가 또는 감소의 규칙을 사용한다.

주요 버튼 상태 모드

눈에 가장 띄어야 하는 요소, 기본으로 사용하는 버튼의 상태 값이다.

액션

전체적으로 액션이 필요한 곳에서 사용한다.
-메인 메뉴, 셀렉트 등

배경이 있는 경우(기준 색상 앞뒤 레벨 적용)

주요 액션이나 중요한 정보를 강조하는 데 사용한다.

모범 사례

피해야 할 사례

명도 대비를 준수한다.

모범 사례

피해야 할 사례

상태 값에 다른 색조 사용하지 않는다.

모범 사례

피해야 할 사례

disabled 상태에 투명도 색상을 사용하지 않는다.

모범 사례

피해야 할 사례