Color for UI / 코드카데미 프론트엔드 코스

Brand color

 브랜드에서 중심적으로 사용되는 컬러로, 코카콜라의 붉은색 / 토스의 파란색 (물론 코드는 다르겠지만) 이 대표적인 예라고 할 수 있다. 각각의 브랜드를 연결하는 색으로 어떠한 색을 정하면 일관되게 그 색을 사용하는 것이 중요하다고 할 수 있다. 코드카데미에서는 , 그 서비스의 60% 이상을 기준으로 삼는다고 설명한다. 아래 참고란에 브랜드의 색상을 뽑아놓은 링크를 소개한다. 

Buttons / Forms

버튼이나 폼의 경우 버튼이 hover 되었을 때나, Form이 채워지지 않거나 조건을 만족하지 않았을 때 등 표현할 수 있는 방법이 여러가지 있다. Form은 대표적으로 Form을 형성하고 있는 border의 색을 바꾸는 방법이 있다. 또한 activate 상태와 disabled 상태 등 유저들이 직관적으로 알 수 있게 표현하는 것이 중요하다. 

 

Defalut Colors

 흰색과 검정색 계열의 단순한 색상들로 대체로 텍스트에 활용된다. 

 

 

 

 

Neutral colors

 명도와 채도가 낮은 색상들은 대체로 배경에 활용되기 좋다. 

 

White space

 흔히 얘기하는 '여백의 미' 처럼 흰 공간을 주어 사용자들이 보다 중요한 동작에 집중할 수 있게 해준다. 구글의 홈페이지가 대표적이다. 

 

 padding과 margin을 활용하여 요소간에 간격을 주는 것도 포함하여 이야기한다. 

 

 

Accessibility

 대비가 명확한 색상을 사용하는 것이 , 도움을 요하는 사용자들(보조가 필용한 사용자들)에게 도움이 될 수 있다. 또한 색맹인 이용자들이 구분하기 어려워하는 색의 조합은 다음과 같다(색맹의 종류). 

 

• red-green 
  • 적색과 녹색을 구분하기 어려움 
• blue-yellow
  • 이 경우 파란색이 녹색처럼 보이게 됨
• monochromatic,
  • 아예 색을 구분하지 못하는 경우 

 

 예를 들어 , 보통 과제를 성공했을 때의 색깔을 녹색으로, 또한 에러가 발생하거나 잘못된 작업을 수행했을 때의 색깔을 적색으로 하는 경우가 대부분인데 이용자의 접근성을 고려하여 녹색에 체크표시(v) 를 포함하여 표시하거나, 적색에 엑스표시(x)를 같이 포함하면 색깔을 인지하지 못하더라도 같은 정보를 제공받을 수 있게 된다. 아이콘을 표시하는 것도 한 방법이 될 수 있다.

 

 아래의 Colorsafe 웹사이트를 참고하여 유저의 접근성이 높은 색상 팔레트를 구할 수 있다. 색상을 정하고 나면 WebAIM 사이트에서 해당 색이 얼마만큼의 대조도를 가지고 있는지 체크할 수 있다(아래 링크 참조)  

 

Iterations

 유저의 유저빌리티(유저편의성)과 디자인의 심미성이 충돌하는 경우가 발생한다면, 우선순위는 유저빌리티에 있다. Iteration은 반복을 뜻하는데, 말 그대로 유저중심의 디자인을 구현하기 위하여 반복적으로 테스하고 또 테스트 하는 것을 의미한다. 

 

 Text Early & Test Often이 디자이너의 목표라고 할 수 있다. 

 

 

요약

 

• 주된 컬러와 보조적인 액센트 컬러를 정하라 
• 섹션들을 구분하기위해 대비를 활용하라 
• 에러와 성공메세지를 표현하기 위해 구문적인 색상을 활용하라(붉은색, 녹색 등)
• 기본색(흰색 및 검은색 계열)을 활용해서 텍스트와 배경을 표현할 수 잇다.
• 중립색은 좋은 대조를 준다. 
• 색상 선택을 할 때 늘 유저를 염두에두고 정하라 . 

 

참고)

 유저의 접근성을 위한 색상 정보 사이트 

http://colorsafe.co/

Color Safe - accessible web color combinations

 

https://webaim.org/resources/contrastchecker/

WebAIM: Contrast Checker