감정일기 앱 제작기 - 2 - 디자인 편

이모션 앱 제작기

감정일기는 이모티콘이 필수였다

앱을 매일 찾고 싶도록 만들고 싶었습니다. 

앱에서 감정을 기록하는 일이 하루의 위로가 되어야 했고, 

기록된 감정을 모아보는 일은 

보람을 느끼게 만드는게 중요했어요. 

감성을 자극해야 했고,

 이모티콘이 그 역할을 할 수 있을 거라 믿었습니다.

감정을 글로만 표현하기에는

현대인에게 꽤 부담이 되는 일이지만, 

이모티콘은 그 부담을 글의 부담을 덜 수도 있습니다.

이모티콘은 정적인 이미지가 아니라 

움직이기를 바랐습니다. 

감정은 눈물을 흘리게 만들기도 하고, 

춤추게도 만듭니다. 

그래서 정적인 속성보다 동적에 가깝다고 봅니다.

재밌는 그림시간, 클립스튜디어로 제작

행복한 이모티콘도 화가 난 이모티콘도 

귀엽게 만들어지기 바랐습니다. 

눈물을 흘릴때는 징징된다는 표현이 아닌 

보듬어 줄 수 있게 하기 위해서는 귀여운게 짱이죠. 

부족한 실력이지만,

꽤 귀여운 이모티콘이 나왔고, 

제가 만들어서 인지는 몰라도 볼 때마다 행복합니다. 

실제 앱 제작하면서 가장 즐겁게 했던 부분이기도 했고요.

제작된 9개의 이모티콘

심플함, 설명이 필요 없는 디자인 지향

앱 사용이 복잡하기 않고, 딱! 보고 바로 사용하기를 바랬습니다. 

그래서 많은 사람들이 사용할 법한 메이저 앱의 사용성을 참고해야 했죠.

모두가 사용하는 방법대로 다른 곳에서도 똑같이 사용하면 

굳이 설명이 필요 없습니다. 

예를 들면 하단 내비게이션입니다

인스타그램 탭과 감정일기의 탭

인스타그램에서 글을 작성하려면 화면 하단의 '+' 아이콘을 눌러야 합니다. 

자신의 글을 쓰는 감정일기도 

같은 위치에 같은 아이콘을 사용하면 

쉽고 빠르게 사용할 거라는 생각에 메뉴구성 잡았습니다.

그 외도 디자인은 쉽게 사용할 수 있도록 

고민하여 제작했습니다. 

아이콘을 선택할때도, 화

면과 맞는 아이콘을 배치했습니다. 

그럼에도 여전히 부족한게 많겠지만

조금식 고쳐나가보죠.

100% reasonable design

100% 이유 있는 디자인을 지향합니다. 

물론 어려운 일입니다. 

디자인에 이유가 있고, 설득력이 있어야 해요

이점이 예술과 디자인의 차이점이 아닌가 싶습니다. 

100% component design

재사용성을 고려한 디자인을 컴포넌트 디자인이라고 합니다

감정 목록 화면에 사용된 디자인과 폰트를 설정하며 미리 보기를 할 수 있는 영역이 동일

컴포넌트 디자인은 디자인 규칙을 만들어 

전반적인 앱의 통일성을 부여합니다. 

디자인 통일성은 직관성을 높여

사용을 편리하게 해 줍니다. 

그러면서 디자인 시간을 줄여주고, 

디자인이 개발로 넘어갈 때 개발에 필요한 시간도 줄여줍니다.

 레이아웃을 하나 개발하면 

그 하나의 레이아웃이 여러 화면에 재사용되니까요.

피그마, component 디자인에 최적화된 툴

이번 앱을 제작하면서 가장 대박이라고 느낀 것은 

피그마를 배운 일이 아닐까 합니다.

핫하다는 이야기를 들었지만, 

실제로 사용해 본 적은 없었습니다. 

이번 앱을 제작하면서 커리어에 도움이 될 것 같아 

처음 배웠는데 큰 만족감을 느꼈습니다.

또한 디자인한 것을 프로토타입으로 구현하여 볼 수 있어서 

개발자와의 커뮤니케이션 비용이 많이 줄어들 것으로 보였습니다.

버튼을 클릭 시 어떻게, 어디로 화면이 이동할지 정하는 프로토타입 설정화면

