개발자에게 디자인을 전달하는 방법, 핸드오프

개발자가 쉽게 이해할 수 있게 디자인을 전달하는 방법

현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다.

디자이너로써 제품을 설계하고 개발자에게 넘기는 단계에서 '휴 나의 일은 이제 끝났다'라고 생각하는 분들이 계실거라 생각합니다. 

그러나 개발하는 과정에서 이슈가 발생하여 디자인이 수정될 수 있고 개발자에게 전달한 디자인이 개발자 입장에서는 바로 이해되지 않아 개발자가 여러번 다시 질문을 하는 경우도 많습니다.

디자인 핸드오프를 제대로 전달하는 것을 통해서 개발자는 제품 설계에 대한 이해도가 올라가고 여러번 질문사항이 생기는 것을 막습니다.

그럼 개발자에게 어떻게 하면 디자인 설계사항을 자세히 전달할 수 있는지 알아볼까요?

개발자에게 이해하기 쉽게 디자인을 전달하는 방법, 디자인 핸드오프

디자인 핸드오프에 대하여

디자인 핸드오프란?

디자인 핸드오프에 대해 들어 보셨나요? 핸드오프(Hand off)란 '손을 떠나다’라는 뜻으로, 업계 용어에 대입하 면'개발자가 구현할 수 있도록 디자인 작업물을 만들어 떠나보내다.'라는 의미를 가집니다.

디자이너가 작업한 디자인을 의도대로 잘 구현하기 위해서는 무엇보다 논리적인 사고와 의사소통이 중요한데

요. 주니어 디자이너들은 이러한 부분을 놓치기 쉽습니다. 

핸드오프에서 중요한 세가지

유저플로우

디자인을 하면서 하나의 큰 task에 대한 다양한 유저 플로우가 있을 것 입니다.

제가 하고 있는 방법은 하나의 task에 대하여 여러가지 유저플로우를 대응하는 것입니다. 이렇게 함으로써 하나의 화면이나 하나의 task에서 다양한 플로우를 확인할 수 있습니다.

이를 통해 개발자는 정보구조 설계에 도움이 되고 설계가 어떻게 진행되는지 한눈에 보고 이슈사항을 찾아낼 수 있습니다.

이렇게 하나의 User Flow의 화면을 한 눈에 확인할 수 있죠!

유스 케이스

참조 : https://yozm.wishket.com/magazine/detail/2099/

하나의 유저 플로우에서도 다양한 유스 케이스가 도출됩니다. 오류, 로딩중, 검색 결과 없음 등 다양한 케이스에 대한 시각적 자료를 첨부합니다.

디테일한 컴포넌트 설명과 인터렉션, 프로토타입

다양한 경우에서의 컴포넌트 스타일과 해당 컴포넌트에 대한 디테일한 상세기획과 설명과 규칙을 추가해준다면 더 좋은 결과물이 나올 수 있습니다. 예를들어 이 컴포넌트는 어떤 경우에만 노출되고 어떤 인터렉션을 통해서 몇초동안 어떤 모션을 하는지, 그 인터렉션은 어떤 라이브러리를 가져오는지 등 세부적인 디테일하고 세부적인 내용을 설명해 놓습니다. 또 프로토타입을 통해 어떻게 구현되는지 한번 더 보여줍니다.