두 개의 프로젝트를 생성합니다
WireFrameSketcher를 이용해 화면을 디자인 하자
8개의 화면 예시
프로젝트 생성
아직 우리가 만들 앱을 위한 프로젝트를 생성하지 않았군요. Android Project와 mockup 작성을 위한 wireframesketcher의 프로젝트를 각각 생성해 주겠습니다.
1. Android Project 생성
안드로이드 어플을 '책을 보면서라도' 작성해 보신 분이라면 흔히 만들던 방식 그대로 만들어주면 됩니다. Application Name/Project Name/Package Name 등을 자신이 원하는데로 작성해주시면 되고, 제 경우엔 요새 스맛폰이 너무도 다양하고 고성능으로 '아주 싼 듯' 많이 풀려서 그냥 Target SDK를 4.3으로 했습니다.
아이콘은 우선 아래 처럼 대충 만들어 놓으세요. 나중에 배포전에 좀 더 classy한 것으로 제작해서 바꿔보도록 하겠습니다.
앱이 실행되고 첫 번째 액티비티에 맞게 이름을 EntryPointActivity라고 지었어요. 나중에 AndEngine을 사용하면서 수정하게 되겠지만(내용을) 이 액티비티는 우선은 Splash Screen(게임을 시작하면 게임의 내용을 맛보기로 보여주는 화면)으로만 활용하려고 해요. 마음에 안드시면 여러분이 원하는 적절한 이름을 정해서 만드시면 되겠습니다.
2. WireFrameSketcher 프로젝트 생성
이제 WireFrameSketcher프로젝트를 생성해 보겠습니다. 이 프로젝트에는 여러분이 작성할 mockup 파일이 관리될 거고, 여러분의 타겟(안드로이드, 아이폰, 혹은 웹)에 맞는 템플릿 들도 포함되어져서, 여러분이 '드래그 앤 드랍'만으로도 쉽게 화면을 구성/배치할 수 있게 해줄 겁니다.
Eclipse의 Perspective를 WireFraming으로 바꾸시고, 안드로이드 프로젝트를 만들 때처럼 동일하게 New > Wireframe Project를 선택하세요. 그리고, 우리는 안드로이드 앱의 화면을 구상할 것이니 Mobile>Android를 선택한 후 Next 버튼을 클릭하시면 됩니다.
참조할 프로젝트를 선택하라고 나오는데요. 같은 Workspace에 있는 프로젝트 중 하나를 선택할 수 있도록 표시해 줄 거예요. 그 중 우리가 방금 만들어준 프로젝트를 체크하고 Finish 해주세요.
이 과정은 말 그대로 wireframesketcher 프로젝트에서 단순히 android 프로젝트의 리소스들을 참조하겠다는 뜻일 뿐입니다. 안드로이드 프로젝트의 이미지나 그런 것들을 활용하려고 하는 거죠. 현재 우리는 참조할 게 하나도 없습니다. 안드로이드 프로젝트도 거의 비어 있잖아요. 참조할 게 없죠.ㅋ
여기까지 진행하셔서 안드로이드 프로젝트와 Wireframesketcher 프로젝트가 생성된 걸 Project Explorer를 통해 보실 수 있을 겁니다.
WireFrameSketcher를 이용해 화면을 디자인 하자
Wireframesketcher 프로젝트에서 여러분은 두 종류의 파일을 생성하게 될 것인데요. 하나는 확장자가 screen, 다른 하나는 story 입니다. '.screen'은 화면 하나의 내용을 담게 되고, '.story'는 Storyboard 파일이며 스토리보드에 스크린을 추가하며 각각의 스크린이 어떤 스크린과 연관되어 있는지를 보여주게 됩니다.
 |
| 그림 : 스토리보드의 실제 작성 예 |
 |
