드디어 시작!
Mockup Drawing Tool을 사용해 볼까 : WireFrameSketcher
WireFrameSketcher를 설치하자
드디어 시작 !
앞서 말씀드린데로, 적어도 안드로이드 개발을 할 수 있는 준비가 되어 있는 가정에서 이야기를 시작합니다. (혹시나 준비가 안되어 있다면 지금이라도 www.java.com, www.eclipse.org, www.android.com 에 가셔서 각각 다운로드하고 설치하세요)
지난 기사에서 제가 1차 목표로 정한 앱의 기능들은 다음과 같습니다.
- 구단, 감독, 선수들에 대한 기본 정보 제공
- 경기 일정 및 결과
- 매 경기 출전 선수 명단 예상해 보기
- 직관 도장 찍기
각 기능을 어떻게 구현할지를 고민하기 이전에, 화면에 어떻게 보여야 할지, 각각의 구성 엘리먼트들은 어떻게 화면에 배치되어야 할지를 미리 가늠해봐야 합니다. 일반적으로 여러분이 가지고 놀던 앱들은 어떤 화면들로 구성이 되던가요? 처음 앱을 실행시키면 초기화면이 잠시 나오고, 메뉴 화면이 나오고, 그 메뉴를 터치하면 어떤 기능으로 연결되고 그랬죠? 위에 나열해 놓은 기능들도 그런식으로 연결을 해야할테고, 사용자가 어려워하지 않게 쉽게 배치하고 연결하는 것도 중요합니다.
그러한 부분을 살피기 위해서는 각 주요 화면마다 어떤 구성요소들이 들어가고 그 구성 요소들 중 어느 하나에 이벤트가 발생하면(터치를 하게되면) 다음 화면으로 넘어갈지를 미리 정해야 합니다. 가장 좋은 방법은 지금 당장 노트를 꺼내서 간단한 박스를 그려 화살표로 연결해가며 그려보는 것이 좋겠죠.
처음 시작하는 단계에선 모두 이런식(위 그림)으로 노트를 이용해서 대략적인 모습을 스케치 해 볼거라 생각해요.그런데, 그러다보면 페이지 크기도 커지고 다른 사람에게 보여주거나 컴퓨터에 저장해서 쉽게 볼 수 있게 해줘야 할 경우엔 좀 더 정밀하게 다시 그리게 되죠. 각각의 그림과 구성요소에 설명까지 달아가면서...
Mockup Drawing Tool 을 사용해 볼까
WireFrameSketcher
처음부터 아예 컴퓨터에서 작업하고 필요할 경우 공유할 수 있도록 해주는 툴을 사용할 수도 있습니다. 지금부터 설치해서 사용하려고 하는 WireFrameSketcher가 바로 그것입니다.
다음은 WireFrameSketcher를 이클립스의 플러그인으로 설치 후 실행시켜본 화면입니다. 화면 왼쪽 하단을 보시면, 안드로이드에서 사용가능한 다양한 컨트롤들이 제공되어서 연필로 신경쓰며 그릴 필요 없이 드래그 & 드랍으로 원하는 위치에 가져다 놓을 수가 있어요.
처음 이 툴을 구글링하다 찾은 후 마음에 들었던 게 연필로 그린 것처럼 선을 표현해준다는 것이었어요.(물론, 곧은 선으로 표현하는 것도 가능하구요) 저렇게 그린 후 펜글씨 폰트를 사용해서 설명도 달아준다면 잘 어울릴 것 같다고 생각한 거죠.
(위 그림은 Naver에서 제공해주는 나눔폰트 중 펜글씨 폰트를 사용한 것입니다. WireframeSketcher의 트라이얼 버전을 사용하면 폰트 변경이 되질 않았던 것으로 기억합니다. 그래서 구매를 했거든요. 지금은 어떤지 모르겠네요?
블로그를 가지고 계시고, 블로그의 내용들이 IT기술 관련한 것이라면 이메일을 보내서 1년짜리 라이센스를 공짜로 얻으실 수도 있어요.)
WireFrameSketcher를 설치하자
Wireframesketcher의 공식 홈페이지에 가서 다운로드를 합니다. 운영체제별로 Standalone버전이 준비되어 있고, Eclipse의 플러그인으로 설치할 수도 있습니다. 여기서는 Eclipse의 플러그인으로 설치해보겠습니다.
Eclipse [Help] > [Install New Software] > [Add]
name : WireFrameSketcher
Location : http://wireframesketcher.com/updates
업데이트 항목이 나오면, 모두 선택하고 설치하라고 하시면 됩니다.
설치하고 나면 Perspective 항목에 Wireframing이 추가되어 있는 것을 확인하실 수 있을 거예요. 우측 상단의 open perspective 버튼을 눌러 확인하시고, Wireframing perspective로 바꿔주시면 됩니다.
Wireframing perspective로 바뀐 모습을 볼까요? 그 동안 이클립스를 자주 쓰셨던 분이라면 익숙한 화면 구성입니다.
설치가 되었고, 만약 Wireframesketcher를 구매하셨거나, free license를 요청해서 받으신 분이라면 이메일을 통해 License key를 보내줄텐데요. 이클립스 환경설정(preferences)에서 WireFrameSketcher 항목에 License key를 입력하시면 됩니다.
자, 여기까지 모두 잘 따라하셨다면 Wireframesketcher를 이용해서 우리가 만들 앱을 디자인해 볼 수가 있습니다. 이제 본격적으로 시작해볼까요?
No comments:
Post a Comment