[Expression Blend 3] 스케치 플로우(SketchFlow), 어떻게 사용할까? - 3

안녕하세요. 정진희입니다.

저번 시간에는 스케치 플로우에서 Map Panel을 이용하여 프로토 타입의 플로우 페이지를 만들어 보았고,
각각의 페이지를 SketchFlow가 제공하는 Control을 이용하여 화면을 구성해 보았습니다.
이번 시간에는 각각의 페이지를 잇는 작업을 해보도록 하겠습니다.

플로우 링크의 방식은 다음과 같습니다.

로그인 - 메인 - 서브 - 서브4에서 로그인으로 돌아가는 방식으로 연결해 주도록 하겠습니다.
저번시간에 작업한 프로젝트를 가져와서 사용하겠습니다.

1) Map Panel에 Login Map을 더블클릭하면 더블클릭이 나타납니다.
여기서 OK를 클릭하면 Main이 나타나도록 링크시키겠습니다.

2) OK 버튼 우클릭 - 탐색 (영어로는 Navigate to) - 링크 걸어야 할 대상 Main 클릭 링크를 걸었습니다.

3) Map panel에서 Main을 클릭하여 페이지를 열고, 방금과 같은 작업을 Sub1,2,3,4에 반복 합니다.

4) 페이지가 링크되었는지 확인하시려면 F5를 클릭하여 실행해 봅니다.
그러면 다음과 같이 화면이 나타납니다. 저는 Expression Blend에서 WPF프로토타입으로 열었기 때문에 윈도우 형식으로 보이게 됩니다. 실버라이트 프로토 타입으로 했다면 웹에서 보여집니다

1) 현재 오픈되어 있는 화면에서 연결된 링크나 스토리보드 등을 탐색하고 클릭할 수 있도록 보여지게 됩니다. 
2) 사용자의견, 현재 페이지에 피드백을 남길 수 있도록 하는 패널입니다. 의견을 타이핑할 수도 있고, 펜으로 직접 화면에 그려 직관적으로 피드백을 보일 수 있도록 제공하는 툴입니다.
3) 화면이 보여지는 부분이며, 이곳에 펜을 이용하여 피드백을 남길 수 있습니다

5) 링크 된 것을 확인 할 수 있습니다. 각 페이지에 링크 시킬 컨트롤들을 위와 같은 방식으로 해주도록 합니다.
마찬가지로 Sub4에서도 Restart를 클릭하면 Login페이지로 돌아가도록 링크를 걸어줍니다.
전체적인 플로우를 완성하였습니다.

다음시간에는 좀 더 효과적인 프로토 타입을 만들기 위해 애니메이션을 추가하는 방식에 대해서 알아보도록 하겠습니다.