레이어
레이어는 스케치 디자인을 만들기 위한 기본 요소입니다.
다른 디자인 툴은 레이어와 오브젝트의 구분이 모호할 때가 있지만 스케치에서는 모든 오브젝트가 레이어에 속합니다. 이러한 이유로 이 문서에서는 오브젝트와 레이어 용어를 서로 바꾸어 가며 사용할 것입니다.
스케치에서 그룹와 아트보드는 컨텐츠를 구성하며 각각 레이어로 취급됩니다. 문서에 새 레이어를 추가하려면 툴바에서 Insert 메뉴를 클릭 한뒤 원하는 레이어 타입을 선택하면 됩니다.
레이어 추가하기
레이어를 추가하기 위한 가장 쉬운 방법은 툴바에서 Shape을 선택하는 것입니다. Insert > Shape 를 선택한 뒤 Rectangle (혹은 R 버튼) 를 누릅니다. 그러면 마우스 포인터가 Rectangle 툴 아이콘 으로 변합니다.
이제 도형을 추가하기 위해 캔버스를 클릭하고 드래그합니다. 클릭을 해제하면 도형이 추가되며 다른 방법으로 도형을 다듬을 수 있습니다.
아무 레이어를 선택하지 않았을 때, 맥북 프로 터치바로 새 레이어를 추가할 수 있습니다. 아래 그림처럼 키보드에서 추가하고 싶은 것들을 선택할 수 있습니다. 가능한 옵션으로 Artboard, Rectangle, Oval, Vector, Text 그리고 이미지가 있습니다.
고급 옵션
이처럼 쉽게 Shape을 추가할 수 있으며 더 자세한 조절을 위한 숨겨진 단축기능들이 있습니다. 예를 들어 Rectangle을 추가할 때 Shift키를 누르면 정사각형을 만들 수 있습니다.
비슷한 방식으로 Option 키를 눌러 정중앙을 기준으로 도형을 그릴 수 있습니다.(왼쪽 상단 기준으로 그리는 대신)
새 도형의 위치를 잘못 놓았다면, Space bar를 누릅니다. Space bar를 누르고 있으면 도형이 변하지 않고 위치를 바꿀 수 있습니다.
문서에 매우 큰 레이어를 추가할 때, 캔버스 바깥까지 드래그하면 뷰 스크롤이 자동으로 움직입니다.
레이어 선택하기
스케치에서 레이어를 선택하는건 쉽습니다: 캔버스에서 레이어를 클릭하면됩니다. 레이어를 선택하면 각 변의 중심고 모서리에 있는 8개의 핸들을 볼 수 있습니다.
노트: 만약 레이어를 선택했는데 핸들이 보이지 않는다면, 핸들 영역이 가려져 있을 수 있습니다. 다시 보기 위해서는 메뉴에서 View > Canvas > Show > Selection Handles를 선택하세요.
다른 방법으로 레이어 리스트를 사용할 수 있습니다. 리스트에 있는 레이어 이름을 선택하면 캔버스에서도 선택됩니다.
여러 레이어 선택하기
키보드에서 Shift키를 누르면서 레이어를 선택하면 여러 레이어를 선택할 수 있습니다. Shift 키를 누른 상태에서 선택했던 레이어를 클릭하면 선택이 해제됩니다.
캔버스의 비어있는 공간 클릭한 뒤 드래그해서 오브젝트를 선택하면 전체가 네모로 선택됩니다. 만약 Shift나 Command 키를 누르면서 하면 오브젝트가 더 선택되거나 선택해제됩니다.
Option키를 누르면서 클릭-앤-드래그 시, 선택네모 안에 모든 포인터가 들어가 있는 오브젝트만 선택됩니다.
왼쪽:Shift-드래그 오른쪽:Shift-Option-드래그
레이어 겹치기
다른 레이어가 가려서 보이지 않는 레이어를 쉽게 선택하기 위해, Control-클릭 후 나오는 선택 메뉴에서 Pick Layer를 선택할 수 있습니다. 포인터 아래에 있는 모든 레이어 리스트가 나옵니다.
Option 키를 이용해 더 쉽게 할 수 있습니다. Option키를 누르고 있으면 가장 위에 있는 것 대신 두번 째에 있는 레이어를 선택합니다. 여러 레이어가 겹친 경우 앞서 설명한 Shortchut 메뉴에서 선택해야 하지만 어떤 상항에서는 이 방식이 편할 수 있습니다.
그룹 안에 있는 레이어 빠르게 선택하기
Groups는 컨텐츠를 편하게 정리하는 방법입니다. 더블 클릭 하지 않는 이상 레이어가 실수로 수정되는 것을 방지합니다. 그룹은 하나의 레이어로 취급되며 세부 레이어는 따로 선택되지 않습니다.
여러 단계의 그룹 안에 속한 개별 레이어를 선택하고 싶을 때 계속 더블 클릭하는 것 대신 Command를 누르고 선택해 레이어를 선택할 수 있습니다.
레이어 옮기기
선택한 레이어를 포인터로 붙잡아 옮길 수 있습니다. 수직,수평으로만 움직이려면 Shift 키를 누르면서 드래그하면 됩니다.
레이어를 옮기거나 사이즈를 조절할 때 가까이 있는 레이어에 자동으로 정렬합니다. 만약 정렬되지 않는다면 Smart Guides가 꺼져 있을 수 있습니다. 이를 활성화하기 위해서 메뉴에서 View> Canvas > Show Smart Guides 를 선택하면 됩니다.
Option 키를 누르면서 드래그하면 원본 레이어는 그 자리에 유지되고 새 레이어가 복제됩니다. 복제를 한 뒤 Command-D를 누르면 처음 복제한 것과 같은 방식으로 새 레이어가 복제됩니다.
레이어를 Pages 패널에 드래그-앤-드롭해 다른 페이지로 레이어를 복제할 수 있습니다.
가려진 레이어 옮기기
가려진 레이어를 옮길 때 겹친 레이어가 복잡해질 것입니다. 보통 도형을 선택하지 않은 상태에서 클릭 후 드래그하면 레이어가 선택되고 새로운 위치로 옯겨집니다.
대개 이 방식이 편하지만 레이어가 다른 레이어에 가려져 있을 땐 불편할 수 있습니다.내가 선택하려고 한 레이어 대신 가장 위에 있는 레이어가 선택될 것입니다.
이것을 피하기 위해 Option-Command키를 누르고 클릭앤 드래그를 하면 선택이 변하지 않습니다. 캔버스의 어떤 곳으로 옮겨도 선택이 해제되지 않을 것입니다.
레이어 정렬하기
추가로 선택한 레이어를 더 빠르게 옮기기 위해 Inspector 오른쪽 상단에 있는 버튼들을 이용해 레이어를 정렬하거나 분배할 수 있습니다.
처음의 두개는 레이어를 가로 혹은 세로로 분배하는 것입니다. 메뉴에서 Arrange > Distribute Objects를 선택하거나 Control-Command-V 혹은 Control-Command-H를 사용해도 됩니다. 만약 레이어를 고정된 공간만큼 분배되게 하려면, Make Grid 툴을 사용하면 됩니다. 또한 이 옵션은 가능한한 세밀하게 조절할 수 있는 pixel fitting 설정을 할 수 있도록 도와줍니다.
다음으로 6개의 버튼 (좌정렬, 수직정렬, 우정렬, 상단정렬, 수평정렬, 하단정렬)은 아트보드나 해당 레이어에 정렬하게 하는 것입니다.
여러 레이어를 선택했을때, 맥북 터치 바에 분배와 정렬 컨트롤를 쉽게 사용할수 있습니다.
아트보드에 레이어를 정렬하기 위해서는, Option키를 누르면서 원하는 정렬 버튼을 누르면 됩니다. 또한 여러 레이어를 선택했을 때도 가능합니다. 다른 접근방식으로 툴바에서 Group을 이용해 오브젝트를 먼저 그룹화하는 것입니다.
특정 오브젝트에 레이어를 정렬하기 위해서, 먼저 레이어 리스트에서 lock button을 이용하거나 Shift-Command-L을 눌러 기준이 될 레이어를 잠궈야합니다. 특정한 오브젝트가 선택되지 않을 경우 스케치는 레이어를 모든 선택한 레이어 중 가장 바깥 쪽의 레이어에 정렬합니다.
레이어 크기 조절하기
8개의 핸들은 단순히 선택한 것을 알려주는 장치가 아닙니다. 이것을 이용해 크기를 조절할 수 있습니다. 아무 핸들을 클릭-드래그하면 레이어의 크기를 조절 할 수 있습니다. Shift 키를 누르면서 레이어를 조절하면, 같은 비율을 유지하면서 크기가 조절됩니다.
단순히 레이어의 가로나 세로를 조절하려면, 레이어 변에 있는 핸들을 클릭-드래그하면 되며, 각각 다르게 조절하려면 모서리 핸들을 클릭-드래그하면 됩니다. 사이즈를 조절할 때 포인터에 가로,세로 수치가 보입니다.
Option 키를 누르고 있으면, 가운데를 기준으로 크기가 변합니다.
Inspector를 이용해 크기 조절하기
Inspector를 이용해 수치를 조절할 수 있습니다. 만약 Size Lock Icon이 닫혀 있다면, 해당 수치가 유지됩니다. 또한 단축키를 이용해 상단-좌측 모서리 외 부분에 Anchor Point를 정할 수 있습니다.
L-좌측 기준 R-오른쪽 기준 T-상단 기준 B-바닥 기준 C/M - 가운데,중앙 기준
오른쪽 기준으로 50픽셀 넓게 조절하려면, 가로를 50r로 설정하면 됩니다.
키보드
키보드를 이용해 크기를 조절할 수 있습니다. 정밀한 픽셀을 조절할 때 마우스보다 편합니다. Command 키를 누르면서 방향키를 누르면 됩니다. Command-오른쪽 방향키를 누르면 레이어가 가로로 1px 움직이며 왼쪽 방향키를 누르면 1px 왼쪽으로 움직입니다. 같은 방식으로 위/아래로 1px씩 움직입니다. Shift를 같이 누르면 10px만큼 움직입니다.
더 빠른 작업을 위해 숫자로 제어하는 방법을 Inspector 챕터에서 확인할 수 있습니다.
스케일링
레이어 크기를 조절할 때 적용된 스타일의 크기가 함께 조절되지 않습니다. 5px 선이 적용된 50x50 도형이 150x150으로 크기가 조절되도 선 크기는 5px그대로입니다. 레이어에 적용된 스타일의 크기를 함께 조절하려면 메뉴에서 Layer>Transform>Scale을 선택하거나 Command-K를 누르면 됩니다.
스케일링은 아이콘의 크기를 원하는대로 조절할 때 이상적입니다.
스케치에서 레이어를 스케일링할 때, 기준을 지정할 수 있습니다. 기본은 가운데를 기준으로 하며 9개의 기준점을 레이어의 위치를 지정할 수 있습니다.
스케일 기준을 정하는 것은 어마어마한 시간을 절약할 수 있습니다.
크기 조절 제약
제약을 통해 심볼,아트보드,그룹의 크기가 조절될 때 어떻게 작동하는지 정할 수 있습니다.
예를 들어 오브젝트가 가로,세로로 늘어나도 아트보드에서 레이어가 가운데에 있도록 유지하거나 심볼의 상단 왼쪽에 그룹이 고정되게 하고 싶을 때 크기 조절 제약을 적용할 수 있습니다.
제약 적용하기
아트보드나 그룹에 속한 어떤 레이어에도 제약을 적용할 수 있습니다. 하위 레이어가 선택되면 크기 조절 제약이 Inspector의 레이어 속성 영역에 나옵니다. 상위 페이지가 조절될 때 자식 레이어가 어떻게 작동하는지를 정할 수 있습니다.
이 영역은 두가지로 나뉘어 있습니다: 왼쪽에서는 레이어가 고정되어야 하는 면을 정하고, 오른쪽은 가로/세로 크기를 고정할 때 사용합니다.
스케치에서 기본적으로 아무것도 설정되어 있지 않습니다. 레이어를 포함한 그룹의 크기를 조절할 때, 그룹 안의 레이어는 상위 레이어의 크기 변화비율에 맞춰 변할 것입니다.
만약 레이어의 왼쪽과 오른쪽 모서리에 제약을 걸면 모서리를 기준으로 상위 레이어와 하위 레이어의 간격이 유지됩니다.이 규칙은 레이어의 가로 크기는 가변적이며, 크기 조절 시 변하는 부분을 정한 것을 의미합니다.
아트보드를 조절할 때 컨텐츠의 변화를 조절하기 위해서는 Artboard Inspector의 Adjust content on resize 옵션을 확인하면 됩니다.
모서리에 고정하기
네비게이션이나 탭 바와 같은 일반적인 인터페이스 요소 다룰 때, 고정된 높이에 가로로 늘어나길 바랄 것입니다. 이 방식은 쉽게 하나의 제약만 걸면 됩니다: Fix Height. 이렇게 상위 레이어를 조절해도 높이는 변하지 않습니다.
왜 모든 모서리에 제약을 걸지 않아도 되는지 궁금할 수 있습니다. 왜냐하면 스케치의 요소들은 기본적으로 레이어와 상위 요소와의 간격을 포함해서 늘어나기 때문에 굳이 제약을 걸지 않아도 됩니다.
구석에 고정하기
위 예시와는 다르게 레이어가 아트보드나 그룹의 크기를 조절에 상관 없이 가장자리에 위치하려면 해당하는 가장자리에 고정하면 됩니다. 네비게이션의 아이콘이나 떠다니는 액션 버튼같은 것을 디자인할 때 이상적입니다.
레이어가 어느 가장자리에 고정되야할지 정했다면 제약을 설정하고 가로/세로가 조절되지 않도록 고정합니다.
떠다니기와 고정 간격
상위 요소의 크기가 변해도 아이콘이 예시처럼 같은 크기로 가운데에 위치하길 원한다면 아이콘의 가로/세로 크기를 고정하면됩니다. 이것은 상위 요소의 크기가 조절될 때 레이어의 간격만이 조절되는 것을 의미합니다.
반대로 간격을 고정하고 오브젝트의 크기가 변하길 원한다면, 모든 변을 고정하면 됩니다.쉬운 방법으로 고정하는 부분의 가운데 회색 네모를 누르면 모든 변이 고정됩니다.
심볼에 어떻게 적용되는지 보고 싶다면, 스케치에서 제공하는 iOS UI Design template을 열어 심볼 레이어의 크기를 조절해보세요. 메뉴에서 File> New From Template > iOS UI Design 에서 확인할 수 있습니다.