| 그림 : 스크린 파일의 실제 작성 예 |
스크린 파일을 미리 구상한데로 하나씩 그려보자.
처음 앱을 실행하면 이 앱의 전체적인 용도를 표시해줄 이미지로, 그리고, 앱의 실행에 필요한 리소스를 로드함을 화면에 보여주는 '스플래쉬' 화면이 보일 거고, 그 다음 바로 위 그림처럼 메인 메뉴가 보이게 할 것입니다.
메뉴를 보니
- 팀에 대한 기본적인 정보
- 팀과 관련된 새로운 소식
- 코칭 스태프 및 선수들에 대한 정보
- 경기별로 선발 명단을 예측해 보는 코너
- 경기 일정 및 결과 보기
- 직접 경기장에 가서 관람함을 표시할 수 있는 코너
로 이루어져 있습니다.
화면에 표시될 정보들을 어떻게 수집해서 어떤 방법을 써서, 어떤 효과를 내면서 뿌려줄지는 너무 깊게 생각하지 맙시다. 지금 당장은 저렇게 구성되고 보여져야 한다는 게 중요하죠. 우린 그것만 각각의 .screen 파일에 작성해 주면 됩니다. '나머진 개발자가 알아서 하겠지' 생각하면 되겠습니다.
그럼 이제 하나씩 그려볼까요?
1. 스플래쉬 화면
우리가 처음 wireframe 프로젝트를 생성할 때, 안드로이드 템플릿을 사용하겠다고 체크했으므로, 자동으로 생성된 NewScreen.screen 파일을 보면 안드로이드 기기의 화면이 그려져서 보일 것입니다.
우측의 녹색 박스는 여러분이 선택한 요소의 속성(properties)을 보여주는 부분으로 크기나 색상, 폰트, 나타나는 모양 등을 조정할 수 있습니다.
좌측의 상단에 있는 박스에는 여러분이 사용할 수 있는 템플릿들이 어떤 것이 있는지를 보여줍니다. 각각의 폴더를 선택하면 하단의 박스에 대략적인 모양이 나옵니다.
그러면, 원하는 것을 선택한 후 가운데 에디터에 드래그 앤 드랍 하시던지, 클릭만 하셔도 됩니다.
아래 그림처럼 Palette에서 Text, Image를 찾아서 기기의 화면위에 배치시켜보시기 바랍니다. 이미지는 아직 정해진거 없으니 이미지를 선택하라고 해도 그냥 없다고 하고 위치시키시면 됩니다.
원하는 모양으로, 원하는 위치에 배치하셨는데, 맨 아래 link는 도대체 뭘까요? 이게 바로 '연결되는 스크린'과의 링크를 의미 합니다. 지금 당장은 하나의 스크린 밖에 없으니
New > Screen 하셔서 'main_manu.screen'을 생성하고 그것과 연결해 볼까요?
링크가 활성화 되면 파일 아이콘을 클릭해서 원하는 스크린 파일과 link 해주시면 됩니다. 쉽죠?
그럼, 링크가 되어 있다는 걸 어떻게 할 수 있을까요? 링크 후에 나타나는 오렌지색 표시로도 뭔가 링크가 되어 있다는 걸 알수 있지만, 어느 스크린과 연결되어 있는지 한눈에 볼 수 있으려면 스토리보드에 방금 만든 두 개의 스크린 파일을 추가시켜주면 됩니다.
New > Storyboard 해서 스토리보드 파일을 생성해볼까요?
말로 설명하는 것보다 아래 GIF파일을 보시면 되겠네요.
참 쉽죠? Storyboard탭과 Screenflow 탭을 번갈아 보며 작업하면, 앱의 화면 구성과 연결이 어떻게 되어가는지 한 눈에 볼 수 있겠죠?
그럼, 이제 나머지 스크린 파일들을 보겠습니다. 이 스크린 파일들은 위에 언급한(계획한) 메뉴를 토대로 작성되었습니다.
여러분도 한 번 해보시겠어요?
2. 메인 메뉴 화면
3. 팀 기본 정보 화면
4. 팀의 최근 소식 화면
5. 코칭 스태프 및 선수 정보 화면
6. 경기 일정 및 결과 화면
7. 경기 선발 출장 명단 작성 화면
8. 직관 스탬프 찍기 화면
여기에 보이는 게 전부다는 아니겠죠.
실제로는 디자이너 혹은 다른 개발자와 얘기하다 보면, 더 좋은 아이디어가 나올 수도 있고, 혹은 기술적으로 어려워 변경해야할 수도 있을 것입니다. 그때마다 이 파일을 수정해가면서 좀 더 낫고 개발 가능한 모습으로 바뀌어 가겠네요.
WireFrameSketcher가 굉장히 유용한 툴이긴 하나, 세상에 비슷한 기능을 하는 툴이 이것하나만 있지는 않을 것입니다. 대표적인 다른 툴로 Balsamiq(http://balsamiq.com)라는 것도 있더군요.(전 아직 써보진 않았습니다)
중요한 건, 비슷한 모양으로, 짐작하며 손으로 직접 그려 고안해 나가기 보단, 실제 기기에서 동작하는 모습을 본딴 그림들을 쉽게 써가며, 더 정확히 구상해 나갈 수 있다는 것이고, 이것을 파일로 간직하면서 다른 개발 팀원, 디자이너, 혹은 고객에게 좀 더 실질적으로 설명할 수 있고 수정 보완해 갈 수 있다는 것이죠.
개발 일기 치고는 서론이 너무 길었네요. 이제 다음 기사에서는 '직접 프로그래밍'하기 시작할 것입니다. 물론, AndEngine이라는 게임 엔진을 사용해야 하기에 AndEngine에 대해 설명하지 않을 수 없지만, 가능한 이론적인 부분은 '꼭 필요한 것들만 짚어가며' 진행하도록 하겠습니다.
No comments:
Post a Comment