brunch

매거진 신입에게 알려주는 스케치

라이킷 97 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 이선주 May 25. 2020

패스와 벡터

신입에게 알려주는 스케치

디자이너들은 패스(Path)를 많이 그린다. 포토샵에서 Path는 사진을 보정하기 위해 많이 쓰이고, 일러스트레이터는 디지털 드로잉을 위해 사용한다. 스케치에도 패스를 그리는 기능이 있다. 그런데 스케치의 Vector 툴의 경우, 다른 툴과 차이점이 있다.

스케치는 베지에 곡선(Bézier curves)을 다른 드로잉 툴보다 더 픽셀에 딱 맞는 디자인(Pixel Perfect)으로 만들어준다.

스케치는 큐빅 베지에 곡선을 사용한다.

V키를 누르면, 포인트를 찍어서 벡터 드로잉을 시작할 수 있다. 툴에 따라 부르는 명칭은 약간씩 다르지만, 대개의 경우, Point, Handle, Path 혹은 Curves라고 한다. 2개 이상의 포인트를 찍으면, 선이 연결되고, 중간의 선을 드래그하거나 포인트를 더 추가해서 모양을 만들 수 있다.

아트보드 위에 포인트를 찍고, 다음 포인트를 찍으면서, 아이콘이나 UI를 그리게 된다. 다음 포인트를 찍기 전에 쉬프트를 누르면, 바로 전에 찍은 포인트를 기준으로 0도, 45도, 90도 위치에 포인트를 찍을 수 있다.

스마트 그리드가 보통 활성화되어 있기 때문에 다양한 가이드 선을 볼 수 있을 것이다. 가이드 선에 커서가 영향을 받으면, 커맨드를 눌러서 자유롭게 포인트를 추가할 수 있다.

숫자에 민감한

스케치

어떻게든, 픽셀 퍼펙트를 만들고 말겠다는 의지가 엿보인다.

스케치는 정수에 민감하다. 그래서 포인트를 추가하는 경우 소수점을 어떻게 처리할 것인지 패널에서 바로 정할 수 있다. 각각의 상태는 이미지와 같다. 1pt 선을 그릴 때는 'Round to half pixel'이 유용하고, 일반적인 선을 그릴 경우는 'Round to full pixels edges'가 적당하다.

이미 있는 패스에 포인트를 추가하는 경우, 반올림을 선택해도 소수점이 찍히지만 그 포인트를 움직이면, 소수점을 반올림한다.

핸들까지 수치 입력이 되다니...

보통 다른 툴에서 핸들까지 숫자로 제어하는 경우는 드물다. 스케치는 핸들을 클릭하면, 핸들의 위치도 숫자를 입력해서 바꿀 수 있다.

스케치에서 대놓고 이야기하지는 않지만, 아이콘을 픽셀에 맞춰서 그릴 경우 매우 유용하다.(이 기능과 함께 쓸 수 있는 스마트 가이드, 그리드 등이 있다.) 또 Path를 Combined Shapes로 관리할 수 있기 때문에 기본 요소를 만들고 쉽게 관리할 수 있다.

신입의 경우, 포인트와 핸들의 조절을 감으로 하는데, 곡선이 제멋대로 움직이는 것처럼 보이기 때문에 아이콘을 직접 그리는 것을 피하거나 시간 낭비라고 생각할 수 있다. 로고나 아이콘을 많이 그린다면, 그리드 위에서 스케치로 연습해보면 좋을 것 같다.

수직과 수평으로
곡선을 통제하기

아이콘 혹은 로고를 그릴 경우, 여러 가지 옵션이 있는데, 그중 하나는 그리드를 바탕으로 그리는 방식이다. 곡선이 필요할 때, 처음부터 곡선을 그리는 것이 아니라, 그리드에 맞춰 그린 후, 핸들을 사용해서 곡선을 만들 수 있다.

많은 경우, 패스를 그릴 때, 대각선으로 핸들을 쭉 늘려서 적당한 곡선을 만든다. 그런데 처음부터 대각선을 그리지 말고, 수직과 수평으로 핸들을 움직이면, 곡선의 통제가 더 쉽다. 여기에 스케치의 수치 입력 기능이 합쳐지면, 정밀한 이미지를 제작할 수 있다.

개인적으로 크기 변경할 때, 네모로 보이는 것이 좋다.

테두리가 둥근 라인을 위해서 그리는 곡선은 곡선 아니면, 원인데 타원의 경우는 많은 경우, 타원을 그리고 도형을 회전시킨다. 그런데 핸들을 수직과 수평으로 조절하게 되면, 조금 다른 방식으로 곡선을 그릴 수 있다. 그리고 이 곡선은 그리드 위에서 움직이기 때문에 로고나 아이콘을 그릴 수 있다.

