2010.08.04 21:07

[강좌A03] Android 실전 개발 - 아이디어 / 기획 / Wireframe




전편 강좌에 이어 이제부터 본격적인 실전 개발에 들어가도록 하겠습니다.
개발을 시작하면서 처음으로 할 일은 기획이겠죠. 아이디어 구상 및 대략적인 UI 스케치 정도까지가 될 것 같네요.

전체 강좌 목차
[강좌A01] Moteodev Studio를 이용한 안드로이드 개발 환경 구축 가이드
[강좌A02] 안드로이드 개발 참고 서적 소개
[강좌A03] Android 실전 개발 - 아이디어 / 기획 / Wireframe

1. 아이디어 구상.

모니 모니 해도 앱 개발에 젤 중요한 것은 아이디어 겠죠. 기발한 아이디어로 제품만 만들 수 있다면 큰 돈도 벌 수 있고 성공할 수 있지만..그게 어디 말 처럼 쉽겠습니까?
좋은 아이디어는 많이 보고 많이 사용하다 보면 언젠가는 여러분이나 저나 뛰어난 앱을 만들날이 오지 않을까 싶습니다.

2. Wireframe 제작 (Mockup 혹은 스토리보드라고도 하죠)

아이디어가 정해지면 Wireframe(스토리보드)을 제작합니다.
모, 제작이라해서 거창하게 생각하실 것 없이 종이에 그적 그적 아이디어를 화면으로 구성해도 무방합니다.

다음은 제가 주로 작업하는 방식과 유용한 Wireframe 제작 툴에 대해서 간략 설명하겠습니다.

A. 종이에 스케치.

제가 가장 즐겨 사용하는 방법입니다. 혼자서 개발한다던지 복잡하지 않고 간단한 어플은 이걸로 충분합니다.
하지만 만든 앱을 TStore에 등록하기 위해서는 스토리보드 문서가 필요합니다. 이때는 종이를 제출 할 수 없으니..
완성된 앱의 화면을 캡처해서 별도의 스토리 보드를 만들어서 제출하시면 됩니다.

종이에 그려도 외곽 아웃라인이라도 폰모양과 사이즈로 그려진 종이가 있다면 편리할 겁니다.


위 그림과 같은 형태의 자료를 http://iphone-dev-tips.alterplay.com/2009/11/iphone-app-desgin-templates.html 사이트에서 Download or print these design templates from Google docs. 클릭하시면.. 아이폰 밑그림이긴 하지만, 출력해서 사용할 수 있는 디자인 템플릿 pdf 문서를 다운하실 수 있습니다.
출력해서 연필로 찍~찍~. 최고입니다.

사이트에 보니 포토샵 원본파일도 있군요. 이미지로 떠서 파워포인트에서 배경으로 지정하셔서 사용해도
좋을것 같습니다.

B. Visio Stencil for Android.

여러명이 개발하는 팀 프로젝트라 커뮤니케이션이 필요하거나 고객에게 보여주며 회의를 해야 한다면 좀 그럴싸한 기획안을 만들어야 합니다. Artfulbits라는 회사에서 안드로이드 개발을 하면서 UI Prototyping하기 편리한 MS Visio Stencil을 무료로 제공합니다.


이 화면은 Vision Stencil을 이용해서 스토리 보드 형식으로 배경을 만들어서 샘플로 만든 템플릿입니다. 이 템플릿 파일을 첨부합니다. 필요하신분은 다운해서 사용하시기 바랍니다. 다만, 이 파일은 안드로이드 스텐실이 포함되어 있지 않기 때문에 http://www.artfulbits.com/android/stencil.aspx#Presentation_1 이 사이트에서 Android GUI Prototyping 자료를 다운해서 사용하시면 됩니다.  
그리고 Yahoo에서도 Visio Stencil을 제공합니다. Mobile은 안드로이드 디자인이라기 보다는 iPhone 디자인이지만, 자료 자체는 아주 좋습니다.

http://developer.yahoo.com/ypatterns/about/stencils/ 요기서 다운 가능합니다. Visio Stencil 뿐만 아니라 PNG, SVG 등 다양한 포맷으로 제공하기 때문에 활용성이 매우 좋습니다. UI 템플릿 말고도 Yahoo UI에서는 다양한 자료들이 많으니 개발자라면 한번쯤 가서 살펴 볼만 합니다.

C. DroidDraw


네. 많은 개발자분들이 알고 계시며, 좋다고 칭찬하시는 그 툴입니다.
일종의 UI Editor로 쉽게 Wireframe도 만들고 바로 XML 레이아웃 소스을 개발 할 수 있어서 많은 사람들이 열광하던데.. 솔직히 저는 좀 별로입니다. DroidDraw로 복잡한 UI 그리기도 힘이들고 UI 개발하느니 기냥 이클립스에서 바로 UI 개발하는게 훨씬 편리한 것 같아서.. 하여간 저는 잘 사용하지는 않습니다.
무료니깐... 한번들 써보시고 판단하시기 바랍니다. 다운 및 사용법은 http://www.droiddraw.org/ 사이트를 참고하시기 바랍니다.

