iOS 개발자에 대한 스케치 튜토리얼(Sketch Tutorial for iOS Developers)

[최종 수정일 : 2017.11.14]

원문 : https://www.raywenderlich.com/117609/sketch-indie-developers

iOS 개발자에 대한 스케치 튜토리얼(Sketch Tutorial for iOS Developers)

iOS 개발자로서, 디자이너 없이 몇가지 프로젝트를 진행했습니다 - 그것은 힘들 수 있습니다.

그러나 이러한 유형의 프로젝트를 통해 내가 배웠던 한가지는 다음과 같습니다: 디자이너 없이 작업하는 경우에도, 디자인이 중요합니다 - 특히 디자인을 반복합니다.

현실을 직시하여, 고객은 그들이 원하는 것을 정확히 알지 못합니다. 그것을 알기전에 Xcode를 사용하고 큰 실망감과 아름다운 코드가 버려지는 것으로 끝이 납니다.

더 안전한 방법은? 코드 대신에 디자인 모형(mockup)을 반복해서 사양을 먼저 지정합니다.

하지만 디자이너 없이 어떻게 디자인 할 수 있을까요? 글쎄요. 훌륭한 선택은 스케치(Sketch) 입니다.

스케치(Sketch)는 로고(logos)와 사용자정의 아이콘을 만들기에 훌륭한 도구(tool)입니다. 그것은 벡터 기반이며, 품질저하 없이 크기를 조절할 수 있습니다. iPhone 기기 크기의 아트보드(Artboards)와 내장된 UIKit 템플릿이 포함되어 있으므로, 여러분은 Sketch를 사용해서 디자인 반복에 대한 모형(mockups)을 만들 수 있습니다. 추가적으로 Sketch는 바쁜 개발자가 신속히 만들 수 있을만큼 간단합니다.

이 튜토리얼에서, 다음과 같은 방법을 배울 것입니다:

• UIKit 템플릿을 사용해서 모형(mockup)을 만듭니다.
• 벡터 도구를 사용해서 아이콘을 만듭니다.
• 기본 도형을 결합해서 아이콘을 만듭니다.
• Xcode에 대한 이미지 assets 내보내기.

그리고 무엇보다도, 여러분이 나 같은 개발자 일지라도 여러분들은 가능할 것입니다. 여러분의 디자인 스킬을 향상시킬 준비하세요.

시작하기(Getting Started)

제일 먼저 스케치가 필요합니다. www.sketchapp.com에서 14일 평가판을 다운로드 하세요. 라이센스 활성화 비용은 99 달러($)입니다.

Sketch가 설치되면, Sketch를 열고, 앉아서 긴장을 풀고 멋진 여행을 준비하세요!

다음 섹션에서, Sketch에서 다양한 UI 요소에 대한 둘러보고 다양한 항목들을 만들도록 하겠습니다. 여러분이 만드는 모든 것은 학습 목적인 것임을 유의합니다: 여러분이 그것을 만든 후에, 튜토리얼 후에 필요하지 않으므로 안전하게 삭제할 수 있습니다.

여행을 시작합시다!

템플릿(Templates)

iOS UI Design 템플릿은 벡터 형식의 UIKit 구성요소의 모음입니다. 그것은 탭바(Tab bar), 네비게이션 바(Nav bar), 테이블 뷰(Table view), 등이 있습니다. 이것을 모형(mockups)으로 만들기 위한 발판(springboard)으로 사용할 수 있습니다.

이것을 시도해 봅시다. File\New Form Template\iOS UI Design을 선택하고, 다음과 같이 보일 것입니다.

안드로이드 사용사를 위한 Material Design 옵션이 있습니다.

여러분은 다양한 iOS UI 구성요소가 있는 거대한 템플릿을 볼 수 있을 것입니다. 캔버스를 잡고 클릭하여 드래그하고 이동할 수 있고, 홀딩 커맨드(holding command)와 마우스 휠을 사용하여 확대/축소를 할 수 있습니다.

아트보드(Artboards)

Sketch의 무한한 캔버스에서 원하는 위치로 그릴수 있습니다. 하지만 여러 화면으로 앱을 조작한다면, 아트보드(Artboards)를 사용할 수 있습니다. Artboard는 고정된 프레임 안에 레이어를 구성합니다. Artboard를 내보낼때(export), 모든 레이어가 하나의 파일로 결합됩니다. Storyboard에서 View Controller 장면(Scene)으로 생각하세요.

