어플리케이션 기획 절차

어플리케이션을 만들어서 마켓에 릴리즈하고 사람들이 사용하게 하려면 사용자들이 생각하는 것과 다르게 기획이란 많은 과정이 들어갑니다.

그래서 우리가 사용하는 어플리케이션은 이러한 방식으로 개발된다 라는 것을 써보려고 합니다.

여기서 저는 모바일 앱을 기획하고 나중에 서비스까지 하는 것의 일련의 과정에 대해서 작성하려고 합니다.

모바일 앱 제작은 일반적인 응용소프트웨어 제작과 같은 단계를 거치게 됩니다.

서비스 기획 -> 디자인 -> 개발 -> 출시/배포

1. 서비스 기획

:: 아이디어에 대한 구체화, 세부기능 정리, 와이어 프레임 작성 등을 해서 어떤 서비스를 어떻게 할 것인지 그림에 대한 것을 전반적으로 명세합니다.

ex) 아이디어에 대한 구체화 상세설명, 세부기능에 대한 정리, 와이어 프레임 작성 등

2. 어플리케이션 UI/UX 디자인

:: 서비스 기획 단계에서 디자인 시안과 GUI 디자인을 하고 어떤 서비스를 어떻게 할 것인지에 대한 밑그림이 그려졌다면 이제는 디자인적으로 사용자들에게 어떻게 보여지고, 어떻게 접근이 가능하게 할 것인지에 대한 진짜 서비스를 제공하는 형태의 디자인을 완성합니다.

이과정에서는 실제 어플리케이션이 개발이되어서 사용만 안될 뿐이지 사용자가 실제로 어플리케이션을 사용하는 것에 대한 로직과 디자인이 모두 들어가게 됩니다.

ex) 디자인 시안, GUI 시안 등

3. 서비스 개발

:: 이제 기획했던 아이디어를 가지고 어플리케이션 UI / UX가 다 고려했기 때문에 서비스를 개발합니다. 실제로 어플로 만들어서 기획과 디자인 단계에서 만들었던 모든 것들을 똑같이 어플리케이션으로 작동가능하고 사용자들이 실제 만져볼 수 있도록 개발합니다.

이과정에서는 앱 개발도 하겠지만 그 backend에서 서버를 개발 구축하고 시스템과 DB를 설계합니다.

개발은 솔직히 기계적으로 어떻게 더 좋은 성능으로 구현할 수 있는가를 생각하는 것이지 기능적으로 더 좋고 아이디어를 수정할 수 있는 단계는 아닙니다.

다만 기술적으로 구현가능한지를 판별하여 기획과 디자인 단계에서 간과했던 점들을 지적하여 다시 기획이나 디자인 부분을 수정할 수는 있습니다.

ex) 앱 개발, 서버 개발/구축, 시스템/DB 설계 등

4. 출시/배포

:: 개발을 마무리합니다. 그리고 최종적으로 시연을 해보고 미쳐알지 못했던 부분이나 디버깅을 통해서 출시를 준비하고,

마켓에 배포를 합니다. 그리고 이 과정에서는 어플리케이션에 대한 홍보 또한 같이 진행합니다.

ex) 개발된 앱 시연을 통한 확인, 마켓 배포, 홍보활동 등

* 제작과 개발의 뜻은 다릅니다.

제작 : 기획부터 개발까지 하나의 서비스를 전부 만드는 것을 말합니다.

즉, 어플리케이션을 만들어서 서비스하기 전까지 모든 과정을 이야기 합니다.

개발 : 결정된 기획과 디자인을 바탕으로 소프트웨어를 만드는 것을 말합니다.

즉, 기획과 디자인이 정해지면 그대로 소프트웨어를 만드는 작업까지를 이야기 합니다.

*****************************

모바일 앱 제작 단계 해야할 일 자세한 설명

*****************************

1. "서비스 기획" 단계에서 해야할 일.

1-1) 아이디어 구체화하기

: 어떤 앱을 만들 건지에 대한 아이디어를 구체화합니다.

예를 들어, "중고거래를 중계해주는 앱", "공공데이터를 기반해서 학교 정보를 제공해주는 앱", "사진을 저장하고 공유할 수 있는 앱", "집을 빌릴 수 있는 앱" 과 같이 아이디어를 구체화 해서 정의하고,

그 정의한 아이디어에 대한 설명을 붙입니다.

1-2) 구체적인 기능 리스트화하기

