혼자서 모바일 앱 기획부터 개발까지
TRANSCRIPT
혼자서 모바일 앱 기획부터 개발까지2015.05.07
이화앱센터 안드로이드팀장 한만종
앱이란?
• 앱(App)은 어플리케이션(Application)의 줄인말.
• 어플리케이션?
응용소프트웨어. 즉, 우리가 일상생활에서 사용하는 소프트웨어.
흔히 “프로그램”이라고 표현하는 소프트웨어.
• Microsoft Office, 한컴오피스, 카카오톡, Chrome, Internet Explorer, 알집, 곰플레이어, 네이트온, Adobe Photoshop,..
앱이란?
• 모바일 앱(Mobile App)?
안드로이드(Android) 스마트폰이나 아이폰(iPhone)과 같은 모바일 기기에서 동작하는 어플리케이션(응용소프트웨어).
흔히 “어플”이라고 표현하는 소프트웨어.
• 카카오톡, Instagram, 서울버스, 배달의민족,..
모바일 앱 제작?
• 모바일 앱 제작은 일반적인 응용소프트웨어 제작과 같은 단계를 거치게 된다.
1. 서비스 기획 (아이디어 구체화, 세부기능, 와이어프레임,..)
2. 어플리케이션 UI/UX 디자인 (디자인 시안, GUI 디자인,..)
3. 서비스 개발 (앱 개발, 서버 개발/구축, 시스템/DB 설계,..)
4. 출시/배포 (개발 마무리, 마켓에 배포, 홍보,..)
모바일 앱 제작?
• “제작”과 “개발”은 같은 뜻이 아니다.
“제작”: 기획부터 개발까지 하나의 서비스를 온전히 만들어내는 것.
“개발”: 결정된 기획과 디자인을 바탕으로 소프트웨어를 구현하는 것.
• “제작”은 최종 단계인 출시/배포 후에 이루어지는 “운영”이나 “서비스 관리”, “유지보수”, “인프라” 등과는 다른 개념이다.
모바일 앱 제작?
• 즉, 모바일 앱 서비스 하나를 혼자서 런칭하는건 쉽지 않은 일
• 여러 분야의 전문적인 일을 혼자서 해낼 수 있어야
• 혼자서 할 수 있는 일들은 분명 제한적일 것
모바일 앱 제작?
• 모바일 앱 제작에서 최종 단계 바로 이전의 단계는?
= “개발”
= 실제로 소프트웨어를 구현해내는 단계
• “개발”을 할 수 있다면 아이디어만 가지고도 혼자서 앱 제작 가능
혼자서 모바일 앱 기획하기
1. 아이디어 구체화하기
예시) “1인가구를 위한 방범 앱”, “공공데이터를 기반으로 한 주변 와이파이 AP 안내 앱”, “현재 위치에서 그린 그림을 공유할 수 있는 증강현실 앱”, “1:1 개인 간 중고거래가 가능한 앱”, “당일 호텔을 예약할 수 있는 앱”,..
혼자서 모바일 앱 기획하기
2. 구체적인 기능 리스트화하기
예시) “현재 위치를 기반으로 가장 가까운 와이파이 AP부터 리스트로 보여줌”, “채팅 기능으로 거래자와 실시간 소통 가능”, “단순 녹화 뿐 아니라 움직임, 흔들림 감지”, “2명 이상의 얼굴이 인식되면 침입상황으로 간주하여 알려주는 침입 탐지 기능”, “내가 자주 사용하는 와이파이 AP를 저장할 수 있는 즐겨찾기 기능”,..
혼자서 모바일 앱 기획하기
3. 주요 UI 구상하기
예시) “리스트 UI를 이용해서 여러 항목의 그림들을 한꺼번에 조회 가능하게”, “탭을 이용해서 개요, 정보, 지도를 손쉽게 스와이핑할 수 있도록”, “검색 버튼을 상단 네비게이션 UI에 넣어서 언제든 검색할 수 있게”, “햄버거 버튼과 연동되는 슬라이딩 메뉴를 만들어서 사용자 정보를 쉽게 조회할 수 있게”, “메인 화면 위쪽에는 배너를 두어서 컨텐츠가 강조되게”,..
혼자서 모바일 앱 기획하기4. 와이어프레임 그리기
혼자서 모바일 앱 기획하기4. 와이어프레임 그리기
시간이 없다거나 굳이 그림으로 표현해내지 않아도 된다면 머릿속으로 구상해내는 것만으로도 충분하다.
하지만, 그림으로 표현해내고 싶다면 Pencil이라는 앱을 이용해서 와이어프레임을 쉽게 그릴 수 있다.
http://pencil.evolus.vn
앱이 아닌 웹에서 와이어프레임을 그리고 싶다면 최근 다음카카오에서 출시한 Oven을 사용해도 좋다.
https://ovenapp.io
혼자서 모바일 앱 디자인하기
1. 플랫폼 정하고 기본 테마 이해하기
1-1. 안드로이드용 앱을 제작할 것인지? iOS용 앱을 제작할 것인지?
1-2. 버전은 어느 범위까지 지원할 것인지? 예시) “주요 사용자층이 학생이기 때문에 저가형 기기들에서도 동작할 수 있어야 한다. 따라서, 안드로이드 구버전까지 지원해야 한다.” 주의) 지원하려는 플랫폼 구버전의 범위를 지정하는 것은 재량이지만, 최신 버전의 플랫폼은 지원하는 것을 “기본”으로 한다!
혼자서 모바일 앱 디자인하기1-3. 기본 테마 공부하기 “최신버전 플랫폼 지원을 기본”으로 해야하기 때문에, 현재 안드로이드에서는 Material Design 테마를 사용해야 한다.
안드로이드 버전 1.5 ~ 안드로이드 2.3 : <정의되지 않음> 안드로이드 3.0 ~ 안드로이드 4.4 : Holo UI 안드로이드 5.0 ~ : Material Design
https://developer.android.com/design/index.html
마찬가지로, 현재 iOS 8의 디자인 가이드는 다음 문서에서 확인할 수 있다.
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/
혼자서 모바일 앱 디자인하기2. 원하는 디자인으로 기본 테마 커스텀하기
원하는 디자인이 따로 있거나 기본 테마가 맘에 들지 않아 다른 디자인을 사용할 경우에도 기본 테마를 이해하고 있는 상태여야 한다.
커스텀한 디자인 또한 기본 테마를 기반으로 만들어야 하기 때문이다. (새로이 디자인하는 것이 아니라!)
Why? 플랫폼(platform)은 사용자가 사용하는 소프트웨어 중 가장 크다. 즉, 모든 앱들은 플랫폼 위에서 동작한다. 따라서, 앱은 플랫폼의 일부분으로 동작하는 소프트웨어로서, “일관성”을 유지하여야지 사용자에게 혼란/혼동을 주어서는 아니된다.
혼자서 모바일 앱 디자인하기2-1. 주 색상, 보조 색상 정하기 주 색상을 정하여 강조할 부분과 강조하지 않아야할 부분, 기본 상태 등을 표현하기 위한 준비를 한다.
기본 상태는 주 색상으로 지정하고, 강조할 부분은 주 색상에서 좀 더 진한 색상으로, 반대로 강조하지 않아야할 부분은 주 색상에서 약간 더 흐린 색상으로 지정한다.
예시) “기본 버튼의 색상은 푸른색이고, 눌러진 상태의 버튼은 파란색, 사용할 수 없는(disabled) 버튼은 연한 푸른색으로 지정한다.”
보조 색상은 앱의 주요 부분이 아닌 다른 부분에 사용할 수 있다.
예시) “액션바의 색상은 주 색상으로 정했던 빨간색으로 하고, 상태바의 색상은 보조 색상으로 정했던 진한 빨간색으로 지정한다.”
혼자서 모바일 앱 디자인하기2-1-팁. 안드로이드 최신 버전의 테마는 Material Design이고 이를 하위 버전에서도 동작하도록 Support 라이브러리 또한 지원하지만, 여전히 하위 버전에서는 완벽하게 Material Design을 구현해내지 못한다.
물론, 3rd Party 라이브러리를 이용해서 직접 Material Design을 적용시킬 수는 있겠지만, 과거 ActionBarSherlock과 같은 수준높은 완성도를 가지고 있지는 못하다.
따라서, 하위 버전에서는 기존대로 Holo UI에 맞게 보여주는 것이 지금으로서는 최선의 방법인데, Holo UI를 손쉽게 커스텀할 수 있도록 도와주는 사이트의 주소가 다음과 같다.
http://romannurik.github.io/AndroidAssetStudio/
혼자서 모바일 앱 디자인하기2-2. 오픈소스 GUI 컴포넌트 라이브러리 사용하기 기본 디자인이 아닌 커스텀 디자인을 사용하기 위해 커스텀 컴포넌트들을 일일히 처음부터 모두 다 구현해야한다면 앱을 평생 개발할 수 없을지도 모른다.
오픈소스로 공개된 많은 커스텀된 GUI 컴포넌트 코드들이 있으며, 이를 구글 검색 등을 통해 쉽게 찾아낼 수 있다. 오픈소스 라이브러리들은 대부분 기본 디자인을 기반으로 만들어진 것이 많기 때문에, 이러한 라이브러리들을 가져다가 사용하는 것이 여러모로 품질향상에 도움이 된다.
오픈소스 안드로이드 커스텀 뷰 라이브러리 모음 https://github.com/wasabeef/awesome-android-ui
오픈소스 iOS 커스텀 컨트롤 라이브러리 모음 https://www.cocoacontrols.com
혼자서 모바일 앱 디자인하기2-3. 직접 GUI 컴포넌트 커스텀하기 기본으로 제공되는 디자인과 오픈소스 라이브러리에도 만족시킬만한 GUI 컴포넌트가 없다면 직접 구현하는 수 밖에 없으며, 이는 기본 컴포넌트나 라이브러리를 기반으로 수정해야 할 것이다.
다만, 주의해야 할 것은 기본 디자인을 기반으로 수정해야 하는 것이지 새롭게 만드는 것은 자제해야 한다는 것이다.
만족하는 컴포넌트가 없다면, 기본 디자인의 가이드를 준수하는 GUI 컴포넌트를 직접 구현해야 한다.
안드로이드 커스텀뷰 구현하기 http://developer.android.com/training/custom-views/index.html
혼자서 모바일 앱 디자인하기2-4. 아이콘, 기타 테마 이미지 리소스 앱 아이콘을 비롯해서, 앱에는 시각적인 요소로서 여러 테마 이미지 리소스가 필요하다. 예를 들어서, 검색 버튼을 이미지로 표현하기 위해 돋보기 모양의 아이콘을 사용해야 하는 경우가 있다.
Android 내부에서 기본 이미지를 제공하기도 하지만, 매우 제한적이고 더군다나 모든 Android 내부 기본이미지들을 가져다 사용할 수 있는 것도 아니다. 하지만, 구글이 Material Design을 발표하면서 같이 Material Design 풍의 아이콘 셋들도 오픈소스로 공개했다. 다음의 주소에서 얻을 수 있다.
https://github.com/google/material-design-icons/releases
또한, 앱 아이콘과 같은 다른 색상이 들어간 이미지 등 다양한 아이콘이 필요할 때는 아래 사이트에서 찾을 수 있다. 구글 이미지 검색으로도 아이콘을 찾을 수가 있는데, 이러한 사이트들에서 가져다 사용할 시에는 반드시 라이센스(저작권)을 확인하자.
https://www.iconfinder.com
혼자서 모바일 앱 개발하기1. API 서버 개발 여부 정하기
모바일 앱 개발에서 있어서 API 서버 개발이 필요한지 여부를 결정하는 것은 굉장히 중요하다. 추가적으로 개발 비용이 더 들어가고 나아가서는 운영까지도 생각해야 하기 때문이다.
제작하고자 하는 모바일 앱의 성격에 따라, 사용자 데이터를 모바일 로컬에 저장할 것인지 서버에 저장할 것인지를 결정하면, 서버 개발 여부를 보다 쉽게 정할 수 있을 것이다.
최근에는 API 서버를 별도로 개발할 필요없이 손쉽게 구현하는 클라우드 서비스들이 등장해서 굳이 복잡한 서비스가 아니라면 이를 이용해도 좋다. 이러한 클라우드 서비스를 BaaS(Backend as a Service)라고 부르는데, 대표적인 서비스에는 최근 Facebook에서 인수한 Parse(https://www.parse.com)가 있다.
혼자서 모바일 앱 개발하기2. API 서버 개발하기
앞단계에서 만약 API 서버를 개발하기로 결정했다면, 모바일 앱 클라이언트를 개발하기 전 API를 먼저 개발해놓는 것이 편리하다. 앱의 기본적인 비즈니스 로직을 먼저 API에 구현해놓고 UI 같은 화면 로직을 모바일 앱에서 구현하기만 하면 되기 때문이다.
먼저 데이터 모델링과 API를 설계해서 서버 사이드를 어느 정도 구현해놓는다면 현재 개발 상황(진도)을 파악하면서 진행할 수 있을 것이다.
앞에서 소개한 BaaS 서비스를 이용하면 전체 개발 속도가 매우 빨라지지만, 직접 API 서버를 개발한다면 여기에 많은 시간이 소요되지 않을까 한다. 따라서, Node.js나 Python(Flask, Django)와 같은 언어를 이용하면 빠르게 RESTful API 서버를 구현할 수 있다.
REST API를 손쉽게 테스트할 수 있는 도구로 Chrome의 확장도구인 Advanced REST client를 이용할 수 있다. (https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo)
혼자서 모바일 앱 개발하기3. 모바일 앱(클라이언트) 개발하기
이제 최종적으로는 당연히 모바일 앱을 구현하는 일만 남았다. 앱을 구현할 시에는 사용자 데이터를 서버와 동기화하느냐에 따라 많은 변수가 작용하겠지만, 앱을 구현할 때는 모바일이라는 특성을 고려해서 개발한다는 것만 잊지 않으면 될 것이다.
개인이 개발할 때는 형성관리 도구를 사용하지 않는 경우가 많을텐데, 개발할 때는 이슈트래커는 제쳐두고서라도 형성관리 도구는 사용하는 것을 권장한다. 무료로 git 원격 레포지터리 공간을 제공하는 서비스에는 GitHub를 비롯해서 Bitbucket과 Gitlab 등이 있다.
개인적으로는 충분한 공간과 private한 레포지터리를 제공하는 Bitbucket을 추천한다.
http://www.bitbucket.org
안드로이드 앱을 개발할 시에는 다양한 버전에서의 테스트가 필요한데, Genymotion을 이용하면 쉽게 해결할 수 있다.
https://www.genymotion.com
출시/배포하기
• 지금까지 설명한 바와 같이 기획 - 디자인 - 개발을 모두 완료했다면, 앱에 오류/버그가 없는지 확인하고 마무리하는 일만 남았다.
• 출시할 때에는 꼭 앱이 디버깅용이 아닌 출시용으로 빌드가 됐는지 확인하고, 서버도 디버깅 모드로 배포되었는지 여부를 확인한다.
• 모든 준비가 완료됐다면, Play스토어 등과 같은 모바일 어플리케이션 마켓 플레이스에 배포를 진행하면 된다.
