스케치(Sketch) : 5. 슬라이스/이미지 내보내기
UI/UX 디자인을 위한 프로토타이핑 툴 - 스케치(Sketch)
인서트(Insert) 메뉴에 있는 슬라이스(Slice, 단축키 S) 툴 역시 스마트한 도구이다. (그동안 사용해왔던 방법에 비하면… 매우~)
개발자에게 이미지를 전달하거나, 코딩해서 웹사이트에 넣기 위해 이미지를 잘라보자. 스케치에서 이미지 아셋(Asset)을 만드는 방법은 다양하다. 먼저 슬라이스 툴을 사용하는 방법부터 알아보자.
먼저, 슬라이드 툴을 설명하기 위해 아이콘 이미지가 필요하다. fontawsome 아이콘 폰트에서 맘에 드는 아이콘을 골라 캔버스에 붙여넣기를 하고, 폰트를 벡터 이미지로 만들기 위해 상단 툴바의 ‘레이어(Layer)‘메뉴에서 ‘Convert to Outlines’를 클릭한다. (어도비의 일러스트레이터를 써본 적이 있다면, 익숙한 기능일 것이다.) 백그라운드에 컬러를 주기 위해 ‘Rectangle(R)‘로 사각형을 그리고, 색상 값을 넣었다.
1. 슬라이스 툴로 이미지 자르기
1. ‘인서트(Insert)‘메뉴에서 ‘슬라이스(Slice)‘ 툴을 선택한다. 마우스 포인터가 칼 모양으로 바뀐다.
2. 첫 번째 아이콘인 사과 이미지를 자르기 위해 시프트키를 누르고 정사각형을 그린다. (예제에서는 32X32px 크기로 아이콘을 자를 예정이다. 오른쪽의 인스펙터에서 사각형 크기를 확인하며, 정사각형을 그리면 도움이 된다.)
3. 사과 이미지 둘레에 정사각형 점선이 생긴다. 아이콘이 정중앙에 오도록 정사각형 점선의 위치를 조정한다.
4. 왼쪽 레이어 리스트에 새로운 슬라이드 레이어가 생긴다.
5. 슬라이스 레이어의 이름을 정해서 넣는다. 여기서는 'apple'을 적었다.
3번 과정에서 정확하게 이미지가 중앙에 오도록 애쓰면서 사각형을 그리지 않아도 된다. 사각형을 그린 후 마우스나 키보드 방향키로 점선 사각형의 위치를 아무 때나 조정할 수 있다. 오른쪽 ‘인스펙터’에서 숫자를 직접 입력하여 위치를 조정할 수도 있다.
6. 인스펙터 하단에 미리보기 이미지가 보인다. (여기에 보이는 이미지대로 ‘내보내기(export)’가 된다.) 현재 이미지엔 백그라운드 컬러(민트색)가 적용되어 있다. 백그라운드를 색을 투명하게 만들려면, 인스펙터에서 ‘Export Group Contents Only‘를 체크해줘야 한다. 그런데 현재 그 옵션이 활성화되어있지 않다.
7. apple 슬라이스 레이어를 그룹(icons) 안으로 옮긴다.
8. ‘Export Group Contetns Only‘옵션이 활성화되었다.
9. ‘Export Group Contetns Only‘옵션을 체크하면, 백그라운드 컬러가 투명하게 된다.
슬라이스 툴을 사용해서 이미지를 자르는 다른 방법을 알아보자.
2. 슬라이스 툴로 Shape 자르기
1. 슬라이스 툴로 쉐이프를 선택한다.
2. 쉐이프 모양에 맞추어 자동으로 점선 사각형이 생긴다.
위의 경우 생성된 슬라이스 레이어가 자동으로 폴더 안에 위치한다. 그러므로 바로 ‘Export Group Contents Only'체크 가능하다.
3. 다른 아이콘들과의 크기를 맞추기 위해 인스펙터에서 32X32px로 크기를 조정한다.
4. 이미지가 중앙에 오도록 위치시킨다.
3. 슬라이스 툴을 쓰지않고 자르기
1. 레이어를 선택하거나 이미지를 선택한다.
2. 인스펙터 하단에 ‘Make Exportable'옆에 있는 ‘+’를 선택하면, 칼 모양이 나온다. 칼을 클릭한다.
3. 다른 아이콘들과의 크기를 맞추기 위해 인스펙터에서 32X32px로 크기를 조정한다.
4. 이미지가 중앙에 오도록 위치시킨다.
내보내기 옵션
인스펙터에 ‘Export‘ 글자 옆에 ‘+‘를 누르면 이미지를 다양한 크기로 내보내기 할 수 있다.
레티나 디스플레이를 위한 2배 이미지 (@2x), 3배 이미지 (@3x)에 자동으로 Suffix가 붙는다.
슬라이스 한 이미지 내보내기
1. 툴바 가장 오른쪽에 있는 ‘내보내기(Export)‘ 아이콘을 누른다.
2. 새로운 레이어 창이 뜨는데, 슬라이스 한 이미지가 모두 보인다. (슬라이스 이름 밑에 크기 정보가 함께있다.)
3. 내보내기(export) 할 이미지와 저장 위치를 선택하고 내보내기 버튼을 누른다.
이미지 내보내기를 하는 방식이 다양한 이유는 (예제에서는 모두 벡터 이미지만 있지만) 내보내기 할 이미지 특성이 상황에 따라 모두 다를 수 있기 때문이다. 상황에 맞는 편한 방법을 선택해서 사용하면 된다. 개인적으로는 슬라이스 툴을 선택하고 쉐이프르 자르거나(1번) 클릭한는 것도(2번) 귀찮아서 마지막 방법을 은근히 많이 사용하게 된다. (작업 스타일과 개인 성향에 따라 선호하는 방식이 다를 수 있다.)
레이어 리스트 하단 아이콘 설명
‘두 개의 사각형' 모양을 활성화하면 원본 이미지만 레이어에 리스트에 보인다. (디자인한 이미지만 점선 없이 깔끔하게 보고 싶을 때 사용한다.)
‘칼 모양’을 활성화시키면 슬라이스 된 이미지만 레이어 리스트에 보인다. (레이어가 많아졌을 때 슬라이스 레이어만 모아서 볼 때 편하다.)
칼 모양 옆에 작은 숫자는 슬라이스 된 레이어의 개수를 의미한다. 그러므로 슬라이스 레이어가 리스트에 보이지 않아도 개수를 알 수 있다.
그동안 스케치를 사용하면서 간단하게 메모해 두었던 기능들을 정리하는 중이다. 스케치(Sketch)가 아직은 생소한 사용자에게 이 포스트가 조금이나마 도움이 되길 바란다. 새로운 툴을 사용하는 것에 대한 두려움을 버리고, 다음 프로젝트에 도입해서 적용해 보기를 권한다.
연재 순서는 다음과 같다.
스케치(Sketch) 기능 살펴보기
1. 설치하기, 관련 링크(Installing, Useful Links)
2. 인터페이스(Interface)
3. 레이어(Layer)
4. 텍스트(Text)
5. 슬라이스(Slice)
7. 스케치사용팁 : 키보드 숏컷(shortcuts)
8. 플러그인 소개
