Swifter {Swift Developer}

메뉴

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

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

카테고리:   Xcode

댓글

죄송하지만 댓글은 닫혀 있습니다.