UI 디자이너를 위한 Zeplin 실무 팁

Zeplin은 Sketch로 디자인한 컴포넌트들의 크기와 거리를 자동측정, 시각화해주는 소프트웨어 서비스입니다. Sketch로 UI 디자인을 하고 계신다면, 주저 없이 Zeplin을 사용해 보시길 추천합니다.

Sketch와 연동하여 사용하는 서비스인 만큼, Sketch에 아직 생소하신 분들이 보시기에 설명이 조금 부족할 수 있지만, Sketch와 Zeplin을 사용하여 UI를 디자인하면서 겪었던 크고 작은 이슈들과 개인적인 해결법을 간략하게 정리해 보았습니다.


Zeplin 사용 시 팁 및 주의점

  1. Export가 느려질 경우 임시 신규 파일을 이용합니다.
    Sketch 문서 상의 Artboard 개수가 점점 많아질수록, Export시 시간이 오래 걸리게 됩니다. 이때 필요한 Artboard만 신규 Sketch 파일에 복사하여 Export 하면 훨씬 빠르게 업로드가 가능합니다.
  2. 이미지 리소스로 삽입되어야 할 부분은 반드시 Make Exportable 기능과 Create Separate Slice Layer 기능을 이용하여 슬라이스 영역으로 인지시킵니다.
    이때 Export Group Contents Only를 잊지 말고 체크하여 투명 영역을 설정합니다. 이렇게 함으로써, Zeplin상에서 해당 이미지 파일을 해상도별로 손쉽게 다운로드 받을 수 있게 됩니다.
  3. 레이어명에 “줄 바꿈”이 섞여 들어가지 않도록 주의합니다.
    분명히 슬라이싱 영역을 설정했는데, Zeplin상에서 다운로드가 불가한 상황이 가끔 있습니다. 이는 대부분 레이어명을 복사 및 붙여넣기를 하는 과정에서 “줄바꿈”등이 삽입되어 비정상적인 레이어명이 될 경우 발생하게 됩니다. 해당 이미지레이어를 스케치의 기본 PNG 익스포트가 되는지 확인해보고, 안될 경우 레이어명에 숨어 있는 “줄 바꿈”을 제거하면 해결됩니다.
  4. 하위레이어가 측정될 필요가 없으면 Exclude Sublayers를 겁니다.
    다시 필요해질 경우 Include Sublayers를 사용하여 복구시킵니다. 이를 통해 로고나 아이콘 등의 벡터 그래픽들이 불필요하게 측정되지 않도록 하여, 혼란을 방지할 수 있습니다.
하위레이어 제거기능이 포함되어 있습니다.

Zeplin이 아직 안고 있는 실무적 이슈

  1. UI디자인 가이드를 문서형태로 로컬에 저장하는 것이 불가능하다.
    업무환경에 따라 이것은 최대이슈일 경우도 있습니다. 제플린 측 서버가 다운되면 업무가 불가능하며. 인터랙티브하게 측정치를 보여주는 서비스 특성상, PDF나 PNG 등의 Static한 문서로의 출력이 아직 불가능합니다.
    부득이 Zeplin이외의 가이드문서를 제작해야 할 경우 Sketch Measure와 Sketch의 PDF 익스포트 기능을 이용하여 PDF 문서를 별도 제작하시기를 추천해 드립니다.
  2. PNG 리소스 파일의 최적화가 별도로 필요합니다.
    Photoshop의 Export for Web과 마찬가지로, 바로 개발에 사용하기엔 용량이 무거운 PNG가 익스포트됩니다. 색상이 다양한 사진BG등은 JPG로, 일반 PNG 파일들은 tinypng.com 등을 이용하여 더욱 용량을 줄여주는 작업을 추가로 하는 것이 좋습니다.
    특히 tinypng서비스를 이용할 경우, 단순히 Meta data를 strip 하는 것과 차원이 다르게 용량이 줄어들어 앱의 퍼포먼스 및 리소스 절약에 큰 도움이 됩니다.(단 사진은 JPG로 압축하시길 권장)
  3. 나인패치 제작까지 자동으로 해주지는 않습니다.
    나인패치는 기본적으로 Sketch나 포토샵에서 해상도별로 제작을 해야 합니다. 저는 자동제작툴 웹사이트(http://romannurik.github.io/AndroidAssetStudio/nine-patches.html)를 이용한 후 Photoshop 및 Better 9 Patch Tool로 검수하고 있습니다.
    향후 업데이트가 기대되는 기능입니다.
  4. 파일명 자동변경
    Zeplin은 본래 컨셉인 Hand-off에 충실하기 위한 기능중 하나로, 파일명을 개발에 적합한 이름으로 바꿔주는 기능이 있습니다. (일단 기능컨셉은 그렇습니다…) 슬래시로 나뉘어진 prefix는 전부 사라지게 되고 플랫폼에 따라 각기 다른 룰을 따르고 있습니다. 아래는 예시입니다.
    Sketch 레이어 : icn/finder_n_34.png
    iOS : finderN34@2x.png
    Android : finder_n_34.png
    mWeb: finder-n-34.png
Hand-off 뜻: 개발자의 도끼에 손목이 날아가서 손이 없는 상태

그간 사내 동료들에게 메모장에 적어서 전달하던 내용들을 좀더 읽기 수월하게 정리해보고자 이 글을 작성하게 되었습니다. 아직 매뉴얼이나 포럼에서 언급되지 않았거나 정리되지 않은 부분들이 많은것 같습니다.

늦은 밤, 디자인 가이드 PowerPoint 문서의 오타를 수정하며, ‘왜 내가 이러고 있나!ㅏ!ㅏ!ㅏ!아이고!’하던 밤을 떠올리며. 그럼 20000.