이것을 시도해 봅시다. 새로운 Artboard를 만들기 위해 다음 단계를 수행합니다.

• 공간(space)를 잡고 화면에 캔버스의 명확한 영역이 나타날때까지 드래그 합니다.
• Insert 버튼을 클릭하고 목록에서 Artboard를 선택합니다.
• 오른쪽 창(pane)에서, iPhone 6를 선택합니다.

주의: 이 글에 있는 이미지와 다른 이미지들은 이전 버젼의 iOS UI 템플릿에서 가져온 것입니다. UI 요소의 위치가 다른 지점에 있을수 있지만, 이 튜토리얼의 지침이 게속 적용됩니다.

여러분은 세로(portrait) 모드에서 iPhone 6라는 빈 Artboard가 보일 것입니다. 기본적으로, 새로만든 Artboard는 중첩된 모든 막연한 요소들로 감싸질 것입니다. 여러본이 의도한게 아니라면, 먼저 캔버스의 투명한 영역으로 이동합니다.

여러분이 원하는 만큼 많은 Artboards를 추가할 수 있습니다. Sketch에는 iPhone, Apple Watch, 심지어는 iPad Pro에 대한 크기가 있습니다. Artboard를 제거해야 하는 경우에, 제목(title)을 클릭하고 삭제(delete)를 누르세요.

주의: 임의의 크기의 Artboard가 필요한 경우, 여러분은 단순히 Insert\Artboard로 가서 여러분의 캔버스에서 임의의 크기로 상자(box)를 드래그 하세요.

복사와 붙여넣기(Copy and Paste)

이제 여러분은 Artboar를 가지고 있으며, UIKit 템플릿에서 몇가지 항목을 드래그합니다. 네비게이션 바(Navigation Bar), 탭 바(Tab Bar), 테이블 뷰(Table View)셀로 시작합니다.

Sketch에서 복사와 붙여넣기(⌘C와 ⌘V)를 할 수 있지만 붙여 넣은 항목이 어디에서 끝날지 예측하기 어렵습니다. 대신에 항목을 Option-Drag하고 여러분의 복사본은 항상 여러분이 마우스를 놓은 곳에서 끝납니다.

중요한 팁: 키보드 단축키 ⌘D는 이전 작업을 복제합니다. ⌘D로 Option-Drag하는 것은 여러개의 복사본을 만드는데 유용한 콤보(combo)입니다. 
* Option-Drag로 테이블 뷰 셀을 직접 드래그 합니다.
* ⌘D를 사용해서 나머지 셀을 만듭니다. 

기본 도형(Basic Shapes)

먼저, Insert\Artboard를 클릭하여 작업할 새 artboard를 만들고 캔버스의 어딘가에 사각형을 그립니다.

이제, 어떤 도형을 만들어 봅시다. 사용가능한 옵션 메뉴를 보려면 Insert\Shape를 클릭합니다.

실제로, 키보드 단축키를 사용하는 것이 훨씬 쉽습니다. O글자를 입력하여 타원(oval)을 만들고 화면에서 마우스를 드래그합니다. R도 똑같이 입력하고 직사각형(rectangle)을 만들것입니다. 가장 일반적인 모양에는 키보드 단축키를 가지고 있습니다.

• L: 선(Line)
• O: 타원(Oval)
• T: 텍스트(Text)
• R: 직사각형(Ractangle)

이 로봇을 만들기 위해 배운것을 사용할수 있는지 보세요.(이와 똑같이 보이도록 만들기 위해 폰트 설정을 변경해야 할 수도 있다는 것을 주의합니다)

주의: 비례한(proportional) 모양의 사각형과 원을 만들기 위해 드래그 할때 Shift를 누릅니다.

도형 스타일 지정하기(Styling a Shape)

도형은 모두 좋고 훌륭하지만, 그 도형이 예쁘지 않으면 고객은 감동하지 않습니다! 오른쪽에 있는 Inspector을 사용해서 레이어의 속성, 색상과 경계 반지름을 변경할 수 있습니다. Xcode에서 Attributes Inspector과 같다고 생각하세요.

