소개

UX 디자인을 대표하는 툴에 대해 고민해보면, 자연스럽게 스케치가 떠오릅니다. 기존에는 어도비 프로그램에 의존해 디자인을 도출하고, 개발을 위한 가이드 문서와 리소스를 전달했죠. 스케치는 이 모든 과정을 UX 디자인에 최적화한 툴입니다.

2010년, 한 소기업이 기존 인터페이스를 재정의하여 스케치 1.0을 출시했습니다. 그리고 현재에 이르러, 스케치는 구글과 페이스북, 애플이 선택한 디자인 툴이 되었죠. 삼성이나 네이버 같은 국내 대기업에서도 가장 선호하는 UX 디자인 툴이 바로 스케치입니다.

2019년 기준, 스케치를 사용중인 기업

스케치는 직관적으로 다룰 수 있는, 매우 쉬운 툴입니다. 어도비 일러스트레이터나 포토샵과 유사한 점도 많죠.
하루 정도 스터디를 거치면 누구나 UX 디자인을 도출할 수 있습니다.
그래서 스터디 도중, 이런 이야기가 나왔을 정도입니다.

“이렇게 쉽게 디자인이 가능하다면 현업 디자이너가 아니라도,
충분한 디자인 퀄리티를 뽑아낼 수 있겠다. 우리 일자리가 위험해.”

반대로 생각하면, UX 디자인에 최적화된 툴을 사용해서 시간 대비 높은 작업 효율을 보일 수도 있겠죠.
디자인 퀄리티에 더 많이 집중할 수 있다는 뜻입니다.

그래서 여기에서는, 저희가 스케치를 사용하면서 느낀 장단점과, UX 디자인 관련 디자인 팁을 소개하려 합니다.

 

 

스케치 툴의 장점

 

1. 앱 모델에 다른 세팅이 빠르다

 

스케치는 웹/앱 작업 모두에 대해 탁월한 최적화를 보여줍니다.

처음 작업을 시작하면 원하는 모바일 기기를 선택할 수 있는데, 이 과정을 매우 빠르게 완료할 수 있습니다. 기존에는 모델 해상도를 확인하고 그 수치를 포토샵에서 설정했다면, 스케치는 이미 모델별 해상도가 정해져 있죠. 포토샵에서 용지(A3, A4 등)를 설정할 때와 비슷하지만 훨씬 쉽게 진행할 수 있습니다.

그리고 스케치에서 자체 제공하는 템플릿을 사용하면, 제너럴한 요소를 바로 모든 화면에 적용할 수 있습니다. 인디케이터의 경우 거의 모든 화면에 필요하죠? 템플릿에서 복사하면 바로 화면에 적용 가능합니다.

스케치는 각 화면을 따로 관리하지 않고, 모든 화면을 한 프로젝트로 관리합니다. 수정사항이 생기면 심벌이나 스타일을 수정해서 전체 화면에 반영할 수 있죠. 자세한 내용은 Tip 부분에서 살펴보겠습니다.

애플 모델 선택 | 스케치에서 제공하는 iOS 템플릿

2. 리소스 관리가 편리하다

 

이미지를 리소스로 등록하면, 화면에서 수정할 때 바로 리소스가 수정됩니다.

앱 작업을 진행할 때, 해상도별로 다른 리소스를 관리하기 번거로울 때가 많습니다. 하지만 스케치에서는 해당 해상도 화면이 아니더라도, 다른 해상도에 리소스를 바로 익스포트 할 수 있죠. 포토샵에서는 리소스를 하나하나 자르고 해상도별로 모두 수정했는데, 스케치에서는 그런 수고가 필요 없습니다.

편리한 리소스 관리는, 스케치의 큰 장점 중 하나입니다.

스케치 해상도별 파일 추출

3. 가볍다

 

