8. 컬러

1.컬러의 기본개념

 1) 정의

  - 색은 이미지, 감정 등의 다양한 요소를 포함하고 있음

  - 문화적 환경, 트렌드, 연령, 개인적 기호 등 다양한 요소에 영향을 받음

  

 2) 색상 혼합 개념

  (1) 가산혼합 

   - Red, Green, Blue의 빛 혼합 방식으로 색이 겹쳐짐에 따라 밝아짐

  (2) 감산혼합

   - Cyan, Magenta, Yellow, Black의 인쇄 색상 혼합 방식으로 색이 겹쳐짐에 따라 어두워짐

 3) 색 속성

  - 색상: 색의 고유한 특성

  - 채도: 색이 선명한 정도

  - 명도: 색이 밝은 정도

 4) 배색

  (1) 단색 계열 (Monochromatic)

   - 단색 선정 후 명도를 달리하여 사용하는 배색

  (2) 유사색 (Analogous) 

   - 선정한 하나의 주색과 그 옆에 바로 인접한 두 색

   - 자연스럽고 조화로운 느낌

  (3) 보색 (Complementary) 

   - 마주보는 위치의 색

   - 강렬한 대비효과로 활기있는 배색

  (4) 분리보색 (Split Complements) 

   - 마주보는 보색 중 한 쪽의 보색에 인접한 두 가지 색을 조합하는 배색

  (5) 삼색 트라이어드 (Triad) 

   - 색상환에서 같은 간격에 놓인 3가지 색 조합

   - 모두가 대비 되므로 긴장감을 높일 수 있음

 5) 색역

  - 색 체계와 디바이스에 따라 실제 재현할 수 있는 색의 범위

  - 같은 컬러 체계이더라도 디바이스에 따라 표현되는 색의 범위가 다름

2.컬러의 의미와 역할

 1) 감정

  - 컬러는 긍정/부정의 의미를 동시에 지니며, 한 가지 색 뿐 아니라 여러 색을 조합해서 다양한 의미 표현

  - 예로 붉은 색은 열정, 사랑, 분노, 위험, 공격의 의미를, 푸른색은 안정, 평온, 냉정, 우울 등의 의미를 지님

 2) 국가/문화 관점

  - 나라별로 다른 의미를 지닐 수 있으며, 각 개인마다 다른 의미를 부여하기도 함

 3) 대상, 주제 관점

  - 타겟이 누군지, 주제가 무엇인지에 따라 컬러 선정이 중요 

  

 4) 인지심리적 관점

  - 컬러를 통해서 어떠한 감정, 의미를 가지고 있느냐가 중요하므로 전달하고자 하는 가치와 

    컬러가 일관성이 있어야 함

 5) 브랜드와 컬러

  - 기존 브랜드가 컬러의 의미를 선점하고 있는 경우가 많으므로 경쟁사 컬러가 어느 컬러인지 파악하는 

    것이 중요

 6) UI 관점

  - GUI에서의 컬러는 특정 의미를 내포하고 있기에 사용자가 교육된 방향에 맞춰서 제작 (긍/부정 분류)

  - 정보의 중요도에 따라 컬러로 위계를 표현

  - 같은 구매버튼이라도 제품/서비스의 성격에 따라 다르게 표현할 수 있음

  - 사용 예시 

색상	예시
Red	심박수를 높여 빨리 구매 자극 / 재고 정리 판매 등에 적합
Green	심하고 눌러도 되는 느낌
Black	럭셔리 제품의 구매 버튼에 종종 쓰이는 컬러
Violet	마음을 달래고 안정감을 전해주기 때문에  주로 뷰티 제품이나 안티 에이징 구매 버튼에 많이 쓰이는 컬러

 

* 배색 제안 기능 참고: color.adobe.com

3. 아이폰과 컬러

  1) 커뮤니케이션을 위한 컬러

  - 단순하게 색을 표현하는 것이 아니라 컬러를 통해 Interaction의 정보와 시각적 일관성에 대한 정보 전달

  - Interaction에 적용한 컬러는 Interaction이 없는 곳에 적용하면 안됨

  - 일반적으로 메인컬러는 1개를 선택하여 UI에 일관적으로 적용 

 2) iOS 컬러 팔레트

  - http://ios7colors.com

4. 안드로이드와 컬러

  1) Material Design

   (1) 3대 요소

    - 디지털 페이퍼, 컬러위계, 모션 & 인터랙션

  (2) 컬러

    - 프린트 디자인의 개념을 적극 수용하여 컬러, 이미지, 레이아웃 등의 개념을 모바일에 구현하여

      특징적인 디자인을 구현하는 개념

    - 대담한 컬러 배색과 하이라이트 컬러 사용

   

 2) Android 컬러 팔레트

  - https://www.google.com/design/spec/style/color.html

  - 메인컬러 (500)로 1개 선택 후 2개 서브컬러 (700, 800) 선정, 엑센트 (A로 시작) 컬러로 

    대비되는 컬러 선정

  - 엑센트 컬러는 Floating Action Button, Slider, Switch, Indicator, Link 등 Interaction이 필요한 

    부분 및 관련 부분에 사용

5. 포지셔닝 맵을 활용한 분석 예시