Color

https://brunch.co.kr/@chulhochoiucj0/17 

모바일 UI 디자인 기본 요소 - 색채 Color

위의 글을 읽으면서 정리해봤다!

 

https://www.remain.co.kr/page/designsystem/brand-color.php

리메인커리어 | 리메인

이건 보색 개념 이해를 위해 나중에 읽어볼 것

 

 

COLOR

색채를 UI 디자인에 사용할 때에는 사용자가 상호작용이 가능한 요소를 놓치지 않도록 디자인해야 한다. 

= 기능과 의미의 해석에 혼란이 생기지 않도록 일관성을 부여해야함! 

예시) 전화를 받는 버튼(초록), 전화를 끊는 버튼(빨강) 

• 색의 3속성 : Hue(색상), Saturation(채도), Lightness(명도)_ 

0, 360 : 빨, 60 : 노, 120 : 녹색, 180 : 사이언, 240 : 파랑, 300 : 마젠타

멘셀의 색상환

• 채도 Chroma : 색의 맑고 탁함, 강약을 나타내는 성질, 채도가 높을수록 흰색이나 검은색이 섞이지 않은 원색 
• 명도 Value : 색의 밝기, 0-100 범위에서 100이 가장 밝은 색상, 0은 가장 어두운색(검정)이다. UI에서는 시각적 계층을 나타내기 위해 명도를 사용한다. 
• 색조 Tone : 명도와 채도의 개념을 하나로 합쳐 색의 밝기, 어두움, 강약 또는 진함 등을 표현하는 방법. 색조는 무채색 단계와 유채색 단계를 표현한다. 

 

• 색 공간 : 인쇄에 사용되는 CMYK(cyan, magenta, yellow, black), 디지털에서 사용하는 RGB, HSL, HSV(색상, 채도, 값)이 있다. 디지털 기기에서는 RGB 공간보다 HSB, LAB 공간을 사용. 웹과 앱에서는 RGBA와 Hex code를 사용한다. 
  • RGB : 0 ~ 255의 값으로 측정됨. 파란색(0, 0, 255) / 검은색(0, 0, 0) / 흰색(255, 255, 255) 
  • Hexadecimal colors : 16진수 색상 값을 사용하여 지정하는 방식, 대소문자를 구분하지 않음 ff, FF 상관 x
  • RGBA : RGB에 알파가 추가된 방식 0~1까지 표현되는 알파 값은 색상의 투명도를 결정한다. 0퍼센트의 알파 값은 투명, 100퍼 센트의 알파값은 불투명하다. PNG 이미지는 알파채널을 이용해 흰색이 투명하게 보이게 한다. 
• 색채의 해석 
  • RED : 오류, 금지, 정지, 위험, 삭제 
  • GREEN : 안전, 진행, 계속, 성공
  • YELLOW : 주의, 경고 
• 색채의 사용과 용도 
  • 상호작용 표현 Interaction 
  • 의미 전달 Meaning : 네비게이션의 초록길 빨강길 
  • 상태 State : 텍스트 필드에 입력창에 색상 표시 
  • 계층 구조 Visual hierachy : 메일함에서 보내는이(검정), 내용(회색)
  • 강조 : 앱 내 새로운 알림(인스타그램 팔로워 추가를 빨간색 배지로 알려줌) 
• 접근성(가독성) : 핵심 콘텐츠와 배경간의 명도 대비는 4.5대 1이상이어야 함!(콘텐츠 구성하고 있는 텍스트 폰트가 14이상인 경우엔 3:1도 괜찮다!) https://app.contrast-finder.org/

Contrast Finder, 웹 접근성 기준(WCAG)에 적합하도록 명암이 충분히 대비되는 색의 조합 검색

 

색채 계획은 사용자가 컨텐츠에 집중하는데 방해되지 않도록 한다

 

• 색채 계획
  • Primary color : 브랜드의 아이덴티티, 앱의 정체성 ex) 애플의 네이티브 앱의 경우는 흰색 Snow white이다.
  • Action clolor(Secondary) : 상호작용의 요소에 사용됨. Accent color 또는 보조색 명칭이 맞지만, UI디자인에서는 보조색이 상호작용 요소에 사용되어 중요도가 높아졌다. 업무에선 액션색을 더 많이 사용한다. 기본색과 액션색은 보색이 기본!(유사배색을 피하자!) 
    1. 버튼
    2. 콜 투 액션(CTA)
    3. 링크
    4. 선택 컨트롤(브랜드 색상으로도 사용 가능) 
    5. 토글, 스위치(상태 색상으로 사용 가능)
    6. 내비게이션 현재 위치 표시
    7. 텍스트 필드의 활성화
    8. 진행률 표시기의 바
    9. 슬라이드 바  
  • 텍스트 색상(세가지 텍스트 색은 사용자가 계층구조를 파악할 수 있을 정도의 명도 차이를 가져야 한다.) 
    1. Text black color : 타이틀에 사용할 색(검정에 가까운 색)으로 설정하자. 헥사코드로 #222222 #333333의 명도를 사용한다. 일반적으로 HSB공간에서 명도 10~30%대를 사용함! ex) 카드의 타이틀, 내비게이션 바의 타이틀, 블로그의 타이틀 
    2. Text body color : 블로그의 본문에 해당하는 텍스트에 사용. 보통 #888888 또는 #666666을 가장 많이 사용한다. 명도는 약 40%대를 사용함! Text black color와 명도 차이가 나야 한다. 
    3. Text disable color : 이미지 캡션과 텍스트 필드의 힌트 텍스트와 플레이스 홀더 등에 사용된다. 비활성 텍스트 버튼에 사용한다. 헥사코드로 #999999대를 사용하고 명도는 40%대! 
  • 보더 색상 Border color(Divider, line)
    1. ex) 버튼의 라인이나 텍스트 필드, 드롭다운 등의 컨트롤의 보더 라인에 사용한다. 보통 터치가 가능한 요소에 사용한다. 헥사 코드의 #cccccc를 사용하고 명도는 80%
    2. 콘텐츠의 항목의 구분 라인으로 사용한다. 첫 번째보다 약간 밝은 색으로 사용한다. 헥사 코드로 #e1e1e1을 사용하고 80%에서 90% 사이의 명도를 사용한다. 
  • 배경 색상 Background color 
    • 컨트롤의 상태, 테이블과 리스트의 구분 등에 사용할 수 있다. 보더보다는 밝은 색으로 사용하고 90%대의 명도를 사용한다. 
     

출처 https://brunch.co.kr/@chulhochoiucj0/17

 

‼️ 디자인에서 어느 정도의 제약은 꼭 필요하다! 이런 제약이 사용성을 높이고 디자인의 퀄리티를 향상하는 길이다.