작업 노트 #1 Zeplin
제플린(Zeplin)에 익숙해지기
3년 동안 해왔던 삼성 디자인 멤버십 생활을 마무리하고 제노플랜이라는 스타트업에서 디자이너로 일하기 시작했습니다. 그러면서 단순히 업무를 보고 퇴근하는 일상이 되어서는 안 되겠다는 생각이 들었는데요. 일기를 쓰듯 작업을 했던 내용들을 정리하고 전보다 발전한 점들을 써보려 합니다.
제플린(Zeplin)에 익숙해지기
앱(app)을 위한 디자인 가이드라인과 슬라이스
현재 회사 내에서 애플리케이션을 작업할 때는 Slack, Sketch, Invision, Zeplin을 사용합니다. 이 중에 개발자와의 커뮤니케이션을 위해 사용하였던 Zeplin에 대해 정리해 보고자 합니다.
애플리케이션을 디자인하면서 개발자에게 가이드라인을 쳐주는 것은 귀찮으면서 필수 불가결한 의무입니다. 맨 처음에는 포토샵에서 빨간 선과 빨간 숫자를 입력해가면서 한 장 한 장 작업해가야 하나 했었는데요. 해상도가 다르다면 일일이 계산기를 두드리거나 화면을 리사이즈했습니다. 제가 본격적으로 가이드라인을 쳐야만 했었을 때는 Assistor PS라는 툴이 무료화되고 쉽게 사용할 수 있도록 되어서 힘들게 반복 작업할 필요는 없었습니다.
http://story.pxd.co.kr/750포토샵 레이어 클릭 한 번, 어시스터에서 Layer Snip을 클릭 한 번으로 반복적으로 작업한 뒤 일일이 부분 스크린샷으로 저장하여 파워포인트에 차곡차곡 정리했었습니다. 직접 오브젝트 간에 간격을 재고 값을 적지 않아도 되며 슬라이스도 원클릭으로 해결되어 편리했지만 가이드를 만들고 나서 옮기는 과정, 데이터가 크면 슬라이스를 할 때마다 나타나는 버벅거림 등 아쉬운 점이 있었습니다.
회사 내에서 가이드라인과 슬라이스가 필요한 때에 개발자 분에게 제플린을 소개받았습니다. 스케치만으로도 슬라이스 작업은 매우 쉬워졌고, 특별히 다른 툴의 필요성을 느끼지 못했었는데 직접 써보니까 예상치 못한 만큼 편해졌습니다.
제플린의 편리성
1. 스케치와의 빠른 연동. Export 기능 하나로 빠른 업데이트
2. 내가 가이드를 치지 않아도 스스로 간격을 안다.
2-1. 대신 스케치에서 작업할 때 모든 값을 정확히 잡아야 한다.
2-2. 마우스로 Position이나 Scale을 잡는 것보다 값을 직접 입력하는 것이 좋다.
3. 사이즈별로 자르지 않아도 개발자가 사이즈별로 다운받을 수 있다.
3-1. Export시 각각 폴더별로 나누어져 쓰지 않을 사이즈까지 모두 다운로드된다.
4. 슬랙(Slack)과의 친절한 연동
Zeplin과 Slack을 연동할 때의 화면. 살짝 오글오글했지만 재치가 넘친다.제플린의 아직은 아쉬운 점
1. 제플린 하나로 모든 디자인 가이드라인을 대체할 수 없다.
1-1. 페이지 내에 추가적인 설명이 필요하다면 코멘트를 넣는 것 밖에 없다.
1-2. 구동방식, 인터렉션에 대해 설명하려면 파워포인트를 열어서 정리하는 게 나을 수 있다.
2. 제플린에 올라간 앱 페이지는 제플린에서 수정이 불가능
2-1. 스케치에서 수정 후 다시 Export 할 수밖에 없다.
3. 스케치와의 실시간 연동이 있었으면...
3-1. 페이지가 수정될 때마다 매번 Export를 다시 해줘야 한다. 업로드 시간도 만만치 않은 편.
4. 완벽하지 않은 슬라이스 기능
4-1. 슬라이스 할 때 일부러 잡아놓은 여백의 알파 값들이 모두 Trim 되어서 나온다.
4-2. 스케치에서도 마찬가지다. 내가 기능을 못 찾은 거라 생각하고 Export 옵션을 찾는 중..
5. 가이드라인 탭으로 컬러 값과 폰트가 정리는 되지만 뭔가 불편함.
5-1. 가이드라인 탭에서 자체 수정은 불가능.
5-2. 결국에 이 기능은 사용하지 않고 따로 정리해서 개발자에게 보냈다.
제플린의 가이드라인탭. 정리를 해주어서 고맙긴한데, 폰트 추가 및 삭제가 안되고 컬러칩 이름 수정 및 삭제만 가능하다.약 3개월간 사용해보면서 느낀 점 들을 정리해 보았습니다. 완벽하거나 정확하지는 않습니다. 무작정 써보기 시작하면서 생각했던 점들입니다.
제플린을 쓰면서 달라진 부분
제플린을 알고 나서 앱 디자인을 하는 데 좀 더 편리해진 점은 역시 개발자와의 소통이 좀 더 편리해진 것입니다. 전 프로젝트에서는 개발자들과 미팅을 할 때 매번 앱 페이지를 보여주려고 스크린샷을 찍든 JPG로 추출하든 작업을 한번 더 했습니다. 그래야 같이 이야기를 하지 포토샵에서 하던 그대로를 가져다가 보여드릴 수가 없었습니다.
그래서 매번 미팅을 위한 작업이 필요했고 꼼꼼하게 한 듯 보여도 다음 미팅 때 보면 몇몇 페이지는 업데이트가 되지 않아서 최신 화면이 아닌 기존 화면으로 미팅을 해야 했습니다. 그래서 막상 작업시간을 생각해보면 UI, GUI에 대한 고민보다 매번 보여주기 위한 작업에 고민을 더 많이 하거나 비슷해 보이기도 했었습니다.
마우스만 가져다 놓으면 간격과 크기 값이 나온다.제플린을 사용한 이후로는 내가 직접 빨간 막대기를 그어가며 가이드 칠일은 없겠다는 생각이 들었습니다. 제플린은 사용하기 쉽게 만들어졌겠지만 실제로 사용했을 때 어떤지는 개발자와 서로 주고받으면서 알아봐야 했습니다.
제플린은 기본 단위가 DP. 폰트 크기는 SP입니다. DP와 SP는 다양한 화면 크기에 적용시킬 때 유리하다고 알고 있었지만 막상 쓰기에는 아직까지 Pixel와 Point를 쓰는 게 몸이 편하다고 느낍니다.
스케치에서는 720x 1280으로 작업을 해와서 Density를 720x 1280 px인 xhdpi로 설정해야 하는 줄 알고 설정했었는데요. 제플린 내에서는 단위가 DP로 바뀌기 때문에 xhpi로 하면 무지막지한 숫자로 바뀌게 됩니다. 제일 작은 단위인 mdpi로 하여야 스케치에서 가로 720px로 작업하던 사이즈가 제플린에서도 720dp로 자연스럽게 넘어가게 됩니다.
사실 dp, sp에 대해 정확하게 이해하지 못해 설명이 좀 어렵게 되었습니다. 다만 스케치에서 작업하던 그대로의 값으로 제플린에서 dp로 보여주려면 기본 설정인 mdpi 바꾸지 않고 그대로 사용하면 단위만 바뀐 채로 값은 그대로 나타나게 됩니다.
제플린의 아직은 아쉬운 부분
오브젝트들의 간격 보기, 슬라이스 기능은 매우 강력하지만 가이드라인으로서 이 툴 하나만으로는 조금 부족하네요. 페이지 간의 연결, 인터렉션 등 텍스트로 적어야 하는 부분이 많이 필요하게 되는데 아직 제플린 내에서는 화면에 동그란 점을 찍고 코멘트를 다는 기능밖에 없습니다. 이 부분 때문에 피피티로 가이드를 한 번 더 작성할지 아니면 코멘트 기능으로 모든 내용을 해결할지 고민 중에 있습니다.
개발자와 회의를 하다 보면 전체의 흐름을 볼 수 있는 워크플로우가 필요한데요. 제플린에서 한 번의 많은 페이지를 볼 수 있는 방법은 Dashboard에서 리스트를 볼 수밖에 없습니다. Tag 기능으로 페이지를 기능별로 나누어 볼 수는 있지만 그것만으로는 조금 답답한 느낌입니다.
그 외에
제플린은 무료로 사용시 1인 1 프로젝트까지만 생성이 가능합니다. 무료로 계속 사용하려면 아이디를 새로 만들면 됩니다. 업데이트가 주기가 빨라 앞으로의 기대가 큰 툴 중에 하나입니다. 페이지를 가이드 쳐주고 슬라이스 해주는 기능만 해도 강력한 툴이지만 또 다른 기능을 위해서 다른 툴을 찾아야만 하는 것은 아쉽게 느껴졌습니다.
