소규모 팀을 위한 Figma 디자인 핸드오프 시스템 (파일 공유)
오늘은 Figma 파일 하나를 공유하려 합니다. 바로 디자인 핸드오프 에셋이 담긴 파일인데요! 사실 규모가 있는 팀에서는 당연하게 이미 하고 계신 것들일 수 있지만, 저처럼 소규모 팀에서 디자인 핸드오프와 디자인 문서화를 고민하시는 분들께 도움이 되었으면 합니다.
최근 디자인 핸드오프와 체계화된 디자인에 대해 고민이 참 많았습니다. 다른 프로덕트 디자이너분들과 이야기를 나눴을 때도 같은 고민에 대해 얘기하시더라고요. 특히나 어느 정도 규모가 있는 팀에서는 업무 방식과 소통 방식이 체계화되어 있는 반면, 작은 규모의 팀일수록 체계화된 방식이 없어 어려움을 겪는 것 같기도 합니다.
저희 회사의 경우, 아직 프로덕트 고도화 전이라 프로덕트의 레이아웃, 페이지, 기능, 컴포넌트 등 모든 요소의 수정이 잦았습니다. 그리고 제가 프로덕트 디자인 전반을 맡아 진행하고 있었기에 관리를 위해 하나의 Figma 파일에 모든 스크린을 모아두고, 아래와 같이 두 가지 파일로만 구분 하고 있었습니다.
- Ver 0 – 당장 구현을 위한 디자인 파일
- Page로 나눠 기능 구분
- Ver 1에서 우선순위가 높은 기능 중심으로, 개발 가능한 범위 내에서 리디자인 - Ver 1 – 3개월 혹은 그 후의 비전을 위한 디자인 파일
- 1page에 모든 스크린을 모아둠
- 새로운 기능 시안을 만드는 경우가 많고 변경이 굉장히 잦음
- 프로토타이핑을 연결하여 전반적인 UX Flow 확인 / 피칭 시 데모를 위해 사용
하지만 크게 세 가지 문제점을 겪었습니다.
피그마 파일 내 디자인 팀 내 커뮤니케이션의 어려움
피그마 파일 안에서 디자인 팀 내 소통이 어려웠습니다. 물론 노션에서 프로덕트 스펙에 관한 문서나, 큰 의사 결정을 문서화하고 때론 슬랙에서도 피드백을 구하고 있었지만, 분명히 피그마 파일 내 커뮤니케이션 또한 필요했습니다.
여러 가지 시안을 작업한 경우에 초반에는 그냥 디자인 작업만 진행했는데요. 시간이 지날수록 더 나은 의사소통과 의사결정을 위해서는 디자인 목업과 함께 각 시안에 대한 제목과 이유를 문서화하는 것이 필요하고, 이에 대한 서로의 의견들을 남겨두는 것이 필수적임을 깨달았습니다. 또 때로는 디자인을 하는 과정에서 질문이 생기거나, 시안 중에서 하나를 골라 최종 의사 결정을 하기도 하는데 이러한 사항들을 피그마에 기록해두기가 어려웠습니다. 피그마 코멘트 기능은 휘발성이 강해 중요한 의사결정이나 유의사항을 남기기 적절하지 않았습니다.
(특히나 저희 회사는 각자 다른 시차에서 비동기 업무를 진행하기 때문에 이런 문서화가 중요했습니다.)
디자이너가 놓치는 스펙과 플로우가 생겨남
제가 프로덕트 디자인 전반을 혼자 맡아 진행하다 보니 때로는 제가 미처 고려하지 못한 스크린과 플로우가 생겨나기 시작했습니다. 태그만 해도 태그를 추가하는 경우, 태그를 변경하는 경우, 태그를 삭제하는 경우 등 다양한 플로우가 존재하는데 메인 스크린만 디자인하고 플로우를 고려하지 못할 때도 있었고, 특히나 꼭 필요한 디테일한 부분을 놓치는 경우가 많았습니다. 예를 들어 태그 개수가 많아졌을 때의 Edge case, 또는 데이터를 불러오기 전이라 나타나는 Empty state 등이 있습니다.
그러다보니 개발 팀이 자체적으로 컴포넌트 배치나 플로우까지 고려하면서 개발을 진행할 때도 있었습니다. 디자인 목업 없이 개발하다보니 디자인 완성도가 떨어질 수밖에 없었죠. (때로 빠르게 구현하는 것이 중요한 요소가 있을 경우에는 디자인 없이 개발팀이 먼저 제안하고 개발하기도 합니다.)
개발팀이 확인 시, 스크린 구분이 어렵고 화면 유의사항에 대해 알기 어려움
저희 회사의 경우에는 개발 팀이 Clubhouse.io 를 사용하고 있어서, 디자인이 완료 되면 클럽하우스에 티켓을 만들어 유의사항과 이미지, 피그마 프레임 링크를 전달하고 있는데요. 이전에는 제가 프레임 링크를 걸어 전달하긴 했지만, 개발자들에게 유용하진 않았습니다.
개발팀이 Figma 파일을 보더라도 화면에서 필수적으로 구현해야 하는 요소가 무엇인지, 디자인이 수정 중인지 완료되었는지, 변경되었다면 어떤 부분이 변경되었는지 파악하기가 어려웠습니다.
Design Handoff System
이러한 문제점을 겪고 있던 저는 완벽하진 않더라도 어느 정도 디자인 핸드오프와 체계적인 디자인에 대한 문제를 해결 할 수 있는 방법을 찾길 원했고 그렇게 'Design Handoff System'을 제작하게 되었습니다.
https://www.figma.com/community/file/996704427124567617
처음부터 제가 모든 것을 하나하나 디자인한 것은 아니고, Figma 커뮤니티에서 훌륭하신 분들이 이미 공유해주신 여러 가지 Handoff, Annotation, Flow 파일을 참고하고 필요한 요소들을 조합해 이를 하나하나 컴포넌트화하고 다듬었습니다. 현재 파일 내 컴포넌트들은 앱보다는 웹 디자인 사이즈에 최적화되어 있습니다. (파일을 확인하시면 참고한 파일 원본 링크를 확인하실 수 있습니다.)
에셋은 크게 5개의 카테고리로 나누어져 있습니다.
- Project Cover
- Document / Header
- Document / Annotation
- Document / Memo
- Information Architecture
또 두 번 째 페이지에 사용법과 사용 예시를 만들어 두었습니다. 필요하신 분이 있다면 유용하게 사용해주신다면 감사하겠습니다. 또 디자인 핸드오프 시스템에서 제가 고려하지 못한 부분이 있거나 추가하면 좋을 만한 요소가 있다면 링크 내 코멘트로 남겨주세요. 감사합니다.
+파일에서 사용한 화살표는 Figma 플러그인인 Autoflow 설치 후 편리하게 사용하실 수 있습니다.
