[번역] 내보내기
스케치 사용자 매뉴얼 Sketch User Manual
스케치 공식 홈페이지의 매뉴얼만으로도 처음 시작할 때 큰 도움이 될 것입니다.
비공식 번역으로 자세한 내용은 원문을 참고하시기 바랍니다.
원문: https://www.sketchapp.com/docs/
내보내기
스케치에서 아이콘, 모바일 앱, 웹 사이트나 다른 어떤 것을 디자인할 때도 작업물의 일부 혹은 전부를 내보낼 수 있습니다! 스케치를 사용하면 내보내려는 항목을 정하고 간단하게 원하는 대로 내보낼 수 있습니다.
팀원에게 작업물을 공유하려면 메뉴에서 Share > Export... 를 선택하거나(Shift-Command-E) 툴바에서 내보내기 항목을 클릭하세요. 스케치 캔버스는 영역이 무한해 내보낼 부분을 따로 정해줘야 합니다.
내보내기를 클릭하면 스케치가 아트 보드, 슬라이스 또는 일반 레이어 등 캔버스의 내보낼 수 있는 모든 레이어를 나열하는 대화 상자를 표시합니다. 목록에서 선택하거나 선택 취소하여 내보낼 항목을 선택할 수 있습니다.
아래 비디오에서 Slice와 Exportable Layers의 차이점과 스케치에서 내보내기에 대해 확인할 수 있습니다.
내보낼 수 있게 만들기
스케치에서 레이어, 그룹 또는 아트보드를 Exportable Layers로 표시하려면, 해당 항목이 선택되어 있는지 확인하고 Inspector 아래쪽에 있는 "Exportable" 버튼을 클릭하세요.
레이어가 'Exportable'으로 설정되면 버튼에 새로운 뷰가 나타납니다. 내보내기 설정을 조정할 수 있는 뷰로 여기서 설정한 항목이 레이어를 내보낼 때 적용됩니다.
"Export" 제목 오른쪽의 + 버튼을 클릭하면 다른 크기로 내보내는 설정이 추가됩니다. 이전에 했던 설정이 기본값으로 설정되며 설정을 수정하거나 추가한 대로 이미지를 내보냅니다.
Preference 아이콘을 사용하면 미리 정해놓은 여러 사전 설정을 쉽게 불러올 수 있습니다. 팝업 메뉴에서 기존의 사전 설정을 만들고 편집할 수 있는 옵션도 여기에서 찾을 수 있습니다. 내보내기 사전 설정에 대한 자세한 내용은 사전 설정 내보네기을 참조하세요.
내보내기 설정
내보내기 설정은 모든 레이어나 슬라이스에 적용되며 캔버스에서 따로 지정하지 않아도 다양한 크기와 파일 형태로 내보낼 수 있습니다. 세 가지 주요 컨트롤인 크기, 접두사/접미사, 포맷이 표시됩니다.
크기
값을 입력하거나 팝업 메뉴에서 값을 선택하여 내보낼 크기 또는 배율을 정의할 수 있습니다.
기본 크기는 '1x'입니다. 이 설정으로는 만들어진 레이어의 실제 크기로 레이어를 내보냅니다. 모바일 용으로 디자인하는 경우 원본의 2배 크기가 필요할 때 '2x'로 내보낼 수 있습니다. 최대 비율 제한이 없으며 '0.5x'와 같이 축소할 수도 있습니다. Android 기기를 위해 디자인한 경우 맞춤 크기로 내보낼 수 있습니다.
배율을 곱하는 것 외에도 특정 너비 또는 높이로 내보낼 수 있습니다. 예를 들어 원래 크기에서 128 픽셀 너비로 레이어를 내보내려면 '128w'를 입력하면 됩니다. '128h'로 작성할 경우 128px 높이로 내보냅니다.
픽셀 밀도에 대해 알아야 할 모든 것을 배우려면 Peter Nowell의 Pixel Density, Demystified를 확인하세요.
접두어/접미사
내보낼 크기 조절과 함께 적용됩니다. 내보내기 배율이 두 개 이상일 경우 파일의 이름 앞이나 뒷부분에 하나 이상의 접두사 또는 접미사를 추가해야 합니다.
텍스트 필드의 인디케이터를 클릭하고 팝업 메뉴를 통해 옵션을 선택하여 접두사/접미사를 적용할지 여부를 선택할 수 있습니다. 필드의 줄임표 (...)는 레이어 이름을 나타냅니다. 앞부분에 표시된 것이 접두어이며 끝부분에 파일 포맷 앞에 붙는 접미어가 나타납니다.
일반적으로 '2x'스케일로 내 보낸 객체는 "@2x"의 접미사를 갖습니다. 이는 OS를 설계할 때 Apple이 요구하는 이름 지정 규칙이기 때문입니다. 그러나 Android 용으로 디자인하는 경우 '2x'는 'xhdpi/'라는 접두어로 표시됩니다.
포맷
format 버튼을 사용하여 팝업 메뉴를 통해 내보낼 파일 포맷을 선택할 수 있습니다. 파일 포맷은 아래 섹션에서 더 자세히 알아볼 수 있습니다.
내보낼 수 있는 레이어나 슬라이스
레이어 내보내기는 Canvas의 다른 요소에 상관없이 해당 레이어만 내보냅니다. 해당 레이어의 위/아래에 다른 레이어가 있어도 내보내기에 포함되지 않습니다.
Make Exportable로 대부분의 상황에 대응할 수 있지만 완벽하진 않습니다. 이때 슬라이스가 필요합니다.
Exportable Layer에서 바로 슬라이스를 만들 수 있습니다. "Export" 타이틀의 슬라이스 버튼을 클릭하면 설정이 포함된 오브젝트 주위에 새로운 슬라이스 레이어가 만들어집니다.
레이어가 슬라이스 되었거나 내보내기가 가능한지 여부에 관계없이 Command-E 바로 가기를 통해 빠르게 내보낼 수 있습니다.
레이어 리스트
Exportable Layer는 레이어 리스트에 작은 슬라이스 아이콘이 표시됩니다.
따로 작업하지 않아도 레이어 리스트에서 바로 레이어를 직접 내보낼 수 있습니다. 애플리케이션의 레이어 리스트에서 레이어를 클릭하고 드래그하면 PNG로 빠르게 내보냅니다. Option 키를 누르고 있으면 PDF로 내보내 집니다.
공유하기
개체를 내보내려면 "Export..."버튼을 클릭하여 로컬 컴퓨터의 위치에 빠르게 저장하거나 공유 버튼을 클릭하여 메일 첨부, 트윗, Airdrop 등에 공유할 수 있습니다.
슬라이스
캔버스에서 이미지를 내보내는 방법 중 하나입니다.
슬라이스는 일반 레이어와는 다른 개념으로 다른 레이어와 함께 선택, 크기 조정, 이동 및 그룹화할 수 있습니다. 슬라이스를 따로 숨길 수 있으며 레이어 리스트의 맨 아래에 있는 슬라이스 버튼을 토글 하여 문서 내에서 모든 슬라이스를 숨기거나 표시할 수 있습니다.
슬라이스 추가하기
슬라이스를 만들려면 팝업 메뉴에서 Insert > Slice를 선택하세요 (또는 S를 누르세요). 툴을 선택하고 캔버스의 아무 곳이나 클릭-드래그하여 영역을 정의하세요. 슬라이스 도구가 활성화됐을 때 레이어를 클릭하면 자동으로 새로운 슬라이스가 레이어 크기만큼 만들어집니다.
레이어 리스트에서 다른 레이어와 함께 슬라이스의 이름을 지정할 수 있습니다. 선택된 레이어로 Command-R을 누르기만 하면 됩니다. 슬라이스를 내보낼 때 만들어지는 파일 이름이 되기 때문에 적절한 이름을 지정하는 것이 중요합니다.
노트 : 레이어 이름에 슬래시 (/)를 포함하면 해당 슬라이스가 새 폴더에 배치됩니다. 예를 들어, 슬라이스 foo / bar.png의 이름을 지정하면 먼저 foo라는 폴더에 bar.png라는 이미지가 만들어집니다.
여러 크기
슬라이스를 선택하면 Inspector 하단에서 내보내기 설정을 변경할 수 있습니다. 하나의 슬라이스를 크기, 포맷이 다른 여러 이미지로 내보낼 수 있습니다. 새 축척을 포함하려면 + 버튼을 클릭합니다.
Make Exportable처럼 기본 프리셋 설정이 적용된 슬라이스가 표시됩니다. 이 기능에 대해 자세히 알아보려면 위의 Make Exportable 섹션을 읽으세요.
투명한 픽셀 자르기
Inspector의 이 옵션은 이미지에서 불필요한 '텅 빈' 픽셀을 자동으로 제거하는 데 사용됩니다. Transparent Pixels (투명 픽셀 다듬기) 체크박스를 선택하면 아래에서 내보낼 이미지를 미리 볼 수 있습니다.
투명도는 흰색과 회색 바둑판으로 표시되며, 이미지보다 슬라이스가 클 경우 이 패턴이 이미지 주변에 표시됩니다. Trim를 선택하면 내보내기의 높이와 너비가 이미지의 크기에 맞게 변경됩니다. 내보내기 미리보기는 내보낸 이미지의 모양을 정확하게 보여줍니다. 스케치 창 바깥으로 이미지를 클릭 앤 드래그하여 내보낼 수도 있습니다.
그룹 내용만 내보내기
슬라이스가 그룹에 있으면 Export Group Contents Only 체크박스가 활성화됩니다. 선택하면 설명한 대로 작동합니다. 슬라이스는 해당 그룹 내의 콘텐츠만 내보내므로 캔버스에서 위/아래의 모든 콘텐츠가 제외됩니다. 이 기능은 배경 레이어에서 아이콘을 분리하지 않고도 디자인에서 아이콘을 내보내는 데 적합합니다.
배경색
Background Color 체크박스를 선택하면 슬라이스에서 투명도가 제거되고 선택한 색상으로 바뀝니다. 투명도를 지원하지 않는 JPG와 같은 파일 포맷으로 내보낼 때 이상적입니다.
파일 포맷
이미지를 스케치에서 비트 맵 및 벡터 파일 포맷을 비롯한 다양한 파일 포맷으로 내보낼 수 있습니다. 어디에 쓰이냐에 따라 장점이 있습니다.
스케치 문서는 자체 스케치 파일 포맷(. sketch)으로 저장되며 스케치 앱에서만 열 수 있습니다. 여러 프로그램에서 볼 수 있는 있도록 특정 영역을 공유하려는 경우, 아래 파일 유형 중 하나로 내보내야 합니다.
비트맵
비트맵 (또는 래스터) 이미지는 그리드에 기반한 픽셀로 구성되며 광범위하게 지원해 가장 일반적인 이미지 유형입니다. 이것들은 스케치와 같은 앱에서 열 때 'Flattend'를 의미하며 하나의 레이어로 표시됩니다.
PNG : 고품질 이미지를 출력하고 투명도를 지원합니다.
JPG : 큰 이미지 및 사진과 관련된 일반적인 파일 포맷입니다. 저장 시 품질을 조정할 수 있지만 투명한 픽셀은 지원하지 않습니다.
TIFF : 여러 가지면에서 PNG와 비슷하지만 일부 운영 체제에서 사용됩니다. 이러한 이미지는 압축되지 않으므로 파일 크기가 커지는 경향이 있습니다.
WebP : 웹상의 이미지를 작고 풍부하게 만들어주는 새로운 이미지 포맷. 투명도가 지원되며 파일 크기는 PNG보다 3 배 작을 수 있습니다.
비트맵 포맷으로 이미지를 내보내면 더 자세하게 내보내기 옵션을 설정할 수 있는 창이 뜹니다. 이 옵션을 조절해 퀄리티는 떨어지지만 파일 크기를 줄일 수 있습니다.
Save for web: 색상 프로필, EXIF 메타데이터와 같이 이미지에 포함되는 정보들을 제거해줍니다.
Interlace PNG: 웹에서 사용하면 인터레이스 이미지가 전체 크기가 아닌 정해진 크기만큼만 최대한 빨리 로드합니다.
Progressive JPG: 인터레이스 PNG와 비슷하지만 원본 크기대로 표시되며 낮은 퀄리티로 표시되었다가 로드될 때마다 흐린 이미지가 또렷한 이미지가 됩니다.
Quality: JPG와 Webp에서 볼 수 있으며 이미지의 퀄리티를 조절해 파일 크기를 줄입니다. 다만 이것은 이미지의 인상에 큰 영향을 끼칩니다.
벡터
벡터 이미지는 오랫동안 존재했지만 화면 해상도의 수에 따라 웹, 모바일 디자인에서 보다 일반적으로 사용되고 있습니다. 레이어와 패스는 깨지지 않고 품질을 유지하면서 자유롭게 편집하고 크기를 조절할 수 있습니다.
SVG : 코드로 이미지를 생성할 때 웹에서 가장 일반적으로 사용되는 포맷인 "Scalable Vector Graphic"의 약자입니다. 스케치에서 직접 복사할 수 있는 코드입니다.
PDF : 일반적으로 문서와 관련된 가장 일반적인 유형의 벡터 포맷입니다. 애플리케이션에서는 이제 에셋과 간단한 아이콘을 PDF 이미지를 사용하는 경향이 있습니다.
EPS : 일반적으로 일부 추가 기능을 포함하는 인쇄 디자인에 사용되지만 주로 PDF로 대체된 파일 포맷입니다.
참고 : 스케치에서 적용할 수 있는 일부 효과는 일부 벡터 파일 포맷에서는 지원하지 않습니다. (PDF의 투명 그라디언트나 SVG의 내부 및 외부 테두리 등)
아트보드 내보내기
스케치 아트보드는 따로 슬라이스 레이어를 추가할 필요 없이 내보낼 수 있습니다. "Exportable"을 클릭하고 내보내기를 설정하면 내보내기 창이 뜹니다.
아트보드 내보내기는 디자인을 공유할 때 특히 유용합니다. 개발자와 동료는 최종 제품이 어떻게 구현될지 확인할 수 있습니다. 아트보드를 다른 레이어와 함께 개별로 내보내는 것 외에도 모든 아트보드를 하나의 PDF 파일로 내보낼 수 있어 디자인을 프레젠테이션할 때 이상적입니다. 이렇게 하려면 메뉴에서 Share > Export Artboards to PDF... 를 선택하세요. 아트보드 내보내기 기본 설정을 변경해 아트보드가 표시되는 순서를 정할 수 있습니다.
코드 내보내기
일부 디자인을 코드로 내보낼 수 있습니다. CSS, SVG. 웹 디자이너에게 이상적입니다.
CSS 속성
캔버스에서 원하는 수만큼 요소를 선택하면 Control 키를 누른 채로 바로 가기 메뉴에서 Copy CSS Attributes를 선택하세요. 채우기 (그라디언트 포함), 테두리, 그림자, 모서리 반경 및 전체 텍스트 스타일과 같이 레이어에 있을 수 있는 스타일 정보가 포함된 코드를 클립 보드로 직접 복사합니다. 다음은 간단한 모양의 출력입니다.
/* Rectangle: */ background: #6 DD400; border-radius: 5px;
SVG 코드
마찬가지로 SVG 코드 내보내기도 같은 방식으로 작동합니다. 레이어를 Control- 클릭(우클릭)하고 바로 가기 메뉴에서 SVG 코드 복사를 선택하세요. 이렇게 하면 전체 코드가 복사되며 텍스트 편집기로 열 필요 없이 시간을 절약할 수 있습니다.
인쇄
스케치의 아트보드와 슬라이 스을 인쇄 할 수도 있습니다. 메뉴에서 File > Print를 선택하면 아트보드 목록이 표시됩니다. 슬라이스를 인쇄할 수도 있습니다.
표시된 것 중 하나를 클릭하면 인쇄 설정을 구성할 수 있는 시스템의 창이 뜹니다.
참고 : A4, A5 및 A6 용지 크기의 아트 보드 사전 설정이 있습니다.
