스케치(Sketch) : 6. 스케치 미러
UI/UX 디자인을 위한 프로토타이핑 툴 - 스케치
내가 디자인한 (모바일) 디자인을 실제 모바일 기기에서 확인하면서 작업하면 많은 도움이 된다. 버튼 크기, 텍스트 크기, 텍스트 간격, 요소 간의 간격 등 모니터에서 완벽해 보였던 디자인을 실제 모바일에서 확인했을 때 항상 조절해야 할 부분들이 생기기 때문이다. 코딩 또는 개발 전에 디자인 단계에서 이러한 부분들이 미리 확인하고 수정한다면, 작업 프로세스에 많은 도움이 된다.
포토샵 CC에서 제공하는 ‘디바이스 프리뷰(Device Preview)’ 기능처럼, 스케치에도 작업한 디자인을 모바일에서 미리보기 할 수 있는 기능이 있다. 스케치 상단 메뉴의 ‘Mirror’ 아이콘이다.
‘Mirror’ 기능을 사용하려면, 먼저 iOS 앱스토어에서 ‘Sketch Mirror’라는 별도의 앱을 다운받아서 테스트할 모바일 기기에 설치해야 한다. (나쁜 소식! 이 앱 또한 유료이며, iOS 6 버전 이상만 지원한다.)
(왼) iOS 앱스토어의 'Sketch Mirror' 앱 화면 / (오) 다운로드 후 설치한 화면 1. 스케치 미러(Sketch Mirror) 연결하기
1. 아이폰에 ‘Sketch Mirror’ 앱을 설치하고, 실행한다.
2. 맥의 스케치 상단 메뉴의 ‘Mirror’ 아이콘을 클릭한다.
3. 레이어 팝업에 ‘iPhone’이 보인다.
‘스케치 미러(Sketch Mirror)’와 ‘스케치(Sketch)’가 연결된 화면중요! 모바일에 설치한 ‘Sketch Mirror’ 앱과 맥의 스케치가 서로 연결이 되려면 둘 다 같은 WiFi 네트워크이어야 한다.
2. 아트보드 만들기
모바일의 ‘Sketch Mirror’와 맥의 ‘스케치’가 모두 연결되었는데, 옆의 화면이 뜬다면? ‘No Artboards’ 작업 중인 스케치 파일에 ‘아트보드’가 없다는 뜻이다.
‘아트 보드’ 안에 있는 디자인만 아이폰에 확인할 수 있다. 이제 아트보드를 만들어보자.
1. ‘인서트(Insert)’ 메뉴에서 ‘아트보드(Artboard, 단축키 A)’를 선택한다.
2. 오른쪽 인스펙터에서 원하는 아트보드 크기를 선택한다. (여기서는 iPhone 6을 클릭했다.)
3. 모바일에 흰색 화면이 뜬다. (아트보드가 흰색이기 때문이다.)
4. 아트보드를 클릭하고, 인스펙터에서 ‘Background Color‘ 를 선택해서 배경 색상을 지정한다.
'아트보드(Artboard)' 만들고, 배경 색상 지정하기아트보드를 여러 개 복제해서, 모바일 ‘Sketch Mirror’에서 각 화면을 네비게이트 하면서 확인해보자.
3. 아트보드 복제하기
아트보드를 복제후, 배경 색상을 지정한 화면1. 아트보트를 선택해서, 복제한다. (단축키 ‘Cmd+D’)
2. 두 번째, 세 번째 아트보드의 배경 색상을 수정한다.
3. 레이어 리스트에서 레이어 이름을 변경한다.
4. 아이폰의 ‘Sketch Mirror’에서 (좌우로) 스와이프해서 아트보드를 확인한다.
4. 페이지 추가하기
Page2를 추가하고, 아트보드를 추가한 화면1. 레이어 리스트에서 페이지를 추가한다.
2. 바로 위 단계(3번)를 반복한다. (아트보드 2개 복제, 배경 색상 지정, 아트보드 이름 수정)
3. 아이폰의 ‘Sketch Mirror’에서 (아래위로) 스와이프해서 아트보드를 확인한다.
모바일 앱 ‘Sketch Mirror’에 적용된 각 레이어와 아트보드 화면.그동안 스케치를 사용하면서 간단하게 메모해 두었던 기능들을 정리하는 중이다. 스케치(Sketch)가 아직은 생소한 사용자에게 이 포스트가 조금이나마 도움이 되길 바란다. 새로운 툴을 사용하는 것에 대한 두려움을 버리고, 다음 프로젝트에 도입해서 적용해 보기를 권한다.
연재 순서는 다음과 같다.
스케치(Sketch) 기능 살펴보기
1. 설치하기, 관련 링크(Installing, Useful Links)
2. 인터페이스(Interface)
3. 레이어(Layer)
4. 텍스트(Text)
5. 슬라이스(Slice)
7. 스케치사용팁 : 키보드 숏컷(shortcuts)
8. 플러그인 소개
