김 다윤님의 아티클 더 보기

UI/UX

스타트업에서 리브랜딩 하기 ②

로고타입만 변경하려다 리브랜딩까지 하게 된 썰

스타트업에서 리브랜딩 하기 ②

안녕하세요, 저는 스타트업 클래스팅의 프로덕트팀에서 일했던 디자이너 오승주입니다. 클래스팅에선 2017년 상반기에 걸쳐 회사·서비스 리브랜딩을 진행했습니다. 스타트업 특성상(?) 디자이너 한 명이 전반적인 작업을 모두 진행하게 되었고, 그 과정에서 무엇보다도 다른 스타트업 혹은 작은 회사들의 리브랜딩 과정이 궁금했습니다. 지난 시간의 저와 같은 고민으로 이런저런 글들을 찾아보실 분들을 위해 제가 경험한 이야기를 정리해 공유하고자 합니다. 지난 연재분에서 로고 및 아이콘의 변화 과정을 훑어본 데 이어 이번 연재분에서는 이후의 개편과정을 소개하려 합니다.


Typography

로고타입(Logotype)의 서체는 기존에 사용하던 ‘Frankfurter Com Medium’을 그대로 유지했다. 클래스팅의 이미지와 잘 맞기도 하고, 새로운 심볼과도 어울렸기 때문이다. 그에 더해, 서비스의 주 사용층인 교사, 학생 그리고 학부모를 고려했을 때 항상 아쉬운 점이었던 ‘한글형 로고’의 부재를 이번 기회에 메꾸는 게 좋을 것 같다고 생각했다. 왠지 일이 자연스럽게 늘어나는 느낌이었지만 이런 기회가 다시는 오지 않을 것만 같았다.

한글형 로고타입은 기본적으로 본고딕(Noto Sans CJK KR)을 베이스로 시작했지만 영문 로고를 기준으로 작업하면서 훨씬 더 직선적이고 확실한 라운딩이 들어간 형태가 되었다.

클래스팅 로고타입

Color system

기존 브랜드 시스템에서 가장 문제가 되었던 부분은 로고 자체의 그래픽이나 그 외의 것들이 아닌 컬러 시스템이었다. 지난 글에서도 짧게 이야기했지만 메인 컬러가 서비스의 성격이나 목적에 비교해 탁한 색을 띠고 있으며 그 색상을 서비스 이용자인 어린 학생이 분명하게 설명하기 어렵다는 것 역시 문제라고 생각했다. ‘초록색은 아니고 청록색보다는 연한데 민트색보다는 어두운’으로 설명이 이루어지는 색이었다. 서브 컬러가 메인 컬러를 받아주는 것에 충실하다 보니 화이트를 포함한 그 외의 색 배경 혹은 사진 배경 위에 단독 사용이 어렵다는 것 역시 보완이 필요한 점이었다.

이처럼 기존 시스템에서의 문제가 분명했기 때문에 컬러 시스템은 이를 최대한 해결하는 방향으로 진행하게 되었다.

선명하면서도 분명한 그린 컬러를 메인으로 잡고 이를 화이트와 다양한 층의 그레이 톤 변화로 받아주고 그 외의 부분별로 쓰였던 불분명한 색상들은 과감히 생략하는 컬러 시스템을 만들어, 모바일 앱 내에서 혼재되어 있던 색상 위계를 정리했다.

색상 위계 표

Sub Brand

메인 브랜딩의 변화에 따라 하위 브랜드들도 많은 변화를 맞게 되었다. 가장 단적으로는 기존에 단독 서비스로 운영되던 ‘러닝카드’가 클래스팅의 하위 브랜드로 편입함에 따라, ‘클래스팅 러닝’과 ‘클래스팅 러닝+’로 브랜드명이 변경되었고 이 역시 메인 로고에 맞춰 한글형 로고를 제작했다. 이전까지 별개의 스타일을 갖던 그래픽 요소 역시 색상이나 무드를 맞춰 적용했다.

클래스팅의 하위 브랜드 클래스팅 러닝(좌), 클래스팅 러닝 플러스(우)
수정된 그래픽

Redesigning the Product

리브랜딩에 따라 모바일 앱과 웹 UI를 리디자인하기도 했다. 이전보다 밝고 분명하면서도 깔끔한 UI를 제공하고자 했고, 서비스 자체의 컬러나 요소들이 강하게 자리 잡고 있었던 것을 해소해 사용자의 콘텐츠를 더 잘 보여주고 싶었기 때문이다.

사실 앱 아이콘만 하겠다고 시작한 리브랜딩이라 UI 개편에 대한 팀 내 스케줄은 전혀 잡혀있지 않은 상황이었다. 하지만 마침 같은 시기에 여러 종류의 파일로 산재해있던 UI 가이드를 스케치 파일로 통합하며 그 과정에서 낡은 컴포넌트들을 정리하는 작업을 함께 진행했고, 당연히 그 작업에는 리브랜딩 된 요소들이 포함되었다.

그리고 이를 개발에 반영하는 일정이 빠르게 잡힌 덕분에 전반적인 UI 반영에 성공할 수 있었다. 역시 인생은 타이밍인가 보다.

리디자인된 모바일 앱

New icons

