19년 9월 사내 App 개발 동호회에서 기획과 GUI를 맡아줄 수 있냐는 제안(?)을 받았고, App 제작의 A-Z까지 경험해보고 싶은 마음에 기획자 겸 디자이너로 참여하게 됐다. 이 가벼운 마음은 길고 험한 여정의 시작이 되었….😂
사회생활을 하며 Design Concept 또는 Prototype을 위한 시안을 제작한 경험은 다수 있었지만 실제 App개발을 위한 Design경험은 부족했기 때문에 개인적으로 많이 성장할 수 있는 Side project였다. Project를 진행하며 Medium, Brunch의 여러 글을 참고했는데 전체 과정을 다루는 글은 찾기 힘들었다. 나의 경험담이 빈틈도 많고 답답한 부분도 많겠지만 처음 App을 만드는 사람들에게 조금이나마 도움이 되길 바라며 나의 경험을 공유하고자 한다.
다음과 같은 과정으로 App이 제작됐다.
19.09.20. App Item 선정
19.09.26. Brainstorming 및 개발범위 협의
19.10.01. UXUI Concept
/// 10.03~10.16 휴가로 잠시 중단
19.10.29. UI Guide
/// UI Guide 기반 개발 및 Review(나름 Sprint?)
19.12.03. GUI Guide와 Animation Guide
/// 무한한 Test와 Review (그리고 팔다리 자르기😨)
20.02.26. Android app Play store에 등록!! 🎉🎉🎉🎉(갑자기..?)
0. App Item 선정
19년 9월 초 Item 선정을 위한 첫 회의를 진행했다. 동호회의 모든 인원이 각자가 원하는 App을 자유롭게 이야기 했고, 약 20여개의 Item이 발의됐다.
나는 2가지 Item을 제안했는데, 첫번째는 매일 점심시간마다 메뉴를 고민해야하는 직장인들을 위한 “밥구르망”이라는 App이었다. 먹고 싶거나 먹고 싶지 않은 음식 종류만 선택하면 근처에 위치한 식당 중 하나를 무작위로 제시해주는 App이다. (언젠가는 만들고싶다!!🍽)
두번째는 친구들과의 모임에서 총무 역할을 많이 하는 개인적인 경험을 토대로 한 App으로, 차수별로 참여한 사람을 선택하여 정산을 할 수 있는 총무 App이었다. 이미 정산을 위한 좋은 Service들이 많지만, 나의 경우 친구들이 늦게 가고 일찍 갈 경우가 많아 PC의 Excel을 이용한다. 이 불편함을 해결하기 위해 1차, 2차 등 차수별로 참여한 인원을 선택하여 정산하는 Service를 제안했다.
높은 경쟁률을 뚫고(?) 총무 App이 우리의 첫번째 Project로 선정됐다 🎉
1. Brainstorming 및 개발범위 협의
Brainstorming
우선 20대 중반에서 30대 초반으로 구성된 동호회 인원들을 대상으로 사용자 조사를 시작했다. 다행히도 다들 다른 성격의 모임에 속해 있어서 여러 방면으로 의견을 들을 수 있었다.
- 총무 경험이 있는지?
- 있다면 정산은 어떻게 하는지?
- 정산할 때 사용하는 App이 있는지?
- 있다면 좋았던 점과 불편했던 점은 무엇인지?
- 그 외 필요한 기능은 무엇인지?
우선 큰 질문들을 기준으로 Brainstorming을 하여 우리가 구현하고 싶은 기능들을 나열했다. 정말 말도 안되는 것들까지 가감없이 말하다보면 혼자는 생각하기 힘든 의외의 Benchmarking point가 나온다. 개인적으로 Project 초기 단계에서 꼭 거치는 꿀같은 시간이다.
개발범위 협의
Brainstorming 과정에서 몸집이 불어난 App을 가지치기하여 실질적으로 개발 가능한 범위로 축소시켰다. 협의 중 가장 큰 영향을 끼친 것은 Server 개발을 제외한다는 것이었다.
소규모 Team에서 App개발을 할 때 Server가 필요한지 정하는 것은 아주 중요하다. 쉽게 말해 App에서 행해지는 모든 Task를 기기 내에서 끝낼 수 있으면 Server가 필요 없다. 우리 App의 경우 결제 내역을 자동으로 불러온다 라는 Idea가 있었는데, 이 경우 결제 내역을 가져올 곳이 필요하다. 은행 입출금 내역이라던가 신용카드 결제 내역이라던가. 회원가입 및 Login 기능을 위해서도 회원 정보를 저장하고 관리할 Server가 필요하다.
(개발자님들 제가 잘못 이해하고 있다면 Feedback 부탁드려요😉)
Server까지 구축할 경우 더 편리한 기능이 많아지겠지만 App 출시가 동호회의 가장 큰 목적이었기 때문에 과감하게 Server를 포기했다. 이를 정리한 것이 아래의 Project 개요이다.
2. UXUI Concept Review
UXUI Concept
Project 개요를 토대로 App의 큰 골격을 만들었다.
가상의 인물을 설정해(Persona까지는 아니지만) 시나리오를 작성하고 UXUI Concept을 도출했다.
Menu Tree
메뉴를 정의하고
Wireframe
대표화면을 그렸다.
Wireframe 단계에서 위와 같이 Design이 많이 되어있으면 GUI Designer의 창의력을 방해할 수도 있고, 기껏 작업해놓은 것들이 삽질이 될 가능성이 높다. Review 후 많은 변경사항이 나오기 때문이다. (항상 불길한 예감은 틀리지 않..)
하지만 이 Project의 경우 기획과 Design을 한 사람이 해야했고, 휴가 일정으로 시간이 촉박하여 속도를 좀 많이 냈다. 그리고 Project를 시작하기 전 공통 Component를 정리해놓았기 때문에 큰 공수를 들이지 않고 실제 Product에 가까운 결과물을 낼 수 있었다.
Feedback
의견을 취합했다.
화면을 보고 좋은 부분, 헷갈리는 부분, 필요없는 부분 등에 대해 자유롭게 토론을 했다. 여기서 또하나 주의해야 할 것은 기획자가 중심을 잡고 있어야 한다는 점이다. 나는 많은 사람들의 의견을 수용하는 편인데 이 점이 장점이기도 하지만 단점이 되기도 한다. (잘못하면 App이 산으로 간다. 심지어 굉장히 빠르게..🚵🏻♀️) 이럴때 앞에서 작성했던 Project 개요, UXUI Concept을 옆에 펴놓고 취할 의견과 버릴 의견을 정하면 큰 도움이 된다.
3. UI Guide
실제 화면설계에 들어간다. 나는 이 단계를 UI Guide라고 부르는데 화면기획서, 화면설계서 등 부르는 명칭은 다 다른 것 같다. 쉽게 말해 화면이 어떻게 구성되고 화면의 요소들은 어떻게 작동할지를 정의한 문서이다.
아, 우리 Team은 UI Guide와 GUI Guide를 모두 Invision으로 공유하기로 했다. 작성된 UI Guide에 GUI를 입혀 Description을 확인하기 용이하도록 하기 위해서다. 이게 좋은 방법인지는 아직 의문이지만 기획/디자이너가 한명이라면 개발자들의 동의 하에 해보는 것도..?🤔
왼쪽은 화면의 모습을 배치하고, 오른쪽은 Description을 작성했다. Interaction이 필요한 경우 Description 하단에 정의했다.
이렇게 UI Guide를 공유하면 개발자들은 Invision에서 확인하고 궁금하거나 덧붙이고 싶은 것에 대해 의견을 남겼다. 이런식으로.
4. GUI Guide와 Animation Guide
GUI Guide
화면 개발이 어느 정도 이루어졌을 때(화면 이동이 되는 수준) GUI를 적용 시켰다. 사실 UI guide를 GUI guide의 밑바탕으로 사용할 예정이었기 때문에 Margin, Font 등을 고려하여 UI guide를 작성했다. 그리고 Symbol 작업을 많이 해놓은 덕분에 GUI에 큰 시간을 투자할 필요가 없었다. Color와 형태를 손보는 수준..? 👏🏻
Animation Guide
필요에 따라 Protopie로 작업한 Animation guide를 제공했다. 말이나 문서로 설명하기 애매할 때 영상으로 만들어서 공유하는게 속도나 정확성 면에서 탁월하다. 그리고 내가 만든 수준은 Tutorial 영상을 보고 공부하면 반나절이면 만들 수 있을만큼 쉽다. (Protopie 만세! 🙌🏻)
5. 무한한 Test와 Review
Test의 경우 Animation guide가 끝난 후 시작한다기 보다는 개발자가 개발 App을 보여주는 단계부터 시작된다. 참으로 길고 긴 여정이다. 기획자와 디자이너는 자신의 요구 사항이 제대로 구현 됐는지를 꼼꼼히 검수하고 Feedback을 주면 된다. 이 과정이 길면 길수록 사람들은 지치지만 제품의 완성도는 올라간다. Prototyping까지 만들어서 확인했음에도 실제 개발 환경에서는 어색하게 보이는 부분이 있을 수도 있고, 기획부터 잘못된 요건이 있을 수도 있다. 이 경우에는 빠르게 고치고 반영하여 오류를 보정해야 한다.
많은 Project에서 겪는 일이 우리 Team에서도 일어났다. 회사 동호회이긴 하지만 업무 외 시간을 활용한다는 것이 전제 조건이었기 때문에 퇴근 후 투자하는 시간이 App을 만드는데 충분한 것은 아니었다. 개인적인 경험들에 비해봐도 꽤나 힘든 일정이었기 때문에 Project를 끝내지 못하고 나가는 구성원들이 많았다. 결국 나와 Android 개발자 2명, iOS 개발자 1명, Project leader 1명으로 총 5명만 살아남았다(?).
우리는 결정을 해야했다. 시간을 더 투자하여 처음에 기획한 App을 만들지, 꼭 필요한 주요 기능에 집중하여 App 출시를 할지. 이미 초기에 목표한 출시일을 2달 가량 지난 상태였기도 했고, 최초 우리의 목적이었던 App 출시를 이루기 위해 팔다리를 자르고(😭😭😭) 정산에 필요한 기능에 집중했다.
6. Android app Play store에 등록!!
드디어 Team 구성원이 동의한 수준으로 개발이 되었다. 기획자가 할일은 아직도 남아 있다. Play store(혹은 App store)에 등록할 정보를 정의하는 일! 광고 또는 설명이 되는 글과 Image들을 매력적으로 만들어야 한다.
(적어도 나는 Screenshot이 구리면 App을 구입하지 않는다.)
Android와 iOS는 등록 시 입력하는 정보가 다르기 때문에 잘 확인하고 작성해야한다. 내가 알기론 Screenshot에 사용된 기기 mockup이 Reject 사유가 될 수 있다. 예를 들어 Play store에 iPhone mockup을 사용하면 reject이 될 수 있다. 솔직히 말해 2벌 작업하는 것이 귀찮아서 이것도 저것도 아닌 기기의 mockup을 사용했다.
마무리
이렇게 길고 험했던 나의 여정 이야기는 끝났다. 고 하고싶지만, Android는 아직 검수 중이고 iOS는 20년 상반기 출시를 목표로 하고 있으니 끝은 아니다…😭
이 Side project를 통해 하나의 App을 제작하는 과정(아가를 출산하는 느낌..🤔)을 경험할 수 있어 개인적으로 큰 성장의 기회였다.
또, 개발자를 고생시키지 않고 사용성이 좋은 효율적인 UI에 대해 많이 배웠.. (아직도 많이 배워야한다.)
어떤 일이든 하고나면 어딘가에는 쓰인다는 말을 증명하듯, Side project 이후 실제 업무에서 전체적인 흐름을 파악하는게 훨씬 쉬워졌다. 또 Component에 대해 여려가지 개념이 뒤섞여 복잡했던 머릿속이 많이 정리되어, 나의 기획서는 더 일관되고 간결해졌다.(고 믿는다.)
이제 막 UXUI 세상에 뛰어든 사람이라면 작은 규모의 Side project를 해볼 것을 적극 추천한다. 한번이라도 전체 Process를 경험해보면, 회사에서 아무것도 모르는데 아는 척하며 넘어가야 하는 경우가 확실히 줄어든다. 🙌🏻
이제 Google Play에서 정산의 시간을 만날 수 있습니다! 👍🏻
