기획자를 위한 피그마 위젯
ETC안녕하세요 Lovefield입니다.
최근 기획서를 피그마에서 작성하고 있습니다. 좁은 PPT의 환경보다 넓은 대지를 가진 피그마 환경에서 작업을 하니 훨씬 수월하게 기획서가 작성되고 있는데요. 편한것도 잠시, 불편한 점이 발견되었습니다. 공간 제약이 없다보니 한 페이지에 입력한 설명블록이 너무 많아져버린 것입니다. 와이어 프레임 상에서 설명 블록의 번호를 찾은뒤 다시 설명을 보기 위해 설명블록이 있는 위치까지 이동해야 했습니다. 꽤나 거리가 있었고 정보를 확인하는 과정이 매우 번거롭게 되어버렸습니다.
번호를 확인하고 다시 설명을 보러 가야하는 상황
와이어 프레임에 표시할 정보가 많을 수록 큰 문제가 되었습니다. 거기다 정보의 종류도 한가지가 아니라서 더 문제가 되었습니다. 유저가 보는 것에 대한 설명, 유저가 보지 못하는 기능에 대한 설명, 유저의 행동을 어떻게 기록할 것인가에 대한 설명, 마지막으로 디자인적 추가 설명에 대한것들이 있습니다. 이러한 정보들이 한 페이지에 각각 20~30개 씩 적혀 있다보니 가독성이 많이 떨어진 상태였죠. 저는 해결책을 찾아야 했습니다.
마침 피그마는 플러그인과 위젯을 제공하고 있었습니다. 한번 피그마 플러그인을 만든 적이 있어서 관련 사항에 대해 잘 알고 있었습니다. 결국 불편함을 참지 못한 저는 친한 디자이너 한분(https://www.figma.com/@designaeunkim)과 함께 위젯을 만들기로 결정합니다.
위젯을 만들기 위한 기획서
불편한점이 확실했기 때문에 원하는 바 또한 확실했습니다. 간단하게 기획서를 작성하고 디자이너분에게 기획서를 넘겨 드렸습니다. 핵심적인 기술은 다음 세가지입니다. 포인터를 클릭하면 설명블록의 설명을 볼 수 있게 만드는것, 중간 번호의 설명블록이 삭제 되면 번호가 자동으로 정렬되는 것, 설명블록과 페이지 이름, 페이지 설명이 흩어지지 않을 것. 이 기능들을 중점적으로 기획서를 작성했습니다.
위젯 디자인
디자이너분도 불편한 점에 대해서 동일하게 인지하고 있었던지라 이해도가 높은 상태였습니다. 몇몇 기술적인 안내를 드린 뒤로는 디자인이 일사천리로 진행되었습니다. 아쉽게도 기능적인 이슈로 버튼상태를 변경 할 수 없었지만 디자인과 크게 벗어나지 않게 작업이 진행 되었습니다.
기능을 연구하는데 일주일 정도를 소비하며 위젯을 개발했습니다. 기존에 플러그인을 한번 만들었던 경험이 있었던지라 위젯 API를 이해하는데는 많은 시간이 필요하지 않았습니다. 2~3일에 걸쳐 위젯이 개발되었고 4일정도의 검수시간을 가진뒤 피그마 커뮤니티에 배포되었습니다.
나… 스크롤 안 해도 돼?
배포된 위젯을 사용해보니 저희가 의도한 기능들이 전부 정상작동 되는것을 확인 했습니다. 몇몇 버그들을 수정한뒤 실제 기획서에 적용하는 중입니다. 이제 더이상 정보를 확인 하기위해 화면을 이동하지 않아도 됩니다. 피그마로 기획을 하면서 불편했던 점을 캐치해서 위젯을 만들어 보았는데요. 많은 사람들에게 도움이 되길 바라며 이번 글을 마치겠습니다.