(그 외 많은 장점이 있는 툴이지만, 이 글은 피그마에 대한 글이 아니니 요정도만...)

지금은 처음 디자인 했던 것보다 

기능도 추가되었고, 변경된 부분도 많습니다.

 혼자 디자인과 개발을 진행하다 보니

새로운 아이디어가 생길 때마다 피그마에 적용하기보다 

개발에 바로바로 적용하여 제작 시간을 단축했습니다. 

친근한 언어 사용

저는 글쓰기도 디자인입니다

글에 따라 느낌이 달라지기 때문입니다.

예를들어

감정일기에 기록된 감정은 데이터로 저장되고, 

데이터는 불러들이는 시간이 필요합니다. 

데이터를 통계해서 보여주는 부분은 계산하는 시간도 포함되죠. 

그 시간이 긴 시간이 아니지만 데이터가 

로딩 중이라는 표시가 없다면,

 사용자가 빈화면을 보고 당황할 수 있습니다. 

그래서 데이터가 로딩을 안내하는 문구를 넣었습니다.

데이터 로딩 화면 수정

처음에는 개발자 입장에서 데이터 로딩이 되는 중이니 

말 그대로 '데이터 로딩 중'이라는 글을 넣었습니다.

 데이터를 처리하는 과정이니 지극히 맞는 말이라고 생각하지만,

 그건 컴퓨터 사고방식이니 틀린 말입니다. 

'데이터', '로딩'이라는 워딩이 딱딱하고 

감정기록과는 어울리지 않는다고 느꼈습니다. 

로딩 부분만 아니라 감정을 표현하는 워딩도 

조금은 딱딱한 게 아닐까 생각을 하게 되었고, 

제가 생각했을 때 친숙하게 느껴질 수 있는 워딩으로 

앱 전반적인 수정을 진행했습니다

감정 워딩 수정

미흡하더라도 빠른 핸드오프

일단 이번 디자인 경험을 통해 느낀것은 디자이너는 

점점 더 디지털 디바이스에 대한 이해가 깊어야하고,

개발에 대한 이해 또한 필요하다는 것입니다. 

공부할게 많은 것이 단점이겠지만 

그만큼 전문성을 더 키울 수 있다는 장점도 있겠네요.

디자이너로 부터 디자인이 개발자로 넘어간 순간을 

보통 핸드오프라고 합니다. 

내 손을 떠난 후부터 생기는 

피드백에 대해 대응하는 시점인데, 

저는 개발까지 이어서 하다보니 

핸드오프라는 개념이 명확하지 않았습니다. 

그때그때 떠오르는 아이디어는 

개발도중에도 디자인에 적용하기도 했고, 

어떤 것은 개발부터 하고 디자인을 채워나가는 부분도 있었습니다. 

디자인, 개발에 대한 경계가 흐릇한 작업이여서 

저에게 진정한 핸드오프는 앱이 배포된 후가 아닐까 싶습니다. 

실제로 테스터를 돌려본결과 꽤 흥미로웠습니다. 

터치하여 폰트크기를 변경하는 설정화면에서는 

사용자가 터치보다 드래그를 먼저 시도했습니다. 

사용자는 드래그가 안된다는 것을 인식하고

 터치를 하여 폰트크기를 수정했습니다. 

제 의도와는 별게로 사용자가 반응한 것이죠. 

이런 것을 보면 대단한 기능을 구현하고 

완벽한 상태로 개발하기 보다 빠르게 

작은 단위로 배포 후 반응을 보고 서비스 규모를 확장하는게 좋아보였습니다.

이것을 용어로는 'MVP'라고 하며 MVP 뜻은 

‘최소 기능 제품’으로, 

영어 단어 Minimum Viable Product의 약자입니다. 

최소비용으로 빠르게 배포하고 반응을 살펴 

그만할지 계속할지 지켜보는데 용이 합니다. 

저같은 경우는 모든 일을 제가 혼자 다했기 때문에 

비용 걱정은 없었지만, 

결국 사용자의 피드백을 보는 면에서는 

MVP 로 진행하는 것이 맞다고 보았습니다.

이제 사용자의 따끔한 욕(?)이 아닌 피드백을 받을 일만 남았네요.