제플린 올바르게 사용하는 방법 – 스케치 강좌

스케치 강좌 열 번째입니다. 이번에는 핸드오프 툴로 아주 유명한 제플린을 알려드릴게요. 제플린 회원가입부터 제플린 맥 OS 툴 설치, 스케치 전용 제플린 플러그인 설치까지 해보고 어떻게 작동을 하고 연동을 하는지 배워봅시다. 생각보다 아주 간단합니다. 중요한 점은 아이콘처럼 출력해야 하는 부분을 스케치에서 미리 Export에서 설정을 해줘야 하는 부분입니다. 여기서 .PNG 뿐만 아니라 .SVG와 .PDF 확장자를 같이 등록해주는 점 잊지 마세요!! (iOS에서는 PDF, Android와 Web에서는 SVG라는 벡터 기반의 확장자를 사용합니다)
또한, 제플린 기능 중에 스타일 가이드를 사용하려면 스케치 상에서 레이어스타일과 텍스트 스타일이 등록되어 있어야 합니다.

제플린 사이트 : https://zeplin.io/

*스케치 툴은 Mac OS에서 사용이 가능합니다.

핵심 요약

제플린은 핸드오프 툴로 가이드라인을 쉽게 잡아주는 툴입니다. 가이드라인을 작업하는 이유는 우리가 애써 작업한 UI 디자인과 실제 개발자분들이 작업해준 결과물과 비교해서 최대한 똑같이 만들기 위함이죠.

제플린 작업시 알아두면 좋은 정보는, 아이콘처럼 출력해야 되는 에셋들은 미리 스케치에서 Export를 해줍니다. 이때, 1개의 아이콘당 png, svg, pdf로 출력 옵션을 설정해줍니다. 그럼 자동으로 스케치에서 개발자에게 넘기려는 OS 환경에 맞게 아이콘 에셋 다운로드 할 수 있도록 도와줍니다. svg와 pdf를 해주는 이유는 벡터기반 확장자이기 때문에 배율에 맞게 다 출력해줄 필요가 없습니다.

PNG – 웹, 앱 (하위 버전 대응)

SVG – 웹, Android 앱

PDF – iOS 앱

지금까지 힘들게 가이드라인을 작업했다면… 이제 제플린에 맡겨보세요.

1계정당 1개의 OS는 무료니까요 : )