밥밥트레인 (5) - 밥뿌 캐릭터의 탄생 (브랜딩과 디자인)
* 이 글은 밥밥트레인의 일당백 디자이너 “젤리”님의 밥뿌 브랜딩과 디자인 작업을 진행하면 느낀점을 소상히 적은 수기입니다.
[병아리 디자이너가 돼]
때는 24년 여름
모 기업의 인턴을 경험하며 만난 동료 “죠르디”님에게 하나의 프로젝트 이야기를 듣게 된다.
“잔식 문제 해결을 위한 플랫폼을 개발하고 있는데 (…) 디자이너를 구하고 있어요”
잠깐 들은 프로젝트 목표의식 속에서도 너무나 좋은 기획 의도가 느껴졌다.
단순히 재미를 위한 사이드프로젝트가 아닌,
거시적으로 더 큰 사회문제를 해결하고 의미 있는 공동체 문화를 알린다는 점에서 매력적으로 다가왔다.
이어 “죠르디”님이 디자이너를 구하고 있다는 말에
“혹시 제가 참여해도 될까요?”
라며 조심스럽게 묻는 와중에도 속으로는 적극적으로 참여를 원하고 있었다.
얼마 지나지 않아 죠르디님과 팀원분들에게 긍정적인 답변을 들을 수 있었고(오-예!),
프로젝트가 진행 중이었기에 곧바로 합류하게 되었다.
[브랜딩은 처음이라]
사실 팀에 합류하며 걱정이 앞서기도 했다.
막 인턴 생활을 하며 아직은 병아리 디자이너이자 배울 것이 너무나도 많은 예비 디자이너였기에
‘팀에게 도움을 줄 수 있을까’, ‘내 역할을 제대로 해낼 수 있을까’ 등 오만가지의 생각이 들었다.
대학원에 다니시는 팀원부터 현업에 종사하시는 팀원까지,
전문 지식을 가지고 각자의 역할에 몰두하는 팀원분들과 함께한다는 사실에 최선을 다해야겠다는 생각 뿐이었다.
다행히도 팀원분들의 응원과 격려 덕분에 용기를 얻고 나 또한 작업에 몰두할 수 있었다.
최고의 복지는 팀원이라 했던가.
이번 계기로 밥밥트레인의 위력을 느낄 수 있었다.
브랜딩이 곧 디자인은 아니지만, 브랜딩은 디자인에서 꽤 큰 부분을 차지한다.
우리가 전하고자 하는 바를 직관적으로 전달하고 팀원 모두의 시간과 노력이 들어간 서비스를 하나의 이미지로 전달하는,
그야말로 ‘첫인상’이기 때문이다.
프로젝트의 특성상 정해진 기간 내에 프로덕트를 완성해야하므로 투입 후 지체없이 작업에 바로 들어갔다.
브랜딩에 있어서 가장 중요하게 생각한것은
즉 사용자에게 목적에 맞는 서비스를 제공하면서 우리 브랜드만의 이미지를 심어줄 것! 이 관건이었다.
이미 서비스의 목적과 방향성은 탄탄하게 잡혀있었기 때문에 이 방향성과 어우러지는 ‘이미지’가 필요했다.
우리의 목표는 ‘식품과 생활용품 등 물품 기부를 원하는 사람들이 더욱 편리하게 기부 문화를 누릴 수 있도록 사용성 좋은 플랫폼을 만드는 것’이었다.
[메인 컬러 설정하기]
이 목표를 기반으로 디자인컨셉을 잡기 시작했다.
서비스의 특징인 ‘음식’, ‘식품’을 시작으로, ‘친근함’, ‘기쁨’, ‘에너지’ 등의 키워드를 산출했다.
이때 생각난 컬러는 Orange 계열이었다.
‘Orange’ 컬러는 식욕을 자극하고 기쁨, 즐거움, 에너지 등을 상징하는 색상이기 때문에 식품과 관련된 서비스에서 많이 사용되는 브랜드 컬러이다.
또한 사용자가 편리하고 친근하게 접근할 수 있어야 하기에 ‘즐거움’과 ‘기쁨’, ‘에너지’의 이미지를 동시에 주는 ‘Orange’ 컬러가 적합하다고 판단했다.
[브랜드 키워드 설정과 무드보드]
다음으로 서비스를 대표할 키워드를 설정하고 무드보드를 만들었다.
이 단계는 앞으로의 UI 디자인에 직접적인 영향을 줄 것이므로 깊은 고민과 많은 서치가 필요했다.
식품 기부를 위해 많은 액션이 이루어지는 이 서비스에서 중요하게 여겼던 키워드는 다음과 같다.
직관적인, 깔끔한, 밝은, 귀여운, 둥글둥글한 …
따라서 피그마를 통해 다양한 서비스의 레퍼런스를 찾아 모으고, 새로운 서비스를 위한 무드보드를 설정했다.
(이 단계에서 회의를 통해 팀원분들과 의견을 나누고 방향을 구체화해 가는 것이 재밌었다)
[브랜딩과 캐릭터 설정]
또한 사용자가 지속적으로 이용할 수 있도록 친근한 느낌을 전달하고자 캐릭터 설정이 필요했다.
캐릭터는 사용자로 하여금 서비스를 지속적인 사용으로 이끌 수 있는 또 하나의 차밍포인트라고 생각했기에 꼭 만들고 싶었다.
브랜드 컨셉과 키워드, 목표 등을 잘 절충하여 캐릭터 특징을 잡아보았다.
결과적으로 팀의 이름이자 서비스의 중심에 있는 ‘밥’을 살려 ‘밥뿌’라는 이름을 고안하고,
밥알의 모양, ‘온기’와 ‘매듭’을 상징하는 하트 모자를 살린 하나의 밥알 캐릭터를 그려봤다.
이 캐릭터는 온기를 전달하고 기부 과정이 잘 매듭지어질 수 있도록 한다는 의미를 담았다.
[디자인시스템: 애증의 관계...]
어느 정도의 틀을 잡아갈 때쯤 본격적인 화면 UI 디자인 작업을 시작했다. UI 작업에서 중요한 건 디자인시스템이다. 이는 각각의 페이지에 담기는 콘텐츠와 요소들에 통일성을 주고 일관된 UI를 유지하기 위해 반드시 필요하다.
UX/UI 디자이너에게 디자인 시스템이란 그림자와도(적어도 나에겐 커피) 같은 존재라고 생각했다. 디자인시스템 구축하기를 좋아하고 구성 하나하나 살펴보며 요소를 분리하고 결합하는 과정이 나에겐 재미있는 작업이었다.
그래서인지 디자인시스템을 만드는 과정은 매번 어려우면서도 스스로 부족하게 느껴졌다.
디자인시스템에 있어서 가장 중요한 것은 ‘효율성’과 ‘편리함’이다. 이 시스템을 만드는 목적 자체도 디자인 요소를 재사용할 수 있게 하여 효율적인 작업을 돕고, 더불어 개발 과정도 더욱 편리하게 하기 위함이다.
디자인 작업에서의 효율성은 다음 과정을 따른다.
메인 컴포넌트를 만들고, 그 컴포넌트에 다양한 베리언트 요소를 더하면 하나의 컴포넌트로도 여러가지의 변수로 활용할 수 있다.
즉 사이즈가 다른 두 가지 메인 컴포넌트를 만들고
다양한 베리언트 요소를 설정하면
이렇게 많은 변수로 활용이 가능하다.
(작은 사이즈는 생략)
여기서 어려웠던 점은 ‘재사용 가능한 메인 컴포넌트만을 만들어두어도 되는가’에 있었다.
메인 컴포넌트 A가 있다면, A에서 유사한 B, C, D … 등 도출이 가능한데, 이 모든 변수를 시스템으로 만들어야 할까? 라는 의문과 궁금증이 있었다.
하지만 이에 대한 답은 화면 작업을 이어 나가며 개발자분들과 피드백을 주고받는 과정에서 얻을 수 있었다.
디자인시스템에 정답은 없다고 알고 있지만, 협업이 효율적으로 이루어지게 하려면 화면에 쓰이는 컴포넌트는 최대한 시스템으로 정리하는 것이 좋다.
작업하며 잘못되었음을 깨달은 건, 개발자분들이 화면에 쓰인 디자인 요소를 헷갈려 한다는 지점이었다.
화면에 쓰였지만 디자인시스템에서 찾을 수 없는 컴포넌트라면 의미가 있을까 싶었고,
이러한 고민은 또 한 번의 어려움으로 다가왔다.
하나의 메인 컴포넌트를 너무 많은 변수로 사용하고 있었던 것이 문제였다.
즉 하나의 메인 버튼을 너비가 가장 작은 버튼으로 변형해서 사용하고 있었던 것이다.
메인 버튼을 기준으로 사이즈와 네이밍을 정하다 보니 작은 사이즈로 활용하는 것에서 충분한 혼동이 있을 법했다.
(만든 나조차도 작업 후반부에 헷갈릴 정도였으니..!)
중간에 새롭게 만들어본 디자인시스템 Button 부분이다.
이번 디자인시스템에선 나의 불찰로 적용하지 못했으나, 다음엔 꼭 더 체계적인 시스템을 만들어봐야겠다.
물론 초기 디자인시스템을 만들 때보다 구체적이고 세분화된 것은 맞으나, ‘이것이 효율성을 가져다줄 것인가’, ‘개발자분들과의 협업에서 이게 최선일까?’에 대한 대답은 여전히 찾고있는 실정이다.
(앞으로 디자인을 해나가면서, 다양한 프로젝트와 현업에서 배우고 싶은 포인트이기도 하다)
그럼에도 좋은 팀원분들을 만나 지속적인 소통과 피드백을 주고받으며 시스템을 확장해 나가고
수정을 반복하며 스스로 배운 것이 많음은 확실하다.
밥뿌의 디자인시스템은 여전히 현재진행형이다.
추가하고 또 추가하는 무한반복의 여정이다.
(팀원분들께 감사하고 죄송한 마음뿐이다🥲)
[작업 또 작업]
팀원분들이 탄탄하게 구성해 주신 [요구사항정의서]를 낱낱이 살펴보고, 디자인에 필요한 페이지, 기능 등을 논의하고 이를 디자인으로 화면에 옮기는 작업을 했다.
서비스 특징을 살려 메인 기능을 홈 화면에 배치하고, 특히 직관적이고 사용이 편리한 느낌의 레이아웃을 구성하기 위해 노력했다.
메인 화면의 포인트는 ‘카드형 UI’ 디자인이다.
이는 모듈 방식으로 사용되어 서로 다른 내용의 기능과 콘텐츠라 하더라도 함께 구성이 가능하며 깔끔하고 일관된 느낌을 준다. 이 외에도 시각적으로 직관적이고 친화적일 뿐만 아니라 반응형 디자인에도 유리하여 실제 많은 서비스에서 사용하고 있는 형태이다.
밥뿌 서비스에서는 MVP에 속하는 ‘입력 및 바코드 조회’ 기능을 살려 카드형 UI로 중앙에 배치하였다.
또한 바로 위에는 처음 사용하는 사람들을 위한 가이드 배너를 배치하고, 하단에는 앞으로 출시 예정인 ‘이전 조회 내역’ 서비스 카드 UI를 배치하여 서비스 확장을 예고하였다.
‘기부 가능 물품 조회’ 역시 카드형 UI로 구성했다.
여기서 포인트는 카드형 UI와 아이콘의 결합으로 직관적인 선택이 가능하다는 것이다.
텍스트 목록에서 보다 쉬운 선택이 가능하도록 아이콘을 그려 넣었다.
이 외에도 조회결과, 검색(지도) 등 모든 팀원분들이 정성을 들인 페이지가 많다.
이 부분은 앱에서 직접 확인해 보길 바란다!
[여정의 마무리 시점에서]
마무리 시점이라 하기엔 아직 밥트팀은 활발하게 작업 중이다.
팀원 모두가 가장 열성을 기울이며 낮, 밤 구분 없이 작업에 몰두하고 있다.
밥트팀이 작업과 회의, 논의를 이어갈 동안 약 4개월이란 시간이 흘렀다.
중간에 합류하여 새로운 팀을 만나 너무나도 즐거운 작업을 했고 덕분에 지금의 밥뿌가 탄생할 수 있었다.
(능력자들로 똘똘 뭉친 어벤져스와도 같은 밥밥트레인 초기 멤버분들 덕에 가능했던 일이다 🙌🏻)
사이드프로젝트는 단순히 ‘사이드’의 의미를 넘어 그 이상을 창출하는 여정이다.
모든 혁신이 작은 시도와 변화에서 시작하듯, 사이드프로젝트에 임하는 우리 모두 사회에 작은 변화라도 긍정적인 영향을 줄 수 있다면 이 활동 자체를 감사히 여길 것이다.
너무나도 재밌고 보람찼던 우리의 여정 또한 잘 매듭지을 수 있기를 바란다.
아직 끝날 때까지 끝난 게 아님을 기억하며 . . . !
프로젝트 결과 공유회 날까지 파이팅!🔥🔥
(한 달 넘게 열심히 달려준 개발자들의 흔적!!)