서비스에서 노출되는 아이콘 역시 새로운 심볼과 같은 무드의 라인 스타일로 리디자인 했다. 아직 모든 아이콘에 반영하지는 못했지만 리브랜딩의 특징을 보여줄 수 있는 세트를 만들었다는 것에 그 의미를 두었다.

리디자인된 아이콘 세트

Renew the Physical component

서비스의 리브랜딩은 사용자들에게도 그렇지만 이 서비스를 함께 만들어나가는 멤버들에게도 아주 중요한 일이다. 단계별로 꾸준히 진행한 사내 리뷰와 프레젠테이션을 거쳐서인지 다행히 멤버들은 새로운 로고를 좋아하고 반겨주었지만, 더 나아가 리브랜딩된 브랜드가 회사 내에 빠르고 친숙하게 스며들기를 바랐다.

멤버들과 새로운 로고가 얼른 친해지기 위해서는 무엇보다도 새로운 것이 반영된 무언가를 손에 직접 쥐여주는 것이 좋을 것 같다고 생각했고, 그래서 가장 먼저 제작한 것은 명함이나 봉투 등의 스테이셔너리(Stationary. 문구류)였다.

마침 회사 사옥의 이사와 시기가 맞물렸던 덕분에 주소를 바꾸어야 한다는 핑계로 모든 것을 한층 수월하게 제작할 수 있었다. 그리고 신사옥의 오피스 공간에 부착되는 로고 역시도 같은 시기에 진행된 덕분에 새로운 로고로 깔끔하게 적용할 수 있었다. 다시 한번, 인생은 타이밍인가 보다.

리디자인된 명함
현대카드 스튜디오 블랙 내 클래스팅 오피스

마무리

돌이켜보면 참 빈틈이 많은 작업이었지만 그럼에도 프로젝트를 진행하면서 배웠던 몇 가지 팁이 있어 이를 공유하며 글을 마무리한다.

① 문제를 정의하자

실패했던 경험을 돌이켜보면, 프로젝트 진행을 위한 조사와 방법론의 도입에는 더 노력했었지만, 프로젝트 이유에 대한 정확한 근거를 세우지 못했던 것 같다. 즉, 해결해야 하는 ‘문제’를 정의하는 것에서 실패한 결과, 전체적인 실패로 이어졌던 게 아닌가 싶다.

모든 디자인, 제품, 어쩌면 세상 만물의 이치에 해당하는 이야기겠지만 리브랜딩 역시 정확히 ‘무엇’을 해결하기 위한 것인지 문제를 확실히 정의하고 이에 맞는 전략을 세우면 명쾌한 해결로 이어질 수 있는 것 같다.

② 틈틈이 공유하자

작은 규모의 스타트업 혹은 회사에서 브랜딩 관련 프로젝트는 아마도 대부분 매우 소수의 인원이 진행하게 된다. 디자이너의 전문적인 영역을 존중하는 것은 매우 중요하지만, 혼자 꽁꽁 싸 들고 있다가 한 번에 ‘짠!’ 하는 것은 작업 이후 이에 대한 설득력을 얻는 것에 더 많은 공수가 들 가능성을 매우 키운다. 나에겐 이미 내 새끼 같은 것이지만 다른 멤버들에게는 너무 초면이기 때문에 이에 대한 설명이 그만큼 더 많이 필요해지기 때문이다.

틈틈이 작업물을 공유하고 이에 대한 리뷰를 주고받는다면 많은 멤버들은 이 프로젝트에 직간접적으로 참여하게 되고, 프로젝트는 나 혼자 키우는 내 새끼가 아니라 우리 같이 키운 우리의 것이 된다. 혼자 모든 것을 끝내려 하지 말고 다른 멤버들에게 마이크와 키보드를 넘겨주시라.

덧붙여, 개인적으로 공유는 프로세스의 각 단계를 넘어갈 때마다 단계의 중요도 별로 리뷰 받는 팀의 범위를 정해 한 번씩 하는 것이 혼자 작업을 진행하는 데서 오는 부담을 덜어내기에도 도움이 되었던 것 같다.

③ 작게, 더 작게 시작하자

사실 이 글을 정리하면서 처음에 리브랜딩 일의 규모를 작게 가져가는 것을 우선시하면서 필요한 브랜딩 과정을 건너뛰기도, 때론 무시하기도 했다는 것을 새삼 깨닫고 반성하기도 했다.

하지만 이보다 더 분명한 것은 “리브랜딩 하려면 우선 심볼을 새로 만들고, 그러면서 로고타입도 만들어야겠죠. 그 김에 앱 UI도 싹 개편할 거고, 그럼 당연히 아이콘이나 일러스트들도 새로 제작해야겠네요. 그리고 시간 남으면 회사 웹사이트도 다시 만들면 좋을 것 같은데…….”라고 말했던 2016년의 필자보다 이것도 저것도 작업하냐는 질문에, “아뇨, 그냥 앱 아이콘만 바꿀 건데요?”라던 2017년의 필자가 훨씬 더 많은 것을 이뤘다는 점이 아닐까?

다시 한번 보는 리브랜딩 프로젝트의 목표

나무가 아니라 숲을 봐야 한다지만, 일단 나무를 심어야 숲이 되는 것이니까. 나무 한 그루 한 그루 열심히 심다 보면 어느새 생각보다 더 큰 숲이 되어있을 것이란 기대와 함께 글을 마친다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다