컬러 시스템에 대한 고찰
나의 시선 #9 - 상대적 컬러 시스템
이번에 서비스 출시를 준비하면서 디자인 가이드 작업을 동시에 진행하게 되었다. 짧은 일정에 많은 화면을 뽑아내야 해서 디자인 가이드 역시 다듬을 여유가 없고 출시일을 미룰 수 없으니 컬러, 폰트, 공통 컴포넌트 등 기본적인 요소만 간단하게 정의를 하고 조금씩 개선하면서 완성도를 높여가자 생각했다.
서비스가 무사히 출시되고 간단하게 정리했던 디자인 가이드를 조금 다듬어서 정리를 해야겠다 생각하던 차에 정의해둔 '컬러 스펙트럼'이 눈에 거슬리기 시작했다.
일정한 간격을 가진 자연스러운
컬러 스펙트럼은 어떻게 만들 수 있을까?
아래 이미지는 늘 하던대로 감으로 만든 기존 black 컬러의 스펙트럼이다.
black 100을 기준으로 조금씩 밝아지도록 스펙트럼을 만들었는데, 자연스러워보이는 것 같은 느.낌.에 기.대.어 피커로 찍어 만든 스펙트럼이었다. 하지만 가이드를 정리하려고 다시보니 뭔가 어색했다. black100부터 300까지는 그나마 좀 자연스러웠는데 400과 500은 그 앞의 단계보다 차이가 크지 않게 느껴졌고, 800에서 급속도로 밝아져서 900에서는 그린빛이 도는 것 같은 느낌이었다. (물론 모니터에 따라 다르게 보일 수 있다.)
그리고 서비스의 포인트 컬러가 blue라서 black과 gray에도 blue의 쿨톤이 섞이도록 조정을 했었는데 중간중간 쿨톤이 왔다갔다해서 상대적으로 차갑고 따뜻한 느낌이 섞여보였다.
일정한 명도 간격을 가진 자연스러운 컬러 스펙트럼을 만들 수 있는 방법은 무엇일지 고민하기 시작했는데 '일정함'을 유지하는 방법은 결국 RGB의 수치를 조정하는 수밖에 없다는 결론에 도달했다. 아무리 매의 눈으로 컬러를 세팅한다해도 수치를 조정하는 것보다 일정할 수는 없기 때문이다.
수치로 명도 표현하기
RGB 수치를 조정해서 원하는 컬러를 표현하는 건 생각보다 어려웠고 내마음 같지 않았다. 원리 파악이 우선되어야겠다는 생각에 자료를 찾던 중 정희연님의 블로그에서 RGB와 HSB에서 명도를 계산하는 식을 찾을 수 있었다. (해당 글은 디지털 색에 대한 원리를 잘 설명하고 있으므로 꼭 읽어보기를 추천한다.)
정희연님의 블로그에서 찾은 RGB에서 명도를 계산하는 식위 계산식을 바탕으로 기존의 컬러 스펙트럼의 명도 간격을 계산해보았다.
역시 예상했던대로 간격에 규칙이 없는 무질서한 모습을 보여주고 있었다. 적게는 13, 많게는 40까지 차이가 나고 있었다.
테스트, 테스트, 테스트
컬러 스펙트럼 간 간격 수치를 맞추기 위해 첫번째는 기존 black 100을 기준으로 일정한 명도 간격을 가진 스펙트럼을 위해 (계산이 쉽도록) R, G, B 값에 각 30씩 더해보기로 했다.
(위) 기존 black 계열 스펙트럼, (아래) 계산식으로 일정 간격을 유지한 새 스펙트럼막상 명도를 조정해서 스펙트럼을 만들어보니 기존의 스펙트럼에 비하면 웜톤의 스펙트럼처럼 느껴졌고 간격 폭이 넓었던 탓인지 스펙트럼이 짧아졌다. 포인트컬러가 블루인만큼 black과 grey 스펙트럼에서도 쿨톤이 더 확실하면서 9개의 색상이 나오길 바랐다. 이미 9개의 색상이 다양한 화면에서 사용되고 있기 때문에 그 색상들을 대체할 색상의 수도 동일해야 했기 때문이다. 그래서 두번째는, 기준이 되었던 black 100의 수치를 조정해서 R과 B의 간격을 차이 나게 조정한 다음, 이 컬러를 기준으로 명도 계산식을 이용해 스펙트럼을 만들어보기로 했다.
(위) 기존 black 계열 스펙트럼, (아래) black 100의 수치를 조정하고 일정 간격을 유지한 새 스펙트럼 2기준 컬러인 black 100의 RGB값을 각 각 20, 30, 40으로 수치를 조정하고 여기에 각 25씩 더해 스펙트럼의 간격을 줬다. 첫번째에 비해 기존 스펙트럼과 유사한 쿨톤을 가지면서 9개의 스펙트럼을 뽑을 수 있었다. 계산을 쉽게 하기 위해 5단위로 잘라 테스트를 했지만 단위를 좁히면 더 미세한 조정이 가능해서 원하는 스펙트럼 안에서 규칙을 가져갈 수 있을 것이다.
그리고 이렇게 수치화된 스펙트럼은 기준 색만 변경하면 이어지는 색은 자동으로 계산이 가능하다는 장점도 있었다.
기준이 됐던 black 100의 값을 바꾸면 이어지는 200~900의 값은 동일한 기준으로 한번에 변경이 가능하다.어떤 컬러가 사용될지 예측 불가능한 곳에
상대성 컬러 시스템을 활용하면 어떨까?
당시 내부에서는 디지털 자산 중 하나인 카드*가 자산처럼 느껴질 수 있도록 화면에서 조금 더 '카드스러웠으면(?) 좋겠다'는 니즈가 있었고 '어떻게 하면 무형의 자산을 실존하는 것으로 느끼게 할 수 있을까' 고민이 많았다. (*여기서 '카드'란 블록체인의 NFT를 의미한다.)
나는 무형의 어떤 것이 실존하는 자산처럼 느껴지기 위해서 3차원의 물성이 추가되면 좋겠다는 생각을 했고, 그림자를 추가해 실존하는 느낌을 살려보기로 했지만 쉽지가 않았다. 우리 서비스는 카드를 보여주는 플랫폼으로써의 역할을 할 뿐, 이 화면에 표시되는 카드의 이미지와 배경 컬러는 온전히 카드를 발행하는 곳에서 결정하므로 변수가 많았기 때문이다.(오픈마켓과 상품 썸네일의 관계라고 이해하면 쉽다.)
이 말은 디지털에서 표현 가능한 1600만 개가 넘는 색을 대응할 수 있는 가이드가 필요하다는 말과 같았고, 그림자 하나 추가하는 것도 '모든 컬러에 대응 가능한가'가 제일 중요한 문제해결의 포인트였다.
처음에는 단순히 일정한 간격을 가진 스펙트럼을 만들고 싶어서 시작했지만 테스트를 하다보니 이렇게 계산식을 이용한 상대적인 컬러 시스템은 색을 예측할 수 없는 상황에서 활용하면 좋겠다는 생각이 들었다. 그래서 위의 컬러 스펙트럼을 만들던 것을 응용해 상대적인 값의 컬러 가이드를 이 화면에 적용해보기로 했다.
실험 1은 지정된 그림자 색(Black 30%)을 모든 배경색에 동일하게 적용을 했고, 실험 2는 설정된 배경색에 따라 수식을 적용해 상대적인 그림자 색을 적용했다. 밝은 색부터 어두운 색을 몇가지 뽑아 테스트를 진행했다. 어두운 배경색에서는 큰 차이가 없었지만 밝은 색 배경에서는 더 자연스러운 그림자 효과를 구현할 수 있었다. 만약 실험 1에서 지정된 그림자 색이 black이 아닌 다른 색이었다면, 밝은 색상 뿐만 아니라 그림자 컬러와 배경 컬러가 보색 관계에 있는 등 일부 상황에서 자연스럽지 않은 결과물이 나왔을 수 있다. 하지만 상대적인 컬러 시스템을 사용하면 배경색에 따라 그림자 색도 달라지기 때문에 앞서 얘기한 1600만 개 컬러에 1:1 대응이 가능해졌다.
문제는 없을까? 구현 시 내가 예상하지 못한 문제가 있지 않을까, 같이 일하는 개발자분들께 위 내용을 설명드리고 실험 2와 같이 구현했을 때 우려되는 문제가 있는지를 문의했다. 실험 1에 비해 HEX값으로 지정된 컬러를 RGB 값으로 변환하는 스크립트가 추가되기 때문에 개발 시간이 더 들긴 하지만 큰 차이가 있진 않고 그 외 우려사항은 없다는 답변을 받을 수 있었다. (야호!)
마무리
디자인 툴에서 적용한 수치와 실제 개발해서 나온 아웃풋 간의 차이가 있어서 개발자분과 값을 여러가지 바꾸며 테스트를 진행했고 최종적으로 수치값을 결정하여 카드 화면에 적용했다.
상대적 컬러시스템 가이드를 이용해 만든 카드 샘플 화면그동안은 예상 가능한 범위 안에서의 가이드 작업이 많아서 이렇게까지 다양한 케이스를 고민할 필요가 없었는데 이번에는 예상 불가능한, 아주 넓은 범위의 케이스까지 고려된 가이드를 만들려니 여간 어려운 작업이 아니었다. 최대한 많은 테스트를 하느라고 하지만 그 많은 경우의 수를 다 대응해서 테스트를 해볼 수도 없으니 말이다.
지금은 카드를 발행하는 업체에서 배경컬러를 지정하지 않아도 이미지 자체에서 컬러를 추출하여 적용하는 방법을 고민 중에 있다. 디자이너가 없는 조직의 경우 카드 이미지와 어울리는 배경색을 지정하는 것에도 어려움이 따르기 때문에 이미지 자체에서 어울리는 컬러를 추출하여 배경색으로 적용할 수 있다면, 파트너사의 고민은 하나 더 줄이고 우리 입장에서는 더 조화로운 카드화면을 구성할 수 있지 않을까 싶다. 아직은 아이디어 단계기 때문에 서비스에 적용하게 된다면 그 때 또 작업기로 남기도록 하겠다
