으아~ 너무 오랜만이네요. 매일 먹고 사는 것을 핑계로 포스팅을 미루고 있네요.. -_-;;
블렌드3이 나오고 실버라이트3도 나오고 조만간 WPF 4.0도 나온다고 하여 기쁨과 동시에 압박을 심하게 받고 있는 요즘~!!
블렌드3에 포함되어 있는 "스케치플로우". 뭐, 그 존재야 진즉에 알았습니다만.."기획자에게 좋은 프로토타이핑 도구라고 하지만 왠지 디자이너들이 기획까지 해야되는 건가" 라는 생각과 함께.. 제대로 써보지는 못하고 컨트롤만 몇개 끄적끄적 해보고 말았었죠.
그러던 중 회사에서 미션이 하나 떨어졌습니다. 이미지를 자르는 간단한 애플리케이션이었어요. 이미 어느정도의 기능은
구현이 되었으나 윈폼으로 만들어진 애플리케이션이었고 UI개선이 필요한 상태였습니다. 제가 작업할 것은 WPF로 프로젝트를
새로 구성하여 UI를 기획하고 XAML로 구현하는 것이었습니다. 대부분의 디자이너를 포함하여 블렌드를 다루는 분들의 개발
스타일은 제각각일것입니다. 이 포스팅은 제 개인적인 프로세스이니 참고하시기 바래요.
저는 보통 UI기획을 하게 되면(물론 전문 기획자가 아닙니다.) 종이에 밑그림을 그려서 XAML로 구현하거나, 개발자와 문서공유가 필요한 작업이라면 파워포인트를 사용했었습니다. 그리고 XAML 레이아웃 작업을 한 후에 개발자에게 XAML 파일과 CS파일을 전달하고, 개발자가 받아서 프로그래밍을 하는 동안 저는 XAML 파일에 디자인을 입혔습니다. 프로그래밍단과 디자인단이 분리되어 있기때문에 서로 영향을 받지 않고 작업을 할 수 있으니까요. 그림으로 살펴보면 다음과 같습니다.
이 과정에서 1단계의 과정을 스케치플로우로 대신하였습니다. 이전의 작업과정과 비교하여 볼때 1단계에서 소요되는 시간이 조금 더 길어졌습니다. 아무래도 제가 하다 보니 각각의 컨트롤에 X:NAME을 지정하고 레이아웃을 잡으면서 했기 때문입니다. 기획자가 한다면 이러한 작업이 생략될 수도 있겠네요. 그러나 여기에서 중요한 것은 이렇게 1단계에서 소요시간이 길어진 만큼 2단계에서의 작업시간이 훨씬 줄어들었다는 것입니다. 레이아웃 구조와 변수 이름을 지정하면서 해 놓은게 있어서 그 틀대로 똑같이 따라하면서 작업을 했기 때문에 금방 할 수 있었습니다. 여러 페이지를 작업한 것이 아니었음에도 불구하고 프로토타입으로 보여주기도 좋았습니다.
다음은 제가 스케치플로우로 레이아웃을 잡아 본 것입니다.
이미지로만 보기에는 확인이 힘들지만 콤보박스나 텍스트박스 등이 들어가 있습니다. 이 프로토타입을 가지고 개발자와 기능협의를 조금 더 하였고 저는 XAML로 레이아웃을 잡아(기본 컨트롤 사용) 개발자에게 넘긴 후, 다시 디자인작업을 하여 입혔습니다.
자... 스케치플로우로 잡은 프로토타입과 비슷하죠? 기획자가 아니어서 잘 모르겠습니다만, 저와 같이 이렇게 두 작업을 같이 해야 할 경우에는 문서화 하기도 좋고 수정해서 작업 들어가기도 편하네요. 다른분들은 어떤 방법으로 작업하시나요? ^_^
더 좋은 방법이 있다면 같이 공유하면 좋겠습니다. 흐흐~~
// 거대한흐름(어느회사일까요)의 뛰어난 기획자 L모 님께 여쭈어보았습니다. 아 역시 제대로 된 기획자는 저와 쓰는 용도가 많이 다르더라구요. 저는 레이아웃을 잡고 컨트롤 쓰는데에 치중했다면, 기획자는 자기가 생각하는 프로세스를 효과적으로 보여주는데에 사용을 하셨네요. 컨트롤이나 레이아웃의 제약은 거의 받지 않고..^_^;; 역시 저의 한계였습니다 하하~!!
이만하면 좀 쓸만한 툴인것 같죠? ㅋㅋ 모두모두 화이팅요~~~~!!
