스타트업에서 리브랜딩 하기 @Classting
안녕하세요,
저는 스타트업 클래스팅의 프로덕트 팀에서 디자이너로 일하고 있습니다.
클래스팅에선 2017년 상반기에 걸쳐 회사/서비스 리브랜딩을 진행했습니다.
스타트업 특성상(?) 디자이너 한 명이 전반적인 작업을 모두 진행하게 되었고, 그 과정에서 무엇보다도 다른 스타트업 혹은 작은 회사들의 리브랜딩 과정이 궁금했습니다. 지난 시간의 저와 같은 고민으로 이런저런 글들을 찾아보실 분들을 위해 제가 경험한 이야기를 정리해 공유하고자 합니다.
Classting?
클래스팅에 대한 설명을 먼저 간략히 하자면, 클래스팅은 ‘교사-학생 -학부모’ 간의 소통과 학급 관리의 부담을 줄이고 교육에 집중할 수 있도록 시작된 학급용 버티컬 SNS입니다.
2012년 베타로 시작해 현재는 400만이 넘는 교사, 학생, 학부모가 이용하는 서비스로 성장했습니다.
Why Rebranding?
클래스팅에 리브랜딩이 필요해진 이유는 사실 꽤 분명합니다.
기존의 ‘선생님-학생-학부모’를 이어주는 소셜 서비스 기능에 충실했던 클래스팅이 다양한 학습 콘텐츠를 제공해 교내외 학습까지도 도와주는 교육 소셜 플랫폼으로 변화했기 때문입니다.
클래스팅 서비스의 As is — To be물론 서비스 자체의 변화 외에 기존 심볼이 가지고 있던 문제도 있었습니다.
탁한 메인 컬러와 단독 사용이 불가능한 밝기의 서브 컬러는 서비스 내에서도 뒤죽박죽 섞여 규칙을 파괴했고 플랫폼으로 나아가려는 회사의 방향을 도와줄 수도 없었습니다.
거기에 모양이 주는 왜인지 모를 반 세대 전의 느낌은 변화에 대한 욕구를 만들어내기에 꽤 충분했죠.
이러한 상황에서 서비스에 대한 새로운 브랜드 스토리 정립과 함께 이를 그래픽적으로 충분히 반영해줄 수 있는 새로운 브랜딩이 필요해졌습니다.
특히 앱 아이콘은 서비스 경험의 시작이자 때론 그 자체를 대치해서 보여주기 때문에 기존의 그래픽 요소들을 모티브 삼되 새롭게 정의된 키워드들을 더 적극적으로 보여주는 형태가 되어야 했습니다.
리브랜딩 이전의 클래스팅사실 위에 나열한 꽤 많은 이유 덕분에 지난해부터 두어 번의 리브랜딩 시도가 있었습니다. 하지만
1. 업무적인 우선순위에 밀려서
(스타트업에는 언제나 리브랜딩보다 급한 일이 최소 한 개는 있기 마련)
2. 리브랜딩과 서비스 UI 개편 등을 모두 한 번에 작업해 함께 배포하고자 했던 무모함
(한 날 한 시에 짠! 짠! 짠! 하고 내보내고 싶었음)
-덕분에 밀리고 또 밀려 2017년까지 오게 되고 말게 된 거죠.
작년의 실패에서 얻은 교훈으로 이번 리브랜딩은 시작부터 그 범위를 최대한 줄여서 계획을 세웠습니다.
일의 크기를 크게 잡는 순간부터 회사의 우선순위에 밀려 진행하기 어려워질 것이 분명했고, 홀로 진행하는 디자이너 스스로에게도 큰 부담을 주지 않고 작업하고 싶었기 때문입니다.
그래서 이번에는 시작부터 ‘그냥 앱 아이콘만 바꿀 거예요.’라고 땅땅 못을 박고 시작했습니다.
그리고 정말 그럴 생각이었어요.
팀내 협업 문서로 사용중인 Confluence에 시작 전 작성했던 프로젝트 예상안Rebranding Process
국내외 유저수 400만 이상을 지닌 서비스의 리브랜딩을 진행한다는 것은 솔직히 꽤 부담스러운 일입니다.
저는 한 명인데요. 4,000,000:1… 이거 실화인가요?
게다가 그 많은 유저들 중의 절반 이상은 저보다 클래스팅을 더 오랜 시간 사용해오신 분들이죠.
그들에게 너무 친숙한 심볼과 색상을 버리고 다른 것을 선보인다는 것 자체가 프로젝트를 진행하는 내내 큰 걱정거리였습니다. 이 때문에 기존 로고를 유지하는 것에 대한 고민도 꽤 여러 번 했더랬죠.
고민하던 제가 선택했던 리브랜딩 전략은 새로운 브랜드 키워드 정의와 함께 기존 브랜딩 요소를 나열하고 이를 여과하여 적용하는 방식으로, 이전과 다르지만 낯설지는 않은 느낌을 주는 것이었습니다.
이른바 조삼모사 스킬! (아닙니다)
01. 기존 브랜드 분석 및 재정의
리브랜딩 된 클래스팅은 기본적으로 서비스의 현재를 가장 잘 담으면서도 변화를 단적으로 보여줄 수 있어야 했습니다.
이를 위해 먼저 기존 서비스/회사의 특징으로 꼽을 수 있는 속성들과 회사가 앞으로 나아가고자 하는 방향의 키워드들을 나열해 이중 어떤 것을 핵심 키워드로 가지고 가야 할 가치인지를 정의했습니다.
그래픽 요소 역시 기존 심볼과 로고타입의 요소들을 추출하고 그중 유지해야 할 것과 과감히 버려야 할 것을 정의해 그래픽 방향의 지향점을 잡았습니다.
재정의 된 브랜드 키워드 / 그래픽 요소
Key Brand Value: Connection, IT, Active, …
Key Graphic Style: Bright, Clear, Friendly …
02. Sketch
위에서 선정된 주요 키워드들을 바탕으로 러프하게 1차 심볼 스케치를 진행했습니다.
개인적으로 디자인이 너무 직접적이라 자칫 유치해 보일지라도 사용자 혹은 비 디자이너들에게 그 의미가 확실히 전달되는 것이 더 중요하다고 생각하는 편이기 때문에, 기본적인 조형미는 이후에 발전시킨다는 전제하에 최대한 기본이 되는 형태 혹은 색상의 전달에 있어서 그 의미가 모호해지지 않도록 노력했습니다.
혼자 진행했던 작업이여서인지 지금에 와서 돌아보니 더 참신하고 다양한 아이디어들이 나오지 못했던 것 같아 아쉬움이 남습니다. 다른 브랜딩 관련 글들의 짱짱 많은 디자인 시안들을 볼 때마다 좀 슬픈 것 같기도 하구…
1차 심볼 스케치, 산발적으로 스케치된 것 들을 편집03. Sketch Development
1차 스케치에서 나온 아이디어들을 바탕으로 클래스팅의 핵심 키워드를 축으로 하는 매트릭스를 만들었습니다. 그리고 스케치 중 각 키워드 축에 부합하는 것들을 발전시켜 매트릭스 위에 올려두고 어떤 방향이 클래스팅의 지향점과 맞는지 비교해 보았어요.
이 매트릭스를 두고 저를 포함한 프로덕트 팀 내에서 의견을 받은 것으로는 ‘connection’이 드러나 보이는 쪽이 가장 현재의 그리고 이후에도 지향하는 가치와 맞아 보인다는 것이 의견의 주류를 이루었습니다.
학교 혹은 SNS, 메신저 등을 앱 아이콘으로 직접적으로 보여주는 다른 시안들은 기존 클래스팅 1.0에 머물러 있는 느낌이 더 강한 것에 비해 ‘연결성’을 보여주는 그래픽은 다양한 가치를 제공하는 플랫폼 서비스에 적합해 보인다는 것이 그 이유였죠.
주요 키워드를 축으로 반영된 2차 심볼 스케치04. 사내 게시 및 리뷰
최종 로고에 대한 결정권은 디자이너 개인에게 있었지만, 클래스팅 멤버 한 명 한 명의 생각이 중요하다고 생각했기 때문에 다양한 구성원들의 의견을 최대한 많이 듣고 싶었습니다.
그래서 사내 라운지 벽면(에 세워져 있던 탁구대)에 후보 시안들을 출력해서 부착해두고 그 하단 테이블에 다양한 포스트잇, 펜을 함께 놓았습니다. 그리고 ‘의견은 자유롭게’라고 자유로운 글씨로 쓰인 포스트잇을 붙여두고 사내 메신저 Slack에 이 모습을 사진으로 찍어 올렸죠.
멤버들이 모두 볼 수 있는 곳에 비치해두고 주기적으로 공지를 했던 덕분인지, 기대했던 것보다 적극적이고 자유로운 의견을 받을 수 있었습니다.
심지어 ‘이건 튤립을 닮았어요’라고 쓰고 튤립을 그려주신 분도 있었어요.
그런데 이 밑도 끝도 없는 의견 덕분에 이 모양이 마치 ‘새싹’ 같다는 생각이 들어 이후 브랜드 스토리 구축에 큰 도움이 되기도 했답니다.
리뷰 벽으로 사용된 클래스팅 탁구대05. Final development and Release
3일간 진행된 사내 리뷰 과정을 통해 최종 심볼은 클래스팅의 브랜드 지향점인 ‘connection’을 드러내면서 기존의 ‘C’ 형태를 유지하고 이것에 약간의 브랜드 스토리를 더하는 방향으로 확정 지었습니다.
시안이 정해지고 와 이제 끝이 보인다- 싶었는데, 기존에 작업해두었던 시안을 막상 실제 적용하려고 보니 라인의 굵기가 너무 얇아 모바일과 같은 작은 화면이나 앱 아이콘으로는 너무나도 부적합한 게 아니겠어요. 때문에 이를 다양한 크기로 사용했을 시에도 무리 없이 적용이 가능한 형태로 발전시키기 위한 과정을 거쳤야 했습니다. 이를 진행하면서 같은 아이디어로 만들어질 수 있는 다양한 형태를 고안해보는 시간도 가질 수 있었어요.
로고를 가꿔나가는 과정 중색상의 경우엔 그래픽 요소에서 뽑아낸 기존의 색상인 초록/푸른 계열을 유지하되
‘밝고 활기찬’ 느낌을 전달하기 위해 기존 색상보다 채도와 명도를 모두 높여 적용했습니다.
역시 문제가 확실하면 해결도 명쾌해지는 것 같아요.
Classting product icon이렇게 완성된 클래스팅의 리브랜딩은 매주 월요일에 모든 멤버가 함께하는 Weekly-ting(주간 회의)에서
프레젠테이션을 통해 배포를 시작했습니다.
이전의 심볼은 이를 구성하는 요소들 각각에 의미가 부여되어 있었기 때문에 제대로 이해하기 위해선 그 의미를 아는 사람의 설명이 꼭 필요했던 것에 비해 새로운 클래스팅 심볼은 형태 그 자체로 의미를 보여주기 때문에 비교적 누구나 어렵지 않게 추측이 가능하게 된 점이 개인적으로 가장 중요한 변화라고 생각합니다.
새로 정립된 브랜드 스토리 역시 심볼이 클래스팅의 브랜드 지향점을 시각적으로 드러내 준 덕분에
더 강력한 설득력을 갖게 되었죠.
Classting is C + Connection + Sprout (growth)Typography
로고타입의 서체는 기존에 사용하던 ‘Frankfurter Com Medium’을 그대로 유지했습니다. 클래스팅의 이미지와 잘 맞기도 하고, 새로운 심볼과도 어울렸기 때문이죠. 하지만 서비스의 주 사용층인 교사, 학생 그리고 학부모를 고려했을 때 항상 아쉬운 점이었던 ‘한글형 로고’의 부재를 이번 기회에 메꾸는 게 좋을 것 같다고 생각했습니다. 왠지 일이 자연스럽게 늘어나는 느낌이었지만 이런 기회가 다시는 오지 않을 것만 같았어요..
한글형 로고타입은 기본적으로 본고딕(Noto Sans CJK KR)을 베이스로 시작했지만 영문 로고를 기준으로 작업하면서 훨씬 더 직선적이고 확실한 라운딩이 들어간 형태가 되었습니다.
Classting logotypeColor system
기존 브랜드 시스템에서 가장 문제가 되었던 부분은 로고 자체의 그래픽이나 그 외의 것들이 아닌 컬러 시스템이었습니다. 글의 시작 부분에서도 짧게 이야기했지만 메인 컬러가 서비스의 성격이나 목적에 비해 탁한 색을 띠고 있으며 그 색상을 서비스 유저인 어린 학생이 분명하게 설명하기 어렵다는 것 역시 저는 문제라고 생각했습니다. ‘초록색은 아니고 청록색보다는 연한데 민트색보다는 어두운…’이 되는 문제였죠.
서브 컬러가 메인 컬러를 받아주는 것에 충실하다 보니 화이트를 포함한 그 외의 색 배경 혹은 사진 배경 위에 단독 사용이 어렵다는 것 역시 보완이 필요한 점이었습니다.
이처럼 기존 시스템에서의 문제가 분명했기 때문에 컬러 시스템은 이를 최대한 해결하는 방향으로 진행하게 되었습니다.
선명하면서도 분명한 그린 컬러를 메인으로 잡고 이를 화이트와 다양한 층의 그레이 톤 변화로 받아주고 그 외의 부분별로 쓰였던 불분명한 색상들은 과감히 생략하는 컬러 시스템을 만들어, 모바일 앱 내에서 혼재되어 있던 색상 위계를 정리했습니다.
Sub Brand
메인 브랜딩의 변화에 따라 하위 브랜드들도 많은 변화를 맞게 되었습니다. 가장 단적으로는 기존 ‘러닝카드’라는 단독 서비스로 운영되던 것에서 하위 브랜드로 편입함에 따라 ‘클래스팅 러닝’과 ‘클래스팅 러닝+’로 브랜드 명이 변경되었고 이 역시 메인 로고에 맞춰 한글형 로고를 제작했습니다.
클래스팅의 하위 브랜드 클래스팅 러닝(좌), 클래스팅 러닝 플러스(우)클래스팅의 하위 브랜드로 종속됨에 따라 이전까지 별개의 스타일을 갖던 그래픽 요소 등도 색상이나 무드를 맞춰 적용했습니다.
Redesigning the Product
리브랜딩에 따라 모바일 앱과 웹 UI를 리디자인하기도 했습니다.
이전보다 밝고 분명하면서도 깔끔한 UI를 제공하고자 했고, 서비스 자체의 컬러나 요소들이 강하게 자리 잡고 있었던 것을 해소해 유저들의 콘텐츠를 더 잘 보여주고 싶었기 때문입니다.
사실 앱 아이콘만 하겠다고 시작한 리브랜딩이라 UI 개편에 대한 팀 내 스케줄은 전혀 잡혀있지 않던 상황이었습니다. 하지만 마침 같은 시기에 여러 종류의 파일로 산재되어있던 UI 가이드를 Sketch 파일로 통합하며 그 과정에서 낡은 컴포넌트들을 정리하는 작업을 진행했었고, 당연히 그 작업에는 리브랜딩 된 요소들이 포함되게 되었습니다.
그리고 이를 개발에 반영하는 일정이 빠르게 잡힌 덕분에 전반적인 UI 반영에 성공할 수 있었습니다.
역시 인생은 타이밍인가 봐요.
New icons
서비스에서 노출되는 아이콘 역시 새로운 심볼과 같은 무드의 라인 스타일로 리디자인 했습니다.
아직 모든 아이콘에 반영하지는 못했지만 리브랜딩의 특징을 단적으로 보여줄 수 있는 세트를 만들었다는 것에 그 의미를 두었습니다.
Renew the Stationery
서비스의 리브랜딩은 유저들에게도 그렇지만 이 서비스를 함께 만들어나가는 멤버들에게도 아주 중요한 일입니다. 단계별로 꾸준히 진행한 사내 리뷰와 프레젠테이션을 거쳐서인지 다행히 멤버들은 새로운 로고를 좋아하고 반겨주었지만 저는 더 나아가 회사 내에 빠르고 친숙하게 스며들기를 바랐습니다.
멤버들과 새로운 로고가 얼른 친해지기 위해서는 무엇보다도 새로운 것이 반영된 무언가들이 손에 직접 쥐여주는 것이 좋을 것 같다고 생각했고, 그래서 가장 먼저 제작한 것은 명함이나 봉투 등의 스테이셔너리였습니다.
리디자인 된 명함마침 회사 사옥의 이사와 시기가 맞물렸던 덕분에 주소를 바꾸어야 한다는 핑계로 모든 것을 한층 수월하게 제작할 수 있었습니다. 그리고 신사옥의 오피스 공간에 부착되는 로고 역시도 같은 시기에 진행된 덕분에 새로운 로고로 깔끔하게 적용할 수 있었어요. 역시 인생은 타이밍인가 봐요..2
현대카드 스튜디오 블랙 내 클래스팅 오피스마무리
돌이켜보면 참 빈틈이 많은 작업이었지만 그럼에도 프로젝트를 진행하면서 배웠던
몇 가지 팁이 있어 이를 공유하며 글을 마무리합니다.
1. 문제를 정의하자
실패했던 경험을 돌이켜보면, 프로젝트 진행을 위한 리서치와 방법론의 도입은 더 노력했었지만 프로젝트의 이유에 대한 정확한 근거를 세우지 못했던 것 같습니다. 즉, 해결해야 하는 ‘문제’를 정의하는 것에서 실패해 결과적으로 실패로 이어졌던 게 아닌가 싶습니다.
모든 디자인, 프로덕트, 어쩌면 세상 만물의 이치에 해당하는 이야기이겠지만 리브랜딩 역시 정확히 ‘무엇’을 해결하기 위한 것인지 문제를 확실히 정의하고 이에 맞는 전략을 세우면 명쾌한 해결로 이어질 수 있는 것 같습니다.
2. 틈틈이 공유하자
아마도 대부분의 작은 규모의 스타트업 혹은 회사에서 브랜딩 관련 프로젝트는 매우 소수의 인원이 진행하게 됩니다. 디자이너의 전문적인 영역을 존중하는 것은 매우 중요하지만, 혼자 꽁꽁 싸들고 있다가 한 번에 짠! 하는 것은 작업 이후 이에 대한 설득력을 얻는 것에 더 많은 공수가 들 가능성이 매우 높아지기 마련입니다. 나에겐 이미 내 새끼 같은 것이지만 다른 멤버들에게는 너무 초면이기 때문에 이에 대한 설명이 그만큼 더 많이 필요해지기 때문이죠.
틈틈이 작업물을 공유하고 이에 대한 리뷰를 주고받는다면 많은 멤버들은 이 프로젝트에 직·간접적으로 참여하게 되고, 나 혼자 키우는 내 새끼가 아니라 우리 같이 키운 우리의 것이 됩니다. 혼자 모든 것을 끝내려 하지 말고 다른 멤버들에게 마이크와 키보드를 넘겨주세요.
덧붙여, 개인적으로 공유 주기는 프로세스의 각 단계를 넘어갈 때마다 단계의 중요도 별로 리뷰받는 팀의 범위를 정해 한 번씩 받는 것이 혼자 작업을 진행하는 부담을 덜어내기에도 도움이 되었던 것 같습니다.
3. 작게, 더 작게 시작하자
사실 이 글을 정리하면서 처음에 리브랜딩 일의 규모를 작게 가져가는 것을 우선시하면서 필요한 브랜딩 과정을 건너뛰기도, 때론 무시하기도 했다는 것을 새삼 깨닫고 반성하기도 했습니다.
하지만 이보다 더 분명한 것은 작년의 ‘리브랜딩 하려면 우선 심볼을 새로 만들구 그러면서 로고타입도 만들어야겠죠. 그 김에 앱 UI도 싹 개편할 거구, 그럼 당연히 아이콘이나 일러스트들도 새로 제작해야겠네요. 그리고 시간 남으면 컴퍼니 사이트도 다시 만들면 좋을 것 같은데…’ 라고 말했던 저보다 이것도 저것도 작업하냐는 질문에 ‘아뇨 그냥 앱 아이콘만 바꿀 건데요?’ 라던 2017년의 제가 훨씬 더 많은 것을 이뤘다는 점이 아닐까요?
이쯤에서 다시 한 번 보는 리브랜딩 프로젝트의 목표나무가 아니라 숲을 봐야 한다지만, 일단 나무를 심어야 숲이 되는 것이니까요.
나무 한 그루 한 그루 열심히 심다 보면 생각보다 더 큰 숲이 되어있을 것이란 기대와 함께 글을 마칩니다.