포인트와 패스만으로 정원을 그리기 힘든 사람이 많은데, 1:0.55를 사용하면, 원을 그릴 수 있다. 직선과 곡선 사용하면, 대부분의 라인을 정밀하게 그릴 수 있다.

2개의 패스로 원을 그릴 수 있는데, 그렇게 되면, 확대, 축소 시에 원의 모양이 미묘하게 틀어질 수 있다. 자주 쓰진 않겠지만, 동그란 원을 그릴 때 포인트를 4개 찍자. 그리고 둥근 모서리의 경우도 중간에 포인트 하나를 추가해서 사용하면 좋다.

유용한

기능과 팁

포인트의 정렬

일러스트레이터처럼 포인트를 정렬할 수 있다. 사실 대부분의 스케치 오브젝트를 정렬할 수 있다. 별 거 아니지만, 유용한 기능이다.

핸들 한쪽만 지우기

패스를 그리다가 보면, 핸들이 양쪽에 생겨서 다음 포인트가 영향을 받는 일이 많다. 특히 이미 그려져 있는 핸들을 지우는 게 의외로 귀찮은데, 포인트 타입을 Disconnect로 선택하고, 그냥 핸들을 드래그해서 포인트와 겹치게 하면, 한쪽만 제거할 수 있다. 제거한 핸들을 살리려면, 포인트를 선택하고, 키보드의 숫자 키, '1'을 누르면 된다.

스케치의 경우, 포인트 타입을 선택하는 단축키는 1, 2, 3, 4이다.

Rotate Copies

역시 일러스트레이터에 있는 기능인데, 스케치에는 좀 더 가벼운 버전으로 들어있다. 선택한 패스를 회전시켜서 복제하는 기능인데, 패스를 선택한 후에 몇 개를 복제할 것인지만 입력하면, 패스의 크기에 비례해서 둥근 원에 균등 배치시켜 준다. 다이얼로그를 닫아도, 기능이 끝난 것이 아닌데, 복제가 된 후, 원의 중심에서 거리를 조정할 수 있다.

커스텀 툴바에 추가할 수 있다.

Scissors

원하는 패스를 제거하는 기능인데, 다른 툴과 차이점은 다른 툴은 패스를 선택하거나, 몇 가지 절차를 더 거쳐야 하는데, 스케치의 경우는 귀여운 애니메이션이 있는 가위 기능으로 패스를 편집할 수 있다.

커스텀 툴바에 추가할 수 있다.

프로젝트에 따라 커스텀 툴바를 바꾸면, 시간이 많이 절약된다.

Pixel Perfect를
생각하면 좋은 이유

요즘은 어떤 툴이든, 픽셀을 딱 맞추는 기능을 제공한다. 그런데 픽셀을 딱 맞추라고 했을 때, 어떤 사람은 이건 꼰대질이라고 말한다. 픽셀이 1이 어긋나든, 어긋나지 않든 그건 디자이너만 알고, 프로그래머나 사용자는 모른다는 것이다.

픽셀 퍼펙트는 좋은 제품을 만들기 위한 방법이기도 하지만, 규칙과 논리가 있는 디자인을 위한 방법이기도 하다.

1919년부터 1933년까지 바우하우스라는 디자인 교육 기관이 있다. 바우하우스는 산업 디자인에 큰 영향을 끼쳤다. '형태는 기능을 따른다.(Form follow Function)'라는 말이 여기서 나왔다. 아름다움은 시간의 변화를 이겨낸 순수함에서 나온다는 해석과 환경에 맞게 형태와 기능 중 하나를 희생할 수 있다는 해석이 있다.

현대 디자인은 물론이고 UI 디자인에서 이 말이 중요한 이유는 '디자인을 논리적으로 실증할 수 있다'는 생각의 기본이 되었다. 꼭 필요한 부분만 남기고 나머지 부분을 제거하여 '단순'하게 만드는 디자인은 대량생산이 시작되는 시기에 꼭 디자인이었다. UI 디자인은 대량 생산은 아니지만, 순식간에 '복제'되어 수많은 사람들의 화면에 ‘업데이트’ 된다.

그래서 UI 디자인은 최소, 최적, 효율이 중요하다. 사용자가 보는 화면에서 단순하게 보이려면, 모든 디자인 프로세스가 단순해야 한다. 그래서 벡터 커브를 만들 때, 최소한의 포인트로 디자인하고, 최적의 픽셀로 표현하려는 것이다.

실무적으로도 최적화된 디자인 소스는 재사용과 변경이 더 쉽고, 편리하며, 여러 디자이너가 협업할 때 의사소통하기가 쉽다. 특히 전체 디자인을 체계적으로 만들려는 시도가 많은 시기에는 더욱 그렇다.