모바일 UI 디자인 기본 요소 - 색채 Color
UI 디자인에서 색채의 사용
색채 color는 사용자 인터페이스에서 중요한 시각적이고 기능적인 요소이다. 또한 브랜드 정체성을 표현하고 앱의 스타일을 결정하는 중요한 요소 중 하나이다. 네이버의 녹색이나 카카오의 노란색을 떠올려 보면 알 수 있다. 사용자 인터페이스 측면에서는 색채는 즉각적이면서 강력한 상호 작용을 유도한다.
색채와 UI 디자인
색채는 사용자에게 상호작용 요소를 직관적으로 이해시킨다. 버튼 같은 컨트롤에 고유의 색을 부여하고 앱의 전체 화면에 일관성 있게 사용하여 시선을 집중시키고 행동을 유도할 수 있다.
신호등의 빨간색은 '정지'를 초록색은 '진행'을 의미한다. 휴대폰에서 초록 버튼은 ‘통화'를 빨간 버튼은 '종료', '거절'을 사용하는 것처럼 색에 의미를 부여하고 일관성 있게 적용하면 사용자 인터페이스의 사용성을 높일 수 있다.
빨간색은 '거절'에 녹색은 '응답'에 사용된다. 통화를 종료하고 싶을때는 빨간색 버튼을 터치하면된다. 이러한 색채사용은 모든 스마트폰에서 동일하게 적용된다.
색채를 UI 디자인에서 사용할 때에는 사용자가 상호작용이 가능한 요소를 놓치지 않도록 디자인해야 한다. 기능과 의미의 해석에 혼란이 생기지 않도록 하려면 일관성 있는 방법으로 색을 사용해야 한다. 일관되고 지속적으로 사용된 색은 동일한 속성과 기능임을 암시한다. 색채가 잘못 사용된 디자인은 사용자에게 혼란을 주고, 콘텐츠에 집중하는 것을 방해한다. 이러한 디자인은 색을 전혀 사용하지 않는 디자인보다 못하다.
색의 속성
색은 빛이 눈에 들어와 시신경을 자극하여 뇌의 시각중추에 전달함으로써 생기는 감각이다. 색의 3 속성은 색의 종류를 말하는 색상 Hue , 색의 밝기를 의미하는 명도 lightness, Brightness, Value , 색의 순도와 선명성을 말하는 채도 saturation이다. 3 속성 외에도 색조 tone는 명도와 채도의 개념을 하나로 합쳐 색의 명암이나 강약 또는 농담 등을 표현하는 방법이다.
색상 Hue
색상은 빨강, 노랑, 파랑 등 색 자체가 가지고 있는 고유의 특성이다. 태양광선을 프리즘으로 분광시켰을 때 나타나는 무지개 색의 분류이다. 이 색을 색상환으로 표시하여 분류한다. 10 색상환, 20 색상환, 40색 상환이 있다. 0 ~ 360도 범위에서 0번과 360 번은 모두 빨간색이다. 빨강이 0도, 노란색이 60도, 녹색이 120도, 사이언이 180도, 파랑이 240도, 마젠타가 300도이다.
HSL 또는 HSV에 따라 RGB로 표현된 색상
멘셀의 20색상환이다. 일반적으로 10색상환을 많이 사용한다. 각 색상의 한글 명칭은 위 색상환에 기반하여 통일한다.채도 Chroma
색의 맑고 탁함, 순수한 정도, 색의 강약, 포화도를 나타내는 성질이다. 무채색으로부터의 거리를 척도 화한 것이다. 0 ~ 100의 범위에서 100가 가장 높은 채도 0이 회색이다. 흰색이나 검은색이 섞이지 않은 원색일수록 채도가 높다. 채도는 색의 선명도를 나타낸다. 채도가 높을수록 가시성이 높아진다. 채도가 높은 색은 화면의 중요한 컨트롤에만 사용해야 한다.
명도 Value
색의 밝기를 나타낸다. 0 ~ 100의 범위에서 100가 가장 밝은 색상 (색조 및 채도에 관계없이 백색), 0은 가장 어두운 색 (검정)이다. UI 디자인에서 명도는 시각적인 계층구조를 나타낼 때 사용할 수 있다.
색조 Tone
색채의 3 속성 중 명도와 채도의 개념을 하나로 합쳐 색의 밝기와 어두움이나 강약 또는 진함 등을 표현하는 방법이다. 색조는 무채색 단계와 유채색 단계를 표현한다. 색조의 체계는 한국 산업 표준으로 정의한 KS 색조 분류 체계와 산업자원부의 지원을 받아 개발된 IRI색채디자인연구소의 색조가 있다. 아래는 IRI 색조 단계이다. 무채색 5가지 색조와 유채색 11가지 색조로 이루어져 있다.(자세한 색상과 색조 체계는 컬러 리스트 교재나 색채 관련 책에 있으니 디자이너라면 꼭 읽어 보시라)
IRI색채디자인연구소의 색조채계의 유채색 11가지 색조 명칭은 선명한 Vivid , 밝은 Bright , 강한(기본색) Strong, 진한 Deep, 맑은 Plale , 은은한 Light, 차분한 Dull, 연한 Very Pale, 흐릿한 Light Grayish, 탁한 Grayish, 어두운 Dark로 이루어져 있다. - 컬러리스트 자격증 교재는 이 체계를 사용하는 듯하다.
IRI 색조 분류 파랑을 기준으로 만들었다. 유채색의 경우 국내 각 체계마다 11색조, 12색조로 되어 있다. 비비드한 컬러나 딮한 컬러 등의 용어는 많이 봤을 듯 하다.색 공간
가장 일반적으로 사용되는 색 공간은 인쇄에 사용되는 CMYK(cyan, magenta, yellow, black)와 디지털에서 사용하는 RGB(빨강, 녹색, 파랑), HSL (색상, 채도, 밝기) 및 HSV(색상, 채도, 값)이 있다. 디스플레이는 RGB가 채용되고 있기 때문에 색채를 RGB로 생각하지만, RGB의 색 공간은 인간의 눈으로 지각하는 모든 색에 대응하지 않는다. 또한 디스플레이 종류와 디바이스에 따라 색상에 미세하거나 심각한 차이를 보일 수 있다. 인쇄에는 CMYK 기반의 Pantone컬러 칩을 사용하고 디지털 기기에는 RGB 공간보다는 HSB와 LAB 공간을 사용한다. 웹과 앱에서는 RGBA와 헥사 코드 Hex code를 사용한다.
HSL 색 공간
HSL와 HSB 색 공간은 색조, 채도, 밝기 3 가지 요소로 구성되어 있다. HSL와 HSV는 인간이 지각하는 색과 동일하게 데스크톱 그래픽 프로그램에서 색상을 정의하기 위한 아주 기본적인 색상 모델이다. 이 2가지 색 공간은 더 인간의 지각에 가깝기 때문에, 포토샵이나 스케치 같은 그래픽 프로그램에서 색채 팔레트의 표준이 된다.
그래픽 프로그램은 색상 선택 방식을 HSL 공간으로 색상 선택 도구 color picker 를 사용한다. 디자이너가 색을 선택하면 RGB와 HEX 코드로 변환시켜준다RGB
화면의 모든 색은 빨강, 초록, 파랑 빛의 혼합으로 구현된다. RGB는 가법적 시스템으로 3가지 색이 다른 비율로 가감 조합되어 광대한 색의 범위를 표현한다. 각 색의 값은 0부터 255까지의 값으로 측정된다. rgb(red, green, blue) 순서로 기술된다. 파란색은 rgb(0,0,255) 검은색은 rgb(0,0,0) 흰색은 rgb(255,255,255)이다.
헥사 데미 컬(16진법) Hexadecimal Colors
RGB 값을 #RRGGBB 형식의 16 진수 색상 값을 사용하여 지정하는 방식이다. RR (빨강), GG (녹색) 및 BB (파랑)는 00에서 FF 사이의 16 진수 값이다. (십진수 0-255와 동일). 예를 들어 빨간색은 가장 높은 값 (FF)으로 설정되고 다른 값은 가장 낮은 값 (00)으로 설정되므로 # FF0000은 빨간색으로 표시된다. 16 진수 값은 대소 문자를 구분하지 않는다. "# ff0000"은 "FF0000"과 같다. 16진법 색상 태그는 HTML과 CSS에서 항상 파운드 심벌(#)로 시작된다. 웹과 앱은 주로 이 색상값을 사용한다.
RGBA
RGB 컬러 시스템과 같으나 알파(RGB알파)가 추가된 방식이다. 0에서 1(100%)까지 표현되는 알파 값은 색의 투명도를 결정한다. 0퍼센트의 알파 값을 가진 색은 완전 투명(보이지 않음)이고, 100퍼센트의 알파 값 색은 완전히 불투명하다. PNG 이미지는 알파채널을 이용해 흰색이 투명하게 보이게 한다.
색채의 해석
사용자가 색을 해석하는 방법은 문화에 따라 다를 수 있다. 그러나 빨강, 노랑, 녹색이 나타내는 상태의 해석은 전 세계적으로 일관된다.
이는 UNESCO 도로 표지판 및 신호에 대한 비엔나 협정에 의한 것이다. 국내에서는 안전색채로 사용되며, 2009년 (주)문은배색채디자인연구소와 홍익대학교 기술표준원은 안전색채의 특징을 바탕으로 한 실용 공공 디자인 한국 표준 색표를 개발 보급했다. 이 표준에 따르면 빨강은 위험, 중지를 녹색은 진행, 안전 그리고 노란색은 주의를 의미한다는 것으로 정해져 있다. 교통 관련 정보에서도 신호등 체계가 빨간색, 노란색, 녹색으로 구성되어 동일한 의미로 사용된다. 빨간색은 위험, 금지, 열정, 불 등을 의미하고 녹색은 공정, 안전, 중립을 의미한다. 이는 상징성이 반영된 신호 정보라고 할 수 있다. 도로표지판에서도 동일하게 적용하여 사용된다. 예를 들어 '진입금지' , '정지' , '좌회전 금지' 같은 규제 표지는 빨간색 표지판을 '낙석주의' , '과속방지턱' , '도로공사 중' 같이 운전자가 주의해야 할 정보에는 삼각형 노란색 표지판을 사용한다.
이러한 색 표준은 UI 디자인에서도 중요하게 활용된다. UI 디자인에서도 이러한 표준을 도입하여 사용자에게 다음의 시스템의 상태를 알려준다.
오류 Error
신호등의 빨간색 의미와 동일하다. 꼭 빨간색이어야 한다. 채도가 높은 원색을 사용할 필요는 없다. 이 상태는 시스템의 오류를 사용자에게 알려준다. 예를 들어 텍스트 입력 필드에 정보가 잘못 입력된 경우 필드 아래에 붉은색 인라인 애러 매시 지를 보여줘 사용자가 무엇을 잘못했는지 알려준다. 이러한 오류 내용을 사용자 눈에 띄게 하려면 화면을 파란색이나 무채색 계열의 색 위주로 사용하는 것이 좋다. 오류 외에 '삭제' , '중지' 등의 부정적이며 되돌릴 수 없는 액션(Destructive Action)에도 사용된다.
빨간색은 입력필드의 오류 표현이나 삭제같은 부정적인 의미의 콘트롤에 사용한다.
경고 Warning
노란색 또는 오렌지색을 사용한다. 이 상태는 잠재적인 문제를 일으킬 수 있음을 경고하여 오류를 방지한다. 신호등의 노란색이 신호가 곧 바뀐다는 것을 운전자에게 알려줘 사고를 방지하는 것처럼 사용자의 오류 가능성을 줄이는 역할을 한다. 최근 모바일 앱들은 UX 개선을 통해 적절하게 오류를 방지하여 자주 사용되지는 않는다.
성공 Success
녹색을 기본으로 사용한다. 최근은 녹색에서 파란색이 조금 가미된 초록색을 많이 사용한다. 이 상태를 통해 사용자는 작업이 성공적으로 수행됐음을 확인할 수 있다. 인터넷 송금이 제대로 완료됐음을 나타낼 때 사용할 수 있다. 가장 흔한 예는 iOS의 스위치 컨트롤을 켰을 때 사용하는 색을 말한다.
이러한 상태의 색채는 문화의 해석의 차이를 걱정하지 않고 사용할 수 있으며, UI 디자인 시에 적용하여 사용된다. 상태 색상은 원색을 사용할 필요는 없으며 브랜드 아이덴티티와 색채 사용 전략에 따라 유연하게 사용할 수 있다.
교통안전표지의 모양 및 의미
위의 색채의 의미와 함께 형태의 의미도 표준이 있다. 아래는 한국산업규격 안전표지의 형태의 의미이다. 이 형태는 아이덴티티와는 별개로 사용할 수 있다.
국민 안전처 재난 안전 표지판 그래픽 심볼 제작 가이드, KS또한 동일한 의미의 색채와 형태를 같이 사용한다. 즉 정보에 관한 UI 디자인 시 색채의 의미와 형태의 의미가 다르게 디자인해서는 안 된다.
오류를 나타낼 때는 삼각형은 사용하지 않는다. 경고 warning를 나타낼 때 또한 형태와 색채를 표준에 따라 디자인해야 한다. (도움말 또한 정보이므로 파란색과 원을 사용한다.) 색채와 형태와 아이콘을 통해 사용자에게 시스템의 상태를 직관적으로 알린다.
UI 디자인에서 색채의 사용과 용도
색채는 서체와 아이콘과 함께 일관성 있는 사용으로 브랜드 정체성을 표현하는 중요한 그래픽 요소이면서 UI에서 다음을 전달한다.
상호작용 표현 Interaction
색채는 사용자에게 앱/웹의 버튼과 같은 컨트롤의 상호작용(클릭이 가능하고 선택이 가능해서 명령이 실행된다는) 가능성을 안내하는데 가장 강력한 도구이다. 체크박스 같은 선택 컨트롤, 버튼, 링크, 슬라이더 등 상호작용을 나타내는 데 사용된다. - 플랫 디자인이 UI 디자인의 큰 흐름이다. 상호작용이 가능함을 나타내는 데 사용된 엠보스와 그러데이션 그리고 사실적인 재질 등의 그래픽 표현은 사용자가 콘텐츠에 집중하는데 방해가 되는 시각적인 잡음으로 인식되고 있다. 시각적인 잡음을 최소화하고 콘텐츠를 우선으로 하는 흐름에 따라 색채가 상호작용을 나타내는 가장 중요한 그래픽 수단이 되었다. - 동사형 레이블과 함께
의미 전달 Meaning
색채는 앞서 이야기한 일반적인 상징적 의미가 있으며, 화면상의 요소의 의미를 색으로 전달할 수 있다. 앞서 색채의 해석에서 논의대로 빨강은 금지 또는 오류, 노랑은 주의 또는 경고, 녹색은 안전 또는 긍정을 의미한다. 회원가입 시 사용자가 입력한 암호의 보안성이 높을 경우 안전을 의미하는 녹색으로 표시할 수 있다. 또한 내비게이션 앱에서 도로 상태를 정체는 빨강으로 원활은 녹색으로 표시하여 교통 상황을 표시할 수 있다.
색채를 활용하면 정보의 의미전달의 효율성을 높일 수 있다. 사용자는 색만을 보고 도로의 정체 상태를 빠르게 인지할수 있다.
상태 State
색채는 UI 컨트롤의 상호작용의 현재 상태를 표시할 수 있다. 버튼의 활성화 비활성화 같은 컨트롤의 현재 상태와 텍스트 필드의 입력 진행 그리고 토글스위치 같이 사용자의 조작 결과에 따른 컨트롤의 상태 변경을 나타낼 수 있다.
텍스트 필드가 활성화되어 입력이 진행 중임을 색채를 통해 사용자에게 인지시킬 수 있다. iOS세크멘트 콘트롤의 선택 상태를 색으로 표시할 수 있다.
계층 구조 Visual hierarchy
색채는 콘텐츠와 UI 요소의 중요한 순서를 계층구조로 표현할 수 있다. 계층구조는 콘텐츠의 중요도 순서를 시각적으로 표현함을 의미한다. 계층구조는 색채와 타이포그래피와 함께 표현할 때 더 효과적이다. 색채를 통한 계층 구조는 검은색에서 하얀색으로 이어지는 명암 단계나 채도 단계로 표현하여 위계의 순서를 더욱 분명하게 할 수 있다.
리스트에서 각 텍스트의 명도를 통해 중요도를 표현하여 사용자가 훑어보기 쉽고 인지하기 쉽게 할수 있다.강조
사용자의 주의를 끌기 위해 색채를 사용할 수 있다. 채도, 색상, 명도에서 두드러진 차이를 보이는 색은 상대적으로 주목성이 높으며, 특정 정보를 구분하여 강조하는 데 사용할 수 있다. 예를 들어 앱 내 새로운 알림이 있을 경우 탭 바의 아이콘 옆에 빨간색 배지를 통해 사용자에게 새로운 알림이 있음을 알린다. 강조는 사용 맥락상 사용자에게 유용한 경우에만 사용해야 사용자의 행동을 유도하는 목적을 달성할 수 있다. 또한 화면에 차지하는 비중을 최소화해야 한다. 지나친 강조는 시각적인 잡음을 일으키고 사용성을 저하시킨다.
인스타그램과 페이스 북은 새로운 알림이 있을 때 붉은색으로 표현해 다른 컨트롤보다 강조한다. 사용자는 이를 인지하고 텝하여 관련 정보를 확인할수 있다.접근성 Accessibility
각기 다른 UI 컨트롤들 사이에 충분한 대비(Contrast)를 포함하여 가독성을 확보해야 한다. 핵심 콘텐츠의 텍스트와 배경 간의 명도 대비는 4.5대 1 이상 이어야 한다.
앱과 웹에서 보이는 핵심 텍스트 콘텐츠와 배경 간의 충분한 대비를 제공하여, 저시력자, 색각 이상자, 노인 등도 콘텐츠를 인식할 수 있도록 제공해야 한다. 더 자세한 내용은 한국형 웹 콘텐츠 접근성 지침을 참고하면 된다. 다만 위 지침에 따르면 본문 콘텐츠에 단순히 장식 목적으로만 사용한 글, 마우스나 키보드를 활용하여 초점(Focus)을 받았을 때 명도 대비가 커지는 콘텐츠는 예외로 한다(지침 2.1.2 참조).
UI 디자인할 때 참고해야 할 중요한 내용은 다음과 같다.
1) 핵심 콘텐츠의 명도 대비: 앱/웹이 제공하려는 핵심적인 콘텐츠를 구성하고 있는 텍스트와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다.
2) 폰트 크기에 따른 명도 대비: 콘텐츠를 구성하고 있는 텍스트 폰트를 18pt 이상 또는 14 pt 이상의 크기 폰트를 사용하는 경우에는 명도 대비를 3:1까지 낮출 수 있다.
웹 접근성 색 대비를 체크할 수 있는 사이트와 프로그램
Contrast Finder
Contrast-Finder는 웹 접근성 기준에 적합한 충분히 대비되는 색의 조합을 찾아준다. 기준에 맞이 않을 경우 대안이 되는 색을 찾아 추천해준다. 웹 앱 형태로 제공되고 무료이다.
Contrast — Color Accessibility
맥 OS용 프로그램이다. 위젯 형태로 화면 내 색상 대비 비율을 빠르게 알아볼 수 있다. 무료는 아니고 6.99달러 유료이다.
Colorable
Colorsafe
핵심 콘텐츠와 주요 콘트롤의 명도 대비는 4.5대 1이어야 한다. 노란색은 낮은 명도를 가지고 있기 때문에 노란색 배경의 텍스트는 흰색이 아니라 검정색이어야 한다.색채 계획하기 Color System
앱이나 웹 사이트를 디자인하기 전에 가장 먼저 할 일은 스타일 또는 시각적인 요소를 정의하는 것이다. 여기에는 타이포그래피와 아이콘 그리고 색채가 있다. 앱과 웹의 UI 색상 체계를 만드는 과정은 생각보다 복잡하다. 사용자 인터페이스에서 색채 계획은 '사용자가 콘텐츠에 집중하는데 방해되지 않도록 한다.'를 원칙으로 한다. 즉 최적의 상태로 콘텐츠를 보여주는데 초점을 맞춰야 한다. UI 디자인에서 색채는 매우 계획적으로 사용되어 사용자가 콘텐츠에 몰입하는데 도움을 주어야 한다.
사용자 인터페이스에서 색채 계획은 '사용자가 콘텐츠에 집중하는데 방해되지 않도록 한다.'를 원칙으로 한다.
각 각의 색은 서로 조화를 이루는 것은 기본이고 사용용도가 명확하고 일관성이 있어야 한다.(이 색을 왜 사용하고 용도가 무엇인지 내부 디자이너와 개발자가 공유해야 한다.) 동일한 기능에 각기 다른 색을 사용하는 것은 사용자를 혼란스럽게 한다. 디자이너가 통제 가능한 범위 내에서 최적화된 색채를 계획해야 한다.
UI 사용하는 색은 크게 브랜드 색상 Brand color , 상태 색상 Status color, 아이콘 색상 Icons color, 텍스트 색상 Text color, 보더 색상 Boder color(dividers color), 배경색 Background color 이 있다. - (이 범주와 명칭은 어니까지나 디자이너와 개발자와 협업하기 위해 임의로 정한 것이다. 그 외의 색은 대시보드의 그래프 색상 등 콘텐츠에 사용할 색을 지정 사용할 수 있지만 그렇게 되면 색의 숫자가 너무 많아져서 통제하기 어렵다. 여기서는 UI 요소에 사용되는 색상만 다룬다.) 약 15개의 색상은 사용자 인터페이스 전반에 걸쳐서 일관적으로 적용되어야 한다. 먼저 정의 내린 색상을 변경할 경우 해당 색상이 적용된 인터페이스 상 모든 요소가 한 번에 색상이 변경되는 것을 목표로 한다. 즉 사용자 인터페이스의 전반적인 색상을 컨트롤할 수 있는 색상 체계 color system를 만드는 것을 목표로 해야 한다. 초기에 이런 방식으로 정교하게 계획된 색상 체계는 재사용 가능하고 여러 디자이너와 협업이 용이하다.
브랜드 색상 Brand color
브랜드 색상은 브랜드의 정체성을 나타내는 색을 기본으로 선택한다. 브랜드 색상에 기반해 적절한 배색을 해야 한다. 브랜드 색상은 한 가지 색상만 사용할 수 있다. 일반적으로 두 가지 이상을 사용한다. 이 경우 기본 색상 Primary color 액션 색상 Action color으로 나눈다. 좀 더 복잡하고 창의적인 배색 방식이 있지만 여기서는 가장 많이 사용하는 기본 배색 방식으로 서술한다. 기본을 충실히 익히고 응용하거나 변형하는 것은 디자이너의 몫이다.
1. 기본 색상 Primary color
기본 색상 Primary color은 브랜드의 아이덴티티를 나타내는 색이다. 앱의 색채를 계획할 때 디자인하는 앱의 브랜드 아이덴티티에 사용된 색을 적용한다. 브랜드 색상은 앱. 웹 전체에서 가장 많이 사용하는 색상이며 앱의 정체성을 나타낸다. 럭셔리 브랜드라면 대부분 검은색 계열, 비즈니스나 IT분야라면 파란색이 많을 것이다. 애플의 네이티브 앱 경우 브랜드 색은 흰색이다. - Snow White - 브랜드 컬러의 용도는 내비게이션 바의 배경과 텍스트의 타이틀에 사용된다. 브랜드 색상을 바탕으로 유사 배색이나 동일 배색으로 두 가지 정도의 색상을 더 사용할 수 있다.(이는 구글의 메터리얼 디자인의 경우를 말한다. )
왼쪽은 기본색상을 파란색 계열을 사용했고 오른쪽은 기본 색상을 하얀색으로 지정했다. 기본 색상을 어떤색을 사용하느냐에 따라 앱의 이미지가 달라진다.2. 액션 색상 Action color ( Secondary color)
액션 색은 Action color 앱의 상호작용 요소에 사용하는 색이다. 브랜드 색을 두 가지로 선택할 경우 액션 색은 중요한 버튼의 배경색과 링크 그리고 체크박스와 라디오 버튼 같은 선택 컨트롤의 활성화 상태 표시, 현재 위치 표시 , 필드의 활성화, 검은색 링크의 마우스 오버 색 , 진행률 표시 바의 색으로 사용한다. 정리하면
1. 버튼
2. 콜 투 액션 call-to-action
3. 링크
4. 선택 컨트롤 (브랜드 색상으로 사용할 수도 있음)
5. 토글, 스위치(상태 색상으로 사용할 수도 있음)
6. 내비게이션 현재 위치 표시
7. 텍스트 필드의 활성화
8. 진행률 표시기의 바
9. 슬라이드 바
등등 상호작용을 알리는 데 사용한다. 몇몇 예외를 제외하면 상호작용과 관련된 컨트롤은 한 가지 색으로 통일하여 일관성 있게 사용해야 한다. iOS의 네이티브 앱은 상호작용 색상을 한 가지만 사용하지만 구글의 메터리얼 디자인은 액션 색상은 명령 실행 관련 컨트롤에 사용하고 선택 컨트롤은 기본 색상을 사용한다. (개인적으로 이런 방식은 헷갈린다. 하나로 통일하지...) 아무튼 기본 색상 이 두 가지 색이 앱의 상호작용과 관련된 모든 요소에 사용한다. 다른 색은 특정 상황에서만 사용할 수 있다. 그리고 두 색은 최대한 보색에 가깝게 배색한다. 액션 색상은 일반적으로 보조색 Accent Color 또는 Secondary Color로 부르기도 한다. 여기서는 임의로 Action Color로 부르기로 한다. 일반적인 그래픽 디자인에서의 배색은 주색 Primary Color 또는 Main color를 기준으로 동일 배색이나 유사 배색을 통해 보조색 Secondary Color을 결정하고 여기에 포인트를 줄 수 있는 강조색 Accent Color을 선택해 디자인하기 때문에 강조색 Accent Color 또는 보조색 명칭이 맞다. 하지만 UI 디자인에서는 보조색이 상호작용 요소에 사용되어 중요도가 높아졌다. 개인적으로 상호작용에 사용되는 색은 강조색이라는 명칭보다는 액션 색으로 명칭을 사용한다. - 이 명칭이 색의 용도와 같아서 협업하는 디자이너와 개발자와 소통하기에도 용이하다.
구글의 메터리얼 디자인 방식의 브랜드 색상 배색 예이다. 기본색과 액션색은 보색을 기본으로 한다. 기본색은 두가지 정도 추가 될 수 있다. 이때 두색은 동일배색을 원칙으로 한다.
브랜드 색상과 액션 색상은 유사배색보다는 보색 대비를 사용하는 걸 권장한다.
내비게이션 바의 배경색과 버튼과 같은 콘트롤에 동일한 색을 사용하는 것은 피해야 한다.위와 같이 브랜드 아이덴티티를 위해 붉은색을 내비게이션 바의 배경으로 사용했다면 버튼은 사용성을 위해 붉은색과 보색 대비의 색을 사용하는 것이 좋다.
상호작용이 가능하지 않은 피드백 메시지에 버튼 등 상호작용이 가능한 컨트롤에 사용한 액션 색상을 사용하지 않는게 좋다.위 예시에서 체크 아이콘은 완료 상태 state 를 직관적으로 알리는 시각적인 요소이지 터치가 가능한 상호작용 요소가 아니다.
하지만 하단의 버튼과 동일한 색을 사용함으로써 터치가 가능하다고 사용자가 오인할 수 있다. 이런 식의 화면이 반복되면 사용자는 색상을 보고 상호작용이 가능한 컨트롤을 빠르게 인지하기 어려워진다.
텍스트 색상 Text color
기본 색상을 설정했다면 정보의 계층을 표현할 색상을 설정해야 한다. 텍스트의 색은 기본 3가지의 명도로 결정한다. 세 가지 텍스트 색은 앞서 이야기한 명도 대비는 4.5대 1 이 되어야 한다.
1. Text black color
첫 번째 텍스트 색은 타이틀에 사용할 색으로 검정에 가까운 색으로 설정한다. 임의로 텍스트 블랙 Text black로 명칭을 정한다.(색상 명칭은 정해진 기준이 없다. 따라서 협업하는 디자이너와 개발자가 합의하에 정할 수 있다.) 헥사코드로 #222222나 #333333의 명도를 사용한다. 일반적으로 HSB공간에서 명도 10%~ 30%대를 사용한다. (#000000의 100% 블랙을 사용하기도 한다.) 카드의 타이틀과 내비게이션 바의 타이틀 블로그의 타이틀 등에 사용한다. 보통 h1에서 h6의 스타일에 적용될 색이다.
2. Text body color
두 번째 텍스트 바디 text body는 블로그의 본문에 해당하는 텍스트에 사용된다. 카드의 서브라인에도 사용되고 리스트의 설명 문구에도 사용된다. 보통#888888 또는 #666666 울 가장 많이 사용한다. 명도는 약 40%대를 사용한다. Text black color과 명도 차이가 나야 한다.
3. Text disable color
세 번째는 이미지 캡션과 텍스트 필드의 힌트 텍스트와 플레이스 홀더 등에 사용된다. 비활성 텍스트 버튼에도 사용한다. 보통 헥사코드로 #999999 대를 사용하고 명도는 40%대이다.
위의 예시 같은 텍스트 색을 정한다. 두 색은 대비가 있어야 한다.위 세 가지 텍스트 색은 사용자가 계층구조를 파악할 수 있을 정도의 명도 차이를 가져야 한다.
여러 화면을 디자인을 하다 보면 무수히 많은 유사한 명도의 색이 만들어져 마지막에는 통제가 불가능하다. 기능을 개선할 경우 새로 디자인해야 하는 경우도 발생한다. (#666666 , #6 d6 d6 d 같이 명도차가 거의 없는 색을 사용하는 경우가 많다. 디자이너는 미세한 명도 차이를 확인할 수 있지만 사용자는 쉽게 알아채지 못한다.)
많은 디자이너와 협업할 경우에도 디자이너별로 스타일이 달라져 나중에 관리가 어려운 경우가 많다. 또한 디자이너의 개성에 따라 색을 추가하는 경우도 발생한다. 색상을 추가할 때는 그럴만한 사용성과 관련한 논리적인 이유와 일관적인 적용원칙이 있어야 한다. 그래픽 디자인에서 별색을 하나 추가할 때마다 인쇄비용이 상승하는 것처럼 생각해야 한다.
디자인에서 어느 정도의 제약은 꼭 필요하다. 이런 제약이 사용성을 높이고 디자인의 퀄리티를 향상하는 길이다.
보더 색상 Border color
보더 색상은 두 개에서 세 가지로 사용한다. - 보더 border라고도 하고 디바이더 Divider 또는 라인 line이라고 도 하는데 여기에서는 보더라고 칭한다.
첫 번째 보더 색상은 버튼의 라인이나 텍스트 필드나 드롭다운 등의 컨트롤의 보더 라인에 사용한다. 보통 터치가 가능한 요소에 사용한다.
보통 헥사 코드의 #cccccc를 사용하고 명도는 80% 를 사용한다.
두 번째 보더 라인은 콘텐츠의 항목의 구분 라인으로 사용한다. 첫 번째보다 약간 밝은 색으로 사용한다. 헥사코드로 #e1e1e1을 사용하고 80%에서 90% 사이의 명도를 사용한다.
배경 색상 Background color
배경색은 컨트롤의 상태나 테이블과 리스트의 구분 등에 사용할 수 있다. 일반적으로 보더 색상과 비슷하게 두 가지 색상을 기본으로 한다. 보더보다는 밝은 색으로 사용하고 90% 대의 명도를 사용한다. 92%와 98% 두 종류로 사용할 수 있다.
페이스 북 메신저의 텍스트와 보더(디바이더) 배경색 스케일
참고자료
http://gsrealdesign.tistory.com/entry/color
http://davidlab.net/google-design-ko/style/color.html#color-color-schemes
https://brunch.co.kr/@zalhanilll/72
https://material.io/guidelines/style/color.html#color-usability
https://uxplanet.org/color-theory-brief-guide-for-designers-76e11c57eaa
16 Tips for Setting Up a System That Endures
medium.com
https://brunch.co.kr/@monodream/8
http://m.blog.daum.net/kkj9264/18256410
https://standards.usa.gov/components/colors/
접근성 색 체크
http://juicystudio.com/services/luminositycontrastratio.php
책
정보디자인 교과서. 김성중 외 저 , 안그라픽스
http://m.aladin.co.kr/m/mproduct.aspx?ItemId=2047626
색채 디자인 교과서 : 색채의 이해와 활용을 위한 필독서 | 문은배 저 | 안그라픽스
- 색에 대한 한글 용어는 이 책을 기준으로 작성했음.