이 튜토리얼에서 사용할 몇가지 옵션은 다음과 같습니다.

• 위치/크기(Position/Size): 마우스를 사용하여 정확한 지점으로 드래그하기 어려울때, 정확한 숫자를 입력합니다. 아이콘을 비례한(proportional) 상태로 유지하려면 자물쇠 아이콘을 클릭합니다. 
• 반지름(Radius): 직사각형의 모서리 반경을 조정하기 위한 슬라이더입니다.
• 불투명도(Opacity): 이미지를 추적하는데 용이합니다. 나중에 자세히 봅니다.
• 채우기(Fills): 색상 선택기(color picker)를 사용하여 레이어의 채우기 색상을 변경하거나 투명한 채우기에 대한 박스를 선택해제(uncheck) 할 수 있습니다. 
• 테두리(Boarders): 테두리의 두께와 색상을 설정하거나, 완전히 비활성화 합니다.

중요한 팁: Sketch는 Control-C를 사용해서 내장된 색상 추출기(dropper)를 활성화 할수 있습니다. Sketch 윈도우의 외부에서 작동할 뿐아니라, 현재 선택된 모양의 색상을 자동으로 설정할 것입니다.

이 튜토리얼에서 두 아이콘은 알약 모양(pill shape)으로 만듭니다. 직사각형을 스타일링해서 직접 만들어 보세요:

• R 단축 키워드를 사용해서 직사각형을 만듭니다.
• 반지름(Radius)을 100같은 큰 값으로 설정하여 모서리를 둥글게 합니다.

여러분은 위에서 언급한 다른 설정 중 일부를 변경해 볼 수 있습니다.

레이어 목록(Layer List)

왼쪽 창(pane)에 있는 레이어 목록(Layer List)에는 파일에 있는 모든 레이어가 포함됩니다. 목록에서 위쪽에 나타나는 레이어는 아래 레이어와 겹칩(overlap)니다. 스토리보드(Storyboard)에 있는 뷰 계층도(View Hierarchy)로 생각하세요.

Groups은 논리적으로 레이어를 구성합니다. 여러개의 레이어들을 함께 그룹화되어 있다면 하나의 단위로 이동할 수 있습니다. 레이어의 그룹을 하나의 이미지로 내보낼(export) 수도 있습니다. 레이어 목록에서, 그룹은 폴더 아이콘으로 표시됩니다.

레이어 목록을 관리하기 위해 일반적인 바로가기 목록은 다음과 같습니다:

• ⌘G: 여러개의 도형을 함께 그룹화합니다. 그룹화 해제는 ⌘-Shift-G를 사용합니다.
• ⌘R: 선택된 항목의 이름을 변경합니다.
• ⌘-Option-Up/Down: 레이어 목록에 있는 항목을 위/아래로 이동합니다.
• ⌘-Shift-L: 레이어를 고정하여 클릭하지 못하도록(unclickable) 합니다. 이것은 다음 섹션(section)에서 유용합니다.

중요한 팁: 탭 바(Tab Bar)처럼 레이어를 의미있는 이름으로 바꾸는 것이 좋습니다. 그것이 다른 레이어 아래에 묻힐때, 레이어 목록에서 쉽게 찾을 수 있습니다. 그리고 나서 여러분은 맨 앞으로 가져가기 위해 ⌘-Option-Up을 사용할 수 있습니다. 무의식적으로 결합할수 있기 때문에 레이어 재정렬을 하기 위해 드래그 앤 드롭을 사용하지 마세요. 저를 믿으세요. 그렇게 될것입니다.

iPhone 모형(mockup)에 추가된 일부 레이어를 그룹화하고 기술적인 이름을 지정하세요.

벡터 도구(Vector Tool)

원, 사각형과 선 그리는 것은 재미있지만, 꽤 제한적입니다. 하지만 벡터 도구(Vector Tool)를 사용하면, 여러분이 원하는 모양을 만들 수 있습니다.

직선이 있는 모양(Shapes With Straight Lines)

여러분은 클릭만으로 어한 다각형도 만들수 있습니다: 클릭한 위치가 도형의 모서리가 됩니다.

다각형을 만들어 봅시다:

