brunch

매거진 일에 관한 생각 모음

라이킷 70 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Bridgemaker Apr 10. 2017

Sketch를 이용한 UI 가이드 만들기(2)

UI가이드 파워포인트에서 벗어나기

첫 번째 포스팅에서 Sketch에 대한 기본 세팅이 끝났다면, 이제 본격적으로 어떻게 UI 가이드를 그리는지 알아보자 UI 가이드의 경우 사람이나 회사에 따라서 작성하는 법이 조금씩 다르니까 이 부분은 각자 편한대로 구성하면 될 것 같다.

01_페이지 레이아웃

기본적으로 문서에는 타이틀 위치, 테이블 위치, UI 화면 위치 등의 반복되는 요소와,

텍스트 가이드처럼 장표마다 달라지는 요소가 있는데 앞에서 이야기한 것처럼 전체적인 페이지 레이아웃과 관련되는 요소들은 Symbol화 시켜서 파워포인트의 슬라이드 마스터처럼 쓸 수 있다. 나 같은 경우는 아래와 같은 형식으로 문서를 구성하였다.

*Symbol의 Overriide기능을 이용하면 장표 별로 다른 텍스트를 수정할 수 있다.

같은 symbol을 가지고 안에 텍스트내용만 바꿔보았다.

02_Component 작명 규칙 만들기

혹시 회사에 따라서 GUI디자이너와 UI 디자이너의 구분이 모호하거나 UI 디자이너가 GUI 디자인까지 완성하는 경우에는 디자인된 각각의 레이어 이름대로 export 되기 때문에 export 되는 리소스명을 기준으로 레이어의 이름을 만들어야 한다.

하지만, 내가 일하는 회사처럼 UI 디자이너와 GUI디자이너가 분리되어있다면 레이어 이름은(혼자 일한 다면) 최대한 알기 쉽고 일관성 있게 만들기만 하면 된다. 예를 들어 같은 화면에 있는 장표명, 타이틀명, 화면 symbol명을 동일하게 하고 같은 화면에 대한 추가 페이지는 01,02,03 식으로 번호를 붙인다던가 하는 식이다.

*만약 Sketch로 만든 UI 가이드를 GUI디자이너에게 바로 넘겨서 디자인 작업을 할 생각을 가지고 있다면 개인적으로는 별로 추천하고 싶지는 않다. 레이어 이름을 정하는 스타일이 작업자에 따라서 너무 다르기 때문에 정신건강상 UI 가이드를 참고하여 GUI디자이너가 새로 작업을 하는 게 속편해 보인다.

*symbol명을 만들 때 한 가지 팁이 있는데 이름 사이에 "/"표시를 넣으면 하나의 폴더처럼 관리할 수 있다. 예를 들어 "Rectangel / 01", " Rectangel / 02"로 symbol의 이름을 정하면 Rectangel이라는 폴더 안에 01, 02라는 symbol이 들어가 있는 것처럼 관리된다. symbol이 많아지는 경우 편하다.

"/"를 사용해서 symbol명을 정하면 그룹핑하여 관리할 수 있다.

03_UI 가이드 작성하기

1) 나 같은 경우 장표에 들어가는 화면 UI의 경우 생성 후 symbol화 시켜서 나중에 flow 작성 시 사용할 것을 염두해서 그렸다. 화면을 먼저 구성하여 symbol화 시킨 후에 pinnumber를 붙이는 것이 편한다.

(화면)

2) 텍스트 가이드의 경우 텍스트 numbering기능이나 bullet기능을 이용할 수 있다. 다만 긴 텍스트의 경우 bullet기능을 적용하면 끝 문장에만 적용하고 싶어도 전체 텍스트에 bullet기능이 적용되기 때문에 다시 수정해야 해서 번거롭다.. 텍스트 가이드를 일단 다 작성한 이후 마지막에 bullet을 적용해서 정리하는 게 그나마 두 번 일을 하지 않는 방법이다.

3) 팝업의 종류가 적으면 팝업 자체를 symbol화 해도 되고 팝업이 많다면 레이아웃만 symbol화 하고 텍스트 버튼은 override설정에서 수정해서 쓰는 것이 효율적이다. * Dialoag에서 "예" "아니요"처럼 버튼이 두 개인 경우 symbol에서 버튼명은 "button 01, button 02"처럼다르게 해줘야 오류가 생기지 않는다. "button, button"과 같이 동일하게 사용하면 복사 붙여 넣기 시 버튼 영역이 밀려 보인다.

이렇게 버튼명을 default로 정의해놓으면 symbol화해서 사용할때 문제가 생긴다.

4) 어디까지 적어야 할까? 앞에서도 서술했지만 파워포인트의 가장 큰 단점 중에 하나는 정적인 이미지로 인터렉션을 설명하느라 쓸데없는 설명이 너무 많이 들어간다는 것이다. 나중에 다시 설명하겠지만 Sketch의 장점을 살려서 Sketch와 연계된 다양한 인터렉션 툴로 인터렉션 가이드 파일을 따로 만드는 것도 방법일 것 같다.