brunch

You can make anything
by writing

- C.S.Lewis -

by 장모 Dec 12. 2016

'백자 하루' 개발기

의식의 흐름대로

이 글은 이런분께 추천합니다.

일인 개발이 궁금한 사람

앱 개발이 궁금한 사람

쓸만한 일기장을 찾는 사람

심심한 사람



'백자 하루'는 쉬어가는 앱으로 개발을 시작했다.


몇 달째 진행 중인 프로젝트가 완성 단계에 보니 앙꼬 없는 찐빵이다. 도저히 그대로 출시를 할 수 없다 싶어서 다시 원점으로 돌아가 고민을 하던 중, 쉬어가는 기분으로 예전부터 만들고 싶었던 그림일기 앱을 만들기로 했다. 


시작은 그림일기


대충 이렇게 하면 되려나.. 하고 선을 몇 개 그리고 사용하는 것을 상상을 해 보았다. 


1. 일단 그림 영역에는 그림이나 사진이 들어가겠지?


2. 그림은 구현하려면 일이 좀 많겠지. 사진으로 해야겠다.


 3. 사진으로 해도 필터랑 편집은 들어가야겠네? 빼야겠다.


이렇게 막상 하려고 보니 쉬어가는 프로젝트가 쉬어가기 힘든 프로젝트가 될 것 같아 접어야 하나 싶었다. 그런데 며칠 전에 본 게시물이 생각났다.


http://www.clien.net/cs2/bbs/board.php?bo_table=park&wr_id=51080610


프린터가 없어서 인쇄는 못했지만 보고 참 느낌이 좋다는 생각을 했었는데, 이런 느낌으로 '원고지 일기'를 만들면 어떨까 하는 생각이 들었다. 그래서 원고지를 그리고 메뉴를 써봤다. 


초기 디자인

좀 애매했는데 뭐 쉬어가는 프로젝트니까 만족하기로 했다. 그래서 '그림일기' 콘셉트는 버리고 원고지 일기로 진행을 하기로 했다. 


1. 원고지는 장단위로 넘어가야 맛이지

2. 근데 스와이프 하기 위한 페이지 계산이 복잡하네

3. 그럼 하루 한 페이지로 제한하자

4. 그리고 칸수가 사람마다 다르면 억울하니까 평등하게 10칸 x 10칸으로 제한하자

5. 그래! 백자 일기다!

6. 하루 한 장이라는 콘셉트도 있으니까 하루 백자로 하자


이렇게 순식간에 다 정했다. 쉬어가는 프로젝트라 막 정한 것도 있고, 컨셉이 단순해서 쉽게 정한 것도 있다.


그다음에 바로 아이콘을 고민을 했는데, 


초기 아이콘들

 

처음엔 이렇게 '원고지' 느낌으로 어찌해보려고 했는데 느낌이 오는 게 없었다. (물론 위의 이미지들이 완성본은 아님) 그래서 다시 앱 디자인을 했는데, 갑자기 '원고지'를 계속 쓰면 '책'이 된다는 생각이 들었다. 그리고 동시에 '인생은 한 권의 책과 같다'는 말이 생각났다. 여기서 '오오오!' 했다.


책(일기) = 한 사람의 인생

한 페이지 = 하루 

100자의 제약 = 중요한 것에 대한 고민


뭔가 딱딱 맞는 느낌! 

그래서 앱 디자인을 전체적으로 한 권의 책이 되도록 해 봤다. 



이렇게 해봤는데, 마음에 든다! 책이라니, 내가 천재인가 싶었다. 


각 화면을 스와이프로 책 보듯 넘겨볼 수 있게 하면 쓰는 재미, 보는 재미가 있겠다는 생각이 들었다. 여기까지 하고 보니 책이라면 출판 정보가 있어야 하는 것 아닌가 싶었다. 그래서 이를 추가했다. 


출판정보

출판 정보를 드로어로 추가했는데, 설정과 글쓰기 같은 메뉴를 배치해서 모든 화면에서 바로 글쓰기로 갈 수 있게 하기 위함이었다. (개인적으로는 이 드로어가 표지 뒷장의 저자 소개가 있는 그 페이지 느낌이 나서 좋았다.) 

여기까지 하고 보니 몇 가지 문제가 있었는데, 개별 글들에 대한 수정, 특정 날짜로의 이동과 같은 기능이 없었다. (기획과 동시에 디자인이 진행되다 보니...) 이런 것을 넣기에는 드로어가 적당한데, 그렇다고 드로어에 모든 메뉴와 기능을 다 넣으면 책 느낌도 안 나고 사용하기에도 지저분하여서 싫을 것 같아 고민이 되었다. 공간을 확보하기 위해서 출판 정보를 일단 뺐다. 그리고 그 자리에 달력과 설정, 그리고 글쓰기를 배치했다. 그리고 반대편에 얇은 드로어를 추가했다. 책을 볼 때 붙이는 스티커나 책갈피 같은 느낌이기를 원했다. 그리고 그곳에는 해당 페이지와 관련된 기능들을 넣었다. 


 


위의 오른쪽 사진을 보면 하단에 1, 32라고 쓰인 게 있는데 이는 또 더 나중에 보니까 첫 장이랑 마지막 장으로 이동하는 기능이 있어야 할 것 같아서 어디에 넣을까 하다가 규칙엔 어긋나지만 그냥 저기에 넣었다. 가능하면 내비게이션은 한 손으로 할 수 있는 게 좋으니까. 


그다음엔 약간 기술적인 이슈가 있었는데, 

글쓰기 화면


