색상에 대해 본격적으로 학습하려고 할 때 누구나 처음에는 색 이론과 심리학을 이해하는 것이 어려울 수 있다. 그러나 색상의 아름다움은 누구나 뛰어 들어 기본을 배울 수 있다는 것이다. 색상은 단순한 원칙과 실행에 관한 것이다.
이 글에서는 UX / UI 디자인 학습 및 교육의 중요한 부분인 색상 이론에 대해 설명한다.
색상 이론은 사람들이 색상을 보고 인식하는 방식에 따라 색상을 혼합하는 실용적인 과학이다. 현대 색상 이론은 색상환과 기본, 보조 및 삼차 색상의 정의에 중점을 둔다.
물리적 세계에서 모든 물체는 각각 다른 파장을 가진 빛을 반사한다. 인간의 뇌는 이러한 파장 조합을 인식하고 다양한 색상으로 해석한다. 이 프로세스는 믿을 수 없을 정도로 빠르며 우리가 깨닫지도 못한 채 순식간에 진행된다.
그렇다면 디자이너가 이것을 알아야 하는 이유는 무엇일까? 디자이너는 색상의 중요성을 이해해야 한다. 웹 페이지, 책 표지, 시리얼 상자 또는 예술 작품 등 우리가 보는 거의 모든 것에 대한 인식에 가장 영향력 있는 요소 중 하나다. 색상 심리학에 대한 기사에서 언급했듯이, Institute for Color Research 연구에 따르면 사람들은 처음 본 후 90초 이내에 대상, 사람 또는 환경에 대해 무의식적으로 판단한다. 또한 해당 평가의 62% 에서 90% 는 색상만으로 한다.
색상은 심리적으로 상당한 영향을 미칠뿐만 아니라, 전반적인 사용자 경험에도 직접적인 영향을 미친다. 따라서 색상 선택은 가장 큰 책임이므로 현명하게 선택해야 한다. 좋은 소식은 기본 사항을 배우고 나면 값 비싼 실수를 범하는 경우는 피할 수 있다는 것이다.
색상환은 수세기 동안 사람들이 색상을 구성, 분류 및 혼합하는 데 도움이 되는 도구다. 1666년에 Isaac Newton경은 컬러 휠의 첫 번째 버전을 디자인했으며, 이는 오늘날에도 여전히 색상 조합과 팔레트를 개발하는 데 사용된다.
- Primary colors : 빨강, 노랑, 파랑
- Secondary colors (mixed from primary colors) : 녹색, 주황색, 보라색
- Tertiary colors (mixed from primary and secondary colors) : 적색-보라색, 적색-주황색, 황색-주황색, 황색-녹색, 청색-녹색, 청색-보라색
색상환의 목적은 디자이너가 각 색상의 특성을 빠르게 이해하고 효과적으로 결합할 수 있도록 하는 것이다.
색상에도 온도가 있으며, 그렇다고 열이 나는 것은 아니다. 그것은 그들이 따뜻하고 시원할 수 있음을 의미한다. 색상환을 사용하여 이 관계를 쉽게 정의 할 수 있다. y축을 따라 절반으로 나눈다. 오른쪽은 따뜻한 색상, 왼쪽은 시원한 색상이다.
따뜻한 색상은 빨간색, 주황색, 노란색 및 모든 조합으로 구성됩니다. 그들은 일반적으로 하루 중 다양한 시간에 태양과 관련이 있으며 에너지, 활동, 힘 및 열정을 제공하는 데 도움이 됩니다. 따뜻한 색상은 사용자의 시선을 사로 잡는 데 환상적입니다.
시원한 색상은 파란색, 녹색, 자주색 및 그 변형이지만 파란색은 가장 멋진 색상이다. 멋진 스펙트럼 내에 있는 유일한 원색이다. 다른 시원한 색상은 파란색과 따뜻한 색상의 조합을 사용하여 만들어 진다. 차가운 색은 물, 밤, 자연을 나타내며 일반적으로 균형과 평온함과 관련이 있다.
우리 중 많은 사람들이 색상환과 기본 색상, 보조 색상 및 삼차 색상의 표준 범위에 익숙하지만 어떻게 더 많은 변형을 만들 수 있는가? 색상 이론에 대해 더 깊이 들어가서 색조, 음영, 색조 및 색조를 살펴보고 거의 무한한 범위의 색상을 만드는 데 어떻게 사용할 수 있는지 살펴 본다.
- 색상 (hue) 은 어떤 것도 추가하지 않은 순수한 색상이다. 색상환을 볼 때 보이는 것이다.
- 색조 (tint) 는 흰색이 추가된 색상이다. 흰색과 빨간색을 결합하여 분홍색을 만든다.
- 음영 (shade) 은 검은색이 추가된 색조다. 검정과 빨강을 결합하여 버건디색을 만든다.
- 톤 (tone) 은 회색이 추가된 색조다. 회색으로 작업하면 원래 색조의 강도와 어둡기를 더 쉽게 조정할 수 있으므로 더 많은 유연성을 제공한다.
또한 다음 속성을 조정하여 더 많은 색상 변형을 만들 수도 있다.
- 크로마 (Chroma) 는 색상의 순도다. 채도가 높을수록 색상이 더 순수해진다.
- 채도 (Saturation) 는 색상의 전반적인 강점 또는 약점이다. 채도가 높을수록 색상이 강해진다.
- 색상값 (Value) 는 어둡거나 밝음의 수준이다. 색상이 밝을수록 값이 높아진다.
사용자 인터페이스 또는 그래픽 디자인 프로젝트에서 색상을 효과적으로 적용하려면 디자이너는 물리적 특성에 따라 가산 (additive) 및 감산 (subtractive) 이라는 두 가지 기본 색상 모델에 대해서도 알아야 한다 .
가산 색상 (Additive color) 모델 (RGB 색상 시스템이라고도 함)은 다양한 화면에서 사용되는 색상의 기초다. 빨간색, 파란색 및 녹색을 기본 색상으로 정의한다. 언급된 기본 색상의 조합은 시안, 마젠타 및 노란색과 같은 보조 색상을 제공하며 빛의 수준을 추가하여 밝기를 조절할 수 있다.
감산 색상 (Subtractive color) 모델은 빛을 빼서 색상을 가져오고 RYB와 CMY의 두 가지 색상 시스템으로 표시된다. RYB (red, yellow, blue)는 예술적으로도 알려져 있으며 그림에서 인기가 있다. CMY 색상 시스템은 청록색 (cyan), 자홍색 (magenta) 및 노란색 (yellow)을 결합할 가장 효과적인 색상 세트로 간주한다. 처음에는 인쇄물에 사용된 다음 사진제판 인쇄술의 출현과 함께 CMYK (cyan, magenta, yellow)로 변환되었다.
이제 디자인에서 효과적인 색상 조합을 위해 색상환을 사용하는 방법을 자세히 살펴 보도록 한다.
색상 이론에 따르면, 색상의 조화로운 조합을 만들려면 다음을 사용하는 것이 좋다.
- 색상환의 두 가지 반대 색상
- 삼각형을 형성하기 위해 색상환의 동일하게 펼쳐진 지점에 위치한 세 가지 색상
- 사각형을 형성하는 점에 위치한 4개의 색상. 즉, 색상환에서 반대쪽에 두 쌍의 색상이 표시된다.
언급된 구성표의 어떤 각도를 선택하든 조화를 유지한다.
다음은 몇 가지 인기 있는 색 구성표 (color schemes) 다.
색 구성표는 다른 음영과 색조로 표현될 수 있는 하나의 색상을 사용한다. 그 초강력은 단순성이다. 색상을 혼합할 때 실수할 여지를 남기지 않고 일종의 최소한의 접근 방식을 지원한다.
유사한 색 구성표는 색상환에 함께 있는 색상을 사용한다. 이러한 종류의 체계는 대비를 많이 만들지 않으며 다양한 웹 페이지, 배너 및 팝업에서 잘 보인다.
색 구성표는 색상환에 서로 반대 색상을 사용한다. 이런 종류의 계획은 눈에 띄고 뚜렷한 대비를 만드는 데 적합하다.
색 구성표는 이전 색상을 더 많은 색상으로 확장한다. 색상환 한쪽에서 한 색상을 사용하고 반대쪽 색상에 인접한 두 색상을 사용하여 색상 환에 삼각형을 형성한다. 대비 수준을 낮추지만 더 많은 색상을 사용할 수 있다.
색 구성표는 색상환에서 등거리에 있는 세 가지 색상을 사용한다. 이 구성표와의 조화와 균형을 유지하려면 색상 중 하나를 지배적인 색상으로 선택하고 다른 두 가지 색상을 세부 사항 및 악센트에 사용할 수 있다.
색 구성표는 훨씬 더 복잡한 접근 방식을 사용한다. 색상환에서 서로 마주 보는 두 쌍의 색상을 나타내는 4가지 색상을 사용하므로 휠에서 위치를 표시하는 점을 연결하여 직사각형을 얻을 수 있다.
물론 색채 이론과 색채 심리학은 하나의 글로 완전하게 다룰 수 있을 만큼 단순한 것이 아니다. 그러나 위에서 언급한 기본 사항은 더 깊은 이해와 함께 UX 디자인 프로젝트의 색상 작업을 시작하는 데 도움이 될 것이다. 또한 마스터가 수행한 디자인에 대해 보다 신중한 접근 방식을 제공할 수 있다. 적용되는 색 구성표를 분석하면 실제로 디자이너의 안목, 취향 및 색상 이론에 대한 이해를 효과적으로 훈련할 수 있다.
댓글 영역