사이드 프로젝트에서 프로덕트 디자이너로 살아남기
플로우 설계부터 디자인 시스템 구축까지의 여정
이전 글에는 Product Manager로서의 관점은 이전 글에서 작성했다면,
해당 글에서는 프로덕트 디자이너의 관점에서 프로덕트를 사이드 프로젝트 이야기를 작성하려고 한다.
제작하는 프로덕트는 (MBTI) J와 P가 함께하는 그룹 여행 플래너로 IT 연합 동아리 넥스터즈에서 진행하게 된 프로젝트다.
프로덕트 디자이너 롤로 8주 동안 진행한 작업 중, 가장 주요하게 수행한 것은
-
1. User Test를 통한 플로우 개선
2. UX Writing
3. 디자인 시스템 구축
4. 인터랙션 소스 제작이다.
1. User Test 통해 플로우 개선하기
유저테스트는 'Maze'를 통해 진행했고, 와이어프레임 상태에서 주요 플로우만 프로토타이핑했다.
Maze에서는 유저들이 Task를 지속적으로 확인하면서 미션을 수행할 수 있어서, 디테일한 미션을 주기 좋았다.
그리고 최종적으로 미션을 테스터들이 원활하게 수행했는지 어떤 부분에서 실수가 있는지 Visualization 차트로 파악할 수 있다. 다만 단점은 모든 플로우를 디테일하게 연결해야지만 지표가 정확하게 나온다. Maze는 Hi-fi Protptype에 좀 더 적합한 툴인 것 같다.(우리는 매우 Lo-fi 형태였다..)
예를 들어 검색 기능에서 키보드 펼치기/숨기기 등의 여러 인터랙션이 존재하는 화면에서 모든 인터랙션 case들을 연결해두지 않은 경우, 사소한 액션도 '실패'로 나온다. 그래도 가시적으로 어떤 화면의 사용성이 부족했는지 한눈에 파악하기에는 매우 좋았다.
User Test 이후 개선 항목
테스터들에게 받은 피드백은 '1차 반영/추후 배포에 반영/미반영'으로 분류했다. 피드백을 바탕으로 UI 설계 수정을 진행했고, 팀원들에게 어떤 부분을 반영할 지에 대해 공유했다.
2. UX Writing , 프로덕트 Voice 맞추기
용어 작성 시 일관성을 위해 UX Wrting 가이드를 제작하였다.
Voice Persona는 '즐거운 여행을 돕는 친근하고 활발한 성격을 가진 여행 메이트'로 부여했다.
활발한 성격은 '?/!'와 같은 문장 부호를 통해 표현해 주었다. 그리고 '해요체'를 기본적으로 사용해서 사용자와 친근한 관계를 이어나갈 수 있도록 했으며 의견을 공유하고 계획해 나가는 유연한 과정을 만들어나갈 수 있도록 안내했다.
Main keyword of Voice
이를 통해 팀원들이 문장을 작성하는 경우, 잦은 커뮤니케이션 없이 일관성 있는 메시지를 작성할 수 있게 되었다.
3. 디자인 시스템 구축하기
Atomic Design System을 기준으로 작업했다.
먼저 기초적 요소인 Color / Text / Icon / Shadow의 기준을 잡고 이를 활용하여 Button / Input box / Search bar / List 등의 컴포넌트들로 확장해 나갔다.
작업했던 디자인 시스템 가이드를 다시 보니 부족한 부분들이 정말 너무나도 많았다. 시간이 짧았던 프로젝트인 만큼 개발 리소스를 줄일 수 있도록 컴포넌트의 재활용을 고려했어야 했는데 불필요한 컴포넌트의 생성이 많았다.(개발 팀원들 미안합니다....)
4. 인터랙션 Lottie 활용하기
Lottie는 렌더링 되지 않는 표현 방법이 많다. 그래서 반드시 Lottie 홈페이지에 있는 운영체제별 지원 표현을 확인하고 작업해야 한다. 이 부분을 모르고 바로 After Effect 작업을 하게 되면 재작업을 해야 하는 노가다 로 변할 수 있다.
이전 프로젝트에서 글라스모피즘 그래픽 요소를 연출했었는데, Blur 값을 지원하지 않아서 Gradient로 한 땀 한 땀 그렸던 슬픈 추억이 있다.. 이후로 작업 전 항상 점검하게 되었다.
https://airbnb.io/lottie/#/supported-features
저니피키에서는 비교적 간단한 Like(투표) 인터랙션을 제작하기 위해 사용했다.
5. 마무리
UI 설계 / Wrting / 디자인 시스템 / 인터랙션 제작까지 모든 프로세스를 경험했다. 타임라인이 짧기 때문에 디테일이 떨어지는 부분들은 있지만, 시간 내에 최대한 낼 수 있는 퍼포먼스의 기준을 높일 수 있었다.
다만 화면에서 발생하는 Case를 미리 고려하는 것에 집착하다 보니, 디자인 컴포넌트에 대한 개발 리소스를 고려하지 못했던 부분들이 아쉬웠다. 추후 진행하는 프로젝트에서는 해당 부분을 반드시 보완해야겠다.
[서비스 사이트]
