스케치를 처음 써본 순간

스케치로 하나의 프로젝트를 끝내고 든 생각,

좋은 툴을 두고 정말 미련했구나…

스케치 쓰기 전 내 모습

스케치(Sketch)라는 툴이 존재하는 사실은 2015년에 알았다.(찾아보니 2008년에 설립한 회사…) 그 당시 실리콘밸리 스타트업에서 상용화되면서 뜨고 있는 디자인 툴이라고 들었다. 지금은 우리나라 대기업에서도 쓸 정도로 대중화가 되어있지만 그 당시에는 한글로 된 문서도 별로 없었다. (지금의 프레이머 느낌…) 배워보고 싶었는데 그때는 창업에 더 관심이 있었고 난 미련하게 포토샵, 일러스트로 작업하고 있었다.
2016년 5월쯤, 다니던 회사에서 일하다가 알게 된 교수님 아내분이 S사 디자인 팀장님이었다. 조만간 대기업에서도 다 스케치를 쓸 예정이고, 나한테도 쓰라고 추천해주셨고 바로 설치해서 사용해봤다. 스케치를 열었을 때 일러스트 하얀 버전 이라고 느낀 게 다였다. 그러다 제대로 해보자는 생각이 들어 막무가내로 작업했다. 미디엄, 브런치, 구글, 유튜브 등을 통해 얻은 자료를 바탕으로 한 달 정도 삽질을 했더니 감이 왔다.

실제로 일러스트처럼 사용하기는 하루면 충분하지만 스타일 관리와 심벌, 각종 플러그인을 효율적으로 사용하는 법 등 필요에 따라 기술을 그때그때 익히기엔 한달이면 충분하다.(스케치는 버전 업데이트도 빨라 자주 공부해야 된다.)

스케치와 포토샵의 차이점


가장 큰 차이점은 포토샵(Photoshop)은 사진 편집에 중점을 두고 있고 비트맵기반이라 무겁고, 스케치(Sketch)는 UI작업만을 위해 만들어진 툴이라 가볍다. 기능적인 차이도 존재하지만 가볍다는 것은 작업 효율과 직관된다.

레이어를 중심으로 한 작업물이라 전체 화면 흐름을 보기에 어려움이 있고 리소스 관리가 어렵다. (물론 Photoshop에서도 아트보드 기능이 있지만 무겁다.)

포토샵(Photoshop)

  • 무거운 용량으로 아트보드 사용 제약
  • 수동저장(수시로 저장해야됨)
  • 아트보드 > 레이어
  • 반응형 지원 안함
  • 스마트 오브젝트 (UI 변경시 콘텐츠 데이터 다시 작성해야됨)

스케치(Sketch)

  • 가벼운 용량으로 무한 아트보드 가능 (컴퓨터 사양에 한해…)
  • 자동저장(버전 관리에 신경써야됨)
  • 페이지 > 아트보드 > 레이어 – 개인적으로 페이지는 디바이스 환경(Android, iOS or Desktop, Mobile)에 따라 나눔
  • 반응형 지원 – Resizing 기능을 통해 반응형으로 효율적으로 제작 가능
  • 심벌 (UI 변경시 콘텐츠 데이터 유지)

그 외의 장점은 플러그인이다. 대표적인 플러그인은 크래프트, 인비전인데 이것은 포토샵에서도 사용가능해져서 더 이상 장점은 아닌것 같다.

스케치 설치 방법


스케치를 사용하려면 아직은 맥이 필요하며, 유료 서비스로 $99(약 11만원)을 결제해 사용할 수 있다. 무료 시험판으로도 다운 받을 수 있다.

https://www.sketchapp.com

인터페이스

스케치 실행 시 아래와 같은 창이 먼저 보인다. 본인이 작업할 디바이스 환경에 맞는 템플릿을 선택하면 스케치에서 제공하는 소스가 담긴 창이 열린다. 설명을 위해 New Document 를 눌러서 아무것도 없는 창을 선택.