: 아이디어를 정의했으면 이제 그 아이디어를 뒷받침하기 위해 어떤 기능을 제공할 것인지에 대해서 나열합니다.

예를 들어, "중고거래를 중계해주는 앱"의 경우,

"1:1로 만날 수 있게 해당하는 장소를 쉽게 보여줄 수 있게 지도를 제공한다", "상대방이 입금을 하면 중간에서 그 돈을 보유하고 있다가 거래가 완료되면 그때 전달해준다", "중간에 채팅을 할 수 있게 해준다", "거래기록을 통해서 등급을 설정해준다."

와 같이 구체적인 기능을 리스트화 시킵니다.

1-3) 주요 UI 구상하기

: 구체적인 기능 리스트화하기 처럼 해당하는 아이디어의 기능들을 리스트로 나열하면, 그 나열한 기능들을 구체적으로 어떻게 구성하고 개발을 할 것인지에 대해서 UI 디자인을 하는 과정입니다.

예를 들어, "1:1로 만날 수 있게 해당하는 장소를 쉽게 보여줄 수 있게 지도"를 보여주는 탭을 만들어서 탭을 누르면 거래 단계에서 바로 볼 수 있게 한다 라던지, 구체적인 아이디어 기능의 리스트를 어떻게 화면에 보여줄 것인가에 대한 구상을 합니다.

1-4) 와이어 프레임 그리기

: 하단의 그림과 같은 식으로 그림을 그려서 AI를 표현하거나, 실제 그림을 손으로 그려서 그것을 프로토타입화 시켜도 상관없습니다.

머리가 좋다면 그냥 머리 속으로 어떻게 그릴 것인지에 대해서 구상만 해도 상관없습니다.

하단 그림 처럼 이미지로 표현하고 싶다면 Pencil이라는 앱을 이용해서 와이어 프레임을 그릴 수 있습니다.

http://pencil.evolus.vn/

앱이 아닌 웹에서 와이어프레임을 그리고 싶다면 다음카카오에서 출시한 Oven을 이용하는 것도 나쁘지 않은 것 같습니다.

https://ovenapp.io/

2. "어플리케이션 UI/UX 디자인" 단계에서 해야할 일

2-1) 어플리케이션 서비스 플레폼 정의, 기본 테마 이해하고 사용하기

: ① 플레폼 정의는 안드로이드용 앱을 제작할 것인지? iOS용 앱을 제작할 것인지? 를 정의 합니다.

그리고 ② 서비스를 지원하려는 버전을 API 버전 범위를 정의합니다. 

예를 들어, 서비스 사용층이 학생이 주 사용층이라고 가정하면, 학생은 스마트폰의 스펙트럼이 구형폰부터 최신형 폰까지 다양하기 때문에 구형 API 버전부터 최신인 API 버전까지 지원해야합니다.

범위를 지정할 때는 반드시 최신형 API를 기준으로 범위를 지정하길 바랍니다. 즉, 최신형 API는 무조껀 지원을 해야하고, 구버전까지의 범위는 필요한 범위를 결정하시면 됩니다.

2-2) 기본 테마 이해하고 사용하기

: 최신 플레폼 API는 지원을 기본으로 하기때문에, 해당하는 플레폼의 디자인 테마를 참고하여 사용합니다.

안드로이드 같은 경우,

안드로이드 버전 1.5 ~ 안드로이드 2.3 : <정의되지 않음>

안드로이드 3.0 ~ 안드로이드 4.4 : Holo UI

안드로이드 5.0 ~ : Material Design

테마를 정해 놓은 정책을 사용하고 있습니다.

자세한 내용과 정책은 https://developer.android.com/design/index.html 를 통해서 볼 수 있습니다.

마찬가지로, 현재의 iOS 디자인 가이드의

자세한 내용과 정책은 https://developer.apple.com/ios/human-interface-guidelines/ 를 통해서 볼 수 있습니다.

2-3) 원하는 디자인으로 기본 테마 커스텀하게 만들기

: 원하는 디자인이 따로 있거나 기본 테마가 맘에 들지 않는 경우에도 분명 기본 테마의 가이드라인을 준수한 상태에서 커스텀한 디자인을 만들어야합니다.

즉, 기본 테마에 대한 이해가 제일 처음이 되어야 합니다.

왜냐하면 안드로이드나 iOS 중 플레폼을 선택해서 사용하는 경우,

해당 플레폼 위에서 일관적인 느낌을 주기 위해서 기본 테마로 일관성을 유지 시킬 수 있는 정책을 적용하고 있기 때문입니다.

