pexels-photo-322338

스케치 뉴비를 위한 열 가지 팁

이미 UI 디자인 프로토타이핑 프로그램의 중심이 되어버린 스케치지만, 저는 최근에 시작하게 되었습니다. 워낙 바쁘기도 했거니와, 익숙한 포토샵/일러스트레이터를 버리고(?) 새로운 프로그램을 늘그막에 또 배워야 한다는 게 엄두가 나지 않아서였죠.^^ 스케치를 열흘 정도 사용해 보았고, 그간의 시행착오와 리서치를 통해 알게 된 몇 가지 팁 (주로 단축키)을 공유하고자 합니다. 일반적으로 여기저기서 얻을 수 있는 내용보다 – 잘 얘기하지 않는- 아주 기초적인 내용을 열 개 항목으로 정리했습니다.

조금 사용해 보니, 포토샵을 어느 정도 하는 사람이라면 스케치에 적응하는 것은 하루 남짓일 정도로 쉽고, 가능성이 많은 프로그램이라고 느꼈습니다. 모든 프로그램이 그렇듯 에러도 제법 있지만, 역사가 짧다 보니 그러려니 합니다. 점차 개선되겠지요.

 

 

1. 오브젝트 선택 (  + Click )

조금만 사용하시면 쉽게 아실 내용이지만, 처음 쓰시는 분들에겐 필요할 간단한 팁입니다. 포토샵에서 바로 오셨다면, ( = 오브젝트 중심의 프로그램을 써 본 경험이 없다면 ) 겹겹이 쌓여있는 그룹을 더블클릭으로 들어갔다가, 여백을 눌러 빠져나오는 것이 좀 귀찮을 수 있어요.

하지만, [ ⌘ + Click ] 을 하면, 깊이에 상관없이 그룹 안쪽의 오브젝트를 바로 선택할 수 있습니다.

 

01

마우스 커서를 어슬렁거리면 이렇게 파란색 테두리가 나타나서, 오브젝트를 선택할 수 있음을 알려 줍니다.

 

02

오브젝트를 클릭해서 선택하고,

 

03

더블클릭해서 안에 있는 오브젝트를 선택하는 게 가장 일반적인 방법이죠.

 

04

하지만, [⌘+ Click ]으로 누르면, 몇 겹의 그룹 안에 있더라도 바로 선택 가능합니다. ( ⌘만 누르고 있으면, 모든 요소들이 선택 가능해짐을 볼 수 있습니다.)

프로그램에 관계없이, 단축키 사용의 고급레벨은 – 단축키 사용 도중에 키 하나를 더 누르거나, 누른 키 중 하나만 떼는 스킬일 것입니다. 세련된 동작인 만큼 뉴비들이 쉽게 몸에 익히긴 어렵습니다. 하지만, 스케치 초보 중에서는 다른 프로그램의 전문가들도 계실 거란 생각에 선택 방식의 두 가지 스킬을 추가 소개합니다.

Skill 1. 선택한 상태에서, 혹은 ‘⌘+선택’한 상태에서 alt키를 눌러서 실시간으로 거리를 확인할 수 있습니다. (alt를 먼저 누르고 선택하게 되면 오브젝트 복제가 되니 순서에 주의 바랍니다.)

18

Skill 2. 같은 맥락으로, alt+드래그 선택, 혹은 ⌘를 누르며 드래그 선택하는 도중에 alt키를 누르면, 선택영역 안에 온전히 담긴 오브젝트들만 선택되는 모드로 바뀝니다. (기본 선택 방식은, 선택영역에 오브젝트의 일부라도 걸리면 선택되는 형식입니다.) 이 기능은, 리스트 안의 특정 오브젝트들만 골라 선택하는 등 보다 세밀한 작업에 유리합니다.

 

19

* 이 두 스킬은 별 것 아니지만, 막상 쓰려면 손에 잘 익지 않아요. 굳이 노력하실 필요는 없지만, 생각나실 때 한 번씩 해보시길 바랍니다.

 

05