스케치는 프로그램 자체가 매우 가볍습니다. 당장 포토샵 CC 권장사양을 보면, 3.1GB 이상 하드디스크 여유 공간을 요구합니다. 설치 후 사용하는 과정에서 추가 여유공간이 필요할 수도 있죠. 반대로, 스케치 설치파일은 38MB, 설치를 완료하면 72MB 정도에 불과합니다.

스케치는 포토샵이 가진 다양한 사진 편집 기능이 없습니다. 대신 벡터 기반 프로그램이므로, 가볍게 작업이 가능합니다. 작업물 자체도 포토샵에 비해 훨씬 용량이 적죠. 작업물을 전달하기 위해 분할압축하는 시간까지 절약할 수 있습니다.

 

 

4. 개발자와 협업이 쉽다

 

스케치를 사용하면, 개발자 협업이 훨씬 능률적으로 이뤄낼 수 있습니다.

스케치는 벡터 기반 툴이기 때문에, 작업물을 CSS / SVG 코드로 추출할 수 있습니다. 게다가 가이드 작업을 돕는 Zeplin 플러그인 설치가 가능하죠. 디자인 작업 후에도 많은 시간이 소모되는 가이드 작업을 별도로 진행할 필요가 없습니다.

또한, Zeplin 외에도 다양한 확장 플러그인으로 사용성을 높일 수 있습니다.

Zeplin | Craft | Swatches

5. 모바일 디바이스에서 바로 확인할 수 있다

 

Mirror 앱 또는 클라우드를 이용하면, 작업물을 모바일 디바이스에서 바로 확인할 수 있습니다. 모바일 화면 시안을 작업할 때 실제 느낌을 보기 위해 모바일 디바이스로 옮겨 확인하는 경우가 많죠. 화면을 따로 저장해서 모바일로 전송하고, 그 후에 확인해야 하는 번거로움이 있었습니다. 하지만 Sketch는Mirror앱이나 클라우드를 이용하면 바로 확인이 가능하고, 수정한 내용이 즉시 반영됩니다.

[화면 제작 – 모바일 기기 복사 – 수정 – 모바일 기기 복사 – 수정…] 으로 허비하는 시간을 획기적으로 줄일 수 있습니다.

Sketch Mirror 앱을 App Store에서 다운받아 스케치에 연결하면 화면을 실시간으로 확인할 수 있습니다.

스케치 툴의 단점

이렇게 많은 장점을 가진 Sketch지만, 단점 또한 존재합니다.

1. 맥에서만 사용이 가능하다

윈도우 기반 사용자들에게는 매우 아쉬운 일입니다. 이 경우 맥과 윈도우 양쪽에서 사용 가능한 Zeplin 등을 거치는 방법이 있지만, 협업 과정에서 프로그램을 한 번 더 거쳐야 하는 번거로움이 있죠.

2. 디테일한 이미지 작업이 어렵다

벡터 기반 툴이라서 프로그램이 가볍고 리사이징이 편리해서 다양한 디바이스에 적용하기 쉽죠.
이는 그대로 단점이 되기도 합니다. 포토샵에서 사진을 다룰 때처럼 편집 요소가 많은 경우나, 일러스트 작업처럼 정교하고 세부적인 작업을 진행하기 어렵습니다. 포토샵에서처럼 디테일하게 픽셀을 정리하기도 난감합니다.

 

스케치 사용 TIP

그러면, 스케치 사용법을 간단히 소개하겠습니다.

1. 기본 영역

■ 상단

툴바를 통해 기능 선택이 가능하고,
Customize Toolbar로 필요한 도구만 꺼내서 사용할 수 있습니다.
포토샵에서 좌측 툴바와 유사합니다.

■ 왼쪽 패널

레이어 관리 영역으로, 스케치는 폴더에서 바로 Export 하므로
레이어 정리가 중요합니다.

■ 오른쪽 패널

툴바에서 선택한 기능을 디테일하게 설정합니다.
사이즈와 효과 등을 작업하는 공간입니다.

■ 가운데

