기획자를 위한 WP7 개발 기초 - sketchflow 다루기 (2)

이번에 언급할 이야기는 마이크로소프트 툴박스에서 WP7 앱을 sketchflow를 통해서 다루는 내용을 한글로 정리한 내용입니다. 원본은 http://www.microsoft.com/design/toolbox/tutorials/에서 확인할 수 있습니다.

우선 전 포스팅을 따라서 준비가 완료되신 분이라면 일단 다음 페이지로 가셔서 윈도우폰용 실버라이트 툴킷을 설치하셔야 합니다.

http://silverlight.codeplex.com/releases/view/75888

sketchflow가 전반적으로 실버라이트를 기반으로 동작하기 때문에 위 툴킷을 깔아야 됩니다..

깐다고 마무리되는게 아니라 add reference라는 항목을 통해서 .dll파일을 추가시켜야 합니다.

보통 dll 파일은 다음 위치에서 찾을 수 있습니다. control toolkit이 있는 것을 포함시켜야 합니다.

위의 tutorial에서는 구버전을 취하고 있기 때문에 2011년 11월 버전을 링크에 올렸습니다.
위 툴킷을 설치함으로써 구현할 수 있는 기능은 다음과 같습니다.

이번 예제는 파노라마뷰를 앱으로 공부하는 예제입니다. 일단 프로젝트를 아래와 같이 새로 구성합니다.

그럼 맨 밑에 뜨는 게 바로 Sketchflow map 이라는 겁니다. 여기서 페이지의 구성을 결정해야 합니다.
기본 구성은 다음과 같이 이뤄져 있습니다.

여기서 주의해야 할 점은 화살표의 방향입니다. 이 화살표가 가리키는 방향이 바로 네비게이션이 이뤄질 방향인 겁니다.
그래서 예를 들어 Screen 1과 Home 간에 형성되어 있는 화살표는 뭔가의 과정을 거쳐 서로의 페이지로 이동할 수 있게 되는 겁니다.

그럼 이제 새로운 스크린을 만들어야 합니다. 현재 Screen1에 갖다되면 몇가지 아이콘이 아래에 형성됩니다.

이중 가장 왼쪽에 있는 아이콘이 새로운 스크린을 형성하는 아이콘입니다. 이 버튼을 누른 상태로 빈곳으로 손을 놓으면
새로운 스크린이 형성됩니다.

그럼 원래 있는 스크린의 제목은 Main / 새로 만든 스크린은 AdvSearch 란 이름으로 이름을 바꾸면 다음과 같이
sketchflow map이 형성됩니다.

여기서 쓸데없는 선은 그 선을 선택한 후 마우스 우클릭을 통해서 삭제해줄 수 있습니다. 키보드의 Delete버튼으로는 삭제가 안됩니다.

여기까지 하면 이제 대충 스크린을 삽입하는 방법은 익히신 겁니다. 기획의 첫걸음은 이처럼 map을 작성하는데 있습니다.

이제는 Main 스크린에 Panorama를 삽입해야 합니다. Main 스크린에 더블클릭을 해서 가운데창이 Main이 되게끔해줘야 합니다. 한번 누른 상태는 선택된 상태가 아닙니다. 반드시 더블 클릭을 해줘야 합니다.
그리고 나서 Asset창을 통해서 Panorama를 삽입해야 합니다.

 

위의 검색창에 panorama를 치게 되면 위와같이 두 결과가 나옵니다. 이 중 위에 있는 Panorama를 옆의 디자인뷰에 삽입합니다. 아니면 하단에 있는 Objects and Timeline창의 LayoutRoot창에 넣어주면 하위로 삽입되는 것을 확인할 수 있습니다.

그럼 이와 같이 기본으로 PanoramaItem이 두개 삽입되어 있습니다. 눈치가 빠르신 분은 아시겠지만 PanoramaItem은 Panorama의 종속 개념입니다. 그래서 PanoramaItem은 단일만 있어서는 Panorama효과를 나타낼 수 없습니다. 반드시 하위 개념으로 들어가야 합니다. 참고로 MS에서 밝힌 파노라마 디자인 규격은 PanoramaItem이 4개가 들어간 겁니다. 4개를 만들어주겠습니다. 이때는 위의 Assets에서 PanoramaItem을  Panorama아래로 끌어주면 됩니다.

하나하나 삽입할때마다 디자인뷰에서 틀이 보이는 것을 확인할 수 있습니다.
그러고 보니 디자인뷰에서 크기가 안 맞습니다. 이를 조정해주려면 키보드로 V키를 누른 후 크기를 윈폰에 맞게
지정해줍니다.

그럼 자동으로 PanoramaItem도 크기가 맞춰집니다.

이제 본격적으로 내부를 꾸며보겠습니다.
우선 원문에 나온 참고링크는
http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/
입니다.

우선 Main속 Panorama를 선택한 후 우측에 있는 Properties를 확인합니다. 이중에 중간에 Common Properties가 있는데 Title을 meals to minutes라고 바꾸고 탭키를 누릅니다. 그럼 디자인뷰가 다음과 같이 변합니다.

이제 PanoramaItem의 이름을 바꿔줍니다. 참고할건 title이 아닌 이름입니다. 다음과 같이 바꿔줍니다.

기억할 건 Title이 아니라 PanoramaItem의 이름이 바뀐겁니다. 그래서 디자인 뷰로는 확인할 수 없는겁니다.
이게 뭔 대수인가 싶을 수도 있지만 처음 접하시는 분이라면 이렇게 알아볼수 있도록 이름을 지어놓는 것이 좋습니다.

여기까지가 Panorama의 구성입니다. 이제는 아까 만든 Screen인 AdvSearch부분을 수정하겠습니다. 이 부분은 Pivot으로 구현하고자합니다. 아까 언급했던 것처럼 AdvSearch스크린을 더블클릭해야 합니다. 방식은 Panorama때와 거의 비슷합니다. 역시 Assets에서 pivot을 검색한후 아래 LayoutRoot에 삽입합니다. PivotItem또한 Pivot의 종속 개념입니다.

참고로 페이지 크기를 자동으로 맞춰주는 기능은 Pivot을 우클릭해서 AutoSize를 해주면 됩니다.

똑같이 다음과 같이 합니다.

여기까지가 첫번째 튜토리얼이었습니다. 어떻게 보면 가장 간단하면서도 중요한 내용이었다고 생각합니다.
지금까지 한 내용을 못따라오셨더라도 상관없습니다. 어차피 다음 튜토리얼은 샘플 코드가 주어집니다. 그걸로 실행시킬 예정입니다. 그래도 이번 튜토리얼에선 Layoutroot내에 삽입하는 방법과 Title을 바꾸는 방법에 대해서 알아봤습니다.