혹자는, 위 체크박스를 켜서, 언제든지 최소 오브젝트 단위로 선택할 수 있도록 해 두는데요. 작업방식이야 개인의 선택이겠지만, 그다지 추천하고 싶지는 않네요. 포토샵에서의 Auto-Select처럼 – 스킬이 늘어날수록 불필요한 옵션이란 생각이 듭니다.

 

2. 심벌에서 페이지로 빠져 나오기 (  + ESC / + Up, Down )

06

작업을 하다 보면, ‘심벌*’을 수정하기 위해 심벌 페이지로 이동했다가, 다시 원래 페이지로 돌아오는 행동을 빈번히 하게 됩니다.

* 심벌의 개념은 우선 논외로 두기로 합니다. 포토샵에서의 Smart Object와 유사한데, 각각의 심벌에 다른 콘텐츠를 담을 수 있다는 차이가 있습니다.

단축키가 익숙하지 않은 분들은, 이전 화면으로 돌아가기 위해 좌상단의 “Return to Instance” 버튼을 마우스로 클릭하곤 하는데요.

 

07

스케치의 인터페이스는, 포토샵처럼 자유롭게 버튼 위치 등을 바꿀 수 없음에도 불구하고, ‘Return to Instance’ 버튼은 정말 비효율적인 위치에 있습니다. ^^ 마우스로 조준하는 수고 대신 단축키[⌘ + ESC]로 빠져나오기를 권장합니다.

심볼 페이지에서 돌아다니느라 ‘Return to Instance’ 버튼이 없어졌다면, [ Fn + Up, Down ] 버튼으로 페이지 화면으로 복귀할 수 있습니다. 마우스 움직임 없이 키보드로만 실행하는 것이라, 작업속도도 빠르고 덜 번거롭지요.

 

3. 컬러 피커의 사용 ( Control + C )

08

포토샵에서도 이 기능을 커스텀 단축키로 만들어 사용하는 분들을 종종 보았는데요. 스케치는 컬러 피커를 위한 단축키[Control+C]를 별도로 구비해 두었습니다. 잘못 사용하면 에러를 많이 일으키는 기능이긴 하지만 (아주 작은 라인 등을 선택하려 한다든지) 주의해서 사용하면 작업을 더욱 더 편하게 할 수 있습니다.

* Command와 Control을 주의해서 확인해 주세요. 스케치는 겸손하게도, Control을 더 많이 씁니다. 다른 프로그램들과의 충돌을 최소화하려는 의도가 아니었을까 해요.

 

4. 선택된 툴에서 벗어나기 ( ESC )

09

일반적인 프로그램들과는 다르게, 스케치는 툴을 호출하는 방법이나 해제하는 방법이 좀 다릅니다. 위와 같은 툴바가 없죠. (엄밀히 얘기하면 ‘숨겨져’ 있습니다. 사각형/원/펜/텍스트 등은 단축키 사용을 권장하는 의도가 있는 거겠죠?)

10

때문에, 어도비에서는 거의 쓰지 않는 ESC를 빈번하게 쓰게 됩니다. 외부 영역을 눌러서 빠져나오는 것도 좋지만, ESC를 누르면 단계별 이동에 좋습니다.

위 이미지는 취소의 경로 차이를 보여주는 그림입니다. 일반적인 방법인 ‘외부 영역 클릭’은, “더이상 벡터 핸들을 수정하지 않겠다 (오브젝트 선택으로 변경)”이지만, ESC를 누르게 되면, “벡터 핸들 수정 모드는 벗어나지 않되, 자동 선택된 핸들은 해제하겠다”는 뜻이 되죠.

기능/사용방법에 따라 취소의 경로가 다르다는 것을 알고 작업에 유리하게 적용하길 바랍니다.

* ESC에 상응하는 반대 기능으로서 Return 키를 쓸 수도 있습니다. 이 키도 충분히 유용하지만, 일반적인 단축키들의 위치보다 심하게 오른쪽에 위치해 있어서, 한 손(주로 왼손)으로 조작하기 어렵기 때문에, 본 내용에서는 별도 설명하지 않습니다.

 