작업 공간인 Canvas로, 무한한 크기로 생성할 수 있고,
설정은 벡터와 픽셀로 선택 가능합니다.

툴바 영역에 오른쪽 마우스를 클릭하면 Customize Toolbar가 나타납니다.
평소 자주 사용하는 기능을 추가하여 편리하게 사용할 수 있습니다.

2. Sketch 프로그램 단축키

Sketch Shortcuts에 들어가면 스케치에서 사용하는 다양한 단축키를 확인할 수 있습니다.

3. 반복되는 UX에 사용하는 스타일

스타일은, 반복되는 이펙트를 등록하여 간편하게 사용할 수 있는 기능입니다.

오른쪽 패널 ‘No Shared Style’에서 ‘Create new Shared Style’을 클릭하여 스타일을 등록합니다. 다른 이미지에 같은 효과를 넣고싶다면, 해당 이미지를 스타일로 선택하면 됩니다. 포토샵에서 ‘add a layer style’과 유사하지만, 복사가 아니라 스타일을 등록하는 개념이라서 작업 인지가 쉽죠. 포토샵에서처럼 매번 이펙트를 확인한 후 복사하는 방법이 아니라서, 미리 등록해 둔 스타일을 필요할 때 쉽게 꺼내서 사용이 가능합니다.

4. 반복되는 UX에 사용하는 심벌

UX 디자인을 할 때 자주 사용하며, 스케치에서 가장 대표적인 기능이라 할 수 있는, 심벌 기능입니다.

디자인을 하다 보면 수정사항이 하나만 발생해도 다른 모든 화면에서 디자인을 하나하나 수정해야 할 때가 많죠. 스케치에서는 그럴 필요가 없습니다. 예를 들어, 리스트를 하나 만들고 툴바에서 Create Symbol 아이콘을 클릭해서 심벌로 등록하면, 바로 복사해서 사용이 가능합니다.

심벌로 리스트 등록

심벌을 수정해야 할 경우, 수정할 심벌을 더블클릭 > 수정 보드로 이동하여 디자인 변경 후 Return to Instance를 누르면
작업 영역으로 돌아와서 변경된 디자인을 확인할 수 있습니다.

여기까지는 포토샵에서 스마트 오브젝트 기능과 유사합니다. 하지만 콘텐츠 내용을 수정할 수 있다는 점이 다릅니다. 포토샵에서 스마트 오브젝트는 하나를 수정하면, 복사된 다른 오브젝트도 수정되므로 다른 내용을 넣기는 불가능합니다. 예를 들어, 심벌로 등록된 리스트에서 텍스트 내용을 변경해야 한다면, 우측 패널 바에서 디자인은 동일하지만 텍스트 내용은 다르게 수정이 가능합니다.

5. 레이어 관리 – 폴더 생성

리소스를 관리할 때 알아두면 편리한 방법입니다. 왼쪽 패널에서 이름을 [폴더명/레이어명]으로 해 두면,
추출할 때 자동으로 폴더가 생성되고, 파일명은 레이어명으로 정해집니다.

예를 들어 아래와 같이

[Blog/archive] 입력 > 오른쪽 툴바 하단 Make Exportable 클릭 > Export img/profile을 클릭하면, Blog 라는 폴더에 archive.png 이미지가 생성됩니다.

 

6. 텍스트 패딩 값 자동 계산

이전에는 텍스트를 드래그한 영역에 대해 패딩 값을 가이드에 표기한 뒤 개발자에게 공유했습니다. 그런데 이 때는 디자이너가 지정한 패딩 값과 개발자가 적용하는 패딩 값에 오차가 생겨나곤 했죠. 하지만 스케치에서는 텍스트 패딩 값이 프로그램 내에서 지정돼있으므로, 디자이너와 개발자 간 협업에서 생기는 오차를 줄일 수 있습니다.

스케치 Plugin 활용

