◆ url
◆ 내용 요약
UI에서 컬러시스템에 대한 이해를 위해 색체에 대한 이론적 기본개념과 사용자 인터페이스에서의 요소로서 색채를 바르게 활용하는 방법에 대해 알려준다.
색채와 UI디자인UI디자인을 할 때 ‘색채’를 같은 속성과 기능에 대해 일관성 있게 사용하면 사용자를 돕는 요소로 활용할 수 있다.(그 반대가 되면 방해하는 요소가 될 수 있다)
색의 3 속성•
색상(Hue) : 빨강, 노랑, 파랑 등 색 자체의 고유의 특성을 말함
•
채도(Chroma) : 색의 맑고 탁함, 순수한 정도, 색의 강약, 포화도를 나타내는 성질. 흰색이나 검은색을 섞을수록 채도는 낮고 원색에 가까울 수록 채도가 높다.
•
명도(Value) : 색의 밝고 어두운 정도. 원색과 무관하게 밝고 어두운 정도에 대한 속성이다.
•
색조(Tone) : 명도와 채도의 개념을 하나로 합쳐 색의 밝기와 어두움이나 강약 또는 진함 등을 표현하는 방법이다. KS분류(한국산업표준), IRI 분류(색채디자인연구소)체계가 있다.
IRI 색조 분류•
무채색 : 하양(white), 밝은 회색(Light Gray), 회색(Gray), 어두운 회색(Dark Gray), 검정(Black)
•
유채색 : 선명한(vivid), 밝은(Bright), 강한(Strong), 진한(Deep), 맑은(Pale), 은은한(Light), 차분한(Dull), 연한(Very pale), 흐릿한(Light Grayish), 탁한(Grayish), 어두운(Dark)
색 공간
•
가장 일반적으로 사용되는 색 개념: CMYK(인쇄) 와 RGB(디지털 기기)
•
웹과 앱에서 컬러를 정의하는 컴퓨터언어로 RGBA와 헥사 코드 Hex code를 사용
•
인간이 컬러를 눈으로 구분하여 활용할 때 인쇄에는 CMYK 기반의 Pantone컬러 칩을 사용하고 디지털 기기에는 RGB 공간보다는 HSB(색상,채도,밝기)와 LAB공간을 사용
•
그래픽 프로그램에서 컬러피커 UI를 떠올려보면 HSL공간으로 나뉘어 있다. (채도를 선택, 색상을 선택, 밝기를 선택)
색채의 해석색의 해석은 문화에 따라 다를 수 있으나 빨강, 노랑, 녹색이 나타내는 상태의 해석은 세계 공용적이다.
이는 UNESCO 도로 표지판 및 신호에 대한 비엔나 협정에 의한 것.
국내에도 공식기관에서 개발 보급한 [실용 디자인 한국 표준 색표]가 있다. 이러한 색 표준은 UI디자인에서 활용되며 사용자에게 다음의 시스템의 상태를 알려준다.
•
UI 디자인에서 시스템의 상태를 알리는 표준 색상
RED : 오류, 금지, 정지, 위험, 삭제
GREEN : 안전, 진행, 계속, 성공
YELLOW : 주의, 경고
오류 Error : 빨간색. 시스템의 오류를 사용자에게 알려준다. 예) 텍스트입력 필드에 잘못 입려된 경우 인라인 에러 메시지, 삭제버튼
성공 Success : 녹색을 기본으로 사용. 최근은 녹색에서 파란색이 조금 가미된 초록색을 많이 사용함. 예) IOS의 스위치 컨트롤을 켰을때 사용
상태색상은 원색을 사용할 필요는 없으며, 브랜드 아이덴티티와 색채 사용 전략에 따라 유연하게 사용할 수 있다.
UI 디자인에서 색채의 사용과 용도•
상호작용 표현 Interaction : 시각적 잡음을 최소화를 지향하는 플랫 디자인에서 색채가 상호작용을 나타내는 가장 중요한 그래픽 수단이 됨
•
의미 전달 Meaning : 화면상의 요소의 의미를 색으로 전달할 수 있다.
•
상태 State : 현재 상태를 표시할 수 있다. 활성화/비활성화와 같은 컨트롤 상태와 사용자의 조작결과에 따른 컨트롤의 상태변경을 나타낼 수 있다.
•
계층 구조 Visual hierarchy : 타이포그래피와 함께 시각적 계층구조를 더 효과적으로 표현한다.
•
강조 : 채도, 색상, 명도에서 두드러진 차이가 전달하는 주목성을 통해 특정요소에 대해 사용자의 주의를 끌 수 있다. 단, 화면에서 차지하는 비중을 최소화해야 한다. (지나치면 시각적인 잡음을 일으켜 사용성을 저하시킴)
접근성핵심 콘텐츠의 텍스트와 배경 간의 명도 대비는 4.5:1 이상이어야 한다.
충분한 대비를 제공하여, 저시력자, 색각 이상자, 노인 등도 콘텐츠를 인식할 수 있도록 제공해야한다.
색채 계획하기 Color System사용자 인터페이스에서 색채 계획은 ‘사용자가 콘텐츠에 집중하는데 방해되지 않도록 한다’를 원칙으로 한다. 즉 최적의 상태로 콘텐츠를 보여주는데 초점을 맞춰야 한다.
색채는 매우 계획적으로 사용되어 사용자가 콘텐츠에 몰입할 수 있도록 도움을 주어야 한다.
•
각 색은 사용용도가 명확하고 일관성이 있어야 한다.
•
일반적 범주 : 브랜드 색상(Brand color), 상태 색상(Status color), 아이콘 색상(Icons color), 텍스트 색상(Text color), 보더 색상(Border color), 배경색(Background color)
•
사용자 인터페이스의 전반적인 색상을 컨트롤할 수 있는 색상 체계(color system)를 만드는 것을 목표로 해야 함.
브랜드 색상 : 브랜드의 정체성을 나타내는 색을 기본으로 선택.•
기본 색상 Primary color : 브랜드의 아이덴티티를 나타내는 색. 앱의 정체성을 나타냄.
•
액션 색상 Action color : 앱의 상호작용 요소에 사용하는 색. 보조색(Accent color) 또는 (Secondary color)로 부르기도 한다. 기본색상과 보색을 사용하는걸 추천. 또한 상호작용이 있는 요소에만 사용하는것이 혼동을 주지 않는다.
텍스트 색상 Text color : 색의 기본 3가지의 명도로 결정한다. 3가지의 텍스트 색의 명도 대비는 4.5:1이 되어야 한다.•
Text black color : 타이틀에 사용할 색으로 검정에 가까운 색으로 설정한다. 보통 h1에서 h6의 스타일에 적용될 색.
#222222
#333333
, HSB기준 명도10~30%대
•
Text body color : 본문 텍스트에 사용할 컬러. 보통
#888888또는
#666666
, 명도는 약 40%대를 사용한다. Text black과 명도 차이가 나야한다.
•
Text disable color : 이미지 캡션과 텍스트 필드의 힌트 텍스트와 플레이스 홀더 등에 사용. 비활성 텍스트 버튼에도 사용. 보통
#999999대
, 명도는 40%대
•
위의 텍스트 명칭은 정해진 기준은 없다. 작업자들간에 협업을 통해 정할수 있다.
•
위 세가지 색은 사용자가 계층구조를 파악할 수 있을 정도의 명도 차이를 가져야 한다.
•
색상을 추가할 때는 그럴만한 사용성과 관련한 논리적인 이유와 일관적인 적용원칙이 있어야 한다.
보더 색상 Border•
버튼의 라인, 텍스트 필드, 드롭다운 등의 컨트롤 보더라인.
#cccccc
명도 80%를 사용한다.
•
콘텐츠 항목의 구분 라인. 위 보다 약간 밝은 색으로 사용한다.
#e1e1e1
, 명도 80~90% 사용
배경 색상 Backgrond color일반적으로 보더 색상과 비슷하게 두 가지 색상을 기본으로 한다. 보더보다는 밝은 색으로 사용하고 90&대의 명도를 사용한다. 92% 98% 두 종류로 사용할 수 있다.
◆ 느낀점
그동안 경험을 통해 직감적으로 어렴풋이 알고 있던 UI에서의 컬러 시스템에 대해 좀 더 명확하게 알 수 있었다. 컬러 시스템을 구성하고 정의하는데 좋은 바탕이 될 것 같다.