이러한 정책이 좋은 점은 일관성 없이 앱이 보여져서 사용자들이 익숙한 UX / UI 패턴으로 해당 플레폼의 앱을 사용하는 경우, 손쉽게 사용을 할 수 있는 장점이 있습니다만,

안 좋은 점은 정책적으로 정해져있다보니, 새롭고 창의적인 디자인을 적용하지 못하고, 안드로이드 사용자는 iOS의 느낌이 나는 앱을 사용하고 싶지만 그렇게 하지 못할 수 있는 점이 있습니다.

2-4) 주 색상, 보조 색상 정하기

: 어플리케이션의 색상의 느낌을 줄 수 있는 주 색상을 정합니다. 

주 색상을 정하는 이유는 앱 내부에서 강조해야할 부분과 강조하지 않아야할 부분, 기본상태 등을 표현하기 위함입니다.

기본 상태는 주색상으로 지정하고, 강조해야할 부분은 주 색상에서 좀더 진한 색상으로, 강조되지 않아도 되는 부분은 주 색상에서 약간 흐린 색상으로 지정합니다.

예를 들어, 기본버튼의 색상이 빨강이면, 눌러진 상태는 진빨강, 사용할 수 없는 버튼은 연빨강으로 지정합니다.

보조 색상은 앱의 주요 부분이 아닌 다른 부분에 사용할 수 있습니다.

예를 들어, 액션바의 색상이 빨강이면, 상태바의 색상은 보조 색상이었던 진빨강으로 지정합니다.

2-5) UI를 손쉽게 커스텀할 수 있는 방법

: 현재 안드로이드의 최신 버전 테마는 Material Design이고 이를 하위 버전에서도 동작하게 하려면 Suppot 라이브러리를 사용하지만 완벽하게 하위버전에서 Material Design을 돌아가게 할 수 없습니다.

그래도 비슷하게 보이게 해줘야하기 때문에 

다음 사이트를 통해서 변환해서 커스텀하게 만들어 주는 작업을 해야합니다.

http://romannurik.github.io/AndroidAssetStudio/

2-6) 오픈소스 GUI 컴포넌트 라이브러리 사용하기

: 기본 디자인이 아닌 커스텀 디자인을 사용하기 위해 커스텀 컴포넌트들을 일일히 처음부터 모두 다 구현할 필요가 없습니다.

이미 인터넷에 구글링을 하면 오픈소스로 공개된 많은 커스텀된 GUI 컴포넌트 코드들이 있습니다.

오픈소스 라이브러리들은 대부분 기본 디자인의 정책을 기반으로 만들어졌기 때문에 그냥 가져다가 적용하는 것만으로 개발의 UI/UX 디자인의 품질 향상을 가져올 수 있습니다.

오픈소스 안드로이드 커스텀 뷰 라이브러리 모음 참고 사이트

https://github.com/wasabeef/awesome-android-ui

오픈소스 iOS 커스텀 컨트롤 라이브러리 모음

https://www.cocoacontrols.com/

2-7) 직접 GUI 컴포넌트 커스텀하기

: 기본으로 제공되는 디자인과 오픈소스 라이브러리에 원하는 GUI 컴포넌트가 없으면 직접 구현해야합니다.

직접 구현시에는 계속 이야기하였지만 기본 컴포넌트와 라이브러리인 디자인 정책의 기반으로 수정해야합니다.

절대 임의로 커스텀하게 구현하면 안되고 기본 디자인을 준수하면서 추가하고 부분을 수정하는 식으로 가야합니다.

안드로이드 커스텀뷰 구현하기 참고 사이트

https://developer.android.com/training/custom-views/index.html

2-8) 아이콘, 기타 테마 이미지 리소스

: 앱 아이콘으로 시작해서 앱에는 시각적인 요소로 여러 테마 이미지 리소스가 필요합니다.

예를 들어, 검색버튼이라던지 이미지를 보여주는 모양아이콘이라던지 효과를 주는 아이콘 등을 사용하는 경우가 있습니다.

하지만 Android 내부에서 기본 이미지를 제공하기도 하지만, 자료가 많지 않고 제공도 전부 다 해주는 것도 아닙니다.

하지만 구글이 Material Design을 발표하면서 같이 Material Design의 아이콘 셋트도 오픈소스로 공개했다.

해당 자료는 다음 사이트에서 얻을 수 있습니다.

https://github.com/google/material-design-icons/releases