외부 모듈을 사용하면, 스케치의 기능을 보다 효율적으로 사용할 수 있습니다.
매우 다양한 플러그인이 있지만, 여기서는 UX와 관련된 플러그인을 중심으로 소개해 보겠습니다.

스케치 플러그인 검색

https://sketchapp.com/extensions/plugins/
– 스케치와 관련된 다양한 플러그인을 검색하고 다운로드 할 수 있는 사이트입니다.

가이드 플러그인

https://github.com/luvmex/Sketch-Guides
– 자동으로 그리드를 만들어주는 플러그인입니다.

다이나믹 버튼 플러그인

https://github.com/fuggfuggfugg/sketch-dynamic-button-3.5
– 텍스트 수정 시 고정된 패딩 값으로 버튼이 자동 조절됩니다.

스케치 Map Generator 플러그인

https://github.com/eddiesigner/sketch-map-generator
– 특정 위치에 대해 지도를 만들어 레이어를 채워 주는 플러그인입니다.

스케치 fontily 플러그인

https://github.com/partyka1/Fontily
– 스케치에 쓰인 폰트를 나열하고 바꿀 수 있습니다.

크래프트

https://www.invisionapp.com/craft
– 프로토타이핑 기능으로 활용할 수 있고, 실제 데이터를 JSON으로 가져오거나 내보낼 수 있습니다.
– 디자인 라이브러리를 만들어 공유할 수 있으므로, 임의의 이미지나 텍스트를 사용할 수 있고, 반복적인 작업에 유용합니다.

제플린

https://www.zeplin.io/
– 디자인 가이드를 만들어줍니다.
– 웹 상에서 읽을 수 있으며 CSS를 자동으로 생성해주므로 다른 팀과 협업이 용이합니다.

스와치 플러그인

https://github.com/Ashung/Sketch_Swatches
– 컬러 팔레트를 제공하는 플러그인입니다.

리네임 잇(Rename It) 플러그인

https://rodi01.github.io/RenameIt/
– 레이어의 이름을 쉽게 변환해주는 플러그인입니다.

Find and replace 플러그인

https://github.com/thierryc/Sketch-Find-And-Replace
– 선택한 레이어가 포함된 전체 레이어의 텍스트 수정이 가능합니다.

객체 측정기 메저(Measure)

https://github.com/utom/sketch-measure
– 작업한 아트 보드를 html 형식으로 내보내서 콘텐츠의 위치나 크기 색깔 등을 표시해줍니다.

Content Generator

https://github.com/timuric/Content-generator-sketch-plugin
– 자동으로 콘텐츠를 채워주는 플러그인입니다.

Sort Me

https://github.com/romashamin/sort-me-sketch
– 이름 정렬을 해주는 플러그인입니다.

스케치 스타일 인벤토리

https://github.com/getflourish/Sketch-Style-Inventory
-공통 가이드를 만들어주는 플러그인입니다.

스케치 툴박스

http://sketchtoolbox.com/
– 깔아놓은 플러그인을 인스톨/언인스톨 해주는 플러그인입니다.

 

 

마치며

 

지금까지 스케치가 가진 장단점과 유용한 Tip에 대해 소개했습니다.

결론부터 말하자면, UX 디자인에는 매우 편리하고 적합하지만, 디테일이 필요한 이미지 작업에는 어울리지 않습니다.
하지만 이는 불편하다거나 부족하다는 말이 아니라, 용도가 다르다는 뜻입니다.

이는 최근 트렌드인 플랫디자인 흐름과도 맞닿아있다고 할 수 있죠.
게다가 디테일한 이미지 작업은 어도비 프로그램에서 임포트 하거나 쉐입 카피 등으로 협업하여 커버할 수 있습니다.

 

다음 포스팅에서는 간단한 UI/UX를 만들어보면서, 어떤 식으로 화면을 제작할 수 있는지 알아보겠습니다.

Leave a Reply

Mets HIT Inc.

Be creative. Emotional. Innovative with our eXperience