개요

안녕하세요.디자이너 총본입니다.
당사는 Sketch를 디자인 도구로 도입했고 개인적으로도 매일 접촉했기 때문에 이번에 Sketch Advent Calendar 2017에 참가했습니다.
디자인 작업을 하면 디자이너와 엔지니어 간에 디자인을 잘 공유하지 못하거나 원래 알고 있던 차이가...결국 불안한 상황에 빠졌다고 한다.
나는 대부분의 원인이 디자이너가 엔지니어에게 준 설명서가 제대로 역할을 발휘하지 못했기 때문이라고 생각한다.
이 보도는 이런 문제들을 해결하여 디자이너가 더욱 순조롭게 일하고 엔지니어와 좋은 친구가 되도록 합시다!나는 집필이 아니라 이런 시점으로 키보드를 치고 싶다.
Zeplin이라는 도구를 사용하는 디자인 공유 방법을 구체적으로 소개한다.

이른바 Zeplin

우선 Zeplin이라는 도구를 간단히 소개하겠습니다.

단도직입적으로 말하면, 이것은 설명서를 대체하는 도구다.
스케치 파일을 Zeplin으로 가져오면 Zeplin에서 어셈블리 간 거리 및 font-size 등의 정보를 자동으로 생성해 규격서를 완성할 수 있다.

Zeplin의 이점 가져오기

그렇다면 Zeplin 도입의 이점을 열거하고 싶습니다.설명서를 자동으로 만들 수 있다는 것만으로도 장점이 폭발했으니 다시 한 번 자세히 보고 싶다.

위에서 말한 바와 같이 규격설명서는 자동으로 제작된다.결과적으로 양식 기재가 이 사람을 실수로 빠뜨리는 것을 방지할 수 있다.

제플린에서 디자인 데이터를 공유할 수 있기 때문에'스케치 소프트웨어가 없어 파일을 열 수 없다','디자인 데이터를 일일이 이미지에 적어 보내라','디자인 데이터를 다운로드하고 열어라'등 번거로움이 없다.

디자인 데이터에 리뷰를 추가할 수 있는 기능이 있기 때문에 수정이나 엔지니어 측의 의문이 생기면 디자이너와 엔지니어 간의 소통이 쉽다.메일이나 채팅에서 텍스트로 설명할 필요 없어요.

변경 이력이 남아 있어 어디를 변경했는지 확인할 수 있다.

규격서를 만드는 시간이 극단적으로 줄어들었기 때문에 더 좋은 디자인과 내용 제작에 사용되는 시간이 생겼다.스타일북을 만드는 절차는 도대체 제작자에서 발생하고 끝난 것이기 때문에 사용자 체험과 관계가 없다.그 시간이 줄어들어서 디자이너한테는 즐거웠어요.

이처럼 디자이너로서 즐거운 점도 많지만 엔지니어와의 교류 효율도 크게 높아질 것 같다.

활용 사례

당사는 제플린의 식별을 더욱 원활하게 하기 위해 스케치의 예술 판명을 자동 기어의 경로 기준으로 삼습니다.예를 들어 상품 페이지의 경우 경로명/products, 예술판명/products이다.
모드 창을 사용할 때 경로가 존재하지 않기 때문에 예술판 이름 /products_modal 으로 대응합니다.
응답 디자인은 PC와 모바일이 각각 pc-/products과mobile-/products였다.
명명 규칙에 관해서는 아직 개선할 여지가 있는지 생각하고 있으니 좋은 생각과 사례가 있으면 꼭 알려주세요.

최후

Zeplin을 이용한 디자인 공유 방법을 소개했는데, 어땠나.
앞으로도 꾸준히 다른 도구의 탄생과 강화를 고려하겠지만, 개인적으로는 제플린을 사용하는 것이 현 상황의 최선의 실천이라고 생각한다.
스케치는 도입했지만 디자인 공유에 고생하는 사람들은 제플린을 도입해 볼 수 있다.업무 효율화는 말할 것도 없고, 디자이너와 엔지니어도 더욱 좋아질 것이다!