1. 벡터 도구를 활성화 하기 위해 V를 입력합니다.
2. 사다리꼴(trapezoid)의 모서리를 클릭하세요.
3. 시작점을 클릭해서 도형을 닫습니다.
4. Edit 버튼을 클릭하고, 개개의 벡터 포인터를 드래그해서 위치를 바꿀수 있습니다.
5. 채우기(Fill) 색상을 추가합니다.
6. 테두리(Border)를 제거합니다.

고맙게도, Sketch는 각각의 벡터 포인터를 재배치 할 수 있으며, 벡터 도구를 사용하기 위해 뛰어난 그리기 기술이 필요하지 않습니다. 드래그 할때 빨간색 가이드라인으로 마우스를 이동합니다.

회전 복사하기(Rotate Copies)**

단순한 사다리꼴은 대단해 보이지 않지만, 회전 복사하기(Rotate Copies)를 사용해서 다른 모양을 만드는데 사용할 수 있습니다. 회전 복사하기(Rotate Copies)는 꽃잎처럼, 원에서 바깥쪽으로 여러개의 모양을 복사합니다. 시도해 봅시다:

1. Layer\Paths\Rotate Copies를 선택합니다.
2. 3 복사를 입력합니다(원래 모양을 세어보면, 총 4개로 끝납니다).
3. 은행 로고, 표창(shuriken), 바람개비(pinwheel)과 같은 아이콘을 만들기 위해, 원의 중심을 나타내는 흰색 점을 드래그(Drag)합니다.

Sketch는 회전된 복사본을 자동으로 하나의 모양으로 결합합니다. 이 튜토리얼에서는 다음 섹션에서 모양 조합에 대해 다룰것입니다.

가위(Scissors)

회전 복사하기(Rotate Copies) 바로 위에 가위(Scissors)라는 메뉴 옵션이 있습니다. 가위 도구를 사용해서 Watchkit 활동 고리를 만들수 있는 깔끔한 비결(neat trick)이 있습니다.

