2023. 5. 1. 16:41ㆍ기록/UXUI 스터디
이전에는 비주얼 스타일의 정의에 대해 써 보았다.
이번부터는 비주얼 스타일에 속해있는 각 요소들과, 해당 요소들의 사례들을 소개한다.
> 이전 내용 보러가기
1. 비주얼 스타일이란?
2. 시각적 계층 구조와 구성
비주얼 스타일 - 색상
즉각적인 반응이 일어나는 곳으로, 사용자가 가장 먼저 인지하는 요소이다.
색상 사용 및 조합에 관해 몇가지 소개를 보자.
배경 컬러에 따른 요소를 다르게 사용하라
- 밝은 배경 전면에 어두운 요소를 사용하거나, 어두운 배경 전면에 밝은 요소를 사용해야 한다.
- 대비가 충분한지 확인하려면 포토샵과 같은 이미지 툴을 열어서 디자인의 채도를 낮춰보면 좋다.
(그레이 스케일로 만들어 보라)
색상 만으로 의미를 구분하지 말라
- 다른 형태나 텍스트로 의미를 강화해야 한다. 이는 색맹인 사람은 색상 차이를 인지하지 못하기 때문이다.
특정 색상은 피하라
- 겉모습이나 동작 방식이 실제 제품의 속성과 일치한다.
눈의 피로도를 생각하라
- 흰 바탕에 검은 글씨는 거슬리지 않지만, 흰 배경 자체가 눈을 피로하게 하는 빛을 발한다.
-> 테블릿 용 제품 디자인은 콘텐츠나 UI 요소 사이에 여백이 많은 경우 눈의 피로함을 줄이려면 배경에 어두운 색을 써야한다.
책에서는 테블릿 용 제품의 경우, 다크 모드를 권장하고 있다.
컬러는 어떤 색을 사용하고 어떻게 대비하는지에 따라 다양한 이미지를 연출할 수 있다.
1. 따뜻함 vs 시원함
- 따뜻한 색 : 빨간색, 주황색, 노란색, 갈색, 베이지색이 이에 속한다
- 시원한 색 : 파란색, 녹색, 보라색, 흰색, 회색(대량 사용 시)
2. 어두운 배경 vs 밝은 배경
- 컴퓨터 인터페이스, 인쇄 화면에서는 밝은 색 배경이 흔하다.
- 어두운 배경은 디자인 요소에 따라 선명하거나, 어둡거나, 강력한 느낌을 준다.
3. 강한 대비 vs 약한 대비
- 강한 대비 : 긴장감, 힘, 대담한 감정을 불러일으킨다.
- 약한 대비 : 차분하고 긴장을 풀어준다.
4. 높은 채도 vs 낮은 채도
- 채도가 높거나 순도가 높은 색상 : 색동감, 생생함, 밝음, 따뜻함, 대담함을 자아낸다.
- 과도하게 사용 시 눈을 피로하게 만든다.
- 대부분 인터페이스 디자인에서는 높은 채도 색상은 한두 가지만 사용된다.
-> 밝기 상관없이 대부분 톤과 틴트가 차분한 색상이 색상 팔레트 대부분을 차지한다.
5. 색상 조합
- 채도가 높은 색상 두 가지를 조합하면 하나의 색상보다 훨씬 역동적이고 풍성한 느낌을 불러일으킬 수 있다.
- 더 밝고 강한 색상은 보는 사람에게 가까운 것처럼 느껴지고, 회색과 창백한 색상은 뒤로 후퇴하는 듯한 효과를 준다.
-> 강한 입체감은 디자인을 극적으로 만든다.
-> 톤 다운되거나 은은한 색을 더 많이 쓴 평면적인 디자인은 더 평화로운 느낌이다.
위의 내용들을 잘 따르고 있는 사례들을 알아보자.
따뜻한 컬러 사용 사례
1. 붉은 계열을 사용하여 딱딱한 전자제품임에도 전체적으로 따뜻한 이미지가 잘 느껴진다.
시원한 컬러 사용 사례
2. 채도가 낮은 푸른 컬러와 회색 계열을 넓게 사용하여 전체적으로 시원한 이미지가 잘 느껴진다.
밝은 배경+강한 대비 사용 사례
3. 근래에 흔하게 볼 수 있는 디자인으로, 흰색의 밝은 배경에 검정 폰트를 사용하여 강한 대비를 자아내는 디자인이다.
강한 대비는 힘있고 강한 느낌을 받을 수 있다.
어두운 배경에 따른 대비 사레
4. 해당 이미지에서는 강한 대비와 약한 대비를 모두 볼 수 있다.
강한 대비의 경우 선명하고 정보 전달이 잘 되며, 힘 있는 느낌을 받을 수 있는 반면, 약한 대비는 조용한 느낌을 받을 수 있다.
낮은 채도 사용 사례
5. 전체적으로 낮은 채도를 사용할 경우 조용하고 평화롭고 후퇴되어 보인다.
약한 대비를 심하게 할 경우 오른쪽 사례와 같이 정보 전달이 흐릿하게 보일 수 있다.
낮은 채도 사용 사례 2
6. 전체적으로 낮은 채도를 사용했지만, 강렬한 컬러와 강한 대비로 정보 전달이 선명하다.
높은 채도 사용 사례
7. 전체적으로 높은 채도를 사용할 경우 눈이 쉽게 피로할 수 있으며, 다른 내용들이 잘 보이지 않게될 수도 있다.
색상 만으로 의미를 구분하지 말라
- 중요한 정보를 표현할 때 색상에만 의존하면 안된다.
- 이미지의 STOP 표지판은 어느 나라에서도 같은 컬러, 같은 형태를 띄고 있다.
이 표지판과 같이 색상과 형태를 결합해 전달하려는 정보를 사용자가 이해할 수 있게 도와야 한다
정리하자면,
전달하려는 정보를 선명하게 보여주고 싶을 땐 강한 대비를 염두하며 컬러를 사용해야 한다.
흰 배경은 눈을 지치게 하므로, 테블릿 관련 제품일 경우 다크 모드를 권장한다.
-> 만약 흰 배경을 사용할 경우 간격을 좁게 가져가는 것이 좋다.
색상에만 의존하면 안되며, 색상과 형태를 결합해 전달하려는 정보를 사용자가 이해할 수 있게 도와야 한다.