유아이볼 피그마 플러그인 오픈
레퍼런스를 더욱 쉽게 가져와 보세요!
안녕하세요, 인턴 디자이너 이미영입니다. 즐거운 추석 연휴 보내셨나요? 아쉬움을 뒤로하고 모두 일상으로 돌아오셨겠지만, 지난 연휴만큼 반가운 소식을 들고 찾아왔어요.
바로 레퍼런스 이미지를 피그마로 손쉽게 가져올 수 있는 유아이볼 플러그인이 드디어 출시되었어요! 플러그인이 어떻게 탄생했는지부터 제작 과정, 그리고 사용 방법까지 함께 자세히 알아볼까요?
(플러그인 사용해 보기 : https://www.figma.com/community/plugin/1416283003258937842/uibowl)
플러그인이 왜 필요할까?
유아이볼팀은 약 한 달 전 UT를 진행했고, 그때 얻은 인사이트를 바탕으로 이번 플러그인을 개발하게 되었어요. 먼저 UT에서 어떤 인사이트를 얻었는지 공유드릴게요.
* UT 이야기는 여기서 보실 수 있어요! : https://brunch.co.kr/@boldydesign/66
첫 번째로, 사용자들의 레퍼런스 활용 및 작업 방식을 질문드렸어요.
보통 레퍼런스를 참고하며 작업하실 때, 어떤 방식으로 작업하시나요? (ex. 따로 레퍼런스 창을 띄워놓고 작업 / 디자인파일에 불러와 수시로 확인하며 작업 등)
참가자들의 답변은 이러했어요 :
이처럼 모든 참가자들이 작업 중 레퍼런스를 함께 확인하는 공통점이 있었고, 세 분은 복사-붙여넣기 방식을, 나머지 한 분 또한 플러그인을 사용해 피그마에서 확인하고 계셨어요.
두 번째는 북마크 이용 행태와 관련한 사용성 테스트를 진행했어요.
이미지 및 패턴을 북마크 한 후, 내역을 확인하는 과정을 테스트했는데요. 제가 요청한 필터링 조건 내에서 원하는 이미지와 패턴을 북마크 하고 그 내역을 확인하는 절차였어요. 여기서 얻은 핵심 인사이트는 참가자는 전부 유아이볼 이용 빈도가 높은 분들임에도 불구하고 북마크 기능의 존재를 아는 참가자는 20%에 불과했고, 모든 참가자가 북마크를 거의 사용하지 않았다는 점이었어요.
그 이유를 여쭤보니, 다음과 같은 답변을 들을 수 있었어요 :
이를 통해 사용자는 북마크 기능보다 직접 이미지를 저장하는 방식을 더욱 선호하고, 북마크의 필요성을 크게 느끼지 못한다는 점을 알 수 있었어요. 기대했던 것보다 북마크 기능의 활용도가 훨씬 낮았으며, 사용자는 작업 파일에서 이미지를 함께 확인하는 방법을 선호한다는 사실을 다시 한번 확인할 수 있었어요.
작업 프로세스를 줄일 수 있는 방법 탐색하기
UT를 통해 얻은 인사이트를 정리하고, 그에 대한 해결 방안을 모색하는 시간을 가졌어요.
작업 파일에 레퍼런스를 불러오는 방식 선호
대다수의 참가자분들은 작업 파일에 레퍼런스를 불러와 즉각적으로 쉽게 참고할 수 있는 작업 환경을 선호했어요. 따라서 북마크의 이용률도 현저히 낮게 나올 수밖에 없었어요.
비효율적인 콘텐츠 저장 방식
참가자분들이 작업 시 레퍼런스를 복사해 디자인 파일에 붙여 넣는 방식을 사용했지만, 여러 이미지를 가져오려면 생각보다 번거롭고 여러 단계를 거쳐야 했어요.
따라서 UT 결과를 바탕으로 두 가지 주요 목표를 설정했어요.
1. '유아이볼의 대표 사용자인 디자이너가 주로 사용하는 툴'인 피그마와의 연동을 통해 디자이너의 작업 환경에 밀접하게 다가가, 효율적인 작업을 지원해요.
2. '작업 프로세스를 간소화할 수 있는 방법'으로 이미지 단일/다중 임포트 기능을 제공하는 플러그인으로 작업 효율성을 높여요.
여러 UI/UX 디자인 툴 중에서 피그마를 선택한 이유는 UI/UX 디자인 소프트웨어 시장에서 피그마의 점유율이 약 83.4%에 달해, 대다수의 디자이너들이 피그마를 사용하고 있어 접근성이 높기 때문이에요.
피그마 플러그인은 반복적인 작업을 자동화하고 간소화할 수 있는 많은 편리한 기능을 제공하고 있어요. 플러그인 추천 포스팅을 읽어보면 공통적으로 '유용', '쓸모 있는', '시간 단축', '효율' 등의 단어를 많이 볼 수 있죠. 이를 통해 피그마 플러그인은 피그마에서 제공되지 않는 기능이나 특정 상황에서 효율을 높일 수 있는 기능이 필요할 때 사용된다는 것을 알 수 있어요.
유아이볼 역시 레퍼런스를 불러오는 과정을 간소화하여 불필요한 작업을 줄이고 작업 속도를 높이는 기능을 제공하고자 하는데요. 이는 기존의 피그마 플러그인의 효과와도 동일하다는 점을 확인할 수 있어요.
디자인 작업 & 플러그인 검수 요청
디자인 작업은 web 작업과 피그마 내 플러그인 작업을 함께 진행했어요. 먼저 여러 시안들을 제작한 후, 코멘트와 리뷰를 이어가며 디자인을 확정 짓는 과정으로 작업이 진행되었어요.
이번 디자인 작업에서 아쉬웠던 점은 다양한 케이스를 충분히 고려하지 못해 기능과 플로우에 구멍이 발견되었고, 이로 인해 개발 기간과 개발자분과의 커뮤니케이션이 예상보다 많이 늘어나게 된 점이에요.
기본적인 부분에서 실수를 했다는 사실에 협업하는 분들께 죄송하고 제 자신에게도 아쉬움이 많이 남았지만, 이 경험을 통해 CRUD 개념, 예외 케이스를 고려하는 부분에서 더욱 세심하게 진행해야겠다고 다시 한번 배울 수 있는 계기가 될 수 있었어요.
*CRUD : 소프트웨어에서 데이터를 처리하는 네 가지 작업. create(생성), read(읽기), update(수정), delete(삭제)를 의미하며, 이 네 가지 작업을 고려하여 디자인하면 기능이 누락되는 것을 막을 수 있어요.
플러그인 검수 요청은 어렵지 않게 진행할 수 있어요.
1️⃣ 배포할 플러그인의 오른쪽에 위치한 미트볼 메뉴에서 'publish new version'을 선택해 주세요.
2️⃣ 플러그인 이름, 설명 등 필수 항목을 모두 채워주세요.
자세한 설명은 피그마의 안내를 꼭 참고해 주세요 : https://help.figma.com/hc/en-us/articles/360042293394-Publish-plugins-to-the-Figma-Community#Creators_and_contributors
3️⃣ 모두 채우신 후, 오른쪽 하단의 'submit for review'를 눌러주시면 7~10일 내로 피그마의 검수 결과를 받으실 수 있어요.
(이미지는 이미 퍼블리시된 플러그인이라 문구가 달라요!)
저희는 주말 포함 5일 정도가 소요되었어요.
플러그인 함께 사용해 봐요!
이제 피그마 플러그인을 사용하는 방법을 알려드릴게요.
1️⃣ 유아이볼(https://uibowl.io/)에서 원하는 이미지를 hover하여 체크박스를 선택해 주세요.
2️⃣ 이미지를 고르셨다면, 사이트 하단에 생성된 '내보내기' 버튼을 눌러 주세요.
* 선택한 이미지를 초기화하고 싶다면, 초기화 버튼(�)을 눌러 주세요.
3️⃣ 피그마로 이동해 플러그인을 실행한 뒤, '불러오기 버튼'을 선택해 주세요.
* 피그마 데스크탑 앱에서만 사용 가능해요. (피그마 앱 다운로드 : https://www.figma.com/ko-kr/downloads/)
* 내보낸 후 버튼이 5초 동안 유지돼요. 동일한 이미지를 다시 내보내고 싶으시면, 사이트에서 '다시 내보내기'를 선택해 주세요.
아래의 릴스, 영상을 통해 더 쉽게 사용 방법을 익혀보세요!
* 릴스 : https://www.instagram.com/reel/DABInemv7lt/?igsh=Z20wdTJib3U0Z3Rt
이번 UT 결과의 인사이트를 바탕으로, 사용자에게 더 나은 경험을 제공하기 위한 기능 개발이 진행되었어요.
UT 전에는 유아이볼의 레퍼런스를 어떻게 활용하실지 가늠하기 어려웠지만, UT를 통해 사용자분들의 활용 방식과 선호하시는 다양한 부분들에 대해 명확히 파악할 수 있었어요. 이렇게 UT의 중요성을 다시 한번 깊이 느낄 수 있었던 기회였어요.
한 번의 UT 결과가 확실한 정답이 될 수 있는 것은 아니지만, 앞으로 멈추지 않고 계속해서 검증하고 개선한다면 분명 많은 분들께 좋은 경험을 전달드릴 수 있을 것이라 생각해요.
만약 플러그인 개선이 필요하다고 느끼신다면, 언제든지 말씀해 주세요. 소중한 피드백을 바탕으로 더 나은 경험을 제공해 드릴게요. 감사합니다!
유아이볼은 국내 최대의 UI/UX 패턴을 학습할 수 있는 플랫폼으로 국내에 MVP 버전으로 출시한 지 3개월 만에 사용자가 월 6,000명이 넘었고 현재는 30,000명이 넘는 사용자가 이용하고 있어요.
유아이볼 플러그인 다운로드 : https://www.figma.com/community/plugin/1416283003258937842/uibowl
유아이볼 링크 : https://uibowl.io/
더 빠르게 아티클과 앱 업데이트 소식을 듣고 싶다면 오픈채팅방 링크로 들어오세요.
https://open.kakao.com/o/gU1kVgTf