D. 웹사이트 개발할 때 사용하는 PowerPoint로 된 스토리 보드

웹 개발에 많이 쓰는 방식이죠. 디자이너 분이 계시면 실제 디자인 해서 멋있는 이미지로 이쁘게 만들기 좋죠.
다들 아실테니... 그만 중략.


툴들도 살펴봤으니..이제 저희가 개발할 내용을 살펴보도록 하겠습니다.

3. App 컨셉 및 아이디어:

제가 스마트폰을 사용하다 보니 웹사이트나 은행 앱등을 사용할려니 아이디/패스워드 입력하는 곳이 많더군요. 저는 주로 한글로 패스워드를 만들어 둔 곳이 많은데.. 도대체 한글에 해당되는 영문 자판을 몰라 필요한 정보를 키보드로 일일히 확인하여 메모장에 기록해 두었다가 웹사이트 로그인을 합니다. 무지 불편합니다. 아..님들도 그러시다구요? 하하..그럼, 이런 불편한 사용성을 개선시킬 앱을 만들면 많은 사람들이 사용하지 않을까?

네. 이 컨셉이 저희가 기획하고 개발할 앱 컨셉입니다.

 4. WireFrame 제작

아이디어가 정해졌으니 이제 대충 UI스케치를  하겠습니다. 위 아이디어의 핵심은 텍스트박스 2개만 있으면 될것 같네요. 한글 그리고 영문. 그리고 터치로 복사하기 귀챦으니 클립보드 복사 버튼 정도 필요하고, 한번만 사용할 게 아니라 필요한 한글/영문쌍을 DB에 저장해 두어 볼 수 있음 좋을것도 같습니다.
UI 화면(Activity) 하나면 될 것 같습니다. 이정도면 연필로 노트에 그리는게 제일 편리하겠죠.

네. UI.스토리 보드가 완성되었습니다.
하하. 이것은 제가 어제 완성한 제품의 이미지를 캡처한 것인지라.. 좀 그럴싸하게 보입니다.

화면 하나로 끝냈습니다.  스토리보드 파일 첨부합니다. 필요하신 분은 사용하십시요. 공짜입니다.


기능 요건은 스토리보드나 위 이미지를 참고하시면 됩니다. 워낙 간단한 기능인지라~ 한 번 보면 아실 겁니다.

이상으로 안드로이드 실전 개발 - 아이디어 / Wireframe 제작에 대해 강좌를 마치며, 다음번 강의해서는 아이콘 디자인에 대해서 툴 리뷰 및 Android 설치 파일(.apk)을 가지고 Resource 훔쳐보기 편을 진행한 다음, 그 이후에 모토데브를 띄우겠습니다.

 

Trackback 1 Comment 6
  1. 남시언 2010.08.04 21:37 신고 address edit & del reply

    우와~~ 대단하시네요 ~ ㅎㄷㄷㄷ
    저는 언제쯤 그정도의 경지에 이를런지 ㅠㅠㅠ
    CP에서만 현재 게속 쩔쩔메는중 ㅋㅋㅋ

    스토리보드는 오피스 버전이 낮아 못보네요 읔....

    잘 보고 갑니다 ^^

  2. killerjoe 2010.08.24 09:21 신고 address edit & del reply

    스토리보드가 편해보입니다. ㅎㅎㅎ 점 사용해볼게요 . ^^ / 잘 보고갑니다.

  3. 지나가는중 2010.09.13 16:24 신고 address edit & del reply

    안드로이드 스텐실을 받으려고 링크된 곳으로 가봤는데...메일 보내도 감감무소식이네요.
    어떻게 다운 받을수 있나요?

    • 보고픈 2010.09.14 11:15 신고 address edit & del

      http://www.artfulbits.com/android/stencil.aspx#Presentation_1 여기서 상단 download 누르시고, 정보 입력하시면 메일로 바로 다운로드 링크가 전송됩니다. 한번 더 해보시고, 그래도 안되시면 비밀댓글로 이메일 남겨주세요.

  4. 리칼 2010.12.10 17:46 신고 address edit & del reply

    와..정말 대단하세요! 존경스럽네요 저도 현업이 안드로이드지만 볼수록 도움이 되는 글입니다.

    좋은 정보 감사합니다.^^

  5. kang 2012.11.19 10:32 신고 address edit & del reply

    좋은 자료 잘 보고 갑니다!!!짱!!