그럼 이렇게 생긴 인터페이스가 보인다. 어도비 일러스트레이터나 포토샵과는 다르게 레이어가 좌측에 있다. 단축키도 포토샵, 일러스트와는 조금 다르고 선택 방식이 달라 처음 사용시 답답함을 느낄 수 있지만… 적응되면 정말 편하다.

  1. 툴바(Tool Bar)
  2. 레이어(Layer)
  3. 그리는 영역(Canvas)
  4. 속성 값 조절(Inspector)

(위 이미지는 플러그인을 설치해서 처음 인터페이스가 일부 다를 수 있음)

일단 아트보드를 생성.

+ 버튼을 누르고 Artboard를 누르거나 단축키 A를 누르고 캔버스 영역에 원하는 크기만큼 만들면 된다.

이제부터는 일러(Adobe Illustrator)와 흡사하니 네모와 동그라미를 그리고 텍스트를 삽입해보자.

레이아웃 안내선(Layout)

포토샵에서 그리드 시스템을 위한 가이드 선을 만들려면 엄청난 인내가 필요하다. 디자인을 진행하다가 전체폭(Max-width)과 단(Column)의 개수와 거터(Gutter) 값을 수정해야된다면 그냥 안하는게 정신건강에 좋을지도 모른다.그러나 스케치에서는 인디자인에서 제공하는 것처럼 레이아웃 안내선을 쉽게 만들고 수정할 수 있다. Show Layout을 누르면 아트보드에 안내선이 보인다. 안내선의 속성을 변경하려면 View > Layout Settings를 누르면 된다.

심벌(Symbol)

이제 본격적으로 스케치를 사용해야 하는 이유 첫번째, 심벌이다.포토샵의 스마트 오브젝트보다 강력한 기능이다. 특정 요소를 심벌로 지정하여 페이지(pages)와 아트보드(artboards), 레이어(Layer)에 걸쳐서 쉽게 재사용하도록 해준다. 우선, 본인이 원하는 부분을 선택해 상단 툴바에 있는 Create Symbol을 눌러 심벌로 설정해준다.

그 이후 페이지(Pages)에 심벌이 생성된다. 로고를 심벌로 설정했는데 테블릿이나 모바일 규격에 Symbol에서 본인이 등록한 로고를 삽입할 수 있다.

만약 클라이언트가 로고의 크기나 색상을 수정해달라고 할 때 포토샵이었다면… 각 페이지별로 PSD 파일을 켜고, 수정을 해야하는데 스케치에서는 Symbols에 내가 지정해놓은 엘리먼트를 수정하면 심벌로 지정한 전체가 동시에 수정된다. Magic~

스타일(Style)

이 또한 강력한 기능, 심벌과 비슷하다.반응형 웹을 디자인한다고 가정하에 디바이스 기기별로 맞는 헤더를 디자인했다. 헤더의 배경 색상을 검정에 가까운 진한 곤색으로 설정했다.

1) 현재 레이어 스타일을 저장하기 위해 우측에 Organize Shared Style을 눌러 header_bg으로 저장

2) 그 이후 테블릿, 모바일 디자인에서도 header_bg 으로 선택

3) header_bg 속성이 정해진 레이어를 선택하고 배경색을 수정하면 새로고침 버튼이 생기게 된다.

4) 새로고침을 누르면 아래와 같이 header_bg으로 된 레이어 전체가 수정된 값으로 변경된다.

폰트 속성도 마찬가지로 적용할 수 있다. 이 부분을 잘 활용하면 디자인 작업 시간과 유지 보수 시간도 확연하게 단축할 수 있다.

심벌과 스타일에 대한 설명이 잘되어 있는 블로그가 있으니 더 자세히 알고싶으면 보는 것도 좋다.

https://medium.com/ux-power-tools/a-better-way-to-make-buttons-in-sketch-6c23470f27c

https://www.sketchapp.com/learn/documentation/symbols/

#Design#Gui#Sketch#Tool
신연석

디자인, 개발, 기획, 비즈니스에 관심이 많은 디자이너입니다.
값진 경험과 그 경험에서 깨달은 것을 기록한 공간입니다.

Send Email