brunch

매거진 매거진 목요일

라이킷 157 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 티몬 디자인스토리 Nov 24. 2016

제플린을 만나볼까요?

포토샵 X 제플린 활용 후기

늘 변하는 새로운 개발 환경, 새로운 툴 늘 무언가를 공부하거나 쫓아가지 않으면 뒤쳐질것 같은 느낌이 듭니다.

난 그저 무엇인가 자르고 싶은건데요...

툴에대한 본질을 고민해 보았습니다. [목표를 달성하는데 효율을 만들어 주는 도구]가 우리가 다루는 여러가지 툴의 본질일 것입니다. 바꾸어 말하면 지금 우리가 해결해야할 문제를 풀어내는데 가장 편리한 환경을 만들면 본질을 충족하는것이죠.

여러 프로젝트를 진행하며 우리는 몇가지 문제를 만나게 되었습니다.

- 디자인과 개발 결과물의 차이가 크네?

- 개발팀에서 디자인 결과물을 이해하기 쉽도록 수치/코드로 전달해 보자

- 너무 자잘하고 반복되는 작업이 많아서 디자이너의 능률이 떨어지네?

- 제플린이라는 좋은 툴이 있다던데?

- 제플린은 요즘 최신뿅뿅 유행인 스케치랑 궁합이 좋다던데?

- 스케치는 맥 환경에서 활용하는 툴인데?

- 협업하는 디자이너들 환경을 모두 맥으로 통일해야 하나?

그래서 결정한 목표 입니다.

- 디자이너의 능률 향상

- 개발결과물에서의 디자인 품질을 유지, 관리

- 최대한 현재의 작업 환경에서 적용 가능하도록

결론적으로 우리는 [스케치X제플린] 조합이 아닌 [포토샵X제플린] 조합을 우리의 디자인 환경으로 도입하기 위한 연구를 시작하였습니다.

그동안 저희가 활용한 제플린 사용에 대한 소소한 팁을 공유합니다.

모쪼록 여러가지 환경의 교체 비용문제로 포토샵 환경에서의 디자인 방식을 유지한 채 디자인 품질을 유지하는것을 고민하시는 분들에게 도움이 되기를 바랍니다.

도입 배경

UI 디자인 프로세스 마지막 단계인 GUI 개발가이드 문서를 작성하는 것은

디자이너가 생각한 UI의 의도를 화면에 반영하는 일이므로 귀찮으면서도 가장 중요한 작업입니다.

티몬의 UX랩에서도 디자인 작업이 완료되면,

파워포인트로 개발 가이드를 제작하는 순서로 업무가 진행되어

디자인이 끝났다고 해서 드디어 프로젝트가 끝났어!! 라고 말할 수 없었죠-

티몬의 UI 디자인 프로세스

하지만, PPT로 가이드 문서를 작성하는 것은 생각보다 많은 시간이 할애될 뿐만 아니라 개발자와 협업할 때도 매번 폴더를 열어서 찾아봐야 하는 불편함이 있었습니다.

그래서 저희는 더 효율적으로 처리할 수 있는 방법을 고민하게 되었고, 맥에서만 활용할 수 있다고 생각했던 제플린을 윈도우 환경과 포토샵에서 활용이 가능하다는 것을 알아내어 도입시기를 고민하게 되었습니다.

GUI 가이드 프로그램 : 제플린(zeplin)

포토샵 X 제플린 깨알 꿀팁!

포토샵에 제플린 플러그인을 설치하는 것은 생각보다 간단하여 접근하기가 어렵지 않습니다. 아래 정리된 내용을 읽어보시고 장단점을 파악하셔서 제플린 도입에 대해 가볍게 한번 시작해 보세요!

OS 및 해상도 선택하기

처음 프로젝트를 임포트할 때, 그리고 제플린에서 프로젝트를 생성할 때 OS별로 해상도를 설정해야 되는데요.

본인이 디자인하는 OS, 해상도와 동일한 값으로 설정해야 정확한 수치로 표기됩니다.

PSD X zeplin 팁 : OS 및 해상도 선택하기

PSD 레이어 관리는 필수

제플린은 PSD의 모든 레이어를 그대로 가져옵니다. 여러 shape들로 만든 아이콘이나, 클리핑 마스크 등을 활용했을 경우 숨겨진 레이어들이 모두 노출되는데요.

프로그래머가 간격을 파악하기 위해 클릭했을 때, 관련없는 수치가 나타나지 않도록 PSD 레이어를 잘 관리해야 됩니다.

PSD X zeplin 팁 : PSD 레이어 관리하기

컬러값 관리의 용이함

제플린에서 텍스트나 BG 등을 클릭해보면 우측에 RGB 컬러값이 나타나는데요. 범용 컬러들은 저장해서 스타일가이드탭에서 컬러값을 한 번에 확인할 수 있으며 개발자는 개발 언어로 된 컬러값을 코드로 직접 활용할 수 도 있습니다.

PSD X zeplin 팁 : 컬러값 관리하기

리소스 파일명 및 용량 컨트롤이 어려움

포토샵에서 버튼/아이콘과 같은 리소스를 따로 임포트를 하면, 제플린에서 해상도별로 다운로딩이 가능합니다. 사실 이 기능은 케바케로 어떤 사람한테는 아주 요긴하지만 반대로 어떤 사람은 불편하다고 생각 하는데요. 그 이유는 제플린에서 리소스를 다운받으면 파일명이 의도와 다르게 설정되고, 리소스 용량을 컨트롤할 수 없기 때문입니다.

저희는 버전 별로 리소스를 관리하며 용량을 최소화하는 일 또한 중요한 작업이므로, 해당 기능을 활용하지 못하고 있지만 향후 개선될 것으로 보입니다.