프로덕트의 컬러팔레트는 달라야합니다
예측과 사용 패턴 분석이 핵심이예요.
'컬러는 특정 서비스를 쉽게 떠올릴 수 있는 강력한 힌트다.'
디자인을 전공했다면 다들 익숙하게 들어본 문장이죠? 저도 ‘컬러는 브랜딩에 포함된 요소다’라는 생각이 강하게 박혀있어요.
그런데 컬러가 오직 브랜딩만의 영역이라면, 앱에 활용될 컬러팔레트는 BX 디자이너에게 맡기고 프로덕트 디자이너는 컬러팔레트가 완성되기까지 기다리기만 하면 되는 걸까요?
컬러팔레트에 대한 제 상식을 의심하게 된 건 작년부터였어요. 제가 속했던 서비스의 브랜드 컬러를 BX 팀이 개편해 주시면서 시작됐지요.
개편 전 브랜드 컬러는 어째서인지 좀 탁한 오렌지색이었는데요, 프로덕트 팀은 이 오렌지색을 버튼 바탕에 넣고 검정 글씨를 올리는 조합으로 버튼을 만들어 썼었어요. 그런데 이 조합은 사이트를 전체적으로 어두워 보이게 했어요.
다크한 인상을 걷어내고자 버튼 글자 색을 흰색으로 바꿔본 적도 있는데요, 그렇게 하면 인상은 좀 밝아지지만 웹 콘텐츠 접근성 지침을(WCAG) 통과하지 못하는 수치가 나왔어요. 한마디로 버튼 글자가 잘 안 읽혔습니다.
왼쪽: 브랜드컬러+검정 글씨 / 오른쪽: 브랜드컬러+흰 글씨결국 BX팀이 칼을 빼 들었어요. 오렌지색은 수술에 들어갔고, 담당 BX디자이너님은 온종일 오렌지색의 캘리브레이션을 보면서 색을 조정하느라 눈동자색이 오렌지색이 되어버리신 게 기억이 나요.
그 노력의 결과, 새롭게 등장한 오렌지 컬러는 마치 오렌지 탕후루처럼 맑고 예뻤습니다. 프로덕트 내에서 포인트의 역할을 톡톡히 할 브랜드 컬러였지요.
그런데 문제는, 우리 서비스엔 오렌지 컬러가 너무 많이 사용되고 있었던 거예요. ‘포인트 컬러’라는 의미가 무색할 만큼 화면 여기저기에 도배된 오렌지들을 바라본 프로덕트 디자이너들은 ‘이건 너무 눈이 아프다!’라는 결론을 내리게 되었어요.
결국 프로덕트는 팀은 이전의 탁한 오렌지 컬러를 그대로 쓰게 되었습니다.
전 여기서부터 혼란스럽기 시작했어요. 브랜드를 상징하는 컬러가 그래픽 따로, 프로덕트 따로라니? BX팀과 프로덕트 팀은 같은 컬러팔레트를 써야 서비스에 일관된 브랜드의 경험을 전달할 수 있는 게 아니었나요?
이렇게 브랜드 컬러가 갈팡질팡 왔다 갔다 하면 유저가 혼란스러워서 서비스를 이탈하면 어떡하죠?
그러나 제 극단적인 상상과는 달리, "오렌지 컬러가 서로 이질적이라 거슬려요. 왜 오렌지 컬러가 왔다 갔다 하나요?"라는 말을 하시는 유저는 없었습니다.^^;;
그래서 오히려 '왜 그런 불만이 없지'하고 궁금해지기 시작했어요. BX와 프로덕트 팀이 같은 컬러팔레트를 공유하는 게 정말 당연한 거였을까요?
궁금함에 대한 답은 앱에 사용될 컬러팔레트를 직접 만들면서 찾게 되었습니다.
제가 컬러팔레트를 직접 만들게 된 계기는 타 회사의 브랜딩팀으로부터 전달받은 브랜드 컬러로 단계별 명도 팔레트를 만들어야 했을 때였어요.
입시 미술을 해보신 분들은 아마 ‘구 채색하기’를 다 해보셨을 것 같은데요, 그냥 동그라미일 뿐인 원이 구로 보이게끔 덩어리 감을 내려면 명도별로 색이 쌓이도록 채색해야 되죠. 그런데 이 덩어리를 쌓을 때 블랙을 섞어서 칠하면 색감이 죽어서 안 예쁜 구가 완성돼요. (제가 다녔던 학원에서는 그걸 ’ 썩은 구’라고 불렀어요. 저는 구를 특히 못해서 수많은 썩은 구를 만들었었습니다. 그리운 추억이네요)
레드브라운과 보라를 조금 섞어서 명도를 내주는 게 숨은 비결이랄까요...색을 맑게 유지하면서 덩어리 감을 내려면 블랙을 섞는 게 아니라 비슷한 색이지만 조금 더 채도가 높고 명도는 낮은 컬러를 섞어서 칠해주는 것이 요령이었어요. 저 역시 디자인 대학을 들어가기 위해 입시미술을 했던 원숭이어서, 이때의 경험을 바탕으로 컬러 팔레트를 만들었죠. 심혈을 기울여서 총 열 단계로 이루어진 맑고 예쁜 컬러팔레트를 뽑아냈어요.
문제는 이 팔레트의 색깔을 프로덕트에 적용해 보니 모든 컬러가 자기주장이 너무 강했던 거예요.
우리만의 자유로운 RED COLOR, 우리-우리만의 자유로운 RED ERROR레드를 포함해 팔레트의 모든 컬러가 독립적인 브랜드 컬러라고 볼 수 있을 정도로 존재감을 뿜뿜 했어요. 결국 전달받은 최초의 브랜드 컬러를 빼고 팔레트에 들어간 모든 컬러는 한 개도 프로덕트에 쓰이지 못했습니다.
애써 만든 팔레트의 90%가 못 쓰는 컬러라니. 왠지 선택받지 못한 컬러들에게 미안한 마음이 들더라고요. 어쩌다가 이렇게 자기주장이 강한 컬러들만 모였는지 원인을 알아내서 팔레트 활용도를 더 높이고 싶었어요.
이유를 알아내기 위해 제 컬러 사용 패턴을 관찰해봤습니다. 왜냐고요? 이 앱은 일단 저 혼자 만들고 있었거든요...
프로덕트와 시스템을 혼자 하는 원숭이에게는 유체이탈 스킬이 유용합니다영혼을 밖으로 뺀 채 제 컬러 사용 패턴을 관찰해 보니, 주로 컬러의 투명도를 변경해서 쓴다는 패턴을 발견했어요. 따라서, 화면 바탕색과 컬러가 섞인 색을 제 팔레트에 넣는다면 이전보다 팔레트 활용도가 올라간다는 가설을 세우게 되었지요.
제가 활용하는 방식대로 팔레트를 만들기 전에 그렇게 해도 탈이 없는지 확인하는 실험이 필요했습니다. 돌다리도 두들겨보고 건너야 하니까요.
이때 테스트 컬러로 레드를 썼었는데요, 에러케이스에 많이 쓰이기 때문에 브랜드 컬러 다음으로 가장 많이 활용되는 컬러였기 때문이에요.
프로덕트 컬러팔레트를 위해 컬러를 테스트하실 분들 중 어떤 컬러로 시작하실지 애매하다면 레드로 테스트해 보는 것을 추천드릴게요!
다시 본론으로 돌아와서, 기존 레드 팔레트의 중간 컬러를 기준으로 1번부터 5번까지는 라이트모드 배경에 테스트 컬러의 투명도 값을 점차 높이고, 6번부터 9번 까지는 다크모드 배경 위에 테스트 컬러의 투명도 값을 점차 떨어뜨려 준 다음 컬러 픽커로 HBS(Hue-Brightness-Saturation) 값을 찍어봤어요.
그랬더니 H값은 변화 없이 유지되고, B값은 일정하게 떨어졌어요. S값은 H와 B에 영향을 받았는데, B가 어두워질수록 S는 미세하게 올라갔고 그 변화폭은 수치적으로 약 10~15 정도였습니다.
흰 바탕/ 검은 바탕 위에 레드의 투명도를 조정해서 겹쳐보는 광기의 실험 장면이 실험에서 발견한 HBS설정값을 ColorBox에 넣어서 함수를 활용한 수치값으로 컬러팔레트를 만들어줬어요. 새롭게 만들어진 이 팔레트의 컬러들은...
... 솔직히 이전 버전보다 예뻐 보이진 않았습니다.
예쁘지는 않지만 프로덕트의 컬러팔레트 활용도는 많이 올릴 수 있었어요. 무엇보다 하나의 컬러 팔레트에서 라이트/다크모드를 전부 대응할 수 있게 된 게 가장 큰 수확이었죠 야호!
새롭게 만든 레드 팔레트의 800번대 컬러를 적용해 준 텍스트필드이 과정을 통해 프로덕트에 사용되는 모든 요소는 실제로 프로덕트에 넣어봐야 적합성을 판단할 수 있다는 결론을 내리게 되었어요.
그리고 프로덕트 외부의 사람은 상대적으로 그 요소의 적합성을 판단하거나 어떻게 요소를 만들어야 할지 이해하는 게 어렵겠다는 생각이 들었습니다.
맨 처음 얘기했던 오렌지 버튼 사례와도 연결 지어 보면, 새롭게 바뀐 브랜드 컬러가 프로덕트에 적용된 모습이 어떤지, 기준이 되는 브랜드 컬러에서 파생된 나머지 컬러들은 프로덕트에 어떻게 활용할 수 있을지 BX 디자이너는 프로덕트 디자이너보다 자세히 알 수 없는 게 당연해요.
하지만 브랜드의 성격을 외치는 컬러는 틀림없이 BX 디자이너의 영역이라고 생각합니다.
브랜드가 사람들의 인지에 남기 위해 어떤 노력을 해야 하는지, 우리 서비스의 가치를 표현하는 컬러는 무엇이 되어야 하는지 프로덕트 디자이너는 BX 디자이너보다 모를 수밖에 없어요. 고민의 시간과 양이 다르니까요.
결론은, BX 디자이너와 프로덕트 디자이너가 함께 쓰는 ’ 브랜드 컬러’는 하나로 정하되 그 이후의 활용은 각자 팀의 목적을 이루기 위해 적합한 방향으로 파생시키는 것이 건강한 방향성이란 생각이에요.
생각해 보면 일관된 아름다움을 전달하기 위해 활용되는 컬러팔레트와 편리한 사용성 및 정보 전달을 목적으로 둔 컬러팔레트는 양상이 다를 수밖에 없지 않을까요? ‘Form Follows Function’이란 디자인의 유명한 명제를 떠올려보면 더더욱이요.
제가 내린 결론은 아직 적은 경험치에서 얻어진 결론이라 분명 허술하고 틀린 부분이 많을 거예요. 제가 이 글을 쓴 이유 또한 ‘정답을 알려드립니다’가 아니라, 현재 제 수준으로는 여기까지밖에 알 수 없어서예요.
이 불안한 결론을 세상에 내보내는 이유는, 이 결론에 부딪히는 더 많은 생각들을 만나고 싶어서입니다. 그렇게 더 단단하고 깊은 지식을 쌓고 싶어요. 이 원숭이를 가르쳐주세요!
이전 게시물에서 다뤘던 디자인시스템에 대한 글도 결국 ‘컬러’에서 출발했던 것처럼, 저에게 있어 컬러는 어려우면서도 파면 팔수록 재미있는 영역 같아요. 컬러는 디자인을 초월해서 모든 시각물의 파운데이션이라 그런 것 같아요. 눈에 보일 만큼 구상적인데 개념은 추상적이라는 점도 매력적입니다.
저는 색채 연구가가 아니고 스타트업에서 프로덕트 디자인을 하는 원숭이일 뿐이라 매분 매초 온 신경을 컬러에 쏟을 수는 없지만, 일하면서 틈틈이 공부한 내용과 새롭게 알게 된 지식을 앞으로도 여기에 공유해 볼게요. 약속! ㅎㅎㅎ
이번에도 긴 글 읽어주셔서 감사합니다 :)
이 글에서 등장한 ColorBox 프로그램 써보기
*예전에는 꼭 포함하고 싶은 컬러도 추가할 수 있었는데, 업데이트 이후로 그 기능이 사라졌습니다ㅠㅠ 저는 업데이트 전 Colorbox를 활용했었어서 커스텀이 보다 자유로웠어요.
대신, 필수 Key Color을 넣고 컬러 스케일을 만들고 싶으신 분들께는 Leonardo를 추천합니다. 단, Colorbox보다 툴을 이해하고 활용하기가 조금 더 어렵다는 점 참고해 주세요!
https://leonardocolor.io/theme.html#
웹 콘텐츠 접근성 지침(WCAG)
Web Content Accessibility Cuidelines-줄여서 WCAG라고 부르는데요, 핵심은 '웹에서 이게 읽혀?'라고 생각하시면 쉬워요. 저는 주로 Contrast Finder라는 사이트를 이용해서 WCAG 수치를 테스트합니다.
https://app.contrast-finder.org/?lang=ko
