기획자를 위한 WP7 개발 기초 - SketchFlow 사용 - 준비하기

실버라이트만 주구장창 하다보니 다른 플렛폼에 대해서도 다뤄봐야 할 것 같습니다.
마침 며칠뒤에 있을 앱 기획전 준비 겸해서 SketchFlow의 사용법에 대해서 하나하나씩 따라가보기로 하겠습니다.

 
우선 스케치플로우란 제가 봤을때는 완전 기획자를 위한 디자인 툴입니다.위의 그림에서도 언급되어 있지만 앱의 프로토타입을 구현하는데 편리하게 구성되어 있으며, 이를 ppt나 워드로 옮기는 것도 편리하게끔 구현되어 있습니다. 기타 안드로이드나 아이폰과는 다르게 윈도우폰에서 프로토타입을 미리 생성해 봄으로써 기획자도 개발에 친숙하게끔 도와주는 툴이기도 합니다. 공식적으로 이 툴은 Expression Blend Ultimate에서 제공되고 있으며 기존에 보여지는 예제처럼 사용하기 위해서는 따로 툴킷을 설치해야 합니다.

우선 사전에 양해가 필요하다면 정상적으로 설치했을 경우에는
 

라고 항목이 뜹니다. 분명히 과정을 정확히 지키시지 않으신 분이라면 지금 선택되어 있는 메뉴는 안뜰겁니다.

1101_WPDT_WP7.5App_v2.2.pdf

 
위 파일은 ms측에서 제공하는 App 개발전 준비 사항입니다. 반드시 이 순서를 지키실 것을 권고합니다.

간단히 요약하자면

1. 영문용 Expression Blend 4 Ultimate를 설치한다.

2. 영문용 Expression Blend 4 sp1을 설치한다. http://www.microsoft.com/downloads/details.aspx?FamilyID=17872A3A-4620-4B87-9D62-F29173D12625&displaylang=k&displaylang=en

3. silverlight용 sketchflow app-template을 설치한다. http://wp7sketchflow.codeplex.com/

4. 영문용 Visual Studio 2010 Ultimate를 설치한다.  

5. 영문용 Visual Studio 2010 sp1을 설치한다.

6. 영문용 WP7.5 SDK를 설치한다.

정도입니다. Sketchflow의 특성상 반드시 프로그램은 영문이어야 하고, 버전이 Ultimate여야 한다는 점을 유념해두셨으면 합니다. 위 메뉴가 안보이는 거라면 반드시 재설치하셔야 됩니다. 사실 개발자가 이 Sketchflow를 다룰 일은 없겠지만 아무래도 기획자와 디자이너와 개발자간의 협업을 위해서라면 사용법에 대해서는 알아두시면 좋을 것 같습니다.

아무튼 이제 준비는 거의 다 됬습니다. Asset에 보이는 아이콘이 전부 실 기획상에 적용할 수 있는 요소입니다. 인터넷에 쳐보면 sketchflow 관련 데모가 많습니다. 그런데 그 데모에서 쓰이는 요소와 저희가 쓸 수 있는 요소가 다르다는 걸 알 수 있을 겁니다. 

 
저희는 이런 요소를 쓸 수 없는 건가요? 이를 위해서는 조금 첨가해줘야 하는게 있습니다.

우선 지금 열려있는 Blend를 끄고 다시 켜면 다음과 같은 Welcome Screen이 뜹니다.

모르고 삭제 하신 분이라도 Help쪽 메뉴를 살펴보시면

 이 있습니다. 여기서 위의 그림처럼 Sample항목에 들어가 보시면 중간에 MockuoDemonstration이라는 항목이 있습니다. 이 항목을 열어주시면 다음과 같이 뜹니다.

뭔가 위와 익숙한 그림이 뜹니다. 그런데 지금 이건 현재 프로젝트에서만 Asset으로 쓸 수 있습니다. 이를 새로운 Sketchflow상에서 쓰기 위해서 좀더 수정할 부분이 있습니다. 우선 탐색기를 여시고
 

 
위의 파일위치로 찾아들어가면 항목이 위와 같이 두개가 있습니다. Design이란 폴더와 dll 파일 말입니다.
이를 복사해서 다음의 위치로 복사해서 넣습니다.

참고로 WPF상에서도 이 Mockup을 사용하고 싶다면 silverlight가 아닌 .NETframework에도 똑같이 복사해서 넣습니다.
이제 blend를 다시 껏다가 켜보세요.
그러면 Asset창에 새로운 항목이 생깁니다.

혹여나 이렇게 끌었는데도 안된다면 다시 껏다 키고 새 프로젝트로 해보시기 바랍니다.

결과는 다음과 같이 좀 눈에 좋게 나옵니다.

여기까지가 준비 과정이었습니다. 다음 포스팅에서는 화면간 이동 방법과 애니메이션 삽입에 관해서 다뤄보고자 합니다.