본문으로 바로가기

스케치와 제플린(Sketch & Zeplin)

category WEB/IDE 2017. 3. 9. 10:27

앱 구축 전 스케치로 가이드를 받는다는 정보를 받고 알게 된 제플린.


https://zeplin.io/ 제플린 공식 홈페이지


스케치가 좋다는 건 예전부터 알고 있었고, ?이미 모두 많이들 쓰고 계시리라 생각됩니다. 맥에서밖에 쓸 수 없다는 제한이 있긴 하지만 맥을 사서라도 스케치를 쓰는 것이 좋은 선택이 아닌가 생각합니다. 특히 저같은 디자이너 직군이 아닌 사람한테는요. (무겁고 비싸고 복잡한 어도비…)

 

스케치를 잘 쓰고 있던 중, 플러그인 중에 ‘제플린 Zeplin’이라는 게 기가 막히다더라- UI 가이드를 줄 필요가 없다더라는 말을 김실장님께 전해 듣고 한 번 깔아봤습니다.

https://zeplin.io/ 제플린 공식 홈페이지

제플린이 뭔지는 공홈의 Get Started Free 버튼에 가져다 대면 아주 잘 알 수 있습니다.

이제 제플린의 장점에 대해 하나하나 살펴보겠습니다.

 

1. 강력한 가이드 생성(?) 기능

제플린의 핵심 기능은 버튼 높이, 컬러 등의 설정값을 바로 뽑아준다는 것이죠. 실제로 오브젝트를 클릭하거나 마우스를 가져다 대면 위 버튼과 같이 보입니다. 김실장님께 전해듣기로 ‘가이드를 자동으로 만들어준다’고 해서, 저는 스케치에서 이미지파일로 이 플러그인을 통해 익스포트하면 객체 값이 이미지에 포함되어 나온다는 걸로만 이해했는데, 결과는 그 이상이었습니다.

이렇게 버튼 사이즈, 컬러, 위치 등을 디자이너가 일일이 적어 주지 않아도 되는 것이죠. 심지어 CSS로 바로 보입니다.

(기특한 것)

프로그래머는 버튼을 마우스로 찍어보는 것만으로도 원하는 값을 얻을 수 있습니다. 이걸 보려면 제플린을 꼭 받아서 깔아야 하느냐? 그것도 아닙니다. 스탠드얼론 앱을 왜 만들었는지 모르겠을 정도로 웹상에서 정말 아름답게 작동합니다. 아이콘 등 이미지같은 경우는 스케치에서 슬라이스해 놓으면 바로 다운로드받을 수 있고요. (아이콘 따로 저장해서 전달해주지 않아도 됨)

 

2. 공유 및 피드백

공유, 피드백이 너무너무 쉽습니다. 저희 디자이너분이 늘 상주하시지 않기 때문에, 피드백 전달 및 커뮤니케이션을 원격으로 해야 할 때가 있는데요.

페이지 아무데서나 커맨드(윈도우에서는 ctrl) + 클릭을 누르면

코멘트를 입력할 수 있습니다. 이 메시지 archive가 안된다는 게 아주 조금 아쉽지만 서로 커뮤니케이션하기에는 모자람이 없습니다. 코멘트 스레드에 해당하는 내용은 우측 사이드바에서 볼 수 있죠.

 

3. 슬랙slack과의 연동

zeplin과 slack을 연동할 수 있습니다. 연동하면 업데이트가 된 내용을 알림으로 받아볼 수 있죠. 위 코멘트 같은 경우도 바로바로 받아볼 수 있습니다. 더불어 유용한 것은, 디자이너가 파일을 수정해서 모두가 볼 수 있는 그래픽 파일로 익스포트해서 svn이나 공용폴더에 올린 후 메신저로 ‘메인화면 업데이트했으니 봐주세요~’ 했을 때 힘겹게 파일을 열어 실제 크기로 맞춰 보느라 고생할 필요가 없습니다. (너무 옛날 이야기인가요?)

뭘 올렸다고 얘기할 필요도 없습니다. 아, 피드 수정해서 올리셨구나. 클릭해서 슬랙에서 바로 이미지파일로 볼 수도 있구요, open in mac / web을 누르면 바로 해당 페이지로 이동합니다.

 

4. 사용성

기능/디자인에 덧붙여, 제플린은 ‘쓰고 싶게 만드는’ 앱입니다. 상냥하고 위트있는 안내 메시지, 부드러운 인터랙션, 세심한 배려… ?’역시 스타트업 제품이니 이런 부분은 참고 써야 하나’ 했던 부분이 없습니다. 깔았다 지운 플러그인, 깔았다 지운 서비스가 얼마나 많은지를 생각해 보면 정말 탁월하게 잘 만들었다고 생각되네요. (무료플랜이 없어진다거나 하진 않았으면 좋겠습니다)

 

이상 스케치 + 제플린 + 슬랙의 콜라보레이션! 




출처 http://blog.minimap.net/index.php/2017/02/02/sketch-zeplin/