blog.minimap.net

minimap.net 블로그입니다.

개발일기

스케치와 제플린 Sketch & Zeplin

부제 : 제플린이 없었으면 어떻게 일했을꼬?

 

앞으로 개발 과정을 대충이라도 자주 기록해보고자 합니다. 까먹으면 아까우니까!

 

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

 

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

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

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

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

 

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

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

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

(기특한 것)

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

 

2. 공유 및 피드백

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

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

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

 

3. 슬랙slack과의 연동

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

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

 

4. 사용성

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

 

이상 스케치 + 제플린 + 슬랙의 콜라보레이션! 감탄의 나날입니다. 좋은 칼을 썼으니 좋은 고기가 나와야 할텐데 고민이네요. 그럼 종종 또 찾아뵙겠습니다!

 

 

21 Comments

  1. digitalmastar

    어도비 클라우드의 노예로 살아서 스케치는 관심만 있었는데
    현 디자인 생태계에서 더할 나위 없이 좋네요!
    영업당하고 갑니다.

    • 넵 추천드려요 정말 ㅠ_ㅠ
      일하면서 절반은 ‘와.. 이것봐.. 이것도 돼..’ 이러고 있네요. 멋있어 보일 뿐 아니라 실제로 유용하게 잘 쓰고 있습니다!

  2. 앙마인형

    이런게 있군요.
    비루한 웹 개발자라 우와 신기하다 정도만 봤습니다.
    어느정도 진행됐는지 UI는 어떻게 바뀌었는지가 보고 싶었으나…
    근데 정말 개발한 이야기는 전혀 없네요 ㅋㅋㅋㅋ

    • ㅋㅋ차근차근 올려보겠습니다! 사실 중간 과정이라도 그냥 공유하면 되는데 뭔가 주저주저하게 되네요.

  3. 우와 신기하다(무슨말이지)

  4. 안녕하세요, g.on hatch 같이 했었던 포울의 서인석입니다! ㅎㅎㅎ
    제플린 검색하다가 우연히 들어오게되었네요!
    팟도 몇번 들었는데 너무 유쾌하시고 재밌네요 ㅎㅎ
    그럼 앞으로도 자주 놀러오겠습니다. 화이팅 🙂

    • 오오 인석님 안녕하세요!
      제플린으로 검색해서 들어오시다니 이런 인연이 >ㅅ< 신기하네요~~ 하시는 일 즐겁게, 힘내서 하시기 바랍니다! 넘넘 감사드려요!!!

  5. 픽스

    윈도우 유저는 침만 흘리고 갑니다…. ㅠ

  6. 뜨디

    윈도우에서도 확인 할 수 있는게 너무 편하네요 ㅋㅋㅋ
    스케치로 작업하지 않고 포토샵으로 작업한 PSD파일을 디자이너분이 올려주셨는데도 잘 돌아가서 놀라고갑니당

  7. 아장

    제플린 플러그인은 무료인가요? 유료인가요?

    • 기본 플랜은 무료구요, 프로젝트를 여러 개 생성하려면 유료입니다. 무료로도 핵심 기능은 모두 사용 가능합니다.

  8. 김지숙

    안녕하세요! 제가 궁금한게 잇어서 댓글남김니다. 제플린에서 png assets로 다운 할 때, 투명 부분이 잘려서 다운이 되는 현상이 있는데 어떻게 컨트롤 하시나요? 아니면 제가 설정을 잘못한 것인지 궁금합니다. (예->작업 png 사이즈 300×400 px -> 제플린에서 다운로드 후 291×393 px) 이렇게 됩니다

    • 스케치에서 익스포트하실때 슬라이스를 만들어주셔야 합니다~!(개체 선택 후 우하단 익스포트->칼모양 아이콘)
      슬라이스 선택하시면 스케치 우측에 미리보기가 표시되는데, 해당 모양 기준으로 익스포트 됩니다.
      투명값 자르고 익스포트하기 뭐 그런게 자동으로 설정되어 있는 경우도 있더라구요 해당 부분 확인하시면 될 것 같습니다

    • 이지현

      이 부분 해결 하셨는지 모르겠지만 포토샵 이용시에는 다른 방법으로 거짓레이어를 하나 깔아주시면 편해요 🙂 원하시는 이미지 사이즈로 opacity 0%로 하나 깔아주시면 됩니다.

  9. 질문 있습니다~!
    금융권 프로젝트처럼 내부망에서만 개발이 가능한 경우에는 아무래도 zeplin 사용이 불가능할까요? 내부망 환경에서도 zeplin을 적용할 수 있는 방법이 있는지? 혹은 내부망에서도 쓸 수 있는 zepline과 유사한 다른 Tool이 있는지 질문드립니다~^^

    • 잘 모르겠습니다. 사내 전산팀에 이거 꼭 써야된다고 이거 없으면 너무 힘들다고 문의해 보세요.

  10. 서지원

    이해가 쏙쏙 너무 잘됩니다 감사합니다!! 질문이 하나 있는데요~ 혹시 그럼 개발에 넘겨 드릴때 어떻게 넘겨 드리나요? 제플린파일로 넘겨드리나요?

    • 제플린은 로컬에 저장하는 파일형태가 없는 것으로 알고 있습니다. export하시고 우측 공유 메뉴에 web link(url형태)로 넘겨 드리면 아무 브라우저에서나 바로 확인 가능합니다.

  11. surflisher

    이제야 알게되어 검색해서 추가정보 얻어갑니다. 감사합니다.

부담 없이 댓글을 남겨 주세요!

Theme by Anders Norén