채널톡의 새 로고는 어떻게 만들어졌을까?

새로 적용된 로고는 친근하고 생동감있어요. 어느 상황에서나 적용, 확장 가능한 시각 언어를 갖고있으며 평범한 듯 하지만 최소한의 구별력을 갖도록 디자인되었습니다.

3월 초 채널톡이 리브랜딩이 발표되었습니다.(2월부터 개발) 새로운 로고는 왜, 어떻게 만들어졌는지 과정과 고민을 디자이너 입장에서 들려드리고자 합니다.

채널아이오? 데스크? 혼란해...

채널톡은 작년 말부터 이름을 현재와 같이 바꾸면서 브랜드 리뉴얼을 시작했다고 볼 수 있습니다. 그 전에는 국내 브랜드명은 '채널'로 관리자용 앱은 '채널데스크'로 부르면서 시장에 홍보하고 있었습니다. 당시 가장 컸던 문제는 브랜드 인지 부족이었습니다. 사용자(고객사)가 접하는 제품명과 관리자가 접하는 제품명, 심볼과 로고마저 모두 파편화 되어있어 일관된 브랜드로서 인지되지 못했고, 이는 SEO의 효율화에도 악영향을 끼쳤습니다. 실제로 미팅을 가면 데스크..? 채널아이오? 채널톡?으로 헷갈려하시는 고객사도 많이 마주쳤습니다.😢

두번째로는 엔드유저가 보게되는 채팅버튼 디자인이 너무 평범하다는 것이었습니다. 단순한 말풍선이었던 아이콘은 유사 브랜드와 혼동되는 문제가 있었고, 채팅 버튼에도 우리의 브랜드 정체성을 가미해서 누가봐도 알아볼 수 있게 하자는 팀의 바람이 생겼습니다.

새로운 얼굴이 필요해

우리는 고객이 채널톡을 만나는 어느 곳에서나 우리 브랜드임을 알아봐주길 원했습니다. 일련의 문제점과 니즈를 바탕으로 다음과 같은 몇가지 디자인 방향성이 정해졌습니다.

• 파편화된 브랜드 심볼이 통일되어야 한다.

• 단번에 인지 가능한 정체성이 묻어나야 한다.

• 라이브챗이 가진 즉시성을 표출해야한다.

• 쉽고 친근한 이미지를 전달해야한다.

• 고객사의 홈페이지를 해치지 않아야한다.

• 다양한 고객사가 있는 만큼 다양한 배경색에서도 아름답게 보여야한다.

이를 바탕으로 새 브랜드 아이덴티티의 컨셉과 톤앤매너, 컬러, 타이포그래피, 접근성까지 생각을 넓혀갔습니다.

고객사 웹사이트나 모바일 구석에 뜨는 채팅 버튼과 브랜드 심볼이 같다는 대전제를 가지고 디자인을 시작했습니다. 다양한 버튼 모양과 아이콘을 구상해보았는데 결론은 원형 버튼에 말풍선이 있는 디자인이 최적이라는 것이었습니다. 거기에 생명력과 친근함을 더하려면 눈과 입같은 얼굴 요소를 넣는 방향이 좋겠다는 생각으로 시안을 다양화 했습니다. 또한 배경이 밝은 상황에서 자연스러운 얼굴 표현을 위해 라인(stroke)버전을 따로 디자인했습니다.

0.1초라도 더 빠르고 쉽게 읽히게

국내 명칭을 채널톡으로 개편하면서 한글로고를 제작하게 되었습니다. 동시에 구글, 네이버, 페이스북 등 매체의 SEO를 최적화해 인지도를 높이는 작업을 진행했습니다. 벌써 브랜드 인지도와 검색량이 상승하는 결과를 얻고 있습니다.

