Resize와 Scale
신입에게 알려주는 스케치, 크기 변경하기
스케치 63.1 기준으로 작성된 글입니다.
스케치 70.3에서 한 번 업데이트 했습니다.
모바일보다 데스크톱에서 보는 게 좋습니다.
알아두면 좋은 구성이다.모바일 앱이나 웹사이트를 디자인할 때, Box를 생각하면 쉽습니다. 디자인을 하면서 네모칸을 하나 그리면, 그 네모칸은 자연스럽게 여백(Padding)과 마진(Margin), 테두리(Border)를 갖게 됩니다. 디자인 툴에서는 여백은 금방 보이지만, 마진은 잘 보이지 않습니다. 하지만 이 구조를 알면 도움이 되는 경우가 많을 겁니다.
UI 디자인은 Box 혹은 컨테이너 안에 계속해서 박스 혹은 컨테이너를 넣는 일의 반복입니다. 컨테이너가 잘 보이지 않을수록, 보이지 않는 박스의 개수(테두리가 없는 박스)가 적을수록, 심플한 디자인이 됩니다.
우리가 아는 화면에 네모칸 하나를 배치하게 되면, 4가지 방법을 사용할 수 있습니다. 보통 디자인을 할 때는 4가지 방법을 모두 사용하게 됩니다. 욕실에 타일을 깔거나, 도미노를 세우는 것처럼 반복해서 오브젝트를 화면 위에 올려놓으면서, 디자인이 구현되기 시작합니다.
그리드와 가이드는 디자인을 효율적으로 하기 위한 논리적인 규칙입니다. 그리고 스케치와 피그마 같은 툴은 그 과정을 효율적으로 지원합니다. 여백이나 마진, 그리드, 가이드라인을 정해두면, 툴이 적절한 방식으로 나머 지 일을 처리해서, 모듈이나 컴포넌트 일정한 규칙 안에서 배치되게 합니다.
스케치나 피그마가 포토샵, 일러스트레이터와 근본적으로 다른 부분이 바로 구조적인 설계에 대한 관점입니다. 동시에 반복 작업을 줄여서, 좀 더 창의적인 일을 할 수 있는 시간을 벌 수 있습니다.
가장 기본적인 규칙은 상하좌우입니다. x와 y, 2개의 축이 있고, 각각 3개의 위치가 있습니다. 그래서 9가지 조합이 나옵니다. 아이콘을 선택하면, 쉽게 레이어를 정렬할 수 있습니다.
다시 한번 말씀을 드리면,
"디지털 디자이너가 사용하는 아트보드의 크기는 변합니다.
그래서 유연하게 배치될 수 있는 설계가 필요합니다."
직관적으로 스케치에서 Rectangle Shape 2개를 아트보드에 배치한 후에 마우스로 드래그해서 크기를 변경하면, 정가운데 기준으로 Width와 Height가 변합니다.
키보드로 수치를 입력하게 되는 경우에는 기준점이 달라집니다. 키보드로 숫자를 입력할 경우의 기본값은 왼쪽(Left)과 위쪽(Top)이 됩니다.
숫자로 1.5배를 키우면, 2개의 Shape의 크기는 각각 1.5배가 됩니다.
마우스로 드래그하는 방법을 제외하고(포토샵에서는 손을 부들부들 떨면서 1px씩 움직이기도 했지만...), 수치를 입력하여 정확하게 옮길 수 있는 방법은 2가지가 있습니다.
크기를 바꾸는 2가지 방법
Resizing
스케치 왼쪽 상단에 Resizing을 이용하는 방법입니다. 숫자를 입력하면, 쉽게 바꿀 수 있습니다. 그리고, 간단한 연산과 기준을 이용해서 크기를 변경할 수 있습니다.
너비(width)가 40인 경우,
40+8: 너비를 왼쪽 기준으로 48로 수정
40*2: 너비를 왼쪽 기준으로 2배로 수정
40/2: 너비를 왼쪽 기준으로 절반으로 수정
40-8: 너비를 왼쪽 기준으로 40으로 수정
기준도 설정할 수 있습니다.
48r: 너비를 오른쪽 기준으로 48로 수정
40+40r: 너비를 오른쪽 기준으로 80으로 수정
그러나 이 방법은 2가지 아쉬움이 있습니다. 인스펙터로 수정할 수 있는 것은 width와 height, x와 y 뿐입니다. 마우스로 드래그해서 크기를 변경해도, width와 height, x와 y만 변경할 수 있습니다. Style에 해당되는 Border, Text, Shadow Size는 바꿀 수 없습니다.
Scale Layers
Command + K를 누르면 Scale Layers(Layer > Transform > Scale...)를 할 수 있습니다.
버전이 70대로 올라가면서, 팝업으로 뜨던 Scale Layers가 오른쪽 패널의 상단에 표시됩니다. 작은 글씨로 설명이 있습니다. 이 기능을 쓰면, Style에 해당되는 요소들도 변경됩니다. 비율과 수치, 기준점을 바꿔서 크기를 변경할 수 있습니다.
두 기능의 차이입니다.
인스펙터에서 숫자를 입력하면 x, y, witdth, height만 변경됩니다.
Scale Layers를 사용하면, 스타일까지 비율에 맞게 커지거나 작아집니다.
여기서 포토샵과 스케치의 차이를 알 수 있습니다. 포토샵은 오프라인의 필름 작업 과정을 디지털로 만들었습니다. 이미지를 만들어내기 쉬운 툴입니다. 스케치는 Shape의 가로와 세로 크기를 빠르게 변경하고, 위치시키기 쉬운 툴입니다. 만일 이 기능이 사용하기 쉬운 곳에 있다면, 크기를 변경할 때마다 의도하지 않게 스타일이 변경되는 일이 잦을 겁니다.
Pin to Edge & Fix Size
스케치는 크기를 변경할 때, Pin to Edge와 Fix Size를 정할 수 있습니다. 먼저 이야기했던 박스 안의 박스를 생각하시면 좋습니다. 각각의 레이어를 폴더에 계속 담게 되고, 그 크기는 계속 변경될 수 있습니다. 그래서 변경이 일어날 때, 규칙을 정해둘 수 있습니다.
Pin to Edge와 Fix Size를 통해서 스크린의 좌우 여백을 정해두고, 그 안에서 컴포넌트가 스크린에 적절하게 배치될 수 있습니다.
원하는 쪽으로 레이어를 붙일 수 있기 때문에, 디자인이 유연해집니다. 이해를 돕기 위해 width와 x로 예를 들겠습니다.
각각의 레이어를 분류하거나 그룹핑할 때는 하나의 컨테이너(혹은 폴더, 박스) 안에 들어가는 그룹이 2개로 구분되면 관리가 편리합니다. 하지만 디자인을 하다가 보면, 2개 이상의 레이어가 배열될 때가 있습니다. 그럴 때는 심벌을 만들어 Smart Layout을 사용합니다.
스케치는 제작을 할 때, 빠르게 변경할 수 있는 기능을 지원합니다. 그러니까 처음부터 100% 성공하는 디자인을 만드는 게 목표가 아닙니다. 계속해서 수정사항을 흡수하거나 중요한 내용을 수정할 수 있게 설계되어 있습니다. 수정뿐 아니라, 다양한 변수도 어느 정도 처리할 수 있게 기능을 업데이트하고 있습니다. 그런 기능 중에 하나가 Smart Layout입니다. 스마트 레이아웃은 심벌을 만들 때 쓸 수 있기 때문에 심벌 때 이야기하겠습니다.
Pin to Edge와 Fix Size는 편리하지만 기존 작업의 프로세스와 다르기 때문에 직관적으로 확인할 수 있는 프리뷰가 있습니다. 프리뷰를 보면서 몇 번 해 보면 금방 알 수 있지만, 편의를 위해서 기준을 알려드립니다.
숫자를 보시면, 설정에 따라서 크기의 숫자가 들쑥날쑥 변하면서 위치가 변합니다.
복잡하지만 규칙은 간단합니다.
1.2배로 컨테이너의 폭을 넓게 하면, x좌표와 width 값에 1.2를 곱합니다.
이렇게 하면, x좌표가 변하는 이유를 알 수 있습니다. 하지만, 두 개의 설정을 바꾸다가 보면 좀 혼란이 옵니다.
Fix Size를 사용해서 width를 제한하면, 원래 1.2배가 될 크기의 여백이 더 생기고, 1배 크기의 폭이 가운데 기준으로 정렬됩니다. 그래서 크기가 이상하게 바뀌는 것처럼 보입니다.
알고 보면 간단한 규칙입니다. 이 기능을 만든 사람도 고민이 많았을 것 같습니다.
(간혹 디자인 이야기를 하다가 보면, 프로그래머들은 가운데 정렬을 무척이나 좋아합니다. 디자이너는 가급적 가운데 정렬보다는 왼쪽으로 붙이는 게 좋습니다.)
Pin to Edge와 Fix Size를 정해두면, 상자 속에 들어있는 상자 속에 들어있는 상자 안에 들어 있는 레이어나 오브젝트의 정렬도 한 번에 바꿀 수 있습니다. 보통은 이런 작업은 심벌로 합니다.
예시
폭을 넓게 한 경우, 높이를 크게 한 경우 크기의 변화.스케치는 생각보다 명확한 툴이라 예시가 필요할까 싶긴 합니다. 이런 예시보다 UI Kit 하나를 만들어 공유하는게 더 유용하겠죠. 파일을 열어보면 되는데... 그래서 만들어볼까 합니다. 주제와 유형은 고민 중입니다.
일단, 심벌을 사용하지 않은 상태에서 Pin to Edge와 Fix Size를 정해두면, 폭과 높이를 조정하면, 적절하게 크기와 좌표가 바뀌게 할 수 있습니다.
이렇게 하면, 좌표와 크기가 소수점으로 나오기도 하는데 8pt Grid의 장점은 Export에 가장 적절한 장점입니다. 이렇게 바꿀 때는 실제 데이터에 맞게 디자인이 되었는지 확인할 때 좋습니다.
각 레이어와 폴더의 설정은 그림과 같습니다.
참고로 포토샵에서는 레이어를 위에서 아래로 쌓는데, 스케치에서는 새 레이어가 위로 올라가는 것이 좋습니다. 필수는 아니지만, 가급적 작업 순서 혹은 눈에 읽히는 순서로 해두면 좋습니다.
다음 글에서 심벌의 기본적인 사용법을 다루겠습니다.
그럼 모두 편안하고 편리한 디자인 작업되길 바랍니다.
