[UX/UI] 웹 UX / UI 디자인 가이드 라인(Guide Line) - 색상(Color)

 

웹 UX / UI 디자인 가이드 라인(Guide Line)

색상(Color)

 

색상마다 의미하는 바가 다르지만, '언어'와 달리 그 의미는 공통이다.

 

반응형

 

색조 (색상, Hue)

· 색상(Hue)은 색 자체가 가지고 있는 고유 특성

 

채도(Saturation)

· 색상의 선명도
· 다른 색과 색이 섞이지 않을 수록 선명도가 높아짐 - 고채도
· 다른 색과 색이 섞일 수록 선명도가 낮아짐 - 저채도

 

명도(Brightness)

· 색상의 밝음과 어두움의 정도

저명도

고명도

 

톤(Tone)

· 서로 동일한 명도, 채도를 사용하여 톤을 조절

 

---

 

색상 가이드(Color Guide)

 

1. 주요 색상 (Pirmary Color)

브랜드(Brand) 대표 색상으로, 가장 많이 그리고 자주 쓰이는 색상
※ 사용자의 시선이 가장 많이 머무르는 곳에 쓰이도록 배치

 

단, 채도가 높은 색상일 수록 사용자 눈의 피로도가 높아지기 때문에 주요 색상(Primary Color)은 ‘많이, 자주 쓰여야 한다’ 는 공식 보다는 ‘특정 지점에 집중해 쓰여야 한다’가 적당하다.

 

2. 보조 색상(Secondary Color)과 강조 색상(Accent Color)

보조 색상(Secondary Color)은 주요 색상(Pirmary Color)를 더욱 확실히 전달하도록 보조해주는 색상으로, 주요 색상을 기준으로 조화를 잘 이루는 색상을 선택 (유사색과 보색)

 

유사색(Similar Color) : 색상환(Color Circle)에서 주요 색상(Primary Color) 바로 옆에 있는 색상

보색(Complementary Color) : 색상환(Color Circle)에서 주요 색상(Primary Color) 맞은 편에 있는 색상

 

보조 색상을 주요 색상과 함께 쓰일 경우 정확한 정보 전달을 위해 주요 색상이 보조 색상 보다 사용 비율이 높아야 한다.
※ 일반적으로 주요 색상과 보조 색상의 비율은 7:3 또는 8:2을 추천

 

+ 보조 색상(Secondary Color)을 유사색(Similar Color)를 사용하는 경우

화면 색상이 전체적으로 부드럽고 풍부해진다.
하지만 강조 색상(Accent Color)의 부재로 주요 컨텐츠(Contents) 전달(경험) 부분에서 약화 될 수 있어 보조 색상(Secondary Color) 외 강조 색상을 추가적으로 선택 및 사용을 전달력
을 높일 수 있다.
※ 한 페이지 내 포함될 컨텐츠의 양이 많은 경우 적합하고, 쇼핑몰 등 ECommerce 처럼 각양각색의 불규칙적인 이미지가 존재할 경우에는 부적합하다.

 

+ 보조 색상(Secondary Color)을 보색(Complementary Color)를 사용하는 경우

보조 색상(Secondary Color)을 강조 색상(Accent Color)으로 사용할 수 있어 주요 색상(Primary Color)이 주로 쓰게 된다.
화면이 깔끔해지고 사용자에게 정보 전달이 용이하지만 색상 사용 범위가 좁아지면서 화면이 단조로워질 수 있는데, 이런 경우에는 명도(Brightness)와 채도(Saturation)가 높은 색상을
사용하여 사용자에게 확실한 사용자 경험 가이드를 제공해 주는 것이 좋다.

하지만 강조 색상(Accent Color)의 부재로 주요 컨텐츠(Contents) 전달(경험) 부분에서 약화 될 수 있어 보조 색상(Secondary Color) 외 강조 색상을 추가적으로 선택 및 사용을 전달력
을 높일 수 있다.
※ 한 페이지 내 포함될 컨텐츠의 양이 많은 경우 적합하고, 쇼핑몰 등 ECommerce 처럼 각양각색의 불규칙적인 이미지가 존재할 경우에는 부적합하다.

 

3. 기본 색상(Default Color)의 밝고 어두운 색상 정의(Light And Dark Variants Color)

주요 색상(Primary Color)과 보조 색상(Secondary Color)의 기본 색상(Default Color)을 기준으로 밝음과 어두움에 따른 변형 색을 정한다.

 

밝고 어두운 색상

 

4. 상호작용 색상 (Interaction Color)

사용자에게 색(Color)을 통해 웹 / 앱의 버튼 등 컨트롤의 상호작용(선택 및 클릭 등으로 실행으로 연결)의 가능성을 안내하는 도구이다.

상호작용 색상

 

무채색상(Gray Color)

검은색(Black)에서 흰색(White) 까지 단계별 색상 쉐이드(Color-Shade)를 정의
※ 일반적으로 텍스트 또는 라인 등에 사용

Material design - gray scale palette

 

---

※ 디자이너가 아닌 디자인 까막눈(?) 프로그래머 입장에서 작성한 포스트 입니다.

참고 사이트

UX / UI 디자인 정보를 이해하기 쉽게 설명해준 브런치(brunch) 주소
'보통의 UX/UI 디자이너의 보통의 디자인 기록
https://brunch.co.kr/@kkokkodaec/5

 

Color-Shade 생성기 사이트(Color-Shade Generator)

 

Tint & Shade Generator

https://maketintsandshades.com/

Tint and Shade Generator

 

Color scale generator 

https://hihayk.github.io/scale/#4/6/50/80/-51/67/20/14/1D9A6C/29/154/108/white

 

Color Shades Generator

https://mdigi.tools/color-shades/#bf2f06

Color Shades Generator

 

※ 피그마(Figma) 플러그인

색상 쉐이드 생성 

Color Kit / Color Shades 

 

색상 조합 생성

Coolors 

 

그외 도움이 될만한 사이트

https://color.adobe.com/ko/create/color-wheel/

· 제일 유명한 사이트 이지만 개인적으로(일반적인 자동을 원하는...) 사람에게는 조금 부적합하다

 

https://material.io/resources/color/#!/?view.left=0&view.right=0

· 주요 색상(Primary Color)과 보조 색상(Secondary Colory)를 선택 및 입력하면 자동으로 UI 내 배치를 해주는 사이트

※ 참고용으로 적합

 

https://colorhunt.co/

· 색상 조합을 예시를 쉽게 찾아 볼 수 있는 사이트

Color Palettes for Designers and Artists - Color Hunt

 

https://mycolor.space/

· 입력된 색상(Hex) 값과 어울리는 색상 조합을 추천해주는 사이트

 

https://www.pinterest.co.kr

· UX / UI 템플릿 참고 이미지 검색 사이트 

Pinterest

 

https://dribbble.comUX /

· UX / UI 템플릿 참고 및 다운로드 사이트 

Dribbble - Discover the World’s Top Designers & Creative Professionals