UI 디자인에서 색의 의미
Using Red and Green in UI Design
(출처 : http://babich.biz/red-and-green/ 기사를 번역 및 가공한 글입니다.)
색은 우리의 인식과 감정에 상당한 영향을 미친다.
올바르게 사용하면 색상이 사용자에 대한 특정 반응을 불러일으킬 수 있다. 이 기사를 위해, 나는 빨간색과 녹색이라는 두 가지 특정한 두 가지 색에 초점을 맞추고 싶다.
빨간색과 녹색은 UI 디자인에 매우 중요하다. 왜냐하면 UI 디자인은 실행 가능하기 때문이다.
사용자 인터페이스에서 빨간색과 녹색을 강조하는 색상으로 사용하는 일반적인 방법을 알아보자.
빨간색
빨간색의 의미를 아래 3가지로 정리할 수 있다.
중요도를 의미한다.
빨간색은 사람들의 관심을 빠르게 집중시키고, 빠른 결정을 내리도록 할 수 있는 매우 눈에 띄는 색이다.
아주 뜨거운 색이다.
열정부터 분노까지 다양한 감정으로 가득 찬 강렬한 색이다.
경고나 위험을 의미한다.
빨간 불빛을 켜는 것은 종종 위험이나 비상사태를 의미한다.
오류 메시지에 사용된다.
빨간색은 종종 경고나 중요한 항목에 사용된다. 그렇기 때문에 오류 상태를 생각하면 떠오르는 첫 번째 색은 빨간색이다. 그리고 X 아이콘과 빨간색을 함께 사용한다면 한눈에 뭔가 잘못되었다는 메시지를 전달하기도 한다.
Image: Mailchimp
Image: Ben Dunn감정적인 반응을 의미한다.
붉은색은 대부분 사랑과 열정과 관련이 있다. 디자이너들은 Like와 같은 감정적인 반응에서 붉은색(Berry Red과 같이)을 사용한다.
Twitter의 좋아요 아이콘장바구니에서 상품 제거함을 의미한다.
이커머스에서는 빨간색은 ‘장바구니에서 상품 제거' 하는 동작을 간결하게 아이콘으로 표현하기도 한다.
장바구니에서 상품을 삭제하는 동작을 의미할 때 빨간색 아이콘을 사용한다.잠재적 위험 행동을 인지시킨다.
빨간색은 일반적으로 잠재적인 위험 행동과 연관되어 왔다.
올바르게 사용하면 사용자가 되돌릴 수 없는 위험한 일을 하는 것을 방지할 수 있다. 디자이너가 삭제 버튼을 빨간색으로 사용하면, 사용자는 행동을 하기 전에 잠시 멈춰야 한다는 것을 암시시킬 수 있다.
파일을 삭제하거나 계정을 탈퇴하는 것은 디자인에서 빨간색을 사용하는 좋은 예다.
사용자들이 아래와 같은 팝업창을 본다면, 빨간색은 그들이 최종 결정을 내리기 전에 다시 생각하도록 할 수 있기 때문이다.
녹색
녹색의 의미를 아래 3가지로 정리할 수 있다.
평온한 색상이다
녹색은 파란색 과같이 평온함을 의미하며 인간의 눈에 가장 편안한 색깔 중 하나이다.
시작과 성장을 나타낸다.
녹색은 새로운 시작과 성장을 나타낼 수 있다.
성공을 의미한다.
녹색은 안전이나 성공을 나타내기 위해 자주 사용된다.
완료 메시지에 사용된다.
일반적으로 녹색은 긍정적인 결과 - 저장한 파일 또는 온라인 주문과 같은 작업이 성공적으로 완료되었다는 의미를 나타낸다. 이 때문에 작업이 완료되면 사용자가 보는 메시지는 녹색으로 디자인한다,
녹색과 체크 아이콘과 함께 사용하면 사용자 작업이 성공적으로 완료되었음을 사용자에게 확인시켜줄 수 있다.
Image: Ed Poole
Credits: Colin Garven
Image: Phil LaPier긍정적인 독려를 유도한다.
빨간색은 '하지 마'를 의미하는 반면에 녹색은 '계속해'를 의미한다. 그렇기 때문에 녹색은 사용자가 일부 활동에 참여하도록 장려하는 데 사용될 수 있다. 예를 들어, 스트라이프는 사용자에게 녹색 버튼으로 가입하라는 메시지를 표시하고 있다.
빨간색과 녹색이 함께 배치된 경우
'진행(허용)'또는 '거부'와 같은 두 가지 작업이 동시에 표현되어야 하는 경우, 빨간색 및 녹색을 사용하여 관련 작업을 사용자에게 쉽게 인지 시킬 수 있습니다.
아이폰의 전화 UI를 보면 빨간색 버튼은 사용자에게 전화를 거부하는 동작이라고 경고성으로 노출하는 반면, 녹색은 사용자에게 그 전화를 받아 진행할 수 있다는 메시지를 준다. 이것은 사용자가 간단한 선택이 되어야 할 것을 처리하는 데 색상을 적합하게 배치에 선택의 시간을 최소화 하는데 도움을 준다.
빨간색과 녹색의 함께 사용하는 것은 두 가지 옵션이 사용자에게 똑같이 중요한 경우에만 사용해야 한다.
만일 사용자가 특정 방식으로 행동하기를 기대하는 경우, 기대하는 옵션에 더 많은 시각적 가중치를 적용해야 한다. 예를 들어 아래 팝업에서는 디자이너는 'Yes Please!' 옵션에 대비되는 녹색을 사용함으로써 녹색 버튼을 누르기를 기대하고 있다고 볼 수 있다.
Image: Telerik어떤 색이 더 좋은 것일까?
'빨간색 VS 녹색' 논쟁은 웹에서 오랫동안 지속되어 왔다. 온라인에 이와 같은 논쟁에 대한 많은 연구 사례들이 찾아볼 수 있다. 그중 가장 유명한 사례는 Joshua Porter의 Hubspot (The Button Color A / B Test : Red Beats Green)을 대상으로 한 연구이다. 이 연구에서는 빨간색 버튼이 녹색 버튼보다 21% 더 나은 결과를 보였다고 한다.
Joshua Porter의 Hubspot (The Button Color A / B Test : Red Beats Green)그러나 가장 중요한 것은 우리는 이러한 연구사례를 일반화하면 안 된다는 것을 이해하는 것이다. 한 페이지에 효과가 있는 것은, 반드시 다른 페이지에 효과가 있는 것은 아니다. 동시에 CTA (Call To Action) 버튼의 색상을 선택할 때 두 가지를 고려해야 한다.
렌딩 페이지의 색상이 CTA (Call To Action) 버튼의 눈길을 끌어야 하며, 이는 버튼이 주변 물체와 배경과 현저한 대조를 이룰 때만 가능하다.
디자이너가 선택한 색상과 의도한 맥락이 사용자가 생각하는 것과 일치해야 한다는 것이 가장 중요한 점이다.
Stripe의 렌딩 페이지에 대한 CTA 색상을 녹색에서 빨간색으로 변경하면 어떻게 될까? 버튼은 확실히 지금 더 눈길을 끈다. 동시에 빨간색은 이 페이지의 미학과 모순되기 때문에 이 디자인에 효과가 없을 것이다.
stripe 렌딩 페이지의 녹색 버튼을 빨간색으로 변경했을 때 CTA와 어긋나게 된다.접근성을 고려하자.
Colour Blind Awareness에 따르면 인구의 4.5%가 색맹이다. 대부분의 디자이너들은 색맹이 아니기 때문에 색맹인 사람들을 위한 디자인은 쉽게 잊힐 수 있다. 색맹의 종류는 다양하지만 색맹의 비율이 많은 사람들은 중수 소종과 전립선종을 앓고 있는 사람들이다. 그들은 일반적으로 빨강, 녹색, 갈색, 오렌지를 구별하는 데 어려움을 겪는다.
색맹인 사람들은 왼쪽의 색이 오른쪽과 같이 보인다,색맹으로 고통받는 사람들은 빨간색과 녹색을 매우 다르게 보고, 서로 구별하기 어렵다.
그렇기 때문에 UI 디자인에서 가장 중요한 규칙 중 하나는 다음과 같다.
그 의미를 전달하기 위해 색에만 의존하지 않는다 왜 색상만 사용하는 인터페이스(빨간색과 녹색)는 색맹인 사용자를 혼란스럽게 할 위험이 있기 때문이다.
항상 오류 및 성공 상태에 대한 아이콘 또는 문자 메시지와 같은 추가 정보를 제공하여 색맹인 사람들에게 더 나은 사용자 경험을 창출할 필요가 있다.