5. 레이어 복사 (  + D )

물론, ⌘+C, ⌘+V의 전통적인 방법도 있습니다만, 포토샵의 ⌘+J와 같은 기능을 합니다. 동일한 좌표에 레이어를 복사합니다.

 

6. 다른 아트보드의 동일한 위치에 복사 ( 레이어 패널에서 Alt + Drag )

11

이 내용 역시, 오브젝트를 끌어 옮긴 후 좌표를 수정하는 일반적인 방법으로 구현할 수 있지만, 레이어 패널에서 ‘아트보드 to 아트보드’ 이동을 함으로써, 좌표 수정없이 동일 위치에 레이어/그룹을 배치할 수 있습니다.

12

(이게 편하려면, 우선 레이어를 잘 정리해 두어야겠죠. ^^)

 

7. 면/선을 끄고 켜기 ( F, B )

13

스케치에서 벡터 도형을 그리면 선과 면이 함께 있는 도형이 생깁니다. 그런데 실제로는 선만 있는, 또는 면만 있는 도형을 더 많이 쓰잖아요. 스케치에서는 단순히 F/B를 눌러서 선/면을 끄고 켤 수 있습니다. 이 기능과 콤보로, Control+C (색상선택) 기능을 사용하면, 굳이 저 작은 체크박스를 조준해서 누르는 수고를 덜 수 있겠지요?

 

8. 가이드라인 사용법

14

의외로 스케치는 가이드라인이 좀 불편합니다. 할당된 끄기/켜기 단축키도 없고, 가이드라인을 선택해서 이동/삭제(던져 지우기)가 되지 않습니다. 오직 Ruler 위에서만 이동/삭제가 가능합니다.

단, 제가 편하게 느꼈던 기능은, 임시 가이드라인을 둔 상태에서 오브젝트를 이동시킬 수 있다는 점이었는데요.

15

 

움직이고자 하는 오브젝트를 선택하고 마우스 커서를 Ruler 위로 가져가면, 일반적인 가이드보다 조금 엷은 색의 임시 가이드가 생깁니다. 그 상태에서 키보드 방향키로 위치를 맞추어 줄 수 있어서, 굳이 가이드라인을 생성하거나 이동하지 않고도 간단하게 가이드를 사용할 수 있습니다.

 

9. 인풋창 계산기

16

일러스트레이터에서도 인풋창에서 계산을 할 수 있지만, 스케치의 인풋창도 간단한 계산을 할 수 있습니다. 섬네일의 비례를 구하거나 (*9/16 : 가로 너비를 기준으로 16:9의 섬네일을 만드는 경우), 퍼센트로 크기를 구하는 경우에 유용합니다. (퍼센트의 기준은 아트보드이고, 심볼은 심볼의 전체 크기 기준입니다)

* 7!이나 cos 60°, int(30.5) 등은 안되네요. 하지만, (5+4)*2는 됩니다.

 

10. 레이어 이름 변경

17

GUI 작업을 자동화하기 위해서는, 포토샵에서보다 레이어의 이름을 정하는 것이 더 중요합니다. Zeplin과의 연동이나, 이미지 Export, 라이브러리의 체계화 등을 고려할 때 – 언제나 레이어 이름을 정하는 버릇을 들여야 합니다. 다행히도,  [⌘+R] 키를 통해서 마우스 이동 없이 이름을 변경할 수 있습니다.

또한, [ Tab / Shift + Tab ] 을 통해 위/아래 레이어 이름을 연속적으로 변경할 수 있습니다.

 

Summary.

인터넷에서 쉽게 구할 수 있는 대개의 튜토리얼들이 – “기초적인 사용법”은 생략하고, 바로 ‘기능’ 설명으로 넘어가더군요. 때문에, 이런 식의 정리도 필요할 것이라 생각해서 부족하나마 정리해 보았습니다. 초보 여러분들에게 도움이 되기를 바랍니다.

 

– 가치디자인 그룹 김병수

 

*타이틀이미지 출처 https://www.sketchapp.com

 

 

Share this:

Leave a comment