안드로이드에서 글을 쓸 땐 EditText를 사용한다. 처음에는 이를 수정해서 원고지에 바로 글을 쓸 수 있게 하려고 찾아봤는데 뷰에 글자를 배치하는 부분은 오버라이드 할 수 없다. TextView를 상속받아 처리할 수 없고 아예 쌩 View에 직접 구현을 해야 한다. 그런데 쌩 View는 키보드 입력을 처리하는 로직이 없다. 그래서 이것 또한 구현을 해 줘야 한다. 마지막으로 입력할 때 복사, 잘라내기, 취소 등의 기능을 처리하는 부분도 구현을 해야 한다. 위에 언급한 부분을 다 합치면 '백자 하루' 전체의 소스보다도 많은 구현을 해야 한다. 따라서 포기했다. 

간단히 키보드 위에 EditText를 두고 여기의 변경 내용을 내가 만든 View에 그리도록만 해 두었다. 이는 매우 간단해서 따로 얘기할 필요도 없다. 앞으로 입력 부분을 숨기고 몇 가지 처리만 더 해주면 원래 의도했던 것과 같은 효과가 날 것 같다. 다만 이렇게 꼼수로 구현하면 어디서 어떻게 동작할지 알 수 없어서 불안하긴 한데, 새로 다 구현할 순 없으니.... 


다시 아이콘으로 돌아와서,


원고지로 구글 검색을 해보니 원고지 위에 펜과 지우개를 두면 멋져 보였다. 그래서 펜과 지우개가 있는 $1짜리 이미지를 하나 샀다. 이를 약간 수정해서 배치를 해보니 괜찮아 보였다. 


괜찮아 보였는데... 크게 보면 괜찮아 보였는데 아이콘으로 넣어보니 영 별로였다. 

이런 느낌. 


아이콘으로 쓰기엔 너무 디테일해서 보이지가 않았다.

그래서 남길 것을 고민해보니 펜이 좋을 것 같았다. 원고지도 괜찮을 것 같았지만, 원고지는 '씀'이 쓰고 있어서 선택의 여지가 없었다.


새 아이콘 후보들

그래서 간단하게 백자 하루라고 쓰고, 그 위에 펜을 뒀다. 쩐다 싶은 것은 아니었지만, 노력 대비 결과물은 괜찮은 것 같아 이 중에서 사용하기로 했다. 


그다음으로는 스와이프와 양쪽 드로어가 같이 있는 UI, 그것도 햄버거 버튼도 없는 UI에서 사용자들이 그것을 알기 어려울 것 같아서 가이드 화면을 추가했다. 

 

가이드 화면

원래는 이 화면에 손가락 애니메이션으로 가이드를 해주려고 했는데, 귀찮기도 하고, 이렇게 보여주고 그다음 화면에서 드로어를 한번 열어주는 것만으로도 충분한 것 같아서 이 상태로 끝냈다.


마지막으로 온보딩 화면을 만들었는데, 앱이 단순하니까 기능을 설명하기보다는 앱을 만들 때 내가 했던 생각들을 전달해서 동기 부여를 하는 것이 좋을 것 같았다. 그래서 카드 뉴스처럼 한 장씩 넘겨가며 읽을 수 있는 그런 스타일로 만들어 보았다. 효과가 있는지... 끝까지 다 보기는 할지 궁금하다. 





이렇게 개발을 끝내고 스토어 정보를 준비해서 오늘 출시했다. 더 넣고 싶은 기능들이 몇 가지 더 있었는데, 한없이 개발을 하게 될 것 같아서 일단 마무리했다. 개발 기간에 비해서는 전체적으로 만족스럽다. 앞으로 내가 직접 쓰면서 업데이트를 하면 될 것 같다. 그리고 이 앱에서 사용한 부분을 몇 가지 정리해서 다른 앱으로 복붙 해도 좋을 것 같아서 그 부분도 진행을 해 볼 계획이다. (예를 들면 원고지 앱) 


끝.



총 개발 기간 : 2016년 12월 6일 ~ 2016년 12월 12일


기획 : 장성환

디자인 : 장성환

코딩 : 장성환

퍼블리싱 : 장성환 

고객 대응 : 장성환

기타 : 장성환



관심 있으신 분들은 아래 링크에서 받으실 수 있습니다. 


여기까지 읽으셨다면 이 글에 좋아요! 


부탁드립니다. 





원모어띵! 


책 형태로 만들면서 책이라면 자고로 ISBN 이 있어야 하지 않겠나 싶었다. 물론 그렇다고 실제 ISBN을 만들수는 없으니(사실 일인 출판에 대한 것도 알아보기는 했다) 내가 부여하는 OYBN을 만들었다. OYBN, 즉 One Year Book Number는 세 파트로 구성되어 있다.


국가-년월-순서


이 번호는 앱을 처음 실행하면 받아오게 되어있다.  


출판 정보


그래서 출판 정보 페이지에 이렇게 표시가 된다. 한결 그럴듯 하지 않나? 여기에만 사용되는 것이 아니다.  



뒷 표지


책의 맨 뒷장에 있는 바코드에도 사용이 된다. 이미지의 바코드는 실제로 사용자의 OYBN을 앱 내에서 CODE128에 맞춰 생성한 바코드이다. 카보드 스캐너로 찍어보면 확인할 수 있다. 


물론 아무 쓸모는 없다. :-)

그냥 재미로.



진짜 끝. 






매거진의 이전글 앱 아이콘 A/B 테스트

매거진 선택

키워드 선택 0 / 3 0
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari
;