Sketch를 이용한 UI 가이드 만들기(3)
UI 가이드 파워포인트에서 벗어나기
마지막 포스팅은 Userflow를 이용한 Flow 만들기와 프로젝트를 진행한 소감에 대해서 간략하게 공유해보려고 한다.
그럼 바로 본론으로 들어가서 첫 번째 포스팅을 보신 분들은 Userflow라는 Plugin을 설치되어있을 것이다.
Userflow는 "레이어"와 "화면(아트보드)"을 Flow로 연결해주는 Plugin인 이다.
01_Userflow 레이아웃 잡기
Userflow의 장점은 서비스의 전체 화면을 한눈에 볼 수 있다는 것인데,
Flow를 그리다 보면 정말 전체 Flow를 한 페이지에 작성하게 되기 때문에 생각 없이 순서대로 작성하다 보면 화면이 너무 복잡해져 버린다. 프로젝트의 특성에 따라서 flow작성법은 달라질 것 같은데 나 같은 경우는 사용자가 데이터를 백업/복원하면서 시간의 순서대로 서비스를 이용하는 flow가 명확했고 개발자나, 기획자가 서비스 시나리오를 이해하는데 상당히 중요한 요소였기 때문에 y축을 시간, x축을 기기별 백업/복원 방식에 따른 화면으로 정의로 구분하여 작성하였다.
서비스의 전체 flow를 이해하기에 효과적이다.*특히, 레이어와 화면을 이어주는 선을 사용자가 컨트롤할 수 없기 때문에 화면이 늘어나면 정말 정신이 산만해질 수 있다. 그래서 미리 큰 구획을 나뉘어서 영역을 잡아야 한다. 특정 조건에 따라서 결과 화면이 달라지는 화면의 경우와 같이 시나리오가 갈라지는 조건들을 대략적으로 생각해놓고 작성하기를 추천한다.
화면과 화면을 이어주는선이 flow가 많아질수록 점점 산만해진다.. 출처:http://www.hongkiat.com/blog/sketch-user-flows-plugin/02_Symbol 정리하기
스크린 정의 화면에서 개별 화면들을 정의해서 symbol화 했다면 symbol페이지에 들어가면 내가 symbol화 시킨 순서대로 아트보드가 나열되어 있을 것이다. 본격적인 flow작업에 들어가기 전에 symbol페이지를 한번 정리해줄 필요가 있는데, 빠져있는 화면이나 시나리오가 있다면 추가해주고, 작성자가 좀 더 보기 쉽게 관리해주기 위해서 화면을 나눠주는 것도 좋다.
첫 번째 포스팅에서도 이야기했지만, 스크린 정의 화면에서 만든 화면들을 symbol화 시키고 flow에서 symbol화 된 화면을 사용하는 이유는 나중에 수정사항이 생겼을 때 좀 더 효율적으로 문서를 관리하기 위해서이다. 차후 수정사항이 생기면 symbol페이지에서 그 부분만 수정하거나 다른 symbol로 교체하면 전체적으로 반영된다.
*symbol페이지 안에서 다시 만들어진 symbol을 사용할 수 도 있는데 scroll 되는 전체 화면을 노출해야 하거나, 동일한 화면에 팝업이나 특정 component가 overay 되어 노출되는 화면에서 사용하면 편리하다.
03_Flow 작성하기
1) 앞에서 이야기했듯이 Flow작성법은 레이어와 아트보드를 선택하고 단축키 (Command +Shift+K)를 누르면 flow가 생성된다. 참고로 생성되는 화살표의 방향은 작성자가 임의로 수정할 수 없다. 대신 화살표의 색이나 모양 등은 수정 가능하다.
2) 특정 조건에 따라서 결괏값이 달라지는 경우에는 Conditon을 추가하면 된다. 단축키(Command + Shift +D)를 누르면 Add/Edit Conditions 가 실행된다.(동일한 단축키가 미리 다른 기능에 설정되어있다면 사용이 안될 수도 있다.)
3) 레이어의 시작점에 UI Gesture symbol을 이용하면 어떤 Gesture를 했을 때 다음 화면으로 넘어가는지 명확하게 전달할 수 있다.(확면) Gesture는 최대한 단순한 걸 사용하는 게 좋다.
레이어를 연결만 하는경우 어떤 인터렉션으로 다음화면으로 이동하였는지 알기 힘들다.
Gesture는 최대한 단순한 모양으로..
예시) Tap시 배경이 dim처리되고 더보기 메뉴가 노출된다.4) 레이어의 위치가 달라진 경우 단축키(Command +Shift +9)를 선택하면 위치가 재 조정된다.
5) Flow를 Generate 하는 경우에는 flow시작 아트보드를 지정해줘야 한다. 이를 이용해서, Flow가 방대해지는 경우 Generate시 flow의 시작 아트보드를 시나리오 별로 나누어 Generate 하면 전체 flow를 쪼개서 Flow 아트보드로 생성할 할 수 있다.
내가 원하는 부분의 flow만 나눠서 generate가 가능하다.04_전체 문서 export 하기
문서를 공유할 사람들이 Sketch를 가지고 있지 않다면 대부분의 파일은 PDF로 공유하게 된다. 상단 메뉴에서 전체 문서를 export 하거나 원하는 아트 보드만 선택하여 export 할 수 있다.
*전체 문서를 export 하는 경우 flow페이지에 있는 개별 아트보드가 장표 하나로 export 되는데 이런 경우 flow페이지를 잠시 삭제하고 화면 정의 페이지와, Generate 된 Flow 페이지만 export 하면 된다.
05_문서 관리하기
한벌의 UI 가이드가 완성되고 나서 이후 수정이 이뤄지는 경우 파워포인트에서는 수정된 부분에 딱지를 붙이고 문서 상단에 태깅을 작성하여 수정 히스토리를 남겨놓았었는데 스케치에서도 이렇게 문서를 관리하고자 한다면, 아래와 같은 방법으로 태깅을 하는 걸 추천한다.
1) 장표 별 수정 히스토리 태깅을 남길 Rectangle을 하나 만들고 그 안에 수정 날짜와 수정 내용을 작성한다.
2) 레이어의 이름은 수정 날짜명으로 통일하여 붙인다. 차후 수정된 내용을 찾을 때 레이어 이름으로 검색을 하면 수정 내용만 골라볼 수 있다.
3) PDF에서 찾고자 할 때는 "Control +F"를 사용하여 수정 날짜로 검색을 하고, Sketch에서는 Control + F 키로 레이어명으로 찾아서 확인하면 된다.
레이어명이나 그룹명을 버전명이나 날짜로 해놓으면 차후 검색시 수정이된 레이어만 찾을 수 있다.06_ 소감 및 프로젝트 리뷰
1) 그래서 계속 쓸거야?
Sketch로 파워포인트 대체하기를 진행하고 나서 "그래서, 다음부터는 스케치로 가이드를 치실건가요?"라는 질문을 많이 들었는데, 내 생각은 이건 프로젝트의 사이즈와 작성자의 성향에 따라서 달라질 것 같다. 분명히 효율적인 면도 있지만 Sketch가 문서작성에 특화된 툴은 아니기 때문에 아직 불편한 부분이 아직 많기 때문이다. 그럼에도 불구하고, 아직 전통적인 방법으로 가이드를 치는 경험만 가지고 있는 분들은 꼭 한 번 파워포인트에서 벗어나 보시길 추천한다. 스케치가 가진 강점이 크기 때문에 한번 경험을 해보면 어떤 프로젝트에서 어떻게 써야 할지 감이 올 거라고 확신한다.
2) 협업 프로젝트에서 툴을 바꾼다는 건..
협업을 하는 프로젝트에서 갑작스럽게 툴을 바꾼다는 건 같이 일하는 사람들의 배려와 이해를 필요로 한다. 나의 경우는 정말 운이 좋게도 개발자 사업기획자 GUI디자이너 모두 툴 변화에 대한 필요성에 대해 공감해 주었기 때문에 이러한 시도를 해 볼 수 있었던 것 같다. 특히 파워포인트로 작업했을 때와 가장 크게 달랐던 점은 v1.0 배포에 큰 의미를 두지 않고 최대한 Lean 하게 진행상황을 시시 때때 공유해서 수정/개선하고 서로의 생각을 "이해"하는 작업을 할 수 있었던 것이다.
3) 삽질 장인 VS 포크레인
UI의 근본적인 역할을 생각해볼 때 모바일을 지향하는 프로젝트에서 파워포인트는 필연적으로 개선되거나 바뀌어야 할 부분이 너무나 많다. 특히 이번 포스팅에는 내용을 담지 못하였지만, Sketch가 가진 다양한 프로토타이핑 툴(Framer, Flinto, Plinciple, Invisioin, Kite 등)과의 연계성은 파워포인트로는 절대 해결할 수 없는 부분이다. 삽질에 익숙해져서 삽질 장인이 되어도 포크레인은 못 따라가는 것처럼.
다음번에 시간이 된다면 간단한게 프로토타이핑과 사용자 테스트하는 내용까지 이어서 포스팅을 하고 싶은데 시간이 될지 모르겠다..
