직접 SketchFlow를 만들어 보았습니다.
ImageSlidePlayer라는 프로그램을 프로토타이핑하기 위해 만들었는데요, 실제 ImageSlidePlayer라는 프로그램은 이미 만들어 두었고, SketchFlow는 실제 체험해 보기 위해 만들었습니다.
SketchFlow는 왜 사용하는가 ?
- 실제 만들어질 프로그램의 UI와 기능과 흡사하게 만들 수 있다.
- 실제 구현에 들어가기 전에 발표를 하고 시연을 하여 피드백을 판서로 기록하여 요구사항에 가깝게 SketchFlow를 수정할수록 요구사항들을 충족시키는 프로그램을 만들 수 있게 된다.
- 구현할 프로그램의 기능들과 흡사하게 만들기 때문에 시연을 함으로써 각 기능들에 대한 이해와 필요성을 상대방에게 알리기 용이하다.
- 실제 프로그램에 쓰일 각종 Control들과 Panel의 이름과 위치를 정하기 때문에 프로그램 구현에 들어가게 되면 디자이너와 개발자들은 SketchFlow 프로젝트에 쓰인 이름과 배치에 쓰인 정보들을 이용하면 된다.
- Blend 3와 똑같이 사용할 수 있다.
- MS Word문서로 내보내기 기능이 있어서 쉽게 보고서 형태로 작성할 수 있다.
- 포토샵과 일러스트레이터의 프로젝트 파일과 연동이 된다.
ImageSlidePlayer?
- Image를 큐브 모양으로 만들어서 회전 시키며 보여주는 Player입니다.
ImageSlidePlayer의 SketchFlow Map을 보면 보여질 화면이 두 개 뿐이라서 Screen이 두 개입니다. 참 썰렁하죠;
<SketchFlow Map>
<ImageSlidePlayer & ImageViewerOption>
ImageSlidePlayer에는 이미지들을 회전시키며 보여주는 ImageSlideViewer와 ImageSlideViewer의 size와 ImageViewerOption 의 배경 이미지와 색을 설정할 수 있는 ImageViewerOption이 있습니다.
SketchFlow에서는 종속되어있는 Screen의 Children에 대한 정보를 얻을 수가 없어 굉장히 많이 어려웠습니다.
(아예 안되는 것은 아니지만, 소스 코드를 만져야 하는 일이기 때문에 SketchFlow 내에서 수행 가능한 한도로 작업을 변경했습니다.)
ImageSlidePlayer SketchFlow의 동작구조
1. ImageSlidePlayer
- 윗쪽 버튼 : [NavigateToScreen] Behavior를 이용하여 ImageViewerOption screen으로 이동
* [NavigateToScreen] Behavior란 ? 다른 Screen으로 이동 시켜준다.
- 아랫쪽 버튼 : [ChangeRotation] Behavior를 이용하여 Player가 위로 뒤집히면서 ImageViewerOption이 등장
- 왼쪽 버튼 : [ChangeRotation] Behavior를 이용하여 ImageViewer의 이미지들이 왼쪽으로 90도씩 회전
- 오른쪽 버튼 : [ChangeRotation] Behavior를 이용하여 ImageViewer의 이미지들이 오른쪽으로 -90도씩 회전
2. ImageViewerOption
- Ok 버튼 : Width, Height를 입력하고 Ok버튼을 누르면 ImageSlideViewer의 size가 변경되며, [NavigateToScreen] Behavior를 이용하여 ImageSlidePlayer screen으로 이동
* Blend 상에서 Player로의 접근의 불가하여 실제 변경은 불가하다.
- Background Image 리스트 박스 : Element Binding을 통해 Item을 선택하면 해당 Item의 이미지가 ImageViewerOption와 ImageSlidePlayer의 배경 이미지로 변경
* Blend 상에서 Player로의 접근의 불가하여 실제 변경은 불가하다.
* Background Image 리스트 박스의 내용을 Sample Data Source를 생성하여 채우려고 했지만, Sample Data Source의 내용에 접근하여 Element Binding을 할 수 있는 방법이 없어서 포기하고 Item들을 직접 StackPanel로 만들어서 채웠다.
- Color 콤보 박스 : Element Binding을 통해 Item을 선택하면 해당 Item의 배경 색이 ImageViewerOption와 ImageSlidePlayer의 배경 색으로 변경
* Blend 상에서 Player로의 접근의 불가하여 실제 변경은 불가하다.
- 아랫쪽 버튼 : [NavigateToScreen] Behavior를 이용하여 ImageSlidePlayer screen으로 이동
SketchFlow의 단점 ?
- 사용자가 SketchFlow를 사용할 수 있는 수준이어야 한다.
* 적어도 각종 Control에 대한 지식이 있어야 하며, Blend 3 사용 경험자일 수록 쉽다.
- SketchFlow Project를 그대로 실제 프로젝트에 대입하거나 재활용할 수 없다.
* SketchFlow에서 쓰이는 클래스의 type은 Screen이며, 이 type은 SketchFlow 전용이다.
- 구현할 프로그램의 모든 기능을 SketchFlow내에서만 실현시키기엔 어느 정도의 한계가 있다.
SketchFlow에서 부딪히는 문제들 때문에 삽질을 많이했던 것 같은데요, 중간중간 MVVM/Command Pattern, Behavior, Element Binding 등도 같이 접하면서 공부할 수 있는 기회들이 있어서 좋았습니다.
아직 SketchFlow에서 state와 SketchFlowAnimation을 이용하는 방법을 알지 못해서 좀 아쉽습니다.
아직 공부하지 못한 것은 픽셀 셰이더 이펙트입니다.
이상 박경민이었습니다! -ㅁ-)/
참고하면 좋은 사이트 -
http://www.uxfactory.com/752
[Expression Blend 3] 스케치 플로우(SketchFlow), 어떻게 사용할까? - 1
[Expression Blend 3] 스케치 플로우(SketchFlow), 어떻게 사용할까? - 2
[Expression Blend 3] 스케치 플로우(SketchFlow), 어떻게 사용할까? - 3