1. 원을 만듭니다(기억하세요, O키를 사용하고 Shift키를 누른 상태에서 클릭해서 원을 드래그 합니다.
2. 채우기(Fill)을 제거합니다.
3. 테두리(Border) 두께를 25로 늘립니다.
4. Layer\Paths\Scissors를 선택합니다.
5. 왼쪽 상단 부분을 클릭해서 원을 자르기(Snip) 합니다.
6. 테두리(Border) 옆에 있는, 기어(Gear)를 클릭하면 팝업 메뉴가 나타납니다.
7. 둥근 끝(rounded ends) 옵션을 선택합니다.

원은 실제 4개의 점으로 구성된 벡터 경로이고, 벡터 경로는 원의 호(arc)처럼 열려 있을 수 있습니다.

중요한 팁: 여러분은 잘라내기(snip) 전에 원에 포인트를 추가해서 모든 길이의 고리(ring)를 만들 수 있습니다. 그렇게 하기 위해, Edit 버튼을 클릭하고 원의 경로를 따라 아무곳이나 단일 클릭(single-click)합니다.

모드와 핸들(Modes and Handles)

Sketch는 4개의 벡터 포인트를 사용해서 원을 표현합니다. 원을 그리고, 툴바에서 Edit를 클릭하면 이 사실을 알 수 있습니다.

하지만 잠깐만 기다리세요 - 직사각형에는 4개의 벡터 포인터가 있습니다. 무슨 일인가요? 이 둘의 차이점은 베지어 곡선(Bazier Curves)을 사용하는 것입니다.

베지어 곡선(Bazier Curves)는 제어 포인터(control points)를 사용해서 곡선으로 구부릴 수 있는 선입니다. Sketch는 이러한 제어 포인터를 핸들(handler)이라 부릅니다. 각 벡터 포인터는 양쪽의 굴곡(curvature)을 제어하는 두개의 핸들이 있습니다. 이 것은 선의 곡선이 각각의 끝에 있는 핸들로 결정된다는 것을 의미합니다. 이것은 소리처럼 복잡하지 않습니다: Sketch에서 곡선이 잘 보일때까지 핸들을 드래그하기만 하면 됩니다.

Sketch는 벡터 포인터의 상대 핸들 위치를 기준으로 4가지 다른 모드(Modes)를 정의합니다.

• 직진(Straight): 핸들은 존재하지 않는 것처럼, 벡터 포인터 안으로 들어갑니다. 핸들이 없다는 것은 굴곡(curvature)이 없다는 것을 의미합니다.
• 거울(Mirrored): 핸들은 비행기 날개처럼, 같은 길이와 직선을 이룹니다. 대칭적인 곡선을 만들때 사용합니다.
• 비대칭(asymmetric): 핸들이 직선을 이루지만, 길이가 다를수 있습니다.
• 분리된(Disconnected): 핸들은 서로 독립적으로 배치됩니다.

실제로, 곡선을 만드는 것은 매우 간단합니다. 단지 벡터 포인터에서 더블-클릭하고 Disconnected를 클릭합니다. 그런 다음에 곡선이 올바르게 보일때까지 TV 안테나의 토끼 귀처럼 각 핸들을 사용합니다.

모드와 핸들에 대한 자세한 내용은, 이 글의 훌륭한 자료를 참조하세요.

베지어 곡선 이론(Bezier Curve Theory)

벡터 도구를 사용하기위해 베지어 곡선 뒤에 있는 수학을 알 필요가 없습니다. - 확실하지 않지만 컴퓨터가 화면에 이런 것을 어떻게 그리는지 이해하는데 도움을 주는 비수학적인 비유를 가지고 있습니다.

야구에서 그랜드 슬램을 상상해보세요, 그러나 심판은 보이지 않고 주자가 코너를 자르고 있습니다. 빨간 경로를 주시하세요.

첫번째 베이스(first base)와 홈 플레이트(home plate)는 벡터 포인터를 나타냅니다. 두번째와 세번째는 핸들을 나타냅니다. 경로는 첫번째 베이스로 부터 홈 플레이트까지 베지어 곡선입니다.

다시 말하지만, 베지어 곡선을 사용하기 위해서 어떻게 동작하는지 이해할 필요가 없지만, 만약 이해하기 원하면, 컴퓨터가 어떻게 그리는지 시뮬레이트 하는 대화식 시각화 도구(visualization tool)가 있습니다.

동작에서의 벡터 처리(Vector handles In Action)

수학은 충분합니다. 지도 표시 아이콘을 만들기 위해 새로운 기술을 사용합시다.

1. 원을 만듭니다.
2. 테두리(Border)두께는 15로 증가시킵니다.
3. Edit버튼을 클릭하고 아래쪽 벡터 포인터를 선택합니다.
4. 거울(Mirrored)에서 직선(Straight) 모드로 변경합니다.
5. 아래쪽 포인터를 아래로 드래그해서 늘려줍니다.
6. 모서리를 둥글게하기 위해 모서리(Conrners) 슬라이더를 35까지 드래그 합니다.

지도 표시 모양은 실제로 꼭지점 중에 하나가 모서리인 원입니다. 쉽습니다! 이 튜토리얼에서 나중에 지도 표시 아이콘을 다시 살펴볼것입니다.

사용자정의 아이콘 만들기(Creating Custom Icons)

로고 아이디어가 떠올랐을때, 연필과 종이로 프로토타입을 작성하거나 온라인 이미지를 시작으로 사용하는 것이 가장 쉽습니다. 그런 다음 벡터 도구(Vector Tool)를 사용해서 그림을 따라 그릴수 있습니다.

이 예제에서, 여러분은 Ray Wenderlich 로고를 다시 만들것 입니다.

1. Ray Wenderlich 로고의 저해상도 버젼을 인터넷에서 바로 가져옵니다.
2. Sketch로 로고를 드래그 드랍합니다.
3. 이미지가 선택된 상태에서, Inspector를 사용해서 불투명도(Opacity)를 20%로 낮추면 따라하기 쉽습니다.
4. 실수로 드래그하지 않도록 Command-Shift-L을 사용해서 레이어를 잠급니다. 레이어 이름 옆에 자물쇠 아이콘이 표시되야 합니다.
5. 벡터 도구(Vector Tool)를 활성화하기 위해 V를 입력합니다.
6. 로고의 모든 모서리를 클립합니다. R의 곡선을 클릭할 필요는 없지만, 끝에 있는 첫번째 모서리를 다시 클릭해서 벡터 경로를 닫습니다.
7. 편집(Edit)할 경로를 따라 아무곳이나 더블 클릭합니다.
8. 마크(mark)를 벗어난 모든 포인터를 재배시합니다. 픽셀을 완벽하게 확대할 수 있습니다.

R의 곡선을 만들기 위해, 벡터 포인터 모드에 대한 모든 지식을 활용할 것입니다.

1. 왼쪽 상단 모서리를 더블 클릭(Double-click)하고, Straight가 Mirrored로 바뀌게 될것입니다.
2. 분리(Disconnected)를 위해 변경합니다.
3. 곡선 방향의 핸들을 오른쪽 방향으로 늘립니다.
4. 다른 핸들을 벡터 포인터를 넣습니다.
5. R 곡선의 다른 끝에 있는 벡터 포인터를 찾고 더블 클릭(double-click) 합니다.
6. 다시 Disconnected로 변경하고 핸들 주변으로 드래그합니다. 좋아질때까지 곡선의 두 포인터 사이의 앞 뒤로 전환해야 할 수도 있습니다. 

다행히도, RW 로고는 단일 곡선만 가지고 있습니다. 좀 더 복잡한 로고에도 이 방법을 사용할 수 있습니다 - 여러분은 더 많은 곡선을 다룰줄 알아야 합니다. 나중에 다운로드할 프로젝트에 스위프트 새 로고에 대한 시도가 포함되어 있습니다. 각 벡터 포인터를 순환하여 핸들 위치를 표시하기 위해 Tab을 사용합니다. 

모양 결합하기(Combining Shapes)

토끼 모양을 만들기 위해 플라스틱 삼각형을 결합한 게임인 Tangoes를 해본적 있나요? 이전에는 벡터 도구(Vector Tool)를 사용해서 아이콘을 만드는 방법을 다뤘지만, 다른 접근 법은 기본 도형을 결합하는 것입니다. 

프로그래밍에서 논리 연산자 AND, OR, XOR이 있습니다. Sketch는 부울 연산자(Boolean Operators)와 비슷하게 불리는 것을 가지고 있지만, 결합(Union), 빼기(Subtract), 교차(Intersect), 차이(Difference)와 같은 다른 용어를 사용합니다. 

결합(Union)

결합(Union)은 모양을 함께 추가합니다. 알약과 원 모양을 결합하여 구름 형태를 만듭니다.

1. 직사각형에서 반지름(Radius)을 최대화하여 알약(pill) 모양을 만듭니다.
2. 원을 만듭니다.
3. 원이 알약(pill)과 겹치도록 원을 움직입니다.
4. 두 이미지를 선택하고, 결합(Union) 버튼을 클릭합니다.

두 모양의 외곽선이 어떻게 병합되는지 주목합니다. 짜잔! 구름입니다. :]

