[ch2] 컬러, 이미지를 남기고 가다

컬러 

• 사람이 어떤 사물이나 물체를 볼 때 가장 먼저 인지하는 요소이자 가장 오래 기억에 남는 요소.
• 브랜드 컬러는 사용자에게 브랜드의 이미지를 지속적으로 전달시켜 브랜드에 대해 기억하고 인지시킬 수 있는 중요한 역할을 한다.
• 컬러 별로 가지고 있는 이미지.

색상	이미지
	에너지, 열정적, 위험함, 정지, 부정적, 경고, 오류
	친근함, 에너지, 보류, 경고
	활기참, 즐거움, 희망적, 낙천적
	자연, 균형, 긍정, 진행, 승인, 성공
	안정감, 신뢰, 성공, 비전, 정보
	고급스러움, 고상함, 고귀함, 우아함, 예술, 창조
	고급스러움, 세련됨, 권위적
	깨끗함, 심플함, 정직함, 맑음

 

• 컬러가 전달하는 의미를 활용하는 것으로, 일관된 디자인을 할 수 있다.
• 컬러는 중요한 정보를 강조 또는 사용자의 행동을 유도하기 위해 주로 사용하는 요소.
• 또한 브랜드 아이덴티티의 스타일을 결정하는 요소 중 하나이기도 하다.
  
  

컬러의 역할

• 중요한 정보 강조 : 정보의 중요도에 따라 채도나 명도를 활용하여 주요 요소와 보조 요소를 구분
  ▼ 계층 구조 : 요소의 중요도에 따라 계층구조로 표현 가능. 타이포그래피와 같이 표현하면 더 효과적으로 표현 할 수 있다.
  ▼ 강조 : 채도, 명도를 적용하여 특정 정보를 강조할 수 있으며, 화면에서 강조 영역을 많이 쓰면 시각적으로 복잡해져서 사용성을 저하시키기에, 최소화로 사용해야 더 강조할 수 있다. 
  
  
• 사용자의 행동 유도 : 버튼 등에 컬러를 적용하여 사용자가 다음 단계로 나아갈 수 있도록 행동을 유도할 수 있다.
  ▼ 사용자가 누르도록 유도 : 강조하고 싶은 주요 요소에 브랜드 컬러를 적용하여 행동을 유도하거나, 보조 요소에는 채도가 낮은 회색조 색상을 사용하여 상대적으로 중요도를 낮춘다.
  ▼ 컬러를 넣어 의미를 전달 : 일반적으로 컬러가 가지는 통일된 의미를 요소에 활용하여, 해당 요소의 의미를 컬러를 통해 전달한다.
  
  
• 상태 : 사용자와 상호작용하면서 즉각적인 피드백을 전달한다.
  ▼ 텍스트 필드 입력 
  ▼ 버튼 활성화와 비활성화
  ▼ 토글
  ▼ 탭
• 브랜드 아이덴티티 : 브랜드 컬러를 지속적으로 사용자에게 전달하여 브랜드 아이덴티티를 각인시킨다.
  ▼ 브랜드의 이미지를 떠오르게 하는 강력한 시각적 전달 요소로, 브랜드가 가지고 있는 가치관과 성향을 담을 수 있도록 대표 컬러인 브랜드 컬러를 선정해서 지속적으로 사용자에게 전달하여 브랜드에 대한 이미지를 만들어간다.
  
  ▼ 브랜드를 대표하는 컬러와 전달하는 이미지 예시들

브랜드 명	레드불	KFP	맥도날드	몬스터 에너지	로도스 아일랜드	트위치
브랜드 이미지	열정적, 에너지	친근함	즐거움	성공, 긍정	비전	예술, 창조

 

컬러 비율

• 5 : 25 : 70 비율 : 5% 주색(브랜드 컬러), 25% 보조색, 70% 배경색
  
  
• 강조해야 하는 브랜드 컬러 부분은 5% 정도의 적은 수준만 사용하는 것으로 각인시키는 것이 일반적이다.

스타벅스의 상징인 초록색은 실제로 매장 전체에 사용되는 비율은 약 5% 정도다. 비록 적은 비율이지만 사용자에게 지속적으로 컬러와 메시지를 전달하여 브랜드의 이미지를 만들어 나가고 있기 때문에 충분히 상징이 되었다.

반대로 주색인 초록색을 보조하는 색상인 갈색의 비율은 상당히 많은 편이다. 이는 주색인 초록색을 강조하기 위함이다.

이디야 커피는 상징인 푸른 색을 실제로 대부분의 매장 전체에 사용하는 것으로 강조한다. 이는 대중적이고 접근성 높은 커피를 지향하는만큼, 역으로 특유의 푸른 색으로 매장 수가 더 많이, 자주 보이도록 하는 효과를 위해 이렇게 비율을 맞춘 것이다.

 

• 즉, 비율에 따라 디자인 느낌이 달라지기 때문에 반드시 5:25:70의 비율을 맞추는 것이 아니라 디자인의 목적, 레이아웃, 범위에 따라 배색들의 비율을 바꿔서 적절한 비율을 찾아 사용한다.
  
  

배경과 컬러

• 컬러는 상대적이라 주변 환경 같은 배경 색에 따라 영향을 받는다.
• 특히, 다크/라이트 모드는 모드에 따라 배경색이 반전되기 때문에 각 모드에 맞는 컬러를 사용해야한다.

형태와 컬러

• 컬러는 상대적이라 형태에 따라서도 영향을 받는다.
• 면적이 넓은 배경과 면적이 좁은 텍스트와 같이 형태에 따라 컬러는 영향을 받는다.
• 배경에 사용된 경우 : 면적이 넓기 때문에 가독성이 높다.
  텍스트에 사용된 경우 : 면적이 상대적으로 좁기 댸문에 가독성이 낮다.
• 형태에 따라 색상 코드값을 알맞게 적용하여 가독성을 높여야 한다.

과도한 컬러 사용 피하기

• 한 화면에서 너무 많은 컬러를 사용하는 것은 사용자에게 혼란을 줄 수 있다.
• UI 내 사용자가 집중할 수 있도록 불필요한 컬러 사용은 지양하고, 사용자 행동 유도나 정보 강조 같은 상황에 따른 기준에 맞는 컬러를 사용해야한다.
• 텍스트와 배경 컬러 대비를 높여 가독성을 확보해야한다.