Sketch를 이용한 UI 가이드 만들기(1)
UI가이드 파워포인트에서 벗어나기
회사마다 다르겠지만, 내가 일하는 회사의 UI 디자이너들은 UI작업을 하는 경우 PPT를 이용하여 작업을 한다.
Mobile Design과 Prototyping의 경우 다양한 툴들이 범람하는 와중에, 많은 기업에서 UI 디자이너들은 아직까지 파워포인트의 늪에서 벗어나지 못하고 있다. 물론 파워포인트는 UI 가이드를 작성하고 관리하는데 여러 가지 장점을 가지고 있지만 몇 가지 치명적인 단점 때문에 "효율적"인 툴이라고 생각하지는 않는다.
마침, 내가 주도적으로 혼자 진행할 수 있는 프로젝트가 생겼고. 모험심반 호기심반으로 Sketch를 이용해서 UI 가이드와 Flow작업을 진행한 경험을 풀어볼까 한다.
내가 생각하는 파워포인트의 단점
1) UI 가이드가 방대해질수록 반복적인 요소에 대한 화면 Sync관리가 어렵다. 내가 지금까지 진행한 프로젝트 중 가장 방대했던 프로젝트의 경우 UID만 2000장이 넘어갔는데, 버전별 변경사항을 모든 장표에 sync 맞추기는 엄청난 노가다를 필요로 했다..
수많은 파워포인트장표의 늪에서 벗어날수 있을까..2) 실제 모바일 화면과 동떨어진 레이아웃. PPT로 작업할 경우 px이 아닌 cm단위로 화면 크기를 정의하고 레이아웃 정의를 하기 때문에. 실제 모바일 화면의 크기와 동떨어질 때가 많다. 이런 경우 실제 GUI 작업 시에는 화면이 비어 보이거나, 좁아보이는 경우가 많기 때문에 레이아웃을 다시 잡아야 한다.
파워포인트와 Sketch의 차이, Sketch에서는 실제 화면사이즈를 기준으로 레이아웃 작업을 할 수 있다.3) 화면별 Flow작업 시 여러 가지 시나리오를 표현하기 위해서는 장표가 기하급수적으로 많아질 수밖에 없다. 예를 들어 한화면에 여러 가지 버튼이 있고 그에 따른 시나리오 플로우가 필요한 경우. 각 플로우마다 중복되는 화면이 포함되기 때문에 장표가 기하급수적으로 늘어나게 된다.
4) 동적인 인터렉션을 표기하기가 어렵다. 파워포인트는 대부분 정적인 이미지에 상세한 텍스트 가이드를 가지고 화면의 레이아웃과 인터렉션을 표기하게 되기 때문에 UI 디자이너가 생각할 수 있는 인터렉션의 종류와, 표현방식에 한계가 있을 수밖에 없다.
정적인 화면과 텍스트로 정의를 하게 되면 인터렉션시 필요한 velocity, friction, tension, ...등의 값을 생각하기 어렵다.5) 이렇게 생성한 UI 가이드가 쉽게 읽혀질까. 파워포인트의 경우 정적인 이미지에 모든 설명을 텍스트로 풀어야 했기 때문에 만드는 사람도 보는 사람도 쉽게 눈에 들어오지 않는다. 장표가 많아지는 경우 개발자, 기획자, GUI디자이너가 모든 장표를 놓치지 않고 읽기는 쉽지 않다.
툴 선택하기
이러한 몇 가지 단점을 가지고 있는 파워포인트를 대체하기 위해서 몇 가지 프로그램을 살펴본 결과 파워포인트에 기술되는 반복적인 화면의 경우 Sketch의 심벌 기능을 이용할 경우 상당히 효율적으로 문서를 관리할 수 있지 않을까 하는 생각이 들었다. 특히 내가 맡은 백업 복원 서비스 프로젝트의 경우 사용자는 하나의 시나리오에서 백업, 복원 두 가지 폰을 계속 확인해야 했기 때문에, 전체적인 연동 시나리오를 파악하기에 용이할 것이라는 생각을 하였다.
그럼 지금부터 어떤식으로 진행했는지 작업 포스팅을 시작해볼까 한다.
01_Sketch와 Userflow Plug-in 설치하기
이미 설치되어있다면 상관없겠지만 아직 프로그램을 다운로드하지 않았다면 아래 사이트에서
Free trial 버전을 다운로드하여 설치해야 한다.
Userflow는 UI플로우를 작성하기 쉽게 해 주는 Plug in인데 무료이니 다운로드하여놓길 추천한다.
*다운로드한 Plug in은 Sketch Plugin 폴더에 넣어두면 자동으로 설치되는데, Sketch Plugin폴더는 다음 메뉴 경로 에서 접근할 수 수 있다. Pugins> manage Plugins> Preference> Show plugins folder
https://abynim.github.io/UserFlows/
02_아트보드 생성하기
Sketch로 작업하는 경우에도 UI 가이드의 공유는 PDF나 출력물로 진행될 가능성이 크기 때문에 가능하면 아트보드는 A4 사이즈의 비율(1:1.41)으로 작성하는 것이 편하다. 개인적으로 1280 * 905로 진행했을 경우 360*640의 화면과 설명 테이블을 넣기에 가장 적절하였다.
*Sketch에서 아트보드 하나는 파워포인트 장표 하나와 동일하기 때문에 차후 하드카피로 출력할 것도 염두에 두고 아트보드를 생성하면 된다.
03_UI 가이드 미리 구성하기
Sketch가 파워포인트와 다른 점 중 하나는 파워포인트처럼 중간에 장표를 추가하기 쉽지 않은 것이다.
가이드의 히스토리 관리가 필요하여 히스토리 장표가 매번 추가되는 경우나, 서비스 운영 중 장표가 중간에 추가 되는 경우에는 미리 어떻게 Sketch 문서를 배열할지 계획을 세워둘 필요가 있다. 아래 몇 가지를 미리 생각하고 문서를 만들기 시작하면 도움이 될 것이다.
1) Sketch의 아트보드를 pdf로 export 하는 경우에는 문서를 순서대로 export 할지, 레이어 순서대로 export 할지 선택할 수 있다. 특별한 경우 가아니라면 pdf export는 문서의 순서대로 왼쪽에서 오른쪽으로 export 시키도록 설정해놓고 문서를 작성하자.
2) 히스토리 표기 장표처럼 차후 장표 추가가 예정되어 있는 화면에서는 줄 바꿈을 하여 아트보드를 생성하자
이렇게 해놓으면 추가되는 부분의 장표를 차후에 추가하기 쉽다. 나의 경우 프로젝트 특성에 따라 히스토리 부분과 일반적인 화면 정의 부분에서 줄 바꿈을 하였고,이후 백업 방식과 백업 시나리오와 복원 시나리오를 분리하여 총 4개의 줄 바꿈을 하여 문서를 작성하였다.
3) 아트 보드명과 페이 지명을 정의하자, 파워포인트에서는 개요 기능을 사용하여 장표 목록을 볼 수 있지만 Sketch의 경우 개요 기능을 제공하고 있지 않기 때문에 아트보드의 이름을 정의해놓아야 한다. Sketch에서 검색 기능을 이용할 경우 레이어나 아트보드의 이름을 기준으로 검색을 하기 때문에, 아트보드명과 레이어명을 잘 만들어놓으면 차후 검색하기에 굉장히 편리하다.
*레이어 이름명으르 바꾸는 단축키는 cmd+R키를 누르면 되고 수정후 Tap키를 누르면 다음 레이어의 이름을 변경할 수 있다.
4) 개별 화면을 정의하는 경우 각각의 화면은 symbol로 만들어 정의해야 한다. 대부분의 경우 아트보드 안에 화면 정의가 들어가기 때문에 화면 symbol명은 페이지의 이름과 비슷하게 정의해놓아야 차후 플로우 작업 시 syboml을 관리하고 꺼내쓰기 쉽다.
04_자주 쓰는 componet symbol화 시키기
자주 쓰는 componet의 경우는 symbol화 시켜놓고 작업을 시작하는 게 편리하다. 한번 만들어놓으면 다른 프로젝트를 작업하는 경우에도 적용하여 쓸 수 있기 때문에 잘 정리된 symbol set는 작업을 편리하게 해준다.
symbol기능은 상단 Create Symbol과 Symbol메뉴를 통해서 만들어 쓸 수 있는데 Symbol 생성에 관한 내용은 다른 포스팅을 인용하는 것으로 대체한다.
https://www.sketchapp.com/learn/documentation/symbols//
미리 준비해 놓아야 하는 symbol set는 다음과 같다.
* 참고로 아래 사이트에서 다양한 sketch app sourece들을 다운로드할 수 있다.
https://www.sketchappsources.com/
사용했던 symbol set의 일부- UID Layout : 페이지 테이블과 화면 타이틀과 같이 페이지별로 동일하게 추가되는 component들은 symbol화 시켜놓아야 한다. 파워포인트의 슬라이드 마스터와 비슷한 기능이라고 생각하면 된다.
- Pin number : UID의 각 Component를 설명하기 위해서 필요하다. 하나만 만들어놓고 레이어 Oveerride 설정에서 텍스트만 바꿔주면 반복해서 사용이 가능하다.
- Dialog : 자주 사용하는 팝업의 경우 버튼의 개수와 팝업 형식을 몇 가지로 정의하여 초기 세팅을 해놓으면 Dialog가 사용되는 화면마다 유용하게 사용할 수 있다. Dialog 개수가 많지 않으면 개별 Dialog자체를 symbol화 시켜도 되고 레이아웃만 symbol화 시켜서 그때그때 안에 텍스트만 교체해도 된다.
- UI gesture : UI gesture Componet set를 symbol화 시켜놓으면 차후 flow작업 시 필요한 gesture만 꺼내쓸 수 있다.
*Google에 잘 만들어진 set들이 널려있으니 마음에 드는 걸 찾아서 사용하면 된다.
여기까지 되었다면 Sketch로 작업하기 위한 기본 세팅은 끝났다고 볼 수 있다. 다음에는 본격적으로 UID작업을 하는 과정을 알아보도록 하겠다.
