Design
여기어때 피그마 플러그인 제작기
여기어때 UX Center여기어때
2024년 6월 21일
원문에서 보기 ↗글. 한혜진(Pixie) / UX Designer
부제. 피그마 플러그인 ‘여기쏙’ 개발
일하면서 가장 고역인 순간을 꼽자면 아마도 비효율적인 일이 여러 번 반복될 때가 아닐까 싶어요. 게다가 한 사람이 아닌 여러 사람들이 공통적으로 겪는 일이라면 더더욱 문제이지 않을까 싶은데요. 올해 초, 피그마 플러그인 개발로 여기어때 디자이너들의 비효율을 해결한 이야기를 소개해보려 합니다.
여기쏙의 시작
여기어때 플러그인 개발은 어떻게 시작되었을까요? UX 센터에는 팀 내 비효율을 제거하는 Design Ops TF팀이 있어요. 작년 하반기부터 저를 비롯해 테나(Design System Owner), 제티(UX Writer)는 디자인 시스템과 Design Ops 업무를 담당하면서 효율적인 디자인 프로세스 구축에 대한 고민과 관심이 많았어요.
Design Ops 업무를 진행하면서 느낀 점 중 하나는 회사마다 워크프로세스가 다르기 때문에 우리 팀의 문제점을 100% 해결해 줄 수 있는 툴이나 레퍼런스를 찾기 쉽지 않다는 것이었어요. 그래서 효율적인 업무를 위해 생산성을 높여줄 사내 툴을 직접 만들어보기로 합니다. 우리뿐만 아니라 다른 회사에서도 각 팀 프로세스에 맞는 툴을 직접 개발했다는 점이 여기쏙 개발 열정을 더욱 끌어올렸었죠.
여기쏙 개발 전 열심히 찾아본 타사 레퍼런스
피그마 플러그인 개발을 하려면 우선 개발자가 필요했어요. 사내에 유능하고 열정 있는 개발자분들을 찾아 제안하고, 본격적으로 프로젝트를 킥오프 하게 되었죠. 프로젝트를 시작하며 중요하게 생각했던 건 ‘즐겁게, 가볍게, 본업에 지장 없게’였어요. 이를 셀링포인트 삼아 테나(김지영/UXD)와 제티(이소연/UXW)가 사내 동호회와 프로젝트를 함께 했던 개발자분들을 모셔오게 됩니다. 총 6명의 정예(?) 멤버들이 모였고 ‘스쿼드Y(Y=여기어때의 Y를 의미)’라는 팀명도 붙이며, 신나게 개발에 박차를 가했습니다.
기간제 스쿼드 Y 최정예 요원들
시간 잡아먹는 더미데이터 넣기, 어떻게 해결할 수 있을까?
피그마 위에서 함께 프로젝트를 일구어 가는 사람들
앞서 말씀드렸듯 저희는 피그마 내에서 발생하는 문제들에 관심이 많았어요. 대부분 프로젝트의 커뮤니케이션(PO, UX, DEV)이 피그마에서 이뤄지고 있었고, 업무와 가장 밀접한 툴이기 때문에, 피그마 비효율 개선 시 임팩트가 있을 거라 생각했었어요.
그중 주목할 만한 문제점은 아래와 같았죠.
“디자인 리뷰나 사용자 테스트(UT)를 준비할 때, 디자인에 데이터를 채우는 과정이 번거롭다”는 것이었습니다.
더미 데이터를 채울 때, 다음과 같은 과정을 겪는데요.
폰을 든다 > 여기어때 앱을 켠다> 원하는 정보가 있는 페이지에 들어간다 > 눈으로 보고 디자인에 따라 적는다.
여기어때 웹에 접속한다 > 원하는 정보가 있는 페이지에 들어간다 >디자인에 내용을 복사 붙여 넣는다.
이처럼 내용을 따라 적거나 복사 붙여넣는 과정이 예상외로 많은 시간을 들이고 있었어요. 또, 더미데이터를 직접 작성한다 해도 만들어내는데 꽤 많은 공수가 들었고, UT를 할 때 유저들이 실제 확인할 만한 정보를 넣어야 했기 때문에 여러모로 시간을 잡아먹는 과정이었죠. 또 디자인 리뷰 일정이 촉박해 데이터를 임의로 입력하면, 데이터를 섬세하게 맞추지 못하는 경우도 있는데요. 이럴 땐 리더분들(매의 눈)께서 UX 콘텍스트와 맞지 않다는 피드백을 주시기도 하셨어요.
이런 비효율을 제거하기 위해 버튼만 누르면 디자인에 데이터를 쏙 넣어주는 도구가 있다면 얼마나 좋을까?라는 문제점에서 시작해 피그마 플러그인을 개발하게 되었죠. 이 툴을 통해서 데이터 입력 과정을 간소화하고, UX 설계에 좀 더 집중할 수 있기를 기대했어요.
그래서 탄생한 여기쏙은 여기어때의 상품 카드에 숙소 이미지, 가격, 리뷰 등 여러 요소들을 자동으로 삽입해주는 플러그인이에요.
플러그인 구조에 대한 아이디어는 테나(김지영/UXD)가 제안해주셨어요. 플러그인 레이어 이름을 특정 이름으로 지정하면 자동으로 데이터를 넣어주는 플러그인이 있는데요. 이를 참고해서 개발 착수하게 됩니다.
여기쏙 1.0 배포
약 3개월을 거쳐(기획, 개발, 삽질 포함) 지난 2월 여기쏙이 팀에 배포되었습니다. UX 센터 위클리, 프로덕트 센터 먼슬리를 통해 여기쏙 배포를 널리 홍보했어요. 여기쏙은 여기어때 디자이너분들이 자주 사용하는 컴포넌트인 셀러카드*, 아이템카드*, 리뷰 등의 데이터를 자동으로 넣어줄 수 있어요. 물론 특정 레이어만 콕 집어서 바꿀 수도 있고요.
셀러카드
아이템카드
*상품카드 : 검색 결과에 나오는 숙소 리스트 컴포넌트
*아이템 카드 : 숙소 페이지 내 객실 리스트 컴포넌트
구조를 간단하게 설명해 드리면 여기쏙이 미리 지정해 둔 Value값이 있어요. Value는 사용자가 설정해야 할 레이어명이 됩니다. 데이터를 넣고 싶은 레이어의 이름을 여기쏙이 지정해 둔 Value로 바꾸면, 해당 레이어에 랜덤하게 데이터를 자동으로 넣어줘요.
배포 후 디자이너, PO, 프로덕트 센터 리더분들까지 스쿼드Y 에게 뜨거운 박수와 피드백을 보내주셨어요 (감동). 반복되던 작업 시간이 줄어들어 유용하게 사용하고 있다는 긍정적인 피드백을 받기도 하고. 숙소의 카테고리별로 데이터가 들어가는 기능이 추가되면 좋겠다는 의견도 있었어요.
한 번의 배포로는 아쉬워 동료분들이 주신 의견을 바탕으로 현재는 여기쏙 1.2.0 버전을 개발 중이에요. 이미지 화질 개선, 숙소 카테고리 별 (모텔, 호텔) 지역별(강남, 제주, 해외 등등)로 데이터를 삽입해 주는 게 주요 개선 사항입니다.
마무리
회고 내용
매주 수요일 퇴근 후 회사 지하 카페에서 모여 여기쏙 프로젝트를 진행했는데요. 작업하면서 도란도란 사는 이야기도 하며 재밌게 미팅을 진행했던 기억이 새록새록 나네요. 대화하기 편한 분위기가 만들어지니 직군에 상관하지 않고 자유롭게 의견을 주고받을 수 있었고. 결과적으로 모두가 기획, 디자인, 개발의 전 과정에 함께 참여할 수 있던 것 같아요.
회고에서도 “선형적인 프로세스가 아니라 초반부터 다 같이 만들어가는 과정이 좋았다”가 공통의 의견으로 모이기도 했습니다. 여기쏙 메인 개발자 제티(박정훈/FE)께서도 “실시간으로 사용성 피드백을 받아 개선해 나가는 게 좋았다”는 의견을 주셨어요 . 사용성에 대한 피드백을 받을 수 있다고 얘기하신 걸 보아, 정말 격 없이 프로젝트를 진행했다는 생각이 들었습니다. 또, 테나(김지영/UXD)께서 “우리가 필요한 걸 우리가 스스로 찾는 과정이 좋았다, 우리에게 필요했기 때문에 이 프로젝트가 더 와닿았다.” 주신 의견이 인상 깊었어요.
개인적으로도 이번 프로젝트를 통해 디자이너분들의 업무 효율을 실질적으로 향상할 수 있었다는 점이 뿌듯했어요. 동료분들의 애정 어린 피드백들이 앞으로도 이런 비효율을 개선해보고 싶게 만드는 큰 동기부여가 되기도 했습니다.
처음 시작은 비효율을 제거하기 위한 사이드 프로젝트였지만, 함께 성장하고 도전하는 귀중한 협업 과정을 경험하게 되어 더욱 뜻깊은 프로젝트가 되었던 것 같아요. 멋진 프로젝트를 이끌어준 스쿼트 Y 멤버들에게 다시 한번 감사드리고, 따듯한 응원과 관심 가져주신 UX 센터 팀원분들에게도 감사합니다. 여기쏙 제작기는 이만 마칩니다.
✔️ 글쓴이를 더 알고 싶다면?:링크드인
구성 및 편집: 이소연(Jetty) UX Writer
그래픽: 김제린(Riny) Visual Interaction Designer
*해당 글과 이미지를 인용 또는 재가공 시 출처를 꼭 밝혀주세요.
추천 글