시티타이머/회고

브랜딩과 디자인 과정🪽

팀시탐 2024. 11. 23. 16:18

I. 네이밍

먼저 앱 브랜딩에 있어서 가장 중요하게 생각되는 네이밍을 진행했다.

다양한 지하철/버스 관련 앱이 있었기 때문에 차별화되면서도 가장 직관적이 네이밍을 위해 두 사람의 머리와 챗지피까지 동원해서 고민을 했고, 나중에 지하철 뿐만 아니라 버스 정보까지도 제공할 수 있어 도시의 교통 타이머라는 의미의 '시티타이머'로 결정하게 되었다.

네이밍 후보

 

II. 브랜딩

그 후로 대표적인 이미지를 고민하게 되었는데 타이머, 뛰는 사람, 지하철, 노선도 등 다양한 관련 키워드로 이미지를 수집한 후 그림을 그려보기 시작했다. 특히 지하철과 타이머 이미지를 가지고 많은 테스트를 걸쳤다. 

로고 후보

동시에 앱화면 이미지에 대한 아이데이션도 계속하고 있었는데 직관적인 색으로 타이머를 보여주고 싶었고, 처음에는 이런 타이머 형식의 디자인이 나왔다.

 

하지만 지하철 캐릭터를 활용하기로 정해지면서 조금 더 귀엽고 통통 튀는 디자인이 되었다. 로고도 이런 느낌에 맞게 동글동글한 타이머 이미지로 제작하였다.

 

최종 디자인

특히 카드 형식으로 타이머를 만들면서, 걸어서 탈 수 없는 열차는 빨간색, 탈 수 있으면 파란색으로 아이콘과 시간을 변경하였고, 블럭 미리보기의 경우에는 색을 빼고 직관적으로 시간만 보여줄 수 있는 디자인으로 정리되었다.

그리고 모션은 생각하지 못했는데, 코인이 지하철이 통통 위아래로 뛰고 있는모션을 작업해서 먼저 보여주었고 결과적으로 더욱 직관적이면서 귀엽고 완성도 높은 카드를 완성할 수 있었다. 

 

III. 온보딩

가장 브랜딩을 잘 보여줄 수 있는 영역이 첫인상인 온보딩이라고 생각해서 온보딩에도 많은 고민을 했다. 

결국 색이 바뀌면서 직관적으로 도착 시간을 알려주는게 앱의 정체성이라고 생각해서 이 부분을 온보딩에 녹였다. 시간이 바뀌면서 파란색 > 빨간색으로 바뀌는 애니메이션도 넣었다.

 

모션/애니메이션 작업을 해본 적이 없어서 코인에게 가이드를 주는게 아니라 실시간으로 설명하면서 애니메이션을 완성해갔는데, 이 과정에서 코인이 많이 고생해주었다. 그리고 모션과 애니메이션이 작업의 완성도를 높이는데 매우 중요한 역할을 하는 걸 보면서 배우고 싶은 욕심이 생긴 프로젝트였다.