Avenir 서체를 기반으로 영문로고를 커스텀해서 장평, 자간을 조절하고 가독성을 높이는 방향으로 개선하고 한글 로고도 새로 디자인했습니다. 이 때 한글, 영문로고가 나란히 있어도 비슷하게 보이도록 디자인해야했는데요. 영문과 국문간 획수차이, 철자길이, 여백 등 차이가 많아 회색도를 비슷하게 맞추는데 공을 들였습니다. '채널톡'이라는 글자 본연의 빽빽함 때문에 영문로고와 같은 굵기로 작업시 더 진하고 뭉개져 보였기 때문입니다. 결과적으로 한글로고의 기본 굵기는 상대적으로 가늘어졌지만 영문 로고타입과 비슷한 회색도를 갖게 되었고, 가독성도 얻었습니다. 호기롭게 한글 로고 디자인을 결정했지만, 세 글자라도 한글 서체 디자인은 역시 어려운 영역이라는 교훈도 얻었습니다.😅

추가로 화면에서 세로가 30px이하일 때 로고의 가독성을 위해 별도의 가이드를 지정했습니다. 기본적으로 심볼과 로고타입의 크기 차이가 나는 편이라 좁은 면적에서 적용시 타입의 크기가 더 커지고, 심볼의 눈 크기도 좀 더 커지도록 디자인했습니다.

채널의 메인컬러는 이전 로고에서 발전된 딥 블루입니다. 파랑과 보라색의 사이를 오가는 강렬한 채널블루는 홈페이지에서 주목도를 끄는 CTA버튼, 링크 색상 등에 주로 쓰입니다. 이 색상은 채널 브랜드 안에도 그대로 쓰였습니다. 미묘하게 들어간 그라디언트는 별도로 규칙을 적용했습니다. 그 밖에 다양한 디자인 요소에 쓰일 컬러 팔레트도 업데이트 되었습니다.

그라디언트 자동추출

채널톡 심볼 및 채팅 버튼에 쓸 용도로 그라디언트를 일괄적으로 적용할 수 있는 규칙을 정의했습니다. 고객사가 원하는 메인 컬러만 정하면 알아서 예쁜 그라디언트가 생겼으면 좋겠다는 의도였습니다. 플랫함을 유지하면서 색상마다 자연스럽고 미묘한 그라디언트를 적용하기 위해서 '메인 컬러'의 색조(hue)값에서 14도씩(HSV 360도 기준) 더하는 방식으로 '그라디언트 컬러'를 추출하기로 했습니다.

면적의 50%까진 메인 컬러가 배치되고 나머지 영역에서 그라디언트를 배치시키는 방식의 미묘한 그라디언트가 자동으로 설정되도록 개발팀의 도움을 얻어 제품에도 적용했습니다.

모두 하나로

이렇게 완성된 채널톡의 심볼을 로고, 관리자 앱 아이콘, 채팅 버튼을 통합하는 작업으로 확장했습니다.

Many Faces

채팅 버튼의 경우 사용자는 메인 컬러 하나만 정하면 다양한 디자인이 적용되게 구현되었습니다.

• 데스크탑과 모바일의 화면크기를 고려해 각기 다른 사이즈로 적용됩니다.

• 색상 하나만 지정하면 그라디언트 컬러와 함께 배경 명도에 맞게 Filled, Storke버전이 자동으로 적용됩니다.

• 표정이 생기면서 알림 개수, 푸시 상태에 따라 다른 표정을 짓도록 디자인했습니다.

• 버튼 클릭을 유도할 수 있는 텍스트를 넣을 수 있고, 클릭하면 고객이 인지했다고 판단하고 사라지도록 했습니다.

고객소통의 인증마크

이번 리브랜딩은 팀의 그로쓰와 브랜딩 니즈에 따라 개선 방향성을 선정하고, 상황에 따라 유동적으로 적용 가능한 브랜드 아이덴티티를 구축하게된 점에서 특별한 가치가 있다고 생각합니다.

아직 갈 길이 먼 초기 프로덕트기에 브랜딩 또한 더 발전할 여지가 많습니다. 전국민이 알아보는 제품으로 성장하도록 노력하겠습니다.

어디서든 채널톡 버튼을 만나면 반갑게 말 걸어보세요. 🙂