빼기(Subtract)

빼기(Subtract)는 쿠키 커터처럼, 하나의 모양을 사용해서 다른 모양에서 구멍을 잘라냅니다.

이전 예제의 지도 표시 형태는 괜찮아 보이지만, 요즘의 멋진 아이들이 지도 표시안에 도너츠 구멍을 뚫습니다. 빼기(Subtract) 버튼을 사용해서 동일한 작업을 할 수 있습니다.

1. 지도 표시(map marker) 아이콘을 만들었지만, 이번에는 테두리(Border)이 선택되지 않았는지 확인합니다.
2. 작은 원을 만들고 지도 표시(map marker) 위로 드래그 합니다.
3. 레이어 목록(Layer List)에서, 모양을 결합하기 위해 지도 표시 레이어 위로 원 레이어를 드래그 합니다.
4. 새로 결합된 모양의 공개된(disclosure) 삼각형을 확장합니다.
5. 구멍 레이어가 지도 표시 레이어 위에(above) 있는지 확인 합니다.
6. 레이어 이름의 옆에 부울 연산자 아이콘(boolean-operator icon)을 클릭하면 팝업 메뉴가 보입니다.
7. 메뉴에서 빼기(Subtract)를 선택합니다.
8. 도너츠 구멍 하위 레이어를 선택하고 화살표 키를 사용해서 위치를 미세하게 조정합니다.

아휴! 빼기(Subtraction)은 복잡합니다. 하지만 이 예제에서 가질수 있는 몇가지 중요한 개념이 있습니다: 

