[Blend4] WPF SketchFlow

스케치플로우는 프로젝트를 수행하기 전에 기획하는 단계의 스케치를 좀 더 쉽고, 소통이 가능하도록 프로토타입을 만드는 것을 도와주는 프로그램이다. 프로그램이나 디자인을 제작하기 전, 어떤 단계로 프로세스를 진행할 것인지, 화면 구성은 어떻게 할 것인지를 이 프로그램을 통해 쉽게 접근할 수 있다.

* 프로젝트 생성하기

Sliverlight가 아닌 WPF으로 프로잭트를 생성하는 이유는 내가 WPF 프로그래머라고 그렇다. 메뉴에서 새 프로젝트를 선택을 하면 총 4개의 프로잭트를 생성 할 수 있다. SketchFlow는 맨 마지막 프로젝트이다.

1. ArtBoard : 블렌드에서 직접 보면서 작업하는 영역, 드로잉 툴로 그릴 수 있는 영역을 제공.(디자이너 입장)

              하나의 윈도우 창 (개발자 입장)

2. SketchFlow StyleAsset : 프로토타입을 제작하면서 손으로 그린 스케치 같은 효과를 내고 싶을 때 스케치플로우에서 제공하는 여러가지 컨트롤.

3. SketchFlowMap : 유져가 스크린이 처음 시작할 때부터 마지막 스크린까지 응용프로그램을 흐름을 시각적으로 볼 수 있는 지도 역할.

4. SketchFlowAnimation :  스케치플로우 애니메이션은 화면에서 부분적으로 다른 상태의 모습을 보여주고자 할 때 사용.

* 화면 구성

1. 스크린을 만든다.

2. 현재 존재하는 스크린과 연결

3. 스크린1에 들어갈 컴포넌트 스크린을 만든다.

4. 현재 선택된 스크린의 태그 생삭을 바꾼다.

스크린을 생성을 하면 자동으로 1번 화면과 2번 화면을 연결해 준다.(화면 연결이란 소리는 일종에 하이퍼링크라고 보면 된다.)

위에 똑같은 방법으로 여러개 화면을 만든다. 연결은 자도으로 되기 때문에 걱정 할 필요가 없다.

총 7개의 화면을 제작을 하면 위에 스크린샷과 같은 모양이 나온다.

각각의 스크린 태그는 색을 변경해줄수 있다.

화면에 마우스를 올리면 오른쪽 맨 끝에 아이콘이 스크린의 태그 색을 바꾸는 아이콘이다.

스크린의 아이콘 색을 변경후 컴포넌트 스크린을 만들어봤다.

간단히 말하면 홈페이지에서 Log In 같은 페이지라고 보면된다.(설명을 못해서..알아서 이해하길...ㅎㅎ)

위에 스케치가 홈페이지를 구성하는 뼈대 스케치 이다.

"거침없이 배우는 익스프레스 블렌드"를 보면서 따라 해봣는데..생각보다 쉽다.