또한, 앱 아이콘과 같은 다른 색상이 들어간 이미지 등 다양한 아이콘이 필요할 때는 아래 사이트에서 찾을 수 있습니다. 또한 구글 이미지 검색으로도 나옴니다.

다만 주의해야할 점은 가져다가 사용하려고 할 시에는 반드시 라이센스를 확인해야합니다.

참고 사이트

https://www.iconfinder.com/

3. "서비스 개발" 단계에서 해야할 일

3-1) API 서버 개발 여부 정하기

: 모바일 앱 개발에 있어서 API 서버 개발이 필요한지 여부를 결정하는 것은 굉장히 중요합니다.

왜냐하면 개발 여부에 따라 개발 비용도 산정해야하고 나중에는 운영을 어떻게 할 것인지에 대해서도 고민하는 것이 필요하기 때문입니다.

제작하고자 하는 모바일 앱의 성격을 파악하는 것이 중요합니다.

앱의 성격에 따라서 사용자 데이터를 모바일에 로컬로 저장해서 활용할 것인지 아니면 서버에 저장하면서 사용을 할 것인지가 나눠지기 때문이고 서버 개발 여부를 판단할 수 있기 때문입니다.

3-2) API 서버 개발하기

: 앞에서 API 서버 개발 여부를 결정했고, 만들기로 했다면 모바일 앱 클라이언트를 개발하기 전 API를 먼저 개발해놓아야한다.

앱의 기본적인 비즈니스 로직을 먼저 API에 구현해놓고 UI 같은 화면 로직을 모바일 앱에서 구현하기만 하면 되기 때문이다.

- 즉 서버와 모바일이 어떤 데이터를 처리하기 위해서 통신하는 가?

- 통신하는 데에 처리하는 데이터는 무엇인가?

- 어떤 순서로 데이터를 처리하는가?

를 다 만들어 놓으면 모바일 앱에서 구현만 마찬가지로 개발하면 끝나기 때문이다. 즉, 설계도를 만들어 놓고 그대로 만드는 것이다.

이 과정에서 데이터 모델링을 하고 API를 설계해서 서버 사이드를 어느 정도 구현해놓으면 현재 개발 상황을 파악하는데 편리하다.

직접 API 서버를 개발하면 시간은 많이 소요되지만 단순한 RESTful를 하는 CRUD 작업이 아닌 더 고난이도의 정보처리가 가능한 API 서버를 구현할 수 있다.

3-3) 모바일 앱(클라이언트) 개발하기

: 최종적으로는 백엔드의 API 서버를 구현했기 때문에 모바일 앱(클라이언트)를 구현하면 된다.

개발시 이슈트래커(개발에 대한 관련 이슈를 관리하는 업무)는 하지않아도, 형상관리 도구는 사용하는 것을 권장합니다.

무료로 git 원격 레포지터리 공간을 제공하는 서비스에는 GitHub를 비롯해서 Bitbucket과 Gitlab 등이 있습니다.

GitHub의 경우에는 프라이빗한 프로젝트에 대한 공간 제약과 프로젝트 갯수 제약이 있어서 개인적 프로젝트를 진행하는 입장에서는 좋지 않습니다.

다만 오픈 소스를 진행하는 사용자에겐 프로젝트 경험을 인정해줄 수 있는 지표를 제공하는 인터페이스가 있기때문에 좋습니다.

비밀리에 사용하시거나 많은 용량의 저장소가 필요하시다면 Bitbucket을 사용하시면 해결할 수 있습니다.

또한, 테스팅을 할 수 있는 스마트폰과 같은 환경이 필요한 경우, Genymotion을 이용하시면 됩니다. 강추 입니다.

4. "출시/배포하기" 단계에서 해야할 일

: 지금까지 기획->디자인->개발 의 과정인 제작과정에서 무엇을 해야하는 지에 대해서 이야기해보았습니다.

이제 앱에서 발생할 수 있는 오류/버그가 발생하였을 때, 그것을 출시하기 전에 수정을 하는 디버깅 과정이 필요하고,

출시할 때에는 꼭 앱이 디버깅용이 아닌 출시용으로 빌드가 되었는지 확인하고,

서버도 디버깅 모드로 배포되었는지 여부를 확인합니다.

모든 과정이 다 완료되었으면, 앱을 배포하기 위해서 마켓에 등록을 하시면 됩니다.

Reference :

혼자서 모바일 앱 기획부터 개발까지 - http://www.slideshare.net/aksmj/ss-47849372