[번역] 캔버스
스케치 사용자 매뉴얼 Sketch User Manual
스케치 공식 홈페이지의 매뉴얼만으로도 처음 시작할 때 큰 도움이 될 것입니다.
비공식 번역으로 자세한 내용은 원문을 참고하시기 바랍니다.
원문: https://www.sketchapp.com/docs/
캔버스
스케치 캔버스 크기는 무한합니다. 해상도와 상관없이 정밀하게 볼 수 있으며 Pixel Preview로 작업물의 실제 픽셀이 어떻게 표시될지 정확히 알 수 있습니다.
캔버스 내부에서 고정된 작업 영역을 정하려면 아트보드 툴로 아트보드를 만듭니다.
탐색하기
손쉽게 캔버스를 탐색할 수 있습니다. 마우스나 트랙 패드의 스크롤 휠을 사용하여 어느 방향으로나 스크롤할 수 있습니다. 스페이스 바를 누른 상태로 클릭-드래그해 둘러볼 수도 있습니다. 또한 아무 오브젝트도 선택하지 않았을 때 화살표 키로 캔버스를 탐색할 수 있습니다.
확대/축소
디자인할 때 문서를 확대/축소해 디테일과 전체적인 인상을 번갈아 확인하는 것이 중요하기 때문에 스케치에서는 다양한 방법으로 확대/축소할 수 있습니다.
툴바의 확대/축소 항목 옆에 있는 + - 버튼을 눌러 간단하게 확대/축소할 수 있습니다. 확대할 때마다 확대율이 곱해지고 축소할 때는 나눠집니다. 최대 확대율은 256,000%이며 최소 축소율은 1%입니다.
돋보기 아이콘을 클릭하거나 키보드의 Z 키를 눌러 도구를 활성화할 수도 있습니다. 돋보기 툴을 선택한 뒤 클릭하여 확대하거나 Option 키를 누른 상태에서 클릭하여 축소하세요. 확대/축소 도구를 선택해 캔버스의 아무 곳을 클릭-드래그해 해당 영역을 확대/축소할 수 있습니다.
Command 키를 누르면서 마우스를 스크롤해 확대/축소할 수도 있습니다.
다음은 확대/축소 도구의 몇 가지 편리한 단축키입니다.
⌘ + 확대
⌘ - 축소
⌘ 0 100 %로 확대
⌘ 1 캔버스의 모든 요소 확대 / 축소
⌘ 2 선택한 레이어로 확대 / 축소합니다.
⌘ 3 캔버스에서 선택한 레이어 중앙 정렬
레이어 가시성
레이어 가리기/보기를 하려면 개별로 조절해야 하지만, Slices와 Prototyping overlays는 한 번에 모두 가리거나 보이게 할 수 있습니다.
이 레이어들은 캔버스에 오버레이 되지만 그리드나 가이드처럼 토글 할 수 있으며 디자인에 포함되지 않습니다. 캔버스에 사용한 모든 Slices나 Hotspot를 가려 방해 없이 디자인을 확인할 수 있습니다.
View 메뉴나 툴바에서 Show Slices 나 Show Prototyping을 선택해 토글 할 수 있습니다. 또한 Control-E와 Control-F를 사용할 수도 있습니다.
픽셀 확대/축소
처리하는 업무의 성격에 맞춰 벡터, 픽셀 두 가지 모드로 디자인을 확인할 수 있습니다.
언제든지 모드를 전환할 수 있습니다. 메뉴에서 View > Canvas > Zoom에 Show Pixles를 선택하거나 Ctrl-P를 누릅니다. 또한 툴바를 커스터마이징해 Show Pixels 툴을 표시할 수 있습니다.
노트 : Show Pixels를 사용하는 경우 효과를 확인하려면 100% 확대해야 합니다.
Pixel Zoom은 작업물을 미리 확인하는 좋은 방법입니다. 픽셀이 정확하게 표시되는지 확인하면서 아이콘을 만들 때 이상적입니다.
픽셀 그리드 보기
Pixel Grid를 사용해 캔버스에서 확인하기 어려운 낮은 콘트라스트로 흐린 Pixel을 개별적으로 구분할 수 있습니다. Pixel Grid를 활성화하려면, View> Canvas> Show Pixel Grid on Zoom를 선택하세요. (또는 Control-X를 누르세요. Show Pixels이 활성화되면 600% 이상을 확대했을 때 픽셀 그리드에 정렬되지 않는 부분이 표시됩니다.
눈금자, 가이드 및 그리드
레이어 간의 거리를 측정하고 특정 그리드 또는 레이아웃에 정렬해 정확히 원하는 곳에 레이어를 배치하기 위한 기능입니다.
노트 : 눈금자, 가이드 및 그리드는 디자인의 일부가 아니며 Export 한 이미지에 표시되지 않습니다. 캔버스에 오버레이로만 나타납니다.
눈금자
캔버스에서 좌표를 확인할 수 있는 눈금자를 표시할 수 있습니다. 기본적으로 눈금자는 숨겨져 있지만 메뉴에서 사용할 수 있습니다. View> Canvas> Show Ruler를 선택하거나 Ctrl + R을 누릅니다.
무한한 캔버스 크기 때문에 눈금자는 고정되어 있지 않습니다. 눈금자를 클릭하고 드래그하여 기준점을 정의할 수 있습니다. 눈금자 기준점을 재설정해야 하는 경우 눈금자 교차 영역을 두 번 클릭하면 됩니다.
가이드
눈금자의 아무 곳이나 클릭하여 가이드를 추가할 수 있으며 눈금자가 활성화되면 표시됩니다. 가이드가 추가되면 캔버스의 가이드 가까이로 이동하는 모든 레이어가 해당 가이드에 '스냅'됩니다.
눈금자 안의 가이드를 클릭-드래그해 가이드의 위치를 변경할 수 있습니다. 단일 가이드를 제거 하려면 포인터가 삭제 아이콘으로 바뀔 때까지 레이어 리스트나 Inspector로 이동하십시오.
눈금자를 클릭-드래그해 모든 가이드를 한 번에 이동할 수 있으며, 눈금자를 Control- 클릭한 뒤 바로 가기 메뉴(우클릭)에서 모든 수평 또는 수직 가이드 (눈금자에 따라 다름)을 제거할 수도 있습니다.
직접 이동하지 않는 한 가이드는 고정되어 있습니다. 이와 달리 비슷한 종류인 스마트 가이드는 레이어를 다른 레이어 근처로 이동하면 표시됩니다.
그리드
웹, 모바일 애플리케이션 또는 아이콘을 디자인할 때 그리드를 사용해 크기와 위치의 일관성을 유지하면서 정밀하게 디자인할 수 있습니다. 스케치는 일반(정사각형) 그리드 및 레이아웃 그리드 2가지 종류의 그리드를 지원합니다. 스케치에서 수행할 작업의 종류에 따라 2가지를 모두 사용할 수 있지만 둘 중 하나를 사용하는 것이 좋습니다.
일반 그리드
일반 그리드는 사각형 그리드로 블록의 크기를 조정하는 설정, 두꺼운 선이 나타나는 빈도를 결정하는 설정, 두 옵션의 색상을 변경하는 기능이 있습니다.
메뉴에서 View> Canvs> Show Grid를 선택하거나 Control-G를 눌러 그리드를 활성화하세요. 그리드를 편집하려면 View> Canvas> Grid Setting... 을 선택합니다.
레이아웃 그리드
레이아웃 그리드를 사용하면 Column과 Row를 정할 수 있으며 웹 디자인에 이상적입니다.
레이아웃 그리드를 사용하면 Column과 Row를 적절한 형태로 표시할 수 있습니다. 메뉴에서 Show> Canvas> Layout Settings... 을 선택하여 옵션을 표시하세요.
Column 옵션을 사용하면 Column 너비와 Gutter 너비, Column 수 및 간격 띄우기가 있어야 하는지 여부와 총너비를 조정할 수 있습니다.
Row 옵션을 사용하면 Gutter의 높이와 Gutter의 높이에 따른 Row의 높이의 변화를 조정할 수 있습니다. Visual Setting에서 Column과 Row이 표시되는 방식을 조정할 수 있습니다.
그리드는 아트보드에만 적용할 수 있으며, 아트보드가 설정되지 않은 경우 페이지에 적용할 수 있습니다. 여러 아트보드의 레이아웃 또는 그리드를 동시에 편집할 수 있습니다.
참고 : 그리드를 사용하면 모든 오브젝트가 이동할 때 그리드에 스냅 되고 옵션을 활성화한 경우 스마트 가이드에 스냅 하는 것을 무시합니다.
그리드 만들기
레이어를 같은 간격으로 정렬하려면 Make Grid 도구를 사용할 수 있습니다. 메뉴에서 Arrange > MAke Grid... 를 선택하십시오. 그리드의 Row과 Column 수를 지정하여 오브젝트를 정렬할 수 있을 뿐만 아니라 내부 간격이나 레이어 사이의 간격을 조정할 수 있습니다.
Row 수 × Column 수가 선택한 레이어 수보다 크면 스케치가 자동으로 마지막 레이어를 복제하여 그리드를 채 웁니다.
측정
스마트 가이드는 스케치에서 가장 인기 있는 기능 중 하나이며 콘텐츠를 올바르게 정렬하는데 이상적입니다. 이 기능은 디자이너부터 스케치 문서를 받아 정확한 픽셀을 구현해야 하는 개발자에게 축복과도 같습니다.
거리
레이어를 선택하고 Option 키를 누른 상태에서 다른 레이어 위로 마우스를 가져가면, 두 레이어 사이의 거리가 표시됩니다. 다른 레이어에 대해 측정할 때 레이어 리스트 위로 마우스를 가져갈 수도 있습니다.
이때 Command 키를 길게 누르면 Canvas의 그룹 내부 레이어에 대해 측정할 수 있습니다. 뿐만 아니라 레이어를 이동할 때 레이어와 인접한 레이어 사이의 거리를 볼 수 있으며 오브젝트의 가장자리나 중앙에 스냅 하는 데 도움이 되는 가이드가 함께 표시됩니다.
Option 키를 누르면 텍스트의 테두리 상자를 기준으로 텍스트 레이어와의 거리가 측정됩니다. Option 키와 함께 Control 키를 누르면 하단의 텍스트 레이어의 기준선이나 대문자와의 거리를 더 정확하게 측정할 수 있습니다.
크기
레이어의 크기를 조정할 때 너비나 높이가 같은 레이어를 함께 표시해주어 도움이 됩니다.
기본적으로 스케치에서 스마트 가이드가 활성화됩니다. 메뉴를 끄려면 메뉴에서 View> Canvas> Show Smart Guides를 선택하거나 Command-드래그하여 무시하십시오.
