안녕하세요? 정진희입니다. 오랫만에 글을 쓰게 됩니다.
요새 윈도우 폰에 대한 이슈와 궁금증이 많아 이렇게 시리즈로 온라인 강좌를 올려볼까 합니다.
오늘이 첫번째 시간이네요.
앞으로 진행 될 내용은 다음과 같습니다.
2. 블렌드에서 윈도우 폰 레이아웃 잡기
3. 화면 디자인 및 컨트롤 디자인 하기
4. (필요 시) 애니메이션 제작하기
5. 윈도우 폰의 시작 타일 및 페이지 전환 etc...
오늘은 첫번째 강좌를 올리도록 하겠습니다.
1. 앱을 디자인 하기 전 무엇을 만들지 머릿속에 그린 것을 드로잉이나 기획 툴로 구체적으로 만들도록 합니다.
블렌드에는 "스케치플로우"라는 블렌드 전용 기획 프로그램이 내재되어 있습니다. 이 툴을 사용하셔도 좋을 듯 합니다.
하단의 그림은 스케치플로우에서 작업한 기획의 모습 중 하나입니다.
사용하는 방법은 링크를 걸어두도록 하겠습니다.
링크 : 스케치프로우 제작하기 -1
(blend Version 3 강좌 입니다, 그러나 사용하는 방법은 거의 흡사합니다)
이번 윈폰 앱 만들기에서 저는 미니홈피 앱과 비슷하게 만들어보겠습니다.
2. 페이지 구성과 플로우를 다 끝내었다면 본격적으로 디자인에 들어가도록 합니다.
대부분 포토샵이나 일러스트로 디자인을 들어갑니다. 필자도 마찬가지로 포토샵 작업을 끝낸 모습입니다.
윈도우 폰 디자인 구상 시에 MS에서 제공한 윈도우 폰 화면 컨셉을 알고 작업하신다면 좀 더 윈도우 폰에 어울리는 앱을 제작하실 수 있습니다.
윈도우 폰에 대한 UI 컨셉은 다음 링크에서 확인할 수 있습니다.
링크 : Window Phone에 대한 UI Concept
3. 디자인 작업이 완료가 되었으면 블렌드로 넘어와서 디자인 작업을 이어가도록 하겠습니다.
그 전에 디자인 한 것을 블렌드로 적용 시에 유의해야 할 점은 포토샵에서 이펙트나 필터 적용 등을 할 경우 블렌드에서도 똑같이 적용되지 않을 수 있으니 이미지로 전환해야합니다.
블렌드를 열도록 합니다. 윈도우 폰을 위한 블렌드 프로그램이 미리 설치 되어 있어야 합니다.
설치 방법은 링크를 걸어두도록 하겠습니다.
링크 : Window Phone을 위한 익스프레션 블렌드 설치하기
4. [New Project]에서 [Window Phone Application]을 선택하도록 합니다. 설치가 잘 되어 있다면 이 항목이 보이게 됩니다.
기획 시에 파노라마 프레임, 피벗 프레임을 사용할 경우는 선택항목에서 각각 선택할 수 있습니다.
필자의 앱 디자인은 기본 앱 화면으로 구성하므로 기본 페이지를 만들겠습니다.
5. 첫 화면은 다음과 같습니다. 애플리케이션의 레이아웃을 만들어보도록 하겠습니다. 만들기 전, 먼저 생각해 두어야 할 것이 있는데요. 바로 어떤 형식, 어떤 컨트롤로 구성할 것이냐 입니다.
화면을 기획 시에 버튼이 들어갈 부분, 이미지가 들어가야 할 부분, 어떤 컨트롤을 써야할 지를 먼저 생각하셨으리라 생각합니다.
그리고 화면의 프레임은 어떻게 나뉘는 지 등도 생각해야 할 부분입니다. HTML의 footer나 header, content 들어갈 부분의 영역을 나누는 것 처럼 윈도우 폰 앱 디자인을 할 시에도 어떻게 나눌지를 알고 만든다면 더 쉽게 제작할 수 있습니다.
필자의 앱 디자인을 어떤 형식으로 만들지 단순하게 생각한 화면의 모습입니다.
가운데 메뉴들은 버튼들로 클릭을 하는 기능을 하고 Grid나 Wrap Panel 컨테이너로 버튼들을 묶어주어 정렬을 편하게 한다. 하단의 버튼 두개는 가로 정렬을 할 수 있는 Stack Panel로 감싼다. 라고 필자는 생각하고 구성을 만들었습니다.
이번 강좌는 기획과 화면 구성 틀을 잡는 작업을 해 보았습니다~ 앱의 구성이 너무 쉬웠죠? ^^;;;
이 부분들은 디자이너의 작업인데요!
다음 강좌에서는 실제로 블렌드에서 레이아웃을 잡아보도록 하겠습니다.
감사합니다!