• 레이어 목록(Layer List)에서 다른 레이어 위에 레이어를 놓아서 결합 할수 있습니다. 얼마나 멋져요?
• 모양이 결합될때, Sketch는 사용하고자하는 연산자에 대해 잘 알고 있습니다. None옵션이 선택되면, Sketch는 자동으로 하나가 선택됩니다.
• 빼기(subtraction)에서는, 순서가 중요합니다. 구멍(hole) 레이어가 항상 위에 있는지 확인합니다. 모양이 사라지면, 레이어 목록(Layer List)에서 하위레이어를 다시 정렬해 봅니다.

채우기 대 외곽선(Fill vs. Outline)

튜토리얼의 이 부분에서, Sketch 시작 파일이 필요할 것입니다. 여러분을 위해 준비했고 더블 클릭해서 열어줍니다. 다음을 볼수 있습니다.

이 시작 파일은 한 페이지짜리 모형과 사용자정의 벡터 아이콘이 포함되어 있습니다 - 어떻게 만들어 졌는지 보기 위해 검토해 봅니다. 또한 이 섹션에서 사용할 몇가지 탭 바 아이콘을 포함하며, 이전 이후 아트보드(Artboards)가 있습니다.

선택된 상태에 따라 탭 바(Tab bar) 아이콘 색상이 바뀌지만, 일부 아이콘에 빈 공간이 많으므로 색상을 변경은 너무 미묘합니다. 이러한 상황에서 Apple Human interface Guidelines는 아이콘의 따로 채워진 버젼을 selectedImage로 사용하도록 권장합니다. RWDevCon 앱의 모형은 각 탭 바 아이콘의 채워진 것과 외곽선 버젼 둘 다 가지고 있습니다. 

이전에 다운로드한 Sketch 프로젝트 파일에서, Calendar Starter이라 불리는 Artboard에 달력 아이콘으로 결합할 몇개의 만들기 블록(building blocks)을 포함하고 있습니다. 이러한 만들기 블록(building blocks)은 직사각형과 알약(pills)이며, 여러분은 이미 만드는 법을 알고 있습니다.

채워진 달력 아이콘 만들기 위해:

1. Sketch 파일을 열고 레이어 목록(Layer List)에 있는 Calendar Starter Artboard를 펼칩니다.
2. Calendar Body와 Separator하위 레이어를 선택합니다.
3. 빼기(Subtract)를 누릅니다.
4. 오른쪽 구멍(Right Hole) 레이어를 Shift-선택하고 위의 모양에서 빼기(Subtract)합니다.
5. 왼쪽 구멍(Left Hole) 레이어를 빼기(Subtract)합니다.
6. 오른쪽 고리(Right Ring) 레이어를 Shift-선택하고 결합(Union)을 클릭합니다.
7. 결합(Union)을 사용해서 왼쪽 고리(Left Ring)를 추가합니다.

달력 채우기 아이콘의 모든 하위 레이어를 포함하는 단일 모양으로 끝나야 합니다.
분명하게 빼는 영역을 제외하고 모두 녹색이어야 합니다. 어떤 문제가 발생하면, 비교하기 위해 Calendar Fill Artboard 아래를 직접 사용합니다.

이제 채워진 아이콘이 있으며, 하위 레이어중 하나의 크기를 조정하여 외곽선 버젼을 만들 시간입니다.

1. 캔버스에서 Calendar Fill Artboard를 찾습니다.
2. 레이어 목록(Layer List)에서 Calendar Fill Artboard를 펼칩니다.
3. Calendar Body 레이어를 펼치고 Separator 레이어를 선택합니다.
4. Separator 높이를 35로 증가합니다.

캘린더 아이콘의 외곽선 버젼을 만드는데 필요한 것은 구분선을 사각형으로 바꾸는 것입니다. 
Sketch로 정확한 높이로 드래그 할. 수 없는 경우, 여러분은 대신에 Inspector에서 숫자를 입력 할 수 있습니다.

둥근 프로필 아바타(Round Profile Avatars)

RWDevCon 모형은 각 스피커의 둥근 프로필 사진은 가지고 있습니다. 이 효과를 위해서, 여러분은 빼기(Subtract)와 매우 비슷한 마스크(Mask) 기능을 사용할 것입니다. 하지만 구멍을 잘라내기보다는, 마스크(Mask)는 땅콩버터와 젤리 샌드위치의 껍질과 같은 도형의 바깥부분을 다듬습니다.

