스케치앱 집중 스터디 4일째

스케치앱 Sketch 3.7.1 스크린샷

 

스터디를 위해 스케치앱 3.7 트라이얼 버전을 설치해두었다. 그 후 며칠 만에 3.7.1 버전 업데이트가 있었고, 가격이 129달러로 올랐다. 무료 사용기간이 끝나면 결제하려고 했는데 그만 가격이 올라버렸다. :-( 며칠 전만 해도 99달러.

이틀 동안 스케치 3 사용자 매뉴얼 한국어 번역본과 스케치앱 공식 홈페이지의 비디오 튜토리얼을 보며 감을 잡았다. 그리고 샘플 화면을 만들어보았다. 실제 써봐야 그 맛을 제대로 느끼고 숙달 시간도 앞당길 수가 있다. 

스케치앱의 특징 중 가장 마음에 드는 점은 고정적인 UI 요소와 반복적으로 사용되는 요소를 심볼로 만들어 재사용하는 것이다. 심볼은 하나를 수정하면 같은 심볼을 사용하고 있는 모든 부분에 수정 내용이 동시에 반영된다. 이점은 포토샵의 스마트 오브젝트와 유사하다. 하지만 스케치의 심볼은 포토샵의 스마트 오브젝트 보다 훨씬 강력하다. 

 

스케치앱 심볼 모음 화면

 

1. 심볼

스케치앱은 심볼 내의 텍스트와 이미지의 개별 설정이 가능하다. 

아래 이미지에서 설화수, 라네즈, 헤라는 row 라고 이름 붙인 심볼 하나를 복사해서 배치했다. 각 심볼을 선택하면 화면 우측(인스펙터)에서 데이터를 변경할 수 있다. 각 항목에 텍스트를 복사해다가 붙여 넣으면 편하다. 사진을 끌어다 놓으면 이미지도 샥 바뀐다. 

header text, copy text, summary text의 색상, 크기, 간격
배경 박스의 dropshadow 효과
이미지의 테두리 효과 등은 그대로 유지된다. 

단, 이미지는 처음 심볼을 만들 때 적용한 이미지의 스케일이 교체한 이미지에도 적용되는 것 같다. 동일한 비율의 이미지로 변경하지 않으면 이미지가 일그러져 보일 수 있다. 

심볼 내의 개별 데이터 변경

 

심볼을 다루면서 불편했던 점

포토샵의 스마트 오브젝트처럼 리사이징을 마음대로 할 수가 없었다. 심볼 편집화면으로 이동해서 심볼 자체의 크기를 변경해야 했다. 그랬을 때 문제는 크기 변경을 원하지 않는 다른 부분에 적용한 심볼까지 같이 바뀐다는 점이다. 그래서 같은 모양의 심볼을 크기 별로 2개 만들어야 했다. 이건 좀더 사용하면서 노하우를 찾아야 할 것 같다. 심볼 안에 심볼을 또 담을 수 있는 점을 이용하면 가능할 것 같다. 

복사한 심볼의 크기 변경할 때 Resize to fit 기능이 유용했다. 

 

 

2. 심볼, 그룹, 레이어 검색 'Sketch Runner' 플러그인

작업을 진행할수록 화면 좌측(레이어리스트)에 심볼, 그룹, 레이어, 아트보드가 계속 싸여간다. 레이어리스트의 스크롤을 위아래로 굴리고, 그룹을 접었다 펼치기를 반복하는 일이 점점 불편해졌다. 단축키로 확대축소를 하며, 화면을 요리조리 움직여 요소를 선택할 수 있지만 캔버스도 이미지들이 많아지면서 점점 넓어졌고 전체 내용을 화면에 맞춰 축소시키면 일부 요소는 직접 선택하기 어려울 정도로 작아졌다. 이 상황이 되니 포토샵의 레이어 패널에서 제공하는 필터 기능이나 열린 폴더를 한번에 닫는 기능이 굉장히 편리한 기능이구나 싶었다. 

그런데 오늘 아침 Sketch App Korea 페이스북 그룹에서 마법처럼 해결방법이 떡하니 눈앞에 나타났다. 어떤 분이 Sketch Runner라는 스케치앱 플러그인 소개 동영상을 링크 했는데 내용을 살짝 훌터보니 뭔가 도움이 될 듯 싶었다. 

스케치앱에 Sketch Runner를 추가하고 실행했더니 심플한 팝업이 나왔다. 사용법을 찾아보지 않았지만 직관적으로 goto를 클릭했다. 찾고자 하는 심볼, 레이어, 그룹 등의 이름을 입력했더니 화면 가운데 그 요소를 짠 보여준다. 검색어를 입력할 때 2단어 이상인 경우 맨 앞 단어로 검색해야 한다. 예를 들어 INDEGATOR DOT 심볼을 찾고자 할 때 DOT를 입력하면 검색되지 않는다. 

다른 것도 몇 가지 사용해보았다. 예상보다 훨씬 좋은 플러그인 이었다. 

insert는 심볼을 찾아서 화면에 띄워준다. 마우스 포인터에 딸려 움직이는 심볼을 원하는 위치에 자리잡은 후 클릭하면 삽입된다. 

run은 스케치앱의 모든 도구들을 실행시켜준다. li를 입력하면 line 툴을, rec를 입력하면 rectagle을, ar을 입력했더니 artboard와 arrow를 찾아 보여준다. 선택하고 엔터하면 그 기능이 실행된다. 

스케치앱 플러그인 Sketch Runner

 

 

3. Fill, Border, Shadow 다중 스타일 중첩 

Fill과 Border, Shadow에 스타일을 여러 개 중첩하는 기능도 제공한다. 어도비 일러스트레이터의 어피어런스와 같은 기능이다. 나는 일러스트레이터 CS5에서 이 기능 처음 접했을 때 어떻게 해야 원하는 데로 만들 수 있는지 약간 헤맸다. 그런데 스케치앱의 스타일 중접은 직관적이다. 

+ 와 v 아이콘으로 기능의 적용과 취소, 추가를 직관적으로 알 수 있었다. 

Path에 2가지 스타일 Border 적용 (두께 2, 두께 36)

 

Shape에 3가지 스타일의 Fill 적용 (색, 패턴, 노이즈)

 

 

4. Background Blur 

아이폰용 디자인을 하다보면 하단 탭바가 살짝 투명하면서 그 아래의 내용이 블러 처리 되어져 보이는 효과를 적용할 때가 있다. 스케치앱은 그 효과를 쉽게 만들 수 있다.  오브젝트를 선택하고 인스펙터 하단의 Gaussian Blur를 클릭해서 Background Blur를 선택하면 된다. 

사용자 매뉴얼에서는 프로그램 성능과 관련해서 이 기능의 과도한 사용을 주의하라는 당부를 하고 있다. 그래서인지 Border나 Fill 그리고 Shadow 까지도 스타일을 여러 개 중첩할 수 있는데 블러 효과는 4가지 중 하나만 선택해 적용할 수 있다. 

Background Blur 효과를 제대로 적용하려면 Fill에 투명값을 적용해야 한다. 

Background Blur 적용

 

 

5. 기타

Text Style을 저장했다가 나중에 추가한 것에 쉽게 적용할 수 있다. 각 스타일의 구분을 특정한 네이밍을 붙여서 구분하는 것이 아니라 스타일이 적용된 텍스트 자체로서 목록에서 보여진다. 스타일 선택적용 작업을 기억력에 의존할 필요가 없어서 굉장히 편하다. 

Text 편집할 때 Width 속성으로 Auto/Fixed를 쉽게 전환할 수가 있다. 깨알같지만 신선한 기능이다. 도움이 될 듯 하다.

비트맵 이미지를 리사이징할 때 Shift를 누르지 않아도 기본적으로 가로세로 비율 유지되는 점이 특이했다. 9-Slice Image로 변환하면 비율 제약 없이 사이즈 변경 가능하다. 그런데 그럴 일이 많지는 않을 듯 하다. UI 디자인 전문 툴이라 그런지 이런 부분에서도 차이점이 느껴진다. 

며칠간 사용한 느낌은 UI 디자인을 위해 정말 효율적으로 만들어졌다는 감탄만이 남는다. 그리고 활발하게 제공되고 있는 플러그인도 놀랍다. 서핑 중 발견한 어느 분의 스케치앱 스크린샷 인데 저 플러그인들 다 어디에 쓰는 걸까?

[출처] Making GIFs in Sketch + Invision (by Bridget Hapner)