[Front-End] UI를 위한 색상

UI는 무엇일까?

사용자 인터페이스(영어: user interface, UI)는 사람(사용자)과 사물 또는 시스템, 특히 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 뜻한다. 사용자 인터페이스는 사람들이 컴퓨터와 상호 작용하는 시스템이다. ... 출처: 위키백과

→ 즉, 웹 사이트를 만들 때는 적절한 색상을 적용하여 사이트의 UI를 개선하려고 노력해야 한다.

 

---

- 대비 : 페이지의 요소를 구별하는 좋은 방법.

그러나 모든 요소에 대비를 사용하면 지배적인 요소가 없도록 만들고, 사용자들이 인지할 때 과부하가 발생할 수 있음.즉, 웹 페이지에서 사용할 대비를 고려하여 전체적인 대비 정도를 제한하는 것이 중요함.

+) neurtal background(밝기 또는 채도가 낮은 모든 색상)을 사용하여 사용자의 주의를 끌고자 하는 부분에 높은 대비를 추가할 수 있음.

 

- 브랜드 색상 : 브랜드 마다 상징하는 브랜드 색상이 있음.

ex) Facebook과 Twitter 파란색, Coca-Cola 빨간색 → 다양한 브랜드의 색상을 모아둔 사이트(brandcolors.net/)

브랜드 색상은 사이트에서 사용되는 색상의 약 60%를 차지하고 제품과 사용자의 인식을 연결하는데 도움이 됨.

 

- 강조 색상 : 디자인에 약간의 pop(포인트?)을 줘서 사용자의 주의를 끌기 위해 사용할 수 있음.

일반적으로 브랜드 색상이 웹 사이트의 구성을 지배하지만 강조 색상도 똑같이 중요함.

색 구성표를 선택한 경우 팔레트의 색 중 하나 (또는 ​​그 이상)가 강조 색으로 사용될 것이고, 이를 통해 강조 색상을 적용하여 사용자의 클릭 유도를 안내할 수 있음.

 

- 버튼 : 강조 색상을 효과적으로 사용할 수 있는 요소 유형 중 하나임. 

버튼이 사용자가 탐색, 양식 제출 또는 다음 작업으로 이동할 수 있는 방법을 제공하므로 버튼의 색상은 사용자에게 중요.

+) 사용자가 상호 작용할 때 버튼의 상태

① 호버 상태 : 마우스를 올리면 효과가 발생한다. 일반적으로 버튼에 사용되는 강조 색상의 음영 또는 색조를 특징으로 한다. 사용자가 작업할 때 어떤 일이 일어나고 있음을 이해하는 데 도움이 된다.

② 비활성화 된 상태 : 버튼이 비활성화되어 더 이상 실행할 수 없음을 나타낸다. 활성화된 버튼이 아니거나 사용자가 버튼을 활성화하기 전에 단계를 완료해야 하기 때문에 버튼을 클릭할 수 없음을 의미합니다. 

ex) 사용자 로그인 양식: 사용자가 사용자 이름이나 이메일 및 유효한 비밀번호를 제공 할 때까지 로그인 버튼을 비활성화할 수 있습니다.

 

- 입력 양식 : 색상을 사용하여 사용자에게 작업을 나타내는 또 다른 유형의 구성 요소임.

+) 입력 양식의 상태

① 기본 상태 : 사용자가 페이지에 처음 도착했을 때 입력을 보는 방식이다.

② 선택된 상태(또는 활성 상태) : 사용자에게 필드를 강조 표시하고 그 안에 입력 할 수 있다는 시각적 단서를 제공한다. 일반적으로 테두리 색상 또는 상자 그림자 효과를 통해 표현된다.

③ 비활성화 상태 : 입력 필드를 편집하거나 입력 할 수 없는 경우를 말한다. 회색으로 표시된다는 점에서 비활성화 된 버튼과 매우 유사하게 렌더링 된다.

 

- 의미 색상(Semantic Colors) : 성공과 실패를 나타내는 색상.

빨간색: 일반적인 색상으로 오류가 발생한다는 것을 알리는 색상. 빨간색은 삭제 버튼을 더 강조하는데도 사용된다.

녹색: 문제가 없다는 것을 알리고 성공 메시지로 사용되는 색상. 녹색은 사용자가 제출, 진행 또는 이동하도록 유도하는 작업에도 자주 사용된다.

노란색: 경고 상황을 알릴 때 사용되는 색상. 웹 사이트에서 오류가 발생하여 사용자에게 알려야 하는 경우, 작업 색상과 충돌하지 않으면서도 문제 수준을 나타내기 위해 사용된다.

 

- 기본 색상 : 검정, 흰색 및 회색 음영을 포함하는 색상. 

읽기 좋은 대비를 주고, 다른 많은 색상 구성표에도 잘 어울리기 때문에 텍스트 색상으로 자주 사용된다. 

흰색과 순수한 검은색은 뚜렷한 대비로 인해 사용자의 눈에 좋지 않을 수 있다. 

흰색 배경에 어두운 회색 텍스트를 사용하거나 어두운 회색 배경에 흰색 텍스트를 사용하면 문제없이 읽을 수 있고, 선명한 대비를 제공하면서 부드러운 느낌을 주는 데에 도움이 된다.

 

- 중성 색상 (또는 밝기 및 채도가 낮은 색조 Neutral Colors): 사용자의 주의를 끌고 싶은 부분에서 사용될 수 있음.

ex) 흰색 텍스트에 진한 회색을 사용하는 것과 유사하게 밝은 색상의 텍스트에 더 어두운 색 음영을 사용할 수 있다. 

그러나 중간 음영 또는 색조를 사용하면 대비가 낮기 때문에 동일한 결과를 얻기 어려울 수 있다.

 

- 공백 : 웹 디자인에서 균형 있고 조화로운 레이아웃을 만드는 데 중요한 요소. 공백 색상이 흰색일 필요는 없음.

ex) Google 홈페이지 : 콘텐츠를 검색하는 기본 작업에만 사용자의주의를 집중시킨다.

공백이 너무 많으면 사이트 흐름에 부정적인 영향을 미칠 수 있고, 요소 사이에 너무 많은 간격이 있으면 사용자의 원활한 콘텐츠 탐색을 방해할 수 있다.

 

- 접근성

UI 구성 요소에 대해 선택한 색상에 사용자들이 접근할 수 있는지 확인해야 함!

많은 사용자가 다양한 유형의 색맹(적록색맹, 황청색맹, 전색맹 등)을 가지고 있을 수 있음.

-> 다른 표시기와 색상을 함께 사용하여 접근성을 높일 수 있다. 

 

↳ 색상과 공백들을 테스트해볼 수 있는 사이트( cloudflare.design/color )

Color by Cloudflare Design