brunch

매거진 IT 해외 뉴스 리포트

라이킷 88 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 곽나래 Sep 21. 2021

개발자가 디자인 핸드오프에서 보고 싶은 5가지

디자이너와 PM을 위한 가이드

dribbble: First-experience-using-Figma

프로덕트 디자이너로서 유일하게 안도의 한숨을 쉴 수 있는 순간은 마침내 디자인을 개발자에게 넘기는 순간이라고 단언한다. 지난한 시간의 디자인, 사용성 테스트, 그리고 반복되는 미팅을 거쳐 마침내 끝에 다다른 것이다.

뭐, 완전히 끝이라기보다는 '거의' 도달했다고 보는 것이 맞겠지만 말이다.

그러나 아마도, 디자인 핸드오프를 하면서 개발자로부터 다음과 같은 질문 폭격을 받은 적이 있을 거라고 생각한다.

사용자가 로그인을 하지 않은 상태면 어떻게 되나요? 북마크를 할 수 있나요?

검색어를 잘못 치면 어떻게 해야하죠?

뒤로가기를 누르면 어디로 가게 되나요?

비활성화 상태가 뭐죠? 활성화 상태는요? 버튼이 눌러져 있는 상태는요?

사용자가 필수 입력 사항을 놓치면 어떻게 되죠?

그러면 높은 확률로 당신은 생각하게 될 것이다..

"일 다 끝낸게 아니었네..ㅠㅠ"

이미 디자인 작업으로 돌아가서 디자인 플로우에 놓친 퍼즐 조각들을 채우는 것을 생각하고 있을 수도 있다.

이런 경험을 통해 우리가 얻을 수 있는 가장 큰 질문은,

내 디자인이 모든 것을 커버했다고 어떻게 확신할 수 있는가?

솔직히 말하면, 당신은 절대 모든 유저 케이스를 커버하는 완벽한 디자인 핸드오프를 할 수는 없다. 특히 엣지 케이스, 극히 희박한 엣지 케이스에 대해서는 말이다. 그 이유는 때로는, 그런 엣지 케이스를 다루는 코드나 비즈니스 로직을 개발자가 말해주지 않는한 당신이 알 수가 없기 때문이다.

다음과 같은 상황을 예를 들어보자.

설계 계획(Design initiative):

쇼핑몰 디자이너로서, 당신은 주문을 받고 취소하는 판매 경험을 리디자인 중이다.

유즈 케이스(Use case):

판매자로서, 그는 들어오는 주문을 수락하거나 취소할 수 있다. 그러므로 그는 그 시점에 들어오는 주문들 중에서 어떤 것을 선택할지 선택할 수 있는 융통성이 있다.

엣지 케이스(Edge case):

판매자가 주문 취소할 수 있는 최대 수치에 다다르면, 그들은 그 날 어떤 주문도 취소할 수 없다.

당신이 팀에 충분히 오래 있었다면, 아마 당신은 이런 케이스를 이미 알고 있을 것이다. 그러나 몇몇 경우를 제외하고는 당신의 프로덕트 매니저나 개발자가 이런 케이스를 알려 줄 것이다. 그리고 당신은 이 문제를 해결할 적절한 디자인 솔루션을생각해내야 한다.

하지만 모든 케이스를 완벽하게 알 수 없기 때문에 당신이 모든 것을 커버하지 않아도 괜찮다는 뜻이 아니다. 당신은 디자이너로서 분명히 명확한 디자인을 해야 한다.

그러므로 이 아티클은 어떻게 완벽한 디자인 핸드오프를 만들 것인가가 아니라 개발자들이 원하는 것이 무엇인지에 대해 초점을 맞출 것이다.

개발자들이 디자인 핸드오프에서 원하는 것

1. 해피&언해피 패스 (Happy and Unhappy path)

내가 디자인 핸드오프에서 첫번째로 다루는 것은 해피 패스 플로우 뿐만 아니라 언해피 패스 플로우도 설계하는 것이다.

그것을 어떻게 시작해야하는지 정해진 답은 없다. 어떤 사람들은 해피 패스를 먼저 끝내고 다음으로 언해피 패스 설계로 넘어 간다. 하지만 다른 이들은 해피 패스를 만들면서 언해피패스를 만든다. 그들이 언해피 터치 포인트 또는 플로우에 부딪힐 때마다 케이스를 더하는 것이다. 그들은 이 작업을 동시에 한다.

아래 예시에서 내가 해피패스와 언해피 패스 두 개의 분리된 아트보드를 만들었음을 확인할 수 있다. 당신이 어떤 방식으로 하는지는 상관 없다. 당신은 그것을 하나의 아트보드로 만들어도 된다. 나는 나와 개발자들이 이해하기에 쉬운 포맷을 찾았을 뿐이다.

해피 패스

언해피 패스

2. 유즈 케이스 (Use case)

유즈 케이스는 핸드오프에서 매우 중요하다. 디자이너로서, 당신은 프로덕트 매니저가 주도하는 드래프트 과정에 참여할 것을 권장한다. 그럼으로서 당신은 유즈 케이스와 이에 수반되는 플로우/디자인을 만드는 것에 얼라인 될 수 있다.

다음 예시는 나의 해피 패스와 언해피패스를 유즈 케이스에 따라 분류한 것이다.

유즈 케이스 1

유즈 케이스2

3. 디자인 에셋(Asset)

디자인 핸드오프의 중요한 파트 중 하나는 역시 개발자에게 에셋을 제공하는 것이다. 내가 막 커리어를 시작했을 때는 에셋 리스팅을 하는 일이나 그게 어디 있는지 자체를 보통 잊곤 했다. 그래서 심지어 내가 디자인을 개발자에게 이미 넘겼는데도 불구하고 그들이 어디에서 디자인 에셋을 찾을 수 있는지 질문을 듣곤 했다^^; 그것은 좋은 교훈이 되었고, 다음부터는 내 핸드오프 문서에 에셋을 꼭 첨부하곤 했다.

아례 예시에서 나는 디자인 개발 과정에서 사용하기를 원하는 파일 링크를 개발자에게 제공했다.

4. 인터렉션 / 애니메이션 / 프로토타입(뭐라도 있다면)

프로토 타입은 어떻게 피쳐가 작동할지에 대한 당신이 예상을 개발자들에게 전달하는 좋은 수단이다. 그러나 특히 당신이 다이나믹하게 일하길 원하는 경우에 프로토 타이핑을 끝내는데 시일이 걸릴 수 있다. 그러므로 당신이 충분한 시간이 있고 새로운 스킬을 개발하기를 원하는 경우에 한해 아마도 당신은 디자인 프로세스로 프로토 타이핑을 더해야할 것이다.

아래는 내가 만든 프로토 타입의 링크(Protopie는 내가 사용하는 프로토타입 툴이다)와 인터렉션이다. 문의 온보딩 스크린의 인터렉션에서, 유저가 특정 영역을 눌렀을 때 터치 포인트와 인터렉션 영역이 표시되어 있다. 문의 챗 기능 디자인을 설명할 때는 유저가 메시지 박스를 타이핑하고 있을 때 키보드가 동작해야한다는 것을 보여준다.

프로토타입과 인터렉션

5. 컴포넌트 설명서

마지막은 컴포넌트 측정이다. 디자인 과정에서 새 컴포넌트를 만들 필요가 있을 때마다, 나는 그것을 '새로운 컴포넌트 섹션'에 그것을 더했다. 그 섹션에서 나는 개발자들이 가이드 받을 수 있도록 새롭게 만들어진 컴포넌트의 패딩(padding), 사이즈, 그리고 길이를 리스팅 했다.

나는 또한 수치를 쉽게 리스팅하고 정확하게 측정할 수 있도록 피그마(Figma) 를 플러그인으로 사용한다.