리디의 ‘블루’를 찾아서
하나의 컬러를 위한 기나긴 실험의 여정
컬러는 브랜드와 제품(서비스)의 가장 기본적인 언어이자 시각 자산이다. 컬러에 따라 사용자 경험이 달라지기도 하고 브랜드를 인지하는 방법이 달라지기도 한다.
그중에서도 리디 프로덕트 디자인팀에게 컬러란 앱부터 모바일/데스크톱 웹, 뷰어 등 여러 제품의 사용자 경험에서 가장 중요한 요소이다. 특히 어떤 환경에서도 일관적으로 적용할 수 있도록 접근성이 좋아야 하는 것은 물론 사용자들이 장시간 편안하게 제품을 이용할 수 있도록 가시성/가독성 또한 좋아야 한다.
이렇듯 컬러는 브랜드와 제품에 대한 모든 일련의 과정에 세세하게 적용되기 때문에 대표 컬러를 변경하거나 컬러 시스템을 구축하는 일은 매우 복잡한 일이다.
그럼에도 우리는 오랜 기간 사용해왔던 기존 리디의 블루 컬러를 떠나 새로운 블루를 찾아 떠나기로 했다. 문제점을 파악하고 해결했지만, 또 다른 문제와 맞닥뜨리고 브랜드 리뉴얼에 맞춰 다시 새로운 블루 컬러를 찾아 디자인 시스템을 구축하기까지. 앞으로 5년, 아니 10년의 서비스 경험을 이끌어가기 위해 반드시 필요했던 리디의 블루 컬러 실험의 여정을 공유한다.
리디 = 블루의 공식
하나의 답이 나오지 않는다면 공식을 다시 살펴볼 필요가 있다.
리디 서비스의 특징은 위 단락에서도 언급했듯이 앱부터 모바일/데스크톱 웹과 PC뷰어, 이북 리더기인 리디페이퍼까지 다양한 제품이 있다는 것이다. 특히 한 사람의 고객이 작품을 탐색 - 구매 - 감상하기까지의 과정에서 여러 제품을 동시다발적으로 사용하는 경우가 많다.
A라는 사용자로 예를 들면, A의 지하철 출근길에서 판타지 웹툰을 볼 때는 앱을, 퇴근 후 침대에서 19금 로맨스 웹소설을 볼 때는 모바일 웹을, 여가 시간 소파에서 에세이를 볼 때는 리디페이퍼를 통해 작품을 경험한다.
이렇듯 다양한 환경에서 여러 방식의 제품을 만나는 사용자들에게 '리디는 하나의 목소리로 일관된 경험을 주고 있는가?'라고 묻는다면 긍정적인 대답을 얻기는 쉽지 않을 것이다. 10년 동안 리디는 큰 구조적인 변화 없이 새로운 기능을 덧붙이고 부분 개선하는 방식으로 제품을 운영해왔기 때문에 UX적으로도, 시각적으로도 Seamless한 경험을 주지 못하고 있었다.
어떤 환경에서도 일관된 경험을 주기 위한 관문. 우리는 첫 번째로 제품의 가장 기본적인 언어이자 리디의 대표 시각 자산인 리디 블루 컬러를 살펴보기로 했다.
Step 1. 진단 - 기존 블루 컬러 살펴보기
대대적인 브랜드 리뉴얼을 준비하기로 회사의 결정이 내려졌다.(브랜드 리뉴얼 글 참고) 당시 리디는 여전히 '전자책 회사' 또는 '마니악한 장르가 메인인 서비스'로 대중들에게 인지되고 있었기 때문에 더 넓어진 사업 영역에 걸맞은 이미지 변화와 복잡해진 서비스 구조의 개편이 필요했다.
하지만 당연하게도 대대적인 리뉴얼에는 오랜 시간이 필요하다. A에서 Z로 한 번에 점프하기는 어렵기 때문에 주어진 상황에 맞게 최대의 효과를 얻을 수 있는 방법을 찾아야 했다. 우리는 테스트의 일환으로 공수 대비 사용자들이 쉽게 시각적 변화를 체감할 수 있는 컬러를 변경해보기로 했다. 리디의 브랜드 컬러인 블루 컬러 변경을 통해 기존 이미지를 조금이라도 개선해 보자는 의견이 모였기 때문이다.
본격적으로 기존 제품 내에서 사용되는 블루 컬러를 살펴보기 시작했다.
블루 컬러는 브랜드 컬러임과 동시에 제품에서 기능적인 역할을 하는 중요한 컬러로 사용되고 있었는데, 기존 컬러 시스템에서 정의만 되어있을 뿐 실제 화면에서는 불필요한 컬러들이 다수 사용되고 있었다. 다시 한번 컬러 시스템을 재정립하기 위해 사용처가 모호한 컬러들을 정리하고 필수 색상들을 취합하기로 했다.
Step 2. 실험 - 시도해볼 수 있는 새로운 블루 컬러 찾기
문제점을 파악하며 컬러 변경 작업에 대한 필요성이 명확해졌다. 다음 단계는 기존 블루 컬러에서 어느 정도의 변화를 주는 게 좋을지 고민할 단계였다.
블루 컬러는 사용자들이 리디하면 떠올리는 대표적인 시각 자산이기 때문에 (사실 이거 하나가 전부였다고 말하는 게 더 나을지도 모르겠다.) 기존 리디가 가지고 있는 이미지와 너무 동떨어지지 않으면서, 사용자들이 어려움 없이 받아들일 수 있는 그 적정선을 찾아야 했다. 또한 다양하게 쓰고 있던 블루 컬러를 실제 사용할 컬러 중심으로 정리해야 했기 때문에 제품 내 여러 상황에서 블루 컬러가 쓰이는 화면들을 검토하며 기능적으로도 적합한 톤을 찾는 작업을 진행했다.
그러던 중 기존의 블루 컬러가 눈이 편하다는 장점은 있지만 칙칙하고 물 빠진 듯한 탁한 인상을 준다는 점에 초점을 맞췄고, 새롭게 적용할 블루 컬러는 기존보다 선명한 인상으로 느껴지는 컬러를 고민하기 시작했다.
당시 리뉴얼 프로젝트를 앞둔 시점이었다. 변화를 줄 수 있는 요소가 딱 '컬러' 하나뿐이다 보니 티도 안 나는 약간의 차이보다는 적정선 범위에서 Max치의 수준까지 나름 과감한(?) 테스트를 해보기로 했다.
애매한 채도를 만드는 Red의 31 수치를 0으로 줄이고, 하늘색보다는 파란색에 가깝게 느껴질 수 있도록 Green을 140에서 115로 줄였다. 또 컬러감에서 깊은 바다와 세련되고 선명한 인상을 줄 수 있도록 Blue를 255까지 끌어올렸다. 그렇게 선택한 #006EFF 컬러가 기능적으로도 제품에 적합한지 검토 후 제품에 빠르게 적용했고, 배포 후 사용자들의 반응을 살펴보았다.
Step 3. 점검 - 변경한 블루 컬러의 적합성과 사용자 반응
이미지 변화, 컬러 취합이라는 목표 아래 진행되었던 1차 블루 컬러 테스트는 일단락되었지만, 제품 개선에는 끝이 없듯 배포 이후 문제점과 아쉬운 점이 보이기 시작했다.
변경된 블루 컬러는 기존보다 명도를 낮추고 채도를 올려 결과적으로 기존 대비 선명한 이미지는 얻었지만 다양한 고객 불만을 마주하게 되었다. UI 내 리다무 디자인에서 사용하는 뱃지의 사이즈 변경 없이 컬러만 변경되었기 때문에 기존보다 눈이 아프다는 TOC가 상당 접수되었고, 다크 모드에서도 블랙 배경과 대비가 심해 눈의 피로도를 주어 오히려 콘텐츠를 탐색하고 감상하는 데 방해가 될 수 있다는 문제점이 거론되었다. 또 다양한 작화와 함께 사용해야 하는 마케팅 영역에서 블루 컬러가 작화에 묻히는 경향이 있어 컬러 활용의 범용성이 떨어질 수 있다는 내부 의견도 있었다.
*리다무 : 리디의 기다리면 무료 연재 서비스
*TOC : Tears Of Customoer. 리디의 CS 시스템
아쉽게도 우리는 이러한 문제점과 사용자 반응을 똑바로 인식하고 곧 있을 브랜드 리뉴얼 프로젝트에서 또 한 번의 컬러 테스트를 감행하기로 했다. 이전 테스트의 아쉬움을 반복하지 않고자 컬러 변경뿐 아니라 지속 가능한 디자인 시스템을 구축할 것을 다음 3가지 목표로 설정하였다.
리디 서비스의 방향성이 잘 나타나는 블루 컬러를 찾을 것
다양한 환경에서 눈이 편안하고 사용자 경험에 방해가 되지 않는 블루 컬러를 찾을 것
다크 모드 대응이 가능한 장기적으로 건강한 컬러 시스템을 만들 것
다시 Step 1부터 3까지의 반복
브랜드 리뉴얼에 맞춰 새로운 리디 블루가 나오기까지
2021년 6월, 본격적인 브랜드 리뉴얼 프로젝트가 시작되었다. BX팀에서 새로 기획하고 있는 브랜드 방향성에 맞는 컬러를 한 번 더 조정해야 할 필요가 생겼다. 프로덕트 디자인팀은 지난 테스트에서 시행착오를 겪으며 새롭게 설정한 목표를 상기하고 새 컬러를 결정할 준비를 했다.
리뉴얼을 진행하며 BX팀에서는 다양함, 모두, 브로드함과 같은 키워드로 뽑아냈고, 서로 다른 취향의 고객들을 모두 담겠다는 브랜드 정의를 정립하는 과정에 있었다. 이에 지난 제품 단의 테스트로 선택되었던 #006EFF 컬러는 이미지적으로 브로드함(Broad)보다는 엣지(Edge)의 느낌을 주는 컬러이기 때문에 새로 기획되고 있는 브랜드 방향성과 맞지 않다고 판단했다.
BX팀에서 지향하고 있는 브로드한 이미지의 중성적인 브랜드 정서를 가지고 있으면서, 기능적으로 넓은 면적에 사용되거나 복잡한 작품 배경 사이에서도 묻히지 않고, 다크 모드에서도 대응할 수 있는 가시성을 모두 해결하는 컬러는 파란색보다는 하늘색 계열에 가깝다는 판단을 내렸다.
먼저 BX팀이 이런 점들을 고려해 테스트 과정을 거쳐 하늘색 컬러를 선정했고, 그 범주에서 제품에 적용했을 때 기능적으로 문제가 없는지 프로덕트 디자인 팀에서 검토했다. 미세하게 조정하는 단계를 거쳐 최종적으로 #1E9EFF를 리디 블루로 결정해 컬러 디자인 시스템을 정리해나갔다.
리디의 ‘블루’를 찾는 여정의 끝
결국 하나의 답은 아니지만 우리는 지금의 답을 얻었다.
드디어 2022년 3월 브랜드 리뉴얼 런칭에 맞춰 리디의 모든 제품에 최종 결정된 블루 컬러가 적용되고 배포되었다. 물론 기대와는 달리 드라마틱하게 긍정적인 반응을 얻을 수는 없었다. 오랜 시간과 여러 번의 테스트를 거쳐 최종 결정된 컬러였음에도 불구하고, 리뉴얼 직후에는 주로 변경 전 블루 컬러가 더 좋다는 고객의 반응이 보여 아쉬운 마음이 들기도 했다.
하지만 우리는 서비스의 특성상 심미성 보다는 제품의 기능 면에서 최적으로 안정적이고 활용적인 컬러를 찾을 의무가 있다. 물론 브랜드가 앞으로 나아갈 방향에 맞추는 것 또한 필요하다. 컬러라는 것은 정말 취향에 따라 극명하게 갈리는 영역인 만큼 이번에 우리가 찾은 리디의 블루 컬러가 하나의 정답은 아닐 수 있지만 우리는 많은 고민과 테스트 끝에 지금의 답을 찾았다고 생각한다.
남은 프로덕트 디자인팀의 숙제 중 하나는 이번 과정을 통해 얻어낸 답에 맞춰 아직 새로운 블루 컬러가 적용되지 않은 제품의 페이지들도 순차적으로 조금씩 적용해 나가는 것이다.
앞으로도 우리는 사용자들이 리디라는 푸른 바다에서 각자의 취향에 맞는 이야기에 수영하길 바란다. 결국 하나의 정답은 아닐지라도 우리는 끊임없이 고민하고, 실험하며 우리만의 답을 찾아갈 것이다.
리디 컬러 프로젝트 참여 작업자 후기
정희 ㅣ 프로덕트 디자인팀 팀장
사용자들은 갑작스러운 '변화'를 불편하게 느끼기도 한다. 익숙한 것이 편하고 안전하다고 느끼는 것은 인간의 당연한 심리이다. 그렇기 때문에 지난 1~2년 동안의 리디의 변화를 온몸으로 체감했을 사용자들에게는 이 변화가 불편하고 성가신 일이라고 생각될지도 모른다.
하지만 서비스적으로 모두가 앞으로 나아갈 때 혼자 멈춰있는 것은 더 이상 현상 유지가 아니기에 우리는 더 나은 방향을 위한 변화의 걸음을 선택했다.
프로덕트 디자인팀의 그 첫 스타트를 '블루 컬러의 변경'으로 끊었기 때문에 이 프로젝트는 '출사표'라는 데에 의미가 있다. 변화의 흐름이 이제 막 시작되었고 앞으로 쉽지 않은 여정이겠지만, 더 단단한 서비스가 되기 위해 우리는 한 걸음 한 걸음 나아갈 것이다.
최봉호 ㅣ 디자인그룹장
리디를 오랫동안 대표했던 컬러를 바꾸는데 큰 결심이 필요했다. 하물며 1년 동안 두 차례의 컬러 변경은 신중해야 했다. 하지만 기존의 컬러로 리디가 진화해 나가기에는 한계가 있다고 느껴졌다. 디자인 그룹은 리디를 대표하는 컬러를 찾기 위해 다양한 실험을 했다. 우리의 브랜드 자산, 비즈니스 방향성과 서비스 사용성 그리고 고객의 의견까지 고루 담아내고자 했으며 무엇보다 어느 한쪽으로 치우치지 않고 균형을 잡기 위해 노력했다. 기존의 컬러에 익숙한 고객들이 이 변화에 많은 불만을 토로했지만 지금의 선택에 영향을 준 것 또한 고객이다. 많은 테스트와 심사숙고해서 결정한 컬러인 만큼 오랫동안 사용될 수 있기를 기대해 본다.
주원식 ㅣ BX팀 팀장
리디가 국내 커뮤니티들 사이에서 일명 '파란 집'으로 불린다고 한다. 그만큼 블루 컬러는 리디의 '유의미한 자산'이자 '상징'으로 자리 잡았기 때문에 리뉴얼을 진행하면서도 블루 외에 다른 컬러는 고민할 필요가 없었다. 블루로 상징되는 리디에 어울리는 컬러값은 사용성 관점에서 고민했는데 기존 컬러 히스토리를 보며 보완점을 찾다 보니 현재의 컬러로 좁혀졌다. 리디의 새로운 컬러를 선택하기 위해 소비자 관점을 고려한 상징성뿐 아니라 다양한 환경에서의 사용성까지 깊게 고민할 수 있었던 실험과 과정이 즐거웠다.
©️RIDI Corporation
Projected by RIDI Product Design Team
Drafted by Hee Jung, Dahye Kim l RIDI Product Design Team
Designed by Dahye Kim ㅣ RIDI Product Design Team
Edited by Hyesoo Lee ㅣ RIDI BX Team
Cover Designed by Dahye Kim ㅣ RIDI Product Design Team
Published by RIDI Design Center
