안녕하세요. 일루넥스의 홍우정입니다.
UI 디자인 업계에서 떠오르고 있는 프로그램, 제플린을 소개해드리고자 합니다.
제플린이 등장한 배경, 사용 방법 그리고 실무 적용에 관한 정보를 전달하고자 합니다.
제플린 도입 배경
- 동일 프로젝트 안에서 디자인과 개발의 조화
- 디자인 결과물의 이해를 돕기 위한 수치/코드
- 맥과 윈도우의 통일
제플린의 도입 배경중 가장 큰 본질은 바로 동일한 목표 달성입니다.
디자인과 퍼블리싱 그리고 개발의 프로젝트 결과물을 관리하고 유지하기 위한 연구에서 시작되었습니다.
UI 디자인에 디자이너의 의도를 반영하는 것은 가장 중요한 작업입니다.
이를 문서화하거나 전달하기 위해서는 많은 시간과 자잘한 작업이 할애가 많이 됩니다.
특히나 맥과 윈도우 두 환경에서 활용할 수 있는 도구가 필요했고 제플린이 등장하게 되었습니다.
제플린 사용 방법
초기 설치
- http://zeplin.io 에서 회원가입 및 제플린을 다운로드 합니다.
- 자동으로 포토샵에 플러그인이 설치가 되거나 Install Plugin…을 클릭하여 설치할 수 있습니다.
- Windows – Extension에서 제플린을 활성화 시킵니다.
프로젝트 세팅
작업 세팅은 프로젝트의 기기에 따라 자유롭게 조정가능 합니다.
- 안드로이드: dp/sp, XML
- IOS: pt, jective C/Swift
- Web
Import 작업
아트보드 기능을 활용하여 각 레이어를 선택하고 Mark as asset 버튼을 눌러 제플린으로 Import 시킵니다.
이 작업은 개발에 필요한 다양한 사이즈 및 형식을 보내집니다.
실무에서의 모습
제플린은 모든 레이어를 그대로 가져옵니다.
실제로 여러 shape, 아이콘, 클리핑 마스크 등 모든 작업물에 대한 세세한 작업이 이루어져야 비로소 제플린에서 빛을 발하게 됩니다.
디자인이란 비언어 매개체를 개발의 언어로 옮기고 표현하기 위해서는 자잘한 작업과 시간이 소모되지만 이러한 리소스를 동일한 환경에서 컨트롤하면서 공통 목표에 도달하게 됩니다.
개발자가 제플린으로 디자인 작업을 확인하기 위해서 디자이너는 관련없는 수치가 나타나지 않도록 레이어 관리를 해주고
의도한 방향으로 디자인이 구현 되도록 모든 레이어가 제플린에서 코드값이 제대로 출력될 수 있도록 관련 레이어 작업에 힘을 써야합니다.
제플린은 용량 컨트롤이나 파일명이 의도와 다르게 설정이 되는 경우가 있어서 별도로 관리해야하는데 이는 추후에 개선 되어야할 중요한 작업이고
디자인에서 가장 중요한 폰트나 간격에 대한 가이드도 종종 소수점으로 나타나는 경우가 있어 주의를 기울여야하는 부분입니다.
이는 공동 규칙을 정하거나 원활한 의사소통을 통해 작업이 이루어져야만 하는 사항입니다.
마치며
프로젝트를 처음 시작하고 협을 하면서 생겨나는 디자이너와 개발자의 이슈들을 유연하게 대처하고 해결하기 위한 프로그램으로 떠오르고있는 제플린에 대하여 설명해보았습니다.
제플린은 접근이 어렵지 않고 실제로 여러 사례들을 통한다면 어려운 프로그램이 아니라는 것을 느낄 수 있을 것입니다.
제플린 사용을 하면서 느낀 것은 디자인에 대한 충분한 숙련도와 감각이 기본 전제가 되어야 한다고 생각합니다.
협업을 통하여, 좋은 프로젝트 결과물을 끌어내기 위한 노력은 앞으로도 계속 될 것 같습니다.
여기까지 읽어주셔서 감사합니다.
