2019. 2. 18. 07:50ㆍUI 가벼운 이야기
* 이 글은 저의 브런치에도 발행되어있습니다.
저는 만드는 것을 좋아합니다. 나무, 가죽, 종이, 회로기판, 자석, 3D 프린팅, html, js, nodejs.. 어떤 재료나 방식이든 상관없이, 각각의 전문가는 아니지만 뭔가 만드는 것을 좋아합니다. 특히 쓸모가 있는 물건이나 작동하는 것들이요.
예전부터 모바일 앱을 만들어보고 싶었습니다. 개발에 대한 지식이 거의 없지만 인터넷을 검색해가며 js, node 등을 조금씩 익히며 원하는 웹페이지나 챗봇 같은 것을 만들 수 있었습니다. 하지만 모바일 앱은 그 벽이 너무 높았습니다. iOS앱을 개발할 수 있는 언어인 Objective-C나 Swift로 기본적인 앱 만드는 예제를 보며 시도해봐도 구조가 잘 이해되지도 않고, 개발 도구인 Xcode 사용법도 잘 모르겠더라고요.
그런데 React Native를 알게 되었습니다. 그리고 노마드코더의 ‘날씨 앱 만들기’ 영상을 보며 내 휴대폰에서 실제로 동작하는 앱을 만들 수 있었습니다. 앱 개발을 배워보고 싶은데 엄두가 나지 않는 디자이너라면 React Native를 한번 시도해보시는 것도 좋을 겁니다. 뭐가 어쨌든, 눈에 보이는 텍스트들의 생김새가 html, js와 비슷합니다. 개발을 위한 복잡한 툴이나 과정도 거의 필요 없습니다. 그냥 코드 에디터로 작성하고, 터미널에서 실행하면 됩니다. 그리고 React Native를 사용한 개발-배포를 너무나도 쉽게 만들어주는 Expo라는 toolchain이 있는데, 이것을 사용하면 개발도 더 손쉽게 할 수 있고(다양한 기본 라이브러리들), 개발 외의 복잡한 여러 환경과 준비사항들(앱 정보, 스토어에 등록하기 위한 준비, 증명서 등등)을 알아서 처리해줍니다.
그 후 제가 디자인한 날씨 앱을 React Native로 직접 개발해서, 앱스토어와 구글플레이에 올리게 되었습니다. 물론, 제가 원하는 기능을 개발하기 위해서 구글링도 많이 하고 오랫동안 시간을 들여야 해서 개발을 완료하는 데는 시간이 오래 걸렸습니다 :O
지난 12월, 우붓에서 머물면서 기존에 만들었던 날씨앱의 디자인과 개발을 새로 했습니다. 작은 동네에서 3주 동안 할 게 없으니 집중이 잘 되었죠.
처음 앱을 만들 때는 개발을 하는데 머리를 다 쓰다 보니 디자인은 그냥 프로토타입처럼만 하고, 개발이 힘든 건 대충하고 했는데, 이번엔 제가 어디까지 가능하고 불가능한지 대충 파악을 했으니 리디자인을 하는 것에 집중했습니다. 물론… 새로운 기능들도 넣으려고 해서 개발을 하는 것이 머리가 아프기는 했지만요.
그래서 완성한 앱의 모습
아래와 같은 기능, 정보를 제공합니다.
- 현재의 온도와 대기 질 수치
- 어제와 오늘, 내일의 날씨 비교
- 미세먼지, 초미세먼지 수치, 체감온도, 풍속, 해가 뜨고 지는 시간
- 한 주간의 일기예보
어제와 오늘, 내일의 날씨 비교는 pxd 무이 님의 글과 디자인을 많이 참고했습니다. 무이님은 참 대단한 분입니다!
그리고 대기 질 상태에 따라 배경색이 바뀌는 것은 미세먼지 정보 앱으로 유명한 ‘미세미세’를 참고했습니다. 그전에도 대기 질 정보제공 서비스에 이런 디자인이 있었는지는 모르겠지만, 즉각적으로 상태를 확인하는데 딱 좋았습니다.
주요 기능들에 대한 디자인은 이렇게 기존에 있었던 것들을 잘 엮으려고 했고, 전체적인 그래픽디자인은 (제가 정리할 수 있는 능력 안에서) 정보를 정확히 확인할 수 있는 정도로만 하려고 했습니다. 그래픽 디자인을 전공하지 않아서 한계가 있고, UI가 복잡해지면 개발하기도 어렵기 때문입니다. 처음엔 터미널 같은 화면에 정말 텍스트만으로 구성된 형태로 할까 생각했다가, 그러면 강약도 없고 정보가 제대로 전달되지 않으리라 생각되어 바꾸게 되었습니다.
진행했던 프로세스
맨 처음 개발을 배우기 시작할 때부터 지금까지 진행했던 전체적인 프로세스를 정리하면 아래와 같습니다. 모바일 앱을 서비스하는 스타트업의 프로세스와 비슷합니다. 1, 2번은 빼고요.
- 개발의 기본적인 것 익히기
- 뭐든 예제를 보고 따라 해서 성공해보기
- 만들고 싶은 앱 정하기
- 날씨, 미세먼지 앱을 만들어보자!
- 기본 기능이 되는지 개발 테스트해보기
- 대기 질 정보 API를 제공하는 곳이 있을까? 그 데이터를 받아와 화면에 표시할 수 있을까?
- 디자인하기
- 디자인한 것 중, 개발해보지 않은 것들이 가능할지 알아보기
- 내가 Pagination을 할 수 있을까? 세팅 페이지에서 값을 바꾸고 저장하고 메인페이지에 돌아오면 그 세팅 값이 반영되게 할 수 있을까?
- 디자인 수정하기
- 개발 가능한 만큼으로 디자인 수정하기
- 개발하기
- 작은 단위 하나하나 개발해서 확인한 것들을 하나로 묶는다. 이것도 매우 난관이다
- Google Analytics 넣기
- 일단 언제 쓰게 될지 모르더라도 빠짐없이 다 로그를 남기도록 하자. 이제 Firebase가 더 좋을 텐데, Expo 개발환경에서 넣기는 어렵다
- 테스트하기
- 시뮬레이터로 해보고, 실제 폰에서 돌려보고 동작을 확인한다
- 스토어에 올리기
- 스토어에 올리고, 그 버전을 테스트해본다. 제대로 동작하면 Release 한다
- 마케팅
- 가만히 있으면 유저들에게 노출조차 되지 않는다. 내 앱을 알릴 수 있는 행동을 해야 한다
- 수치 관찰
- 앱스토어, 구글플레이의 통계들을 확인하고, Google Analytics의 통계를 확인해보며 관리한다. 중국, 미국에는 알린 적이 없는데 다운로드가 일어나고 있다. 다음엔 중국인들을 대상으로 마케팅해야지!
- 유저들의 피드백 반영
- 스토어 리뷰나 커뮤니티의 댓글들을 보며 피드백을 반영한다. 체감온도와 풍속을 추가해달라던가, 수치가 잘못된 것 같다는 피드백 등등..
배운 점
디자인에 빠진 케이스들이 많다
디자인한 것을 실제로 구현할 때에는 생각보다 반영해야 할 케이스들이 많았습니다. 스타트업에서 이미 경험했던 것들도 가끔 까먹게 됩니다. 그러니 당연히 테스트케이스 작성과 QA 과정이 필요한 거겠죠. 그리고 거기서 배운 것들을 다음에 디자인할 때는 더 잘 처리해야 합니다...고 다짐합니다.
- 0~23시간 그래프에 현재 시각 위치 위에 수치를 표시하고 싶다. 그러면 0일 때와 23일 때에는 어느 위치에 가게 해야 하는가? 그냥 위에 표시하면, 그래프 영역을 벗어날 수 있다.
- 0~23시간 그래프에 날씨 아이콘을 표시하고 싶다. 날씨가 전 시각과 다를 때에만. 그런데 0~23시간 그래프는 좁고, 날씨 아이콘 하나는 2시간 이상의 영역을 차지한다. 전 시각과 현재 시각의 날씨가 다르면, 아이콘을 겹치게 표현해야 할까? 아니라면, 어떤 아이콘을 표시해야 할까?
구현 할 때는 생각대로 할 수 없다
개발의 한계도 아니고, 외적인 한계들이 있는 경우들도 있습니다. 그런데 저와 같은 디자이너들은 역할 상 그것을 파악하기 힘든 경우들이 있습니다. 그렇다고 그런 것들을 개발자나 다른 누군가 당연히 해줘야 한다고 생각해서는 안되기는 합니다. 함께 잘 파악하고, 의사소통해야겠죠. 물론 그것들을 더 잘 파악할 수 있는 건 실제로 붙이고 만들어야 하는 개발자이기는 합니다. 친절한 개발자라면 그런 한계 상황들을 잘 설명해주겠죠.
- 앱이 Foreground에 있는 동안, 10초에 한 번씩 자동으로 현재 온도와 대기 질 정보를 업데이트하고 싶다. 하지만 날씨 정보 API를 한번 호출할 때마다 돈이 든다. 그렇게 할 수 없다.
- 주소를 표시할 때 '역삼역 > 역삼동, 강남구, 서울특별시' 이렇게 (한국 사람들이 익히 알고 있는) 정확한 레벨들을 표시하고 싶다. 하지만 나라와 지역에 따라 제공하는 주소 레벨들의 정의가 다르다. 어쩔 수 없이 대략의 케이스들을 나누어 비슷하게 표시하고, 그 외 상황(else)을 만들어 대처해야 한다. 물론 더 좋은 유료 API를 사용하면 그런 문제도 자동으로 해결되겠지만....
개발을 하는 것은 어렵다
그냥, 생각보다 어렵습니다. ㅠㅠ
그리고 뿌듯합니다. 물론 엉망진창인 코드겠지만, 제가 아는 범위 내에서 구조가 잘 정리되어 있고, 잘 연결된 모습을 보면 잘 디자인된 스케치, 흐름을 보고 있는 것 같습니다.
더 나은 UI를 위한 개발은 미루게 된다 (배운 점인가?)
사실 지금도 MVP 정도에 가깝습니다. 개선하고 싶은 것들이 군데군데 있지만, 머리를 좀 식히고 유저들의 반응을 보고 개선을 하려고 합니다...하고 자기합리화를 하며 뒤로 미루고 있습니다. 가장 개선하고 싶은 것은 로딩 및 인터랙션 간의 UI Animation인데, 아직 손을 대지 못하고 있습니다. 한 번도 개발해보지 않은 것이라 시간을 들여 공부 해야 하기도 하고요. 데이터를 받아와 표시하고, 구조들끼리 연결되고 기능이 제대로 동작하는 것은 뿌듯한데, UI를 위한(유저들을 위한) 기능들은 미루게 됩니다. 개발자들도 어느 정도는 이런 비슷한 마음이 있지 않을까요. 특히 시간에 쫓기거나 지친 상황이라면요. 스타트업에 3년 넘게 있으면서 개발자들에게 많이 동화되었지만, 앱을 실제로 개발할 때 제는 디자이너가 아니라 딱딱한 개발자처럼 생각하게 되었습니다. 물론, 제가 있던 스타트업 개발자들은 이런 '더 나은 UI를 위한' 것들을 잘 개발해주었습니다. 특히 데이터 근거와 '유저들에게 더 낫겠다'고 수긍할 수 있는 디자인이라면 더욱더.
...한번의 과정을 끝내고 나니 제가 하기 싫어서 괜한 핑곗거리를 찾으려고 한 것 같습니다. 개발자분들 죄송합니다 (--)(__)
이야기 정리
코드도 개발자가 보면 분명 엉망진창일 것이고, 디자인이 완벽한 것도 아니긴 하지만, 어쨌든 끝까지 만들었습니다. 뭐든 만드는 일은 그러리라 생각합니다. 당연히 전문가에게 맡겨야 할 것들도 있겠지만, 전문가만큼 만들지 못한다고 해서 해보지 못할 것들은 없다고 생각합니다. 가죽으로 배터리 케이스를 만든다던가, 나무로 모니터 받침대를 만든다던가, 내가 디자인한 MP3 플레이어를 만든다던가, 슬랙봇을 만들던가... 잘못하면 위험하거나 남에게 해를 끼치는 것들이 아니라면 직접 만들어 볼 수 있습니다! 그러다 관심이 생기면 더 깊게 공부하고요.
하지만 처음에 이야기했던 것처럼, 모바일 앱을 만드는 것은 장벽이 너무 높습니다. 그래도 React Native + Expo로 간단한 앱을 만드는 것을 해본다면, 지난번 슬랙봇 만들기처럼 '초반의 성공에 대한 기쁨'을 맛볼 수 있을 겁니다. 그리고 이것저것 해보다 보면 뿌듯함도 느껴지고, 아주아주아주 작은 부분이지만 개발에 대한 이해도 조금 할 수 있을 겁니다.
하지만 역시나, 다운로드 수는 제 마음 같지 않습니다. 무수한 초기 스타트업들의 가장 중요한 고민이겠죠. 서비스의 컨셉과 디자인과 개발이 아주 멋지고 잘 되었더라도, 좋은 제품이더라도, 유저들에게 보이지 않으면 의미가 없습니다. 적당한 가격에 기능성도 있고 아주 잘 만들어진 스툴이라도, 고객들에게 알려지지 않으면 의미 없는 제품이 되죠. 대신 유명 디자이너가 디자인한, 일반적인 스툴과 별다를 게 없는 스툴은 여기저기 화제가 되고요. 이케아같이 널리 알려진 매장에서 파는 스툴은 그냥 많이 팔리고요. 역시, 요즘 시대는 마케팅과 플랫폼이 중요합니다. 현혹하기 위해서가 아니라, 어떻게든 알리는 것이 필수니까요. 그래서 당분간은 앱 개선은 중단하고(자기합리화) 앱을 알리기 위한, 다운로드를 늘리기 위한 시도들을 해보기로 했습니다. 이럴 때 Google Analytics와 애플, 구글에서 제공하는 Store들의 Statistics들이 필요하죠!
다음에 좋은 운영 지표들이 생겨서, 그것에 대한 글을 쓸 수 있기를 기대하며 글을 마칩니다.
아, 앱은 아래의 링크로 다운 받을 수 있습니다 :D
iOS 앱스토어 링크
Android 구글플레이 링크