스타트업에서 컬러 시스템 리뉴얼하기 02
실제 환경을 기반으로 Primary Color 설정하기
https://brunch.co.kr/@shg8234/3
Gray Scale을 다뤘던 이전 글에 이어 두 번째 글입니다.
이번 시간엔 Primary color를 정한 과정에 대해 이야기해볼게요.
기존 Primary color의 문제점
기존 블루 컬러의 이미지는 포멀함이 강해 푸망의 아이덴티티를 나타내기에 다소 아쉬움이 있었고, 앞서 말했듯 아이덴티티가 재정립됨에 따라 Primary Color 또한 변경해야할 필요성이 있었습니다. 또한 푸망의 UI를 살펴보면 주요 컬러에 따른 Scale이 부여된 지정값 없이 투명도로 조절되고 있었기에 Color Scale이 필요했습니다.
아예 파란 색상에서 다른 색으로 바꾸는 것도 고려를 했었지만 이때 당시 푸망은 나의 심리 상태를 데이터화 하는 기능을 준비하고 있었기에 신뢰감을 줄 수 있는 인상을 남기고 싶었어요. 따라서 파란색은 유지하되, 버라이어티한 푸망의 성격을 반영하여 퍼플톤을 가미하자!라고 방향성을 잡았습니다.
Test
RGB값 중 B값은 그대로 유지, R값과 G값만 조정하여 블루톤 테스트를 해보겠습니다.
Tone Test (구버전의 BI)R값을 더하고 G값은 덜어주었습니다. 맨 상단은 다소 임펙트가 없어보이나 맨 하단은 너무 채도가 높아 강렬한 인상으로 다가옵니다. 생기있는 푸망의 이미지를 담고싶었기에 세 번째와 네 번째로 추리게 되었습니다.
이 다음으로 가장 중요하게 체크해야할 한 가지가 있습니다. 바로 기기 테스트인데요. 맥북과 모니터에서 보는 색상의 차이는 극도로(진짜 진짜!) 다르게 보입니다. 휴대폰과 회의실의 TV에서 보는 색상도 제각각 너무 달라 어느 기기 화면을 기준으로 판단해야할지 난감한 상황이였지요. 충분한 고민 결과, 어느 컬러든 기기에 따라 색상이 다르게 보인다는건 감수해야하는 부분이라고 생각했고 시각적으로 가장 색상 차이가 적게 보이는 네 번째 #4164FA로 최종 결정을 하게 되었습니다.
Scale 설정하기
두 번째로 투명도로 조절하고 있었던 문제를 해결하기 위해 Primary Color Scale을 정의하여야합니다.
일정한 RGB값을 가진 Gray를 명도값을 이용하여 단계를 만들었던 것과 달리 색채가 있는 색상은 고려해야할 속성이 달라집니다. 고개를 돌려 주변에 그림자가 있는곳을 살펴보세요. 혹은 빛이 밝게 들어오는 커튼을 상상해보세요. 그림자가 있는 곳은 어쩐지 더 색이 강렬해지지 않았나요? 밝게 빛이 들어온 부분은 색이 바래지 않았나요?
이와 같은 자연법칙을 이용하여 하나의 색상을 중심으로 Scale을 설정하는 법은 HSB를 조정하는 것입니다.
H는 Hue(색조), S는 Saturation(채도), B는 Brightness(밝기)입니다.
아래 예시 이미지를 하나 보겠습니다.
출처: unsplash이 이미지에서 살펴볼 부분은 강렬한 오렌지 빛의 배경 색상입니다. 그림자로 어두워진 부분과 빛으로 밝아진 부분의 HSB값을 살펴보겠습니다.
두 가지의 색상을 비교해보니, 색상이 밝아질 때 H(색조)값과 B(밝기)값은 올라가고 S(채도)값은 내려갑니다. H값은 단순히 말해 0에 가까워질수록 빨간색, 100에 가까워질수록 파란색이라고 생각하면 이해하기 쉬운데요. (더 자세한 설명은 정윤선님께서 적어주신 이 아티클을 참고하시는걸 추천드립니다.) 상단의 예시에서도 어두운 색상에선 색이 더 진해지므로 H값은 0에 가까워지게 되었습니다. 저는 이 현상을 이해할 때 빛과 색이 만나면 빛이 색을 가져간다라고 생각하며 작업을 했어요.
이와 같이 자연법칙에 따르면 색이 어두워지면 채도가 높아지고, 밝아지면 밝기가 높아지는 대신, 채도가 낮아집니다. 이 법칙을 색상에 적용한다면 더욱 자연스러운 scale이 나올 것 입니다.
그렇게 만들어진 primary color scale 입니다. 시각적으로 자연스러워 보일 수 있도록 약간의 조정도 더해주었습니다.
완성된 Primary Color system
현재는 500과 200을 위주로 사용하고 있지만, 다양한 베리에이션을 설정해놓으니 BI 관련 그래픽 작업할 때도 언제든 사용할 수 있다는 점이 편리했습니다. 이러한 이유와 마찬가지로 시스템 컬러의 베리에이션도 설정해주면 추후 디자인하는데 용이하게 쓰일 수 있습니다.
개선된 System color현재는 다양한 배리에이션을 사용하고 있진 않지만, 경고문에 쓰이는 아이콘과 박스의 색상, 혹은 활성화 안내 디자인 시 색상을 효과적으로 사용할 수 있게 되었습니다.
마치며
두 번째 주제는 color system 정의한 과정에 대해 이야기 해보았어요. 입사 초반에 진행했던 이 프로젝트는 어려움의 연속이기도 했지만..! guideline을 정의하며 색상에 대해 더 깊이 배우게 되었고, 고민을 많이 할 수 있어 즐거웠던 프로젝트였습니다. 실은 WCAG를 기반하여 각각의 색상 조합들의 대비율도 함께 테스트 해보았는데요. 추후 이 시각 접근성에 대해서도 함께 다뤄보도록할게요.
이 글을 읽어주셔서 감사합니다.