아바타를 만들어 봅시다:

1. 레이어 목록(Layer List)에서 Greg Before 아트보드(Artboard)를 확장하세요.
2. 아트보드(Artboard)안쪽에, 얼굴을 가릴만큼 커다란 원을 만듭니다.
3. 방금 만든 greg레이어와 타원(oval)레이어 둘다 선택합니다.
4. 마스크 레이어(이 경우에, 타원)가 아래(bottom)에 있는지 확인합니다.
5. 마스크(Mask) 버튼을 클릭합니다.
6. 새로 결합된 greg레이어를 확장하고 Mask레이어를 선택합니다.
7. 외곽선(Border)을 추가하고, 화살표 키를 사용해서 위치를 조정합니다.

마스킹 레이어(masking layer)이 아래에 있는지 확인합니다. 이것은 구멍이 위로 올라가는, 빼기(Subract)와 반대입니다. 

이미지 내보내기(Image Export)

화면의 우측 하단의 내보내기 만들기(Make Exportable)를 클릭하여 단일 레이어를 내보낼 수 있습니다.

여러개의 레이어들을 내보내려면, 이 작업을 수행하는 몇가지 방법이 있습니다:

• 그룹(Group): 레이어가 그룹화 될때, 하나의 이미지로 그룹화(Group)하여 내보낼 수 있습니다.
• 아트보드(Artboard): 아트보드(Artboard)내의 모든 레이어들을 하나의 이미지로 내보냅니다. 이미지 크기는 아트보드(Artboard) 프레임을 기반으로 합니다.

내보내기 전에, Inspector에서 넓이(Width)와 높이(Height)를 체크합니다. 이 치수는 이미지 내보내기의 @1x 크기를 결정합니다.

중요한 팁: 우측 하단 모서리를 사용해서 도형의 크기를 조정하는 대신에, Scale버튼을 사용합니다. Scale 테두리 넓이와 모서리 반지름과 같은 스타일 속성이 크기 조정 후에 비례 상태를 유지하도록 합니다.

PNG

Sketch를 사용하여 서로 다른 밀도로 이미지를 쉽게 내보낼수 있습니다.

1. 우측 하단에서, Make Exportable를 클릭합니다.
2. @2x copy를 추가하기 위해 Plus 버튼을 클릭합니다.
3. @3x copy를 추가하기 위해 다시한번 Plus 버튼을 클릭합니다.
4. 디스크에 PNG 파일로 저장하기 위해 Export 버튼을 클릭합니다.

PDF

아마도 모든 이미지의 @2x와 @3x 버젼을 만드는데 익숙할 것이지만, Sketch는 벡터 기반이기 때문에 그 장점을 취합니다. Xcode는 SVG와 비슷하지만 크기 정보가 있는 PDF 포멧으로 벡터 이미지를 받아들입니다. 

1. Make Exportable를 클릭합니다
2. 1x 크기를 유지합니다.
3. 포멧을 PDF로 선택하고, 내보내기(Export)를 클릭합니다.

Asset Catalog에 단일 PDF 아이콘을 가져올 수 있습니다.

1. Xcode에서 Image.xcassets를 엽니다.
2. New Image Set을 만듭니다.
3. Attributes Inspector에서, Scale Factors를 Multiple에서 Single Vector로 변경합니다.
4. PDF 아이콘을 All 이미지 슬롯에 놓습니다.

Xcode는 빌드시에 @2x와 @3x PNG 파일을 생성합니다. 여러분은 여전히 PNG로 끝나기 때문에, 그 이점은 작은 수의 이미지 파일을 관리하는 것입니다.

여기에서 어디로 가야하나요?(Where To Go From Here?)

Sketch에 대한 소개 입니다! 여기에서 Sketch 프로젝트 파일을 다운로드 할 수 있습니다.

Sketch는 강력하며, 이 튜토리얼에서 다루는 것 이상으로 많은 훌륭한 기능이 있습니다. 더 자세히 보려면, 공식 문서를 확인합니다. 또한 팁과 트릭을 배우기 위한 블로그와 비디오(http://www.learnsketch.com/tutorials.html)가 있습니다.

마지막으로, 또한 iOS 디바이스의 아이콘 세트와 벡터 이미지가 포함된 Sketch 파일을 다운로드 할 수 있습니다.