UI 디자인의 색상 - 이론 심리학 및 실습

출처 : https://medium.com/iconscout/colors-in-ui-design-theory-psychology-practice-f6d6a5e6e04d

Colors in UI Design — Theory, Psychology & Practice

우리 모두는 24시간 내내 색으로 둘려 싸여 있다. 우리는 사물을 볼 수 있고, 우리가 보는 모든 색깔로 우리는 다른 감정을 얻는다. 색깔은 여러가지 면에서 정식적으로나 육체적으로 영향을 미친다. 혈압이 올리기 위해 강한 붉은색을 보인 반면, 파란색은 진정 효과가 있다.

 

색상은 디자인에서 제품에 사용자를 참여시키는 가장 쉽고 가장 중요한 부분이다. 많은 사람들이 UI를 위해 색을 고르는 것은 대부분 디자이너의 미의 맛과 감각에 달려있다고 믿는다. 그러나 색채 선택 과정은 보이는 것보다 더 복잡하고 디자인에 중요한 역활을 한다.

 

색상으로 분위기를 설정하거나 주의를 끌거나 발언을 할 수 있다. 에너지를 공급하거나 식히기 위해 색을 사용할 수 있습니다. 적당한 색채 배색을 선택해 우하하고 따뜻하거나 평온한 분위기기를 연출하거나 장난기 어린 청춘의 이미지를 전할 수 있다.

 

색의 선택은 약간의 색 심리학과 이론에 기초합니다. 먼저 색채의 심리학부터 살펴보도록 하자

 

Color Psychology / 색체 심리학

남녀의 색 선호도가 다르다 또한 연령대에 따라 다르다

 

Joe Hallock의 연구에 따르면, 성별 간의 색 선택에는 상당한 차이가 있다고 합니다. 가장 호감도가 높고 호감도가 낮은 색상을 대상으로 연구를 진행하였다.

 

우리가 볼 수 있듯이, 파란색은 남성과 여성 모두에게 상당히 선호되고, 브라운은 가장 선호되지 않는 색이다

 

Let's understand it with a demo app

따라서 비용을 관리할 수 있는 앱을 설계하는 것이 목표이며, 대상 시청자는 남녀이다. 초보자이고 색에 대해 더 잘 모르는 디자이너가 가장 좋아하는 색이기 때문에 앱의 주요 색상으로 브라운을 선택한다고 가정해 보자 결과는 다음과 같다

 

Expense Manager Demo App

디자인은 충분히 훌륭하지만 컬러 선택으로 인해 앱이 작동하지 않을 수 있다는 것을 분명히 알 수 있습니다. 그렇다면, 우리는 그것을 개선하기 위해 무엇을 할 수 있을까? 이 글의 뒷부분에서는 색만 바꾸면 무엇을 할 수 있는지 알아보도록 하자

 

색의 의미가 들어온다. 설계자는 사용자에게 올바른 톤, 메세지 및 전화를 통해 예상되는 작업을 수행하기 위해 어떤 색상을 의미하고 어떤 반응을 유발하는지 이해해야 한다. 각 색상은 우리의 마음에 영향을 미칩니다. 그리고 가능한 반응에 대한 지식은 디자이너가 올바른 메세지를 전달하고 사용자에게 조치를 취하도록 전화하는데 도움을 줄 수 있다.

 

이것을 읽는 디자이너라면 색의 의미를 알아야 한다. 자 줄이자

