Sympli를 사용하여 Xcode, Android Studio에서 디자인을 정확하게 반영하기

2016-09-27
24 Views

Sympli는 Sketch, Photoshop 플러그인을 제공하며 요소크기, 여백, 색상, 글꼴 정보를 얻을 수 있어 디자이너는 별도의 레이아웃 가이드(디자인가이드)를 문서로 만들 필요가 없다.

https://sympli.io

비슷한 서비스로는 zeplin이 있다. 차이점은 Android Studio, Xcode플러그인이 있다는 것이다. 이 플러그인을 사용하면 디자인을 정확하고 쉽게 반영할 수 있다.

Xcode

  • 이미지를 보면서 같은 화면에서 프로그래밍을 할 수 있다
  • 개발도구에서 이미지를 내보낼 수 있다
  • Sketch데이터대로 UI를 배치할 수 있다
  • 프로젝트의 업데이트가 있을 때 알림으로 알려준다

Android Studio

  • 이미지를 보면서 같은 화면에서 프로그래밍할 수 있다
  • 개발도구에서 이미지를 내보낼 수 있다
  • color.xml를 만들어 준다

주의사항

  • Sketch에서 Export를 설정하지 않으면 개발도구에서 이미지를 내보낼 수 없다
  • 이미지의 이름 규칙을 Sketch에서 정의할 필요가 있다
  • iOS 드래그 배치는 버튼등 구분해주지 않기 때문에 Xcode에서는 객체를 미리 준비해야 한다

도입방법

Sketch

  1. 플로그인을 다운로드 받는다.
  2. 패키지를 설치한다.
  3. Sketch에서 만든 아트보드를 선택하고 메뉴에서 Plugins-Sympli-Export to Sympli(⌘ + Y)에서 프로젝트 업로드한다.
  4. Create New Project에서 iOS/Android를 선택하여 프로젝트를 만든다
  5. 업로드가 완료되면 공유 URL이 만들어지기 때문에 엔지니어에서 가르쳐 줄 필요가 있다. 또한 이메일주소로 초대도 가능하다. (주의점은 개발도구에서 플러그인을 사용할 때 개발자도 사용자등록이 필수임)

sympli-1

Android Studio

  1. 플러그인을 다운로드한다.
  2. Android Studio의 시작메뉴에서 Android Studio – Preference – Plugins – Install plugin from disk에서 Sympli – Android Studio – [Version].zip을 선택하고 [OK]를 선택한다.

sympli-2

Xcode

  1. 플러그인을 다운로드한다.
  2. sympli-xocde-[Version].dmg를 다운로드해서 설치한다.
  3. 설치가 끝나면 대화상자가 표시되므로 Load Bundle을 선택한다.

sympli-3

사용해본 결과 Xcode 플러그인은 시각적으로 디자인 반영이 있어 정말 좋았다. 내보낼 필요가 없기 때문에 디자인파일만 받으면 바로 사용할 수 있어 디자인가이드를 기다릴 필요없이 시간단축을 할 수 있었다.

개발하는 앱과 옆화면에서 Zeplin을 반양해 나가는 것보다 더 쉽다. 디자인가이드를 작성중이라면 꼭 써보길 바란다.

 

Facebook Comments

You may be interested

모바일 앱 아키텍처
Swift
shares4 views
Swift
shares4 views

모바일 앱 아키텍처

MJ Kim - 4월 22, 2017

이 내용은 나름대로 개발해본 내용을 토대로 정리해본 모바일 앱 아키텍처에 대한 내용이다. 이를 정리한 이유는 오래된 아키텍처부터 최근 아키텍처까지 정리해보고…

시간차를 얻는 Date Extension
Swift 3.0
shares5 views
Swift 3.0
shares5 views

시간차를 얻는 Date Extension

MJ Kim - 4월 12, 2017

사용자가 남길 내용에 대한 시간표시를 할 때 일정한 시간차를 표현해주는 경우가 있어 이에 대한 Date Extention을 정리해 보았다. [crayon-58faf1387133b651301258/]  

Swift 3.1에서 없어진 문법 정리
Swift 3.0
shares33 views
Swift 3.0
shares33 views

Swift 3.1에서 없어진 문법 정리

MJ Kim - 3월 31, 2017

Swift언어는 무엇인가 나올때마다 없어지는 것들이 있어, Swift 3.1에서 컴파일할 수 없게 된 문법내용을 정리했다. switch문을 사용하여 enum에서 protocol을 여러가지 패턴으로…