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

안녕하세요. 정진희 입니다.
이번강좌는 블랜드 3에서 set로 같이 포함된 +SketchFlow 에 대해서 알아보도록 하겠습니다.

스케치 플로우는 프로젝트를 수행하기 전에 기획하는 단계의 스케치를 좀 더 쉽고, 소통이 가능하도록 프로토 타입을 만드는 것을 도와주는 프로그램입니다. 
프로그램을 제작할 경우 어떤 단계로 프로세스를 진행하는지 버튼을 눌렀을 때 어떤 경로로 가게 되는지 등을
기획자 및 개발자도 스케치 플로우를 사용하여 쉽게 그릴 수 있습니다.
프로토타입 작업에 들어갈 시에는 대부분 손으로 스케치 하면서 회의를 했었고, 그것에 대한 공유를 다시 컴퓨터로 글로 적어서 (아니면 스캔을 해서) 한 것을, 이 프로그램으로 이용하면 피드백과 문서 작업을 편리하게 할 수 있습니다.

한번 파일을 열어보도록 하겠습니다.
1) WPF나 Silverlight 중 자신이 하고자 하는 프로젝트가 윈도우 기반이시면 WPF SketchFlow로 오픈하시기 바랍니다.
저는 WPF로 열었습니다. 그리고 확인을 누릅니다.

2) 그러면 다음과 같이 작업 환경이 보이게 됩니다.

ArtBoard : 블랜드에서 직접 보면서 작업하는 영역, 드로잉 툴로 그릴 수 잇는 영역을 제공해주며
포토샵 이미지 파일을 불러들일 수 있습니다.

SketchFlow Style : 프로토 타입을 제작하면서 손 스케치같은 모습을 보여주고 싶을 때 스케치플로우에서 그런 느낌의 스킨 컨트롤들을 제공합니다. 위치는 Asset에서 sketch에 가면 자신이 원하는 hand-sketch 느낌의 컨트롤들을 사용할 수 있습니다.

SketchFlow Map : 처음 스크린이 시작할 때부터 유저가 마지막 스크린까지의 어플리케이션의 흐름을 시각적으로 보여주는 역할을 하는 Map입니다. Map Panel에서 쉽게 프로토타입 흐름을 만들 수 있습니다.

SketchFlow Animation : 스케치 플로우 애니메이션은 UI에서 부분적으로 다른상태의 모습을 보고자 할 때 사용될 수 있습니다. 애니메이션을 사용하면서 어떻게 인터렉션이 일어나는지 볼 수 있습니다.

3) Map Panel에서 다른 스크린 페이지를 만들어보도록 합니다. 맵에서 Screen1에 마우스를 갖다대면 이런 모양이 나오는데요.

1번째 아이콘 : 스크린을 만듭니다.
2번째 아이콘 : 현재 존재하고 있는 스크린과 연결 합니다.
3번째 아이콘 : 스크린 1에 들어갈 컴포넌트 스크린을 만듭니다.
4번째 아이콘 : 현재 Screen1의 태그 색상을 바꾸어줍니다.

스크린 1에서 다른 페이지로 연결을 추가시키려면 첫번째 아이콘을 클릭하고 잡아 끌어주면 화살표가 연결되면서
다음과 같은 모양으로 나옵니다.

4) 이런식으로 또 스크린 2에 만들어보도록 합니다. 하나의 스크린에 여러개를 연결할 수도 있습니다.

5) 중요하다거나 영역이 다르면 4번째 아이콘을 클릭하여 다른 태그의 색상으로 변경하여 줍니다.

6) 3번째 아이콘을 한번 클릭해보도록 합니다. 컴포넌트 스크린을 삽입했기 때문에 다른 스크린과는 다르게 점선으로 연결되어 있습니다. 

그리고 같은 컴포넌트를 스크린 2에서도 사용할 경우 3번째에 정렬한 아이콘을 클릭하여 스크린 2에 연결할 수 있습니다.
항상 상단이 고정이거나 같은 파일로 된 경우 이런 방식으로 사용하면 될 듯 합니다 -

sketchFlow Map에 대한 사용법을 알아봤습니다. 다음강좌에서 계속 이어집니다.