[UX designer] 개발자와 협업하기- Wireframe과 Task flow chart

안녕하세요 날으는고양이입니다.^^

오늘은 개발자와 협업할때 많이 사용되는 것중 하나인 task flowchart와 wire Frame에 대해 알아보아요!
 
우선 무엇인가 개발한다고 할때 앱의 필요성, 앱이 지향하는 바 등이 나오면

 본격적으로 UI가 어떤 순서로 갈지 구성하게 되죠.

 

하지만 UX설계자들은 항상고민하게 됩니다.

 

'대체 이걸 어떻게 개발자들에게 설명하지? ㅠㅠ'

 

 멤버십처럼 같은 공간에서 개발할 경우에는, 손으로 그려가면서 설명할 수 있지만

만약 개발자와 거리가 먼 경우 경우는 더 난감합니다.

예를들어 미국에 있는 친구와 작업한다고 생각하면 까마득하죠...

 

silverlight를 사용할 줄 아는 디자이너라면 개발자와의 언어소통이 줄어들지만..

개발하다보면 silverlight로 작업할 수 없는 프로그램들도 다수 존재합니다.

MFC나 이클립스만으로 개발해야하는 프로그램이 있죠.

 

 

그때 개발자와 디자이너 그리고 UX설계자들간의 의사소통을돕는 역할을 하는 것이

주로 사용하게 되는 것이 wire Frame과 Taskflow chart입니다

 

 백문이 불여일견!

wirerame이 어떤것인지 우선 보여드릴께요

와이어프레임은 향후 개발될 '어플리케이션,웹페이지 등등의 초기적인 형태를 보여주는 그림'

이라고 생각하시면 될거에요

 

간단히 예를 들어서 하나 보여드릴께요

앱 개발 초기에 작업했던 wireframe입니다, 물론 이 형태로 앱이 나오진 않았어요 ^^;;

1,2,3, 순번을 매겨서 각 기능이 어떤역할을 하는지

간단하게 주석을 달아두었습니다.

  

이 와이어프레임은 몇번이고 수정가능하고, '간단하고 대략적인'형태를 보여준답니다.

아직 Gui(Graphic user interface) 작업을 입히지 않은 상태입니다.

우선 비쥬얼적인 요소들을 배제하고 만들죠 그래서 흑백이나 회색칼라계열로 많이 작업하는 편입니다.

 

이 와이어 프레임에는

1)wireframe

2)주석

3)  메타데이터        

 

세가지 요소가 들어가게 됩니다.

위의 예시 그림에는 1,2만 들어가 있는 상태입니다.

추가적인 메타데이터는 디자이너의 이름, 와이어프레임이 만들어지거나 수정된날자.

남은 문제등을 적어둔답니다. 

 

저같은 경우는 파일 이름 자체를 '수정날자'로 만들어둡니다. '2011_05_23ver_Frameflow.jpg'

 

 

자 이런 wireframe으로 화면을 보여줬다면, 화면이 어떤 흐름으로 넘어가고

어떤 단계를 거쳐야하는지 보여줘야겠죠?

바로 Task flow chart입니다. 본디 테스크 플로우 차트를 만드는 방식이 있지만

 

'제가 개발자들과 함께 진행할때 사용하는' 플로우 차트를 보여드릴께요

 

 

앱 옵션페이지의 플로우입니다. 어느 버튼으로 들어가면, 어떤 기능이 나오는지 보여줍니다.

실제로 신촌멤버십과 강남멤버십 개발자님들과 개발 당시 사용한 차트입니다.

여기서 제가 집중한것은 '빨간체크'를 통해서 어떤 화면으로 들어가는지를 보여줍니다.

작업은 illustrator로 작업했습니다.

 

UXdesigner에 따라서 각기 다른 플로우를 보여줄수 있답니다.

 

참 원시적인것 같지만, 이게 더 효과적일 때도 있답니다.

이렇게 보여주면, 개발자들과 어떤식으로 코딩하고 어떤기능이 추가되

단순작업이지만 장거리에 있는 사람이나, 2~3명이상의 개발자들과

함께 작업할 때 시각적으로 빨리 보여줄 수 있어서

저는 주로 이방법을 사용합니다. 

 

 

이렇게 WireFrame과 Flow chart 두개를 보았는데요.

개발자와 UX설계가 각각 이 그림을 볼 때 주의해야 할 점이 있습니다

 

'이건 완성본이 아니고, 언제든지 수정 가능한 화면이랍니다.^^'

 

 

아래에는 GUi를 입혔을 경우의 FLow입니다.

GUI를 입힌 경우에 확 달라진 모습을 볼 수

 

 있죠?

위의 그림과 아래 그림을 자세히 살펴보면

'수정'된 부분들이 보인답니다.

 

개발자와 기획자, 디자이너의 성향에 따라서 이 taskflow는 적합할 수 도 있고 아닐수도 있답니다.

중요한 것은 '의사소통' 하는 것을 도와주는 수단이라는 것이죠.

 
다른 UX 이야기들을 보고싶다면 blog.naver.com/parkzpwn으로 오세요 ^^