이미 스케치는 UI 디자이너의 필수 소프트웨어로 자리매김하고 있습니다. 많은 기업들에서 스케치를 쓰고 있고 포토샵을 쓰던 디자이너들도 점점 스케치로 넘어가고 있는 추세이지요. 하지만 새로운 툴에 대한 두려움과 귀찮음으로 시작을 차일피일 미루다 최근에 참여한 프로젝트에서 처음으로 스캐치를 사용해 보게 되어 그 입문부터 협업 산출물까지 전 과정을 경험해 보았습니다.
그 경험담을 블로그를 통해 스케치 사용을 고민하시거나 처음 사용하실 여러분들과 나누고자 합니다.

 

1. 스케치에 입문하다.

대학생 때 까지 포함한다면 7년 정도를 어도비 제품들과 함께 해왔었는데, 몇 년 전부터 프로토타이핑툴이나 가이딩 프로그램 스케치, XD와 같은 최신툴들이 새롭게 출시되었고 이런 수많은 툴들 중에 어느 것을 공부해야할지 고민이 많았었습니다.
각 툴마다의 장점과 단점이 있었고, 월등히 많은 유저가 있는 툴이라고 꼬집어 말하기도 어려웠기 때문입니다.
그러다 이번에 참여한 프로젝트에서 스케치를 채택하셨고 저는 스케치를 공부하게 되었습니다.

스케치와 포토샵의 기능(펜 툴이나, 도형 만들기, 텍스트 같은)에 대해서는 사실 큰 차이를 느끼지 못했지만 다른 부분들에서 여러 가지 작지만 큰 차이점을 경험할 수 있었습니다.

– 첫 번째로, 포토샵과 스케치는 도큐먼트를 생성하는 것부터 달랐습니다.

 

 

기존 우리의 포토샵은 해상도별 대응을 위해 적게는 두 세트, 많게는 세 세트 이상의 PSD와 산출물이 필요했고, 그 때문에 작업 전 기준 해상도에 대한 정의 만으로도 꽤 많은 시간을 할애하고는 하였습니다.
하지만 스케치는 처음 아트 보드를 생성할 때 1배수로 생성하면 상위 배수를 자동으로 커버할 수 있게 됩니다.
스케치는 벡터 기반이므로 크기가 커져도 깨짐이 없기 때문입니다.

 

 

또, 한 페이지 안에서 여러 아트보드를 한 뷰에 볼 수 있습니다. 포토샵의 경우도 아트보드 기능을 이용해 여러 페이지를 한 뷰에 볼 수 있지만 파일이 너무 무거워져 작업이 어렵고 때문에 현실적으로 힘들다고 생각합니다.

-두 번째로, 스케치는 인풋 창에서 간단한 연산을 할 수 있습니다.

 

 

제가 스케치에서 가장 마음에 들었던 기능입니다!.(저는 심볼보다 이 기능이 더 획기적이라고 생각했어요!)
영역을 그릴 때 계산기를 실행할 필요 없이 스케치 안에서 대부분 해결이 가능하고 이는 작업 속도에 많은 영향을 미칩니다.

 

2. 스케치로 협업하다.

제가 속한 팀 전체가 페이지를 함께 양산해야 했기 때문에 개별파일의 심볼이 아닌 전체가 한 번에 공유할 수 있는 시스템이 필요했습니다. 그래서 저희 팀은 스케치 47버전에서 추가된 라이브러리(Library) 기능을 사용하기로 하였습니다.
라이브러리는 쉽게 설명하자면 공유해서 함께 사용하는 심볼(Symbol)이라고 할 수 있습니다.
심볼화된 공통요소를 모은 파일을 스케치 클라우드나 드롭박스 같은 특정 저장소에서 공유하고 이것을 다른 디자이너가 자신이 작업하고 있는 페이지로 불러와 사용하는 방식입니다.
라이브러리는 [Preferences > Libraries] 에서 등록 삭제할 수 있고, 등록된 라이브러리는 심볼을 불러오는 것과 같은 방법으로 사용할 수 있습니다.

 

 

불러온 심볼이 업데이트되면 상단에 알림이 뜨고, 알림을 클릭해 보면 기존의 심볼과 업데이트 된 심볼을 비교해주는 창이 나타납니다.

 

 

이 창 하단의 [Update Symbols]를 누르면 변경된 모든 심볼이 업데이트 됩니다.
심볼의 공유하는 서버나, 클라우드의 특성에 따라 바로 연동되어 알람이 뜨기도 하고, 스케치 파일을 종료-재실행 해야 알람이 뜨기도 하기 때문에 프로젝트의 상황에 맞는 저장소를 잘 선택하시는 것도 중요합니다.

 

3. 제플린으로 산출물을 정리하다.

기존 PPT를 이용해 개발 가이드를 만들 때에는 1280, 1920, 1440, @2x, @3x 등 여러 디바이스와 해상도별 PSD, PNG 파일 또 디바이스마다 수치와 단위가 다른 개발 가이드까지 정말 많은 시간과 공수를 들여 작업했었는데요. 이 모든 작업을 제플린만 있으면 쉽고 빠르게 할 수 있습니다.
제플린을 설치 후 스케치 상단의 플러그인(Plugins)탭을 눌러 보면 Zeplin을 확인할 수 있습니다.

 

 

제플린탭 속의 [Export Selected] 는 선택된 아트보드를 제플린으로 내보내는 기능입니다.

 

 

[Utilities > Exclude Sublayers] 는 불필요한 레이어를 측정되지 않도록 만들어주는 기능(그룹앞에-g-가 붙습니다)

 

 

[Utilities > Include Sublayers] 는 제외시킨 레이어가 다시 필요할 경우 복구시키는 기능입니다.(-g-가 사라집니다)
여기에 필요에 따라 추가적으로 나인 패치나 기타 설명이 필요한 컴포넌트들을 정리해서 제플린으로 넘기면 쉽게 가이드를 완성할 수 있습니다.

 

4. 작업의 팁을 말하다.

이번 작업을 진행해 보며 몇 가지 고려해야할 부분들이 있었습니다.

-첫 번째는, 아이콘 만들기입니다.

스케치로 작업을 하여도 결국 png로 파일을 뽑아내기 때문에 픽셀이 깨지는 부분이 없는지 확인하며 작업해야 합니다. [픽셀 프리뷰 : Ctrl + P]

 

 

-두 번째는, 행간입니다.

스케치의 행간은 두 가지 방법으로 조절할 수 있습니다.

① Line Height는 텍스트 박스의 높이를 높여 행간을 조절하는 방식이기 때문에 텍스트 박스가 원본보다 높아지게 됩니다.
② Paragraph는 조절한 값이 제플린에서 보이지 않습니다.

때문에 보통 ① Line Height로 조절을 하는 것이 일반적이고, ①의 방법은 두 줄 이상 일 때에는 문제가 없지만 한 줄일 경우에는 제플린에 표기되는 높이 값과 개발되는 높이 값이 다르기 때문이 프로젝트별로 논의가 필요합니다.

 

 

-세 번째는, 투명도 입니다.

스케치에서 텍스트의 투명도를 조절하는 방법은 두가지가 있습니다.

① Opacity로 투명도를 조절하면, 제플린에서 원본색상과 투명도가 분리되어 보여집니다.
② Color Picker의 ALPHA값을 이용해 투명도를 조절하면 제플린에서 색상값과 투명도가 함께 보여집니다.

때문에 개발자의 혼동을 줄이기 위해 ② Color Picker의 ALPHA값으로 조절하는것을 추전드립니다.

 

 

마치며, 아직은 스케치를 사용하지 않으셨다거나, 처음 사용하시는분, 혼자 공부해 보긴 했지만 협업은 해보지 못한, 한 달 전 저와 같은 처지의 분들이 많을 것이라고 생각 됩니다.
그래픽 아트웍 작업이 많으신 분이라면 포토샵이 더 좋겠지만 요즘의 플랫한 GUI 화면은 스케치나 XD가 더 빠르고 유리하기 때문에 사용 예정이신분들은 어서 도전 해보시는걸 추천드리고! 처음 협업 하시는 분들은 작은 볼륨의 프로젝트 부터 해보시는게 좋을것같습니다. (라이브러리와 심볼이 구축단계에서 꼬이는 경우가 꽤 되어서 볼륨이 너무 크면 힘들것 같아요!)

프로젝트 기간동안 공부하며 해외의 여러 큰 기업들이 디자인 가이드를 스케치로 만드는 경우가 많던데 그들의 실제 작업 이야기도 궁금합니다.
스케치와 XD 같은 UI용 디자인 소프트웨어는 UI디자인 방법 부터 협업까지 많은것을 바꿔놓았고, 앞으로 발전하며 더욱 새로워 지고 발전할 것이라 생각됩니다.

 

– 가치디자인그룹 장상은

 

 

연관 글
[SKETCH] 스케치 초보를 위한 열가지 팁
[SKETCH] 스케치 라이브러리 구축 프르세스
[ZEPLIN] 개발자와 효율적인 협업을 위한 GUI가이드 프로그램 제플린 

참고문헌
The Sketch Handbook 스케치 개정판 -크리스티안 크래머지음-
https://zeplin.io/
https://www.sketchapp.com/docs/
https://brunch.co.kr/@rachelykim/7
https://brunch.co.kr/@creative/87