Sketch app x Zeplin
스케치와 제플린 기본 사용서
스케치와 제플린을 작업 시 유념해야 할 부분 10가지 항목입니다.
1. 아트보드(대지) 크기
스케치에서 설정하는 아트보드 크기입니다.
iOS: @1X: 375 x 667px
Android:mdpi: 360 x 640px
Web
개발자가 어떤 media queries를 사용할지 염두에 두시고 아트보드 크기를 설정하세요.
1920 x 1080 px
1200 x 900 px
1024 x 768 px
320 x 480 px
2. 반응형 레이아웃에서 breakpoints가 작동하는 방식
각각 해상도에 맞게 레이아웃 공유하세요.
3. 레스터 이미지 크기 설정
스케치에서 제플린으로 옮길 때 해상도가 높은 경우 스케치에서 작업한 사진 이미지 퀄리티가 낮아질 수 있습니다. 예를 들어 iOS 작업 시 사진 이미지 같은 경우엔 Make Exportable을 @3x로 설정해주세요. 그렇게 하지 않으면 픽셀이 자글자글 보일 수 있습니다.
4. 모든 각각의 요소를 Make Exportable 지정하기
디자인 요소 하나하나 쪼개서 내보내기(Make Exportable) 설정해주세요.
5. 텍스트를 제외하고 이미지에 Make Exportable 하기
만약 배너가 있고 거기에 이미지, 텍스트, css로 구현하기 어려운 필터가 있다고 가정했을 때 개발자가 필요한 건 아래와 같습니다.
Only 이미지
Only 필터
이미지 + 필터
6. Line-height
본문 텍스트의 줄 높이(line-height)는 현재 글꼴 크기보다 6px e더 커야 합니다. 텍스트 상자의 줄 높이를 확인해 주세요. 개발자는 텍스트 상자를 선택하고 줄 높이를 복사하여 붙여 넣기 때문입니다. 모든 텍스트 상자에 동일한 선 높이를 설정하여 디자인에 일관성을 유지하십시오.
7. Text box width
스케치에서 텍스트 인스팩터 Width를 항상 'Audo'로 지정하세요. 그렇게 하면 개발자가 텍스트와 인터페이스의 다른 요소 또는 화면 디자인의 경계 사이의 여백(margin)을 볼 수 있습니다.
8. 아이콘 영역 표시 삭제
Sketch에서 아이콘은 주변 영역을 따로 제플린에 내보낼 수 있지만 제플린에서 디자인 에셋(예: 아이콘) 사이의 여백을 확인하려고 할 때 개발자에게는 힘들다고 합니다. 개발자가 아이콘과 인터페이스의 다음 요소 사이의 여백을 확인할 수 있도록이 여역 표시 공간을 제거하십시오. 제거하세요.
*이 부분은 왜 그렇게 해야 하는지 제가 이해를 못하겠네요. ㅠ
9. 디자인 상태
아이콘, 텍스트, 버튼 등의 디자인 요소에는 활성, 비활성, 클릭 효과, 후버 효과 등 하나의 디자인 에셋이 다양한 형태로 변하는 경우가 많습니다. 그러한 경우도 대비해서 모든 디자인 에셋의 상태를 별도로 미리 작업해 이름을 'Specs'로 해주면 됩니다.
*Specs로 지정하면 제플린에서 states로 인지하는지는 저도 모르겠네요.
10. 제플린에서 화면 정리하기
제플린에서는 Tag란 기능을 써서 화면들을 정리할 수 있는데 예를 들어 웹 사이트의 섹션이나 기능을 기준으로 화면 디자인을 정렬할 수 있습니다. 혹은 사용자 시나리오로 정렬도 가능합니다.
팁!
스타일 가이드 만드는데 시간을 허비하지 마시고 제플린에 컬러, 폰트 등 직접 스타일 가이드를 만들 수 있으니 잘 활용해보세요. 그리고 웹 버전도 있고 포토샵 버전도 있습니다.
제플린 좋습니다. 발 빠르게 윈도우 버전도 출시하고 포토샵, XD도 지원한다고 합니다. 그런데 항상 온라인인 상태가 되어야 작업이 되고 오프라인으로 퍼블리시해주는 기능이 없어서 프로젝트가 보안을 요구한다던가 하는 경우엔 노쓸모네요..
그래서 sketch measure라는 플러그인이 있으니 사용해 보시길 바랍니다.
이건 html 포맷으로 오프라인에서 디자인 수치 측정을 할 수 있는 쉽게 말해 제플린 오프라인 버전이라고 보시면 됩니다.
