스타트업에서 컬러 시스템 리뉴얼하기 01
Gray Scale에 규칙과 톤 부여하기
안녕하세요! 디자이너 손하영입니다.
저는 현재 푸망에서 BX디자이너로 브랜딩을 맡고 있어요.
입사부터 지금까지 다양한 시각적 영역을 담당하여 프로젝트를 진행했죠.
제가 맡았던 디자인 시스템 프로젝트 중 두 번째로 나눠볼 이야기는 컬러 시스템입니다.
푸망의 Identity가 바뀌게 되면서 BI의 컬러와 시스템 컬러 또한 변경할 필요가 있었습니다.
Gray Scale과 Primary Color 등 플랫폼에서 쓰이고 있는 모든 시스템 컬러를 재정비하였어요.
기존에 있었던 컬러 시스템에 더해 새롭게 다듬어진 가이드라인 중 두 가지 영역에 대해 공유해볼까 합니다.
이번 글에선 Gray Scale에 대해 다뤄볼게요.
기존 스케일의 문제점
기존의 컬러문제점은 총 두 가지였어요. 첫 번째, 기존의 Gray Scale은 일정하지 못한 명도 값을 가져 급격하게 밝아지는 현상이 발생하고 있다는 점. 두 번째, Primary 색상인 블루톤과 맞지 않게 웜톤의 Gray Scale을 가지고 있었다는 점이었어요. 일정하지 못한 명도 값은 실제 UI에 적용할 경우 애매한 위계로 보이게 되어 컬러를 제대로 활용하지 못할 수 있어요. 또한 두 번째 문제점의 이유는 웜톤의 그레이 컬러일 경우 비교적 덜 선명해 보이고 올드해 보인다라는 단점이 있었거든요. 이러한 문제점을 해결하고자 다음과 같은 액션을 실행했습니다.
규칙성 더하기
따라서 일정하게 밝아지는 규칙을 더하고 쿨톤의 색상으로 조정을 진행했습니다. 쿨톤의 색상으로 조합하기 전, 컬러가 일정하게 밝아질 수 있도록 규칙을 더해볼게요.
기존의 Gray Scale ColorGray Scale의 규칙성에 관해 쉽게 설명해놓은 글이 있어 이를 참고하였습니다. 이 글에 따라 명도 값을 구한 결과, 2에서 4의 단계의 명도 값이 슈퍼 점프하고 있었네요. 이를 변경해보겠습니다.
일정한 RGB 값모든 흑백 색상의 RGB를 살펴보면 일정한 값을 가지고 있어요. 이를 이용하여 RGB 값을 Brightness를 구하는 식(RGB의 평균값)을 사용한다면 일정한 명도를 유지한 채 Scale을 유지할 수 있죠.
규칙성이 생긴 Gray Scale기존 Scale에 따라 여섯 단계로 이루어진 색상의 명도 값은 40씩 증가하며, 추후 더 세분화된 컬러가 필요할 경우 20 또는 10의 단위로 쉽게 쪼개 설정할 수 있게 되었습니다. 어떤 컬러를 기준으로 명도 값을 조정할지 감이 안 잡힌다면 가장 밝은 컬러부터 테스트해보세요. 주로 Gray Scale의 가장 밝은 컬러는 시스템의 배경 컬러로 쓰이는데요. 어두운 색상을 기준으로 명도 값을 조정할 경우 배경이 어두워 보이거나 흰색과 큰 차이가 없어지는 경우가 발생하니 이를 염두하시는 것이 좋아요.
규칙성이 더해졌다면 다음으로 톤을 조정해볼까요? 쿨톤의 Gray로 바꾸는 방법은 간단합니다.
규칙적인 명도 값을 유지한 채 RGB 값을 조정하는 것이죠. (RGB의 R은 Red, G는 Green, B는 Blue입니다.) 예를 들어 30, 30, 30의 RGB 값을 가진 그레이의 톤을 바꾼다고 가정할 때, 총합인 90을 유지한 채 1을 더하면 1을 빼는 식의 방법입니다. 따라서 저의 경우도 총합을 유지한 채 조정하였습니다. 웜톤에서 쿨톤으로 탈바꿈하기 위해 Red는 줄이고 Blue를 더해보겠습니다.
Tone Test이렇게 대조하여 봤을 때, 확실히 이전의 조정하지 않은 회색이 노랗다는 것은 느껴지지만 그 아래는 매직아이를 하고 보아도 감이 잘 안 잡히고 어떤 게 가장 적합한 색상 일지 알기 힘듭니다. 따라서 실제 UI 화면 중 하나를 데려와 테스트를 해보겠습니다.
Tone Test (구 버전의 BI와 UI)이렇게 보니 확실히 차이가 느껴집니다. 기존의 색상은 생각 이상으로 노란빛을 띠고 있었네요. 2번의 색상 또한 노란빛이 강하고, 3번과 4번은 파란색이 너무 가미되어 푸른빛을 띱니다. 따라서 이 테스트를 통해 가장 적당한 조합은 R-3, B+3이라는 답을 얻었습니다.
실제 스케일로 정리해볼까요? 결과는 다음과 같습니다.
변경된 Gray Scale이 과정을 통해 바뀐 색상입니다. 이름 또한 Primary Color와 통일하여 Gray 100~600 형태로 변경하였습니다. 이렇게 통일성을 가지면 직관적이고 외우기도 쉬우니 명칭은 가급적 통일하는 것이 좋습니다.
마치며
이번 글에서 Gray Scale 정의에 대해 공유해보았습니다.
복잡한 규칙성을 단순 명료하게 변경하는 법과 RGB 조정법을 통해 시각적 변화를 어떻게 줄 수 있는지에 도움이 되었기를 바랍니다. 다음 글에선 Primary Color에 대해 이야기해볼게요.