(색채의 의미는 여기서 자세히 읽을 수 있습니다. http://www.color-wheel-pro.com/color-meaning.html)

 

Color Theory / 색 이론

인터페이스 설계에서는 사용할 색상이 많다. 색에 대해 이야기 할때 가장 먼저 떠오르는 것은 컬러휠이다.

 

Famous Color Wheel

이제, 또 다른 중요한 주제는 어떻게 색이 결합될 수 있느냐 하는 것이다. 색을 조합하는 방법에는 여러가지가 있지만, 따뜻하고 시원한 색은 균형을 이루어야 한다. 색상을 조합하는 다양한 방법은 다음과 같다.

모든 디자이너가 색에 대해 이야기할 때 알아야 할 세 가지 중요한 색은 다음과 같이 이야기 할 수 있다.
Hue, Value & Pooration 이것은 크리스찬 비즈카라가 아주 잘 묘사했기 때문에 나는 그것을 스스로 실행하려고 노력했다.

 

Hue

Hue는 자연 상태의 색이다. 파랑 노랑, 초록, 빨강, 기타 등등이다. 빛과 어둠의 변화 없이 말이다.

기본적으로 다른 빛과 그림자의 변화 없이 색의 바퀴에 나타나는 색이다. 이미지를 참고하도록 하자 

Value

색상의 Value는 빛과 어둠의 양이다. 예를 들어 자연적으로 우리는 일상 생활에서 아침과 밤에 어떤 요소들은 다른 색을 가지고 있다는 것을 볼 수 있다. 나무와 산은 빛이 적어서 낮이 지날수록 아침 톤이 더 가볍고 어두운 톤을 가지게 된다.

 

우리는 흰색 톤으로 빛에 가까운 것을 보고 어둠이 더 많이 깔린 배경에 있는 다른 것들을 본다

 

이 값은 UI 설계에서 중요한 역활을 한다. 잘 쓰면 좋은 대비를 얻을 수 있다.

 

100% 값을 가진 색상이 있으면 흰색이 된다. 색상에 0% 값이 있으면 검정색이 된다. 이미지를 참조하자

Color with Value

Saturation

포화도는 색의 강도이다. 우리가 색을 포화시킬 때, 우리는 더 강렬하고 선명한 색을 띤다. 우리가 색을 탈색 할때 우리는 칙칙한 색을 띠게 된다.

Color Saturation

디자인에 포화도를 사용하기 전에 인쇄나 디지털 용도로 무엇을 디자인하고 있는지 알아야 한다. 인쇄문에서는 CMYK가 사용되고 한계가 있기 때문에 포화도를 더 이상 사용 할 수 없다.

Color in User Interface Design / 사용자 인터페이스 설계의 색상

황금 비율 - 6:3:1 Rule

60% + 30% + 10%의 원리는 컬러 밸런스를 이루는데 가장 좋은 비율이다. 우세한 색상을 선택해 공간의 60%에서 사용하고, 보조 색상은 30%에서 사용하고, 최종 색상은 나머지 10%에서 사용해야 한다. 사용자의 시선을 한 지점에서 다음 지점으로 편안하게 이동할 수 있다.

 

Color Palette using 6:3:1 rule

UI의 그림자

그림자는 결코 검지 않다.  그림자는 값 톤으로 음영 처리된 개체의 색 톤이다. 아래 그림을 참고하자

Photo by  Brigitte Tohm  from  iconscout

체리의 그림자는 검붉은 색이고, 거의 검게 보이지만, 검지는 않다. 꽃 그림자, 접시, 와플을 보자
빛과 어둠에 따라, 여러분은 그림자의 양을 볼 수 있다. UI 디자인에서 우리 모두가 흔히 저지르는 실수는 , 그림자를 만들기 위해 불투명한 검은색이 필요하다고 생각하는 것이다.

 

Shadow in UI element

Color in Typography / 타이포그래픽 안의 색상

오늘날 대부분의 UI는 흰색이며, 모든 UI는 가능한 최소 인터페이스로 만드는데 집중한다. 따라서 타이포그래피는 또 다른 중요한 요소이다.

왼쪽 텍스트 색상은 검정색 (#000000) 이고 오른쪽은 텍스트 색도 검정으로 보이지만 짙은 파란색(#181441)이다. 
인터페이스가 대부분 흰색일 때 이 기능은 중요한 역활은 한다. 어떻게 할까? 아래 그림을 확인하자 

 

Both color with same opacity

두 텍스트에 동이레한 불투명도를 적용하면 차이를 알 수 있다. 분명히 결과는 다르다. 그 중 하나는 회색이고 다른 하나는 파란색 회색이다. 특정 색조의 텍스트를 사용하면 UI에 상당한 영향을 미친다. 아래 이미지를 참조하자

 

그럼, 검은색과 회색 사용은 안좋은 것일까? 아니다. 사람들은 "검으색이면 모든 것이 멋지다." 라는 단어를 자주 사용한다. 그래서 그것은 개인의 몫이다. 그런데 컬러톤은 우리가 쓸 때 나오는 것이다. 더 나은 대비와 조화를 이룰 수 있다.

 

Let’s get back to our Expense Manager App

 

만약 녹색으로 간다면 앱이 좀 더 그것들을 보는데 수월 할 것이다.
이 앱에서 돈과 성장에 대한 강한 감정을 보여줘야 하고, 초록색은 돈과 금융계를 묘사하기 때문에 남녀 모두 초록색을 좋아한다. 이러한 모든 과정을 거친 결과는 다음과 같다.

 

전보다 좋아보이는가? 그렇지 않는가? 그랬으면 좋겠다.

보다시피 색상에 관한 몇 가지 작은 것에 초점을 맞추면 효과적인 사용자 인터페이스를 설계 할 수 있다.

 

시간을 내서 읽어줘서 고맙다. 좋으면 박수를 쳐라. 나는 너의 피드백과 제안을 듣고 싶어.