엥.. 피그마 플러그인을 만들라고요? 제가요?
figma plugin project 1
근황토크
안녕하세요~ 브런치 써야지 써야지 말만 200번 하다가 드디어 오늘 쓰게 되네요.
꽤나 보편적인 변명이지만, 최근 구직을 위해 포트폴리오도 준비하고 농약 같은 외주와 사이드프로젝트를 병행하다 보니 정말 너무 바빠서 쓸 시간이 없었네요ㅎㅎ
그래도 바쁜 덕에 소재는 굉장히 많이 생겼기 때문에, 정말 성실하게 다시 잘 써보겠습니다..
배경
갑자기 피그마 플러그인을 만들게 된 이유는 딱히 명확하지 않습니다.
예전부터 피그마가 망하지 않는 이상 플러그인이라는 제품은 디자이너라는 타깃이 명확하기 때문에 꽤 유효한 파이프라인이라고 생각하고 있었고, 최근에 회사에서 리액트를 찍먹 하면서,
이제 만들 수 있겠다고 생각해서 착수했을 뿐입니다 하하..
어떤 플러그인을 만들어볼까?
아무래도 제가 디자이너이기도 하고, 주변에 디자이너가 많기도 하고, 피그마도 디자이너들이 많이 사용하는 툴이다 보니까 디자이너를 돕는 플러그인을 제작해야겠다고 생각했어요.
여러 가지 아이디어는 갖고 있었지만, 우선 빠르게 전체 플러그인 배포 플로우를 경험해야겠다고 생각해서,
다소 무거운 제 아이디어는 스킵하고, MVP로 최대한 빠르게 만들 수 있는 플러그인을 제작하기로 했습니다.
워낙 주변에 아이디어 좋으신 분들이 많아서 우선 단톡방에 물어봤어요.
정말 든든한 단톡입니다..좋은 아이디어들이 많았지만, 그중 플러그인을 정리하는 플러그인이 작은 스코프로 빠르게 검증하기 좋겠다 싶었고, 무엇보다 저 문제가 저도 크게 공감되어서 저 아이템으로 결정하게 되었습니다.
(PS. 지숙님 감사해요! 예전부터 느꼈지만 지숙님은 진짜 아이디어 뱅크…✨)
왜 문제인가요?
디자이너라면 분명 한 번쯤은 공감하실 것 같은데, 피그마는 플러그인 사용이 꽤 불편합니다. 개인적으로 느꼈던 불편사항으로는 다음과 같은데요.
플러그인 목록은 최근 실행한 순서로 쌓이게 됨
최근 실행 목록은 같은 계정이어도 기기마다 다르게 쌓이게 됨
플러그인은 직접 써봐야 알 수 있어서 하나씩 쓰다보면, 최근 플러그인 목록이 더러워짐
항상 플러그인을 목록에서 찾기보단, 검색해서 찾아서 실행시키는 경우가 많았고,
같은 계정이더라도 개인 컴퓨터로 실행했던 플러그인을 회사 컴퓨터로 실행하면 최근 목록에서 확인할 수 없기 때문에 번거로웠던 경험이 있었어요.
그래서 이 문제를 해결하기로 마음먹었답니다.
어떤 어려움이 있었나요?
사실 이 아이템을 처음 구상했을 때는, 매우 간단하다고 생각했어요.
“그냥 내 최근 플러그인 목록에서 플러그인 정보를 받아와서 정렬해 주고 누르면 실행시키면 되는 거 아닌가?”
“응 아니야~”
피그마의 플러그인 개발 정책은 굉장히 까다롭더라고요. 일단 애초에 내 목록을 받아올 수 없었어요.
또 개발은 완료한 시점인 지금 생각해 보면 리즈너블 한데, 당시 충격적인 것들은
플러그인에서 유저의 데이터는 이름과 이메일 정도밖에 받아올 수 없음
플러그인은 다른 플러그인을 실행시키는 권한이 없음
내 플러그인에서 생성되는 데이터는 해당 플러그인을 실행시킨 본인의 컴퓨터(Client Storage)에 저장되어야 함
특히, 세 번째 문제는 꽤 크리티컬 했는데, 기존 피그마의 최근 목록이 기기마다 다른 것은 결국 해당 목록이 계정에 귀속되지 않고 컴퓨터(local)에 귀속되기 때문인데, 저 역시 똑같은 구조에서 놀아야 한다는 말이기 때문입니다.
즉,, 플러그인을 정리하는 플러그인을 만들더라도, 컴퓨터마다 내가 정리한 목록이 다르게 보인다는 말이죠. 마치 피그마의 최근 실행 목록처럼요. 하핫..
물론 생각나는 방법은 많이 있습니다. 외부에 DB를 두고 로그인을 붙이던가, 내 정리 목록을 import&export 하는 등 다양하게 있겠지만, MVP와는 어울리지 않는 방법이라고 생각했고 결국 제가 생각했을 때 커버리지가 가장 높은 해결책은..
해당 플러그인을 실행시킨 컴퓨터와 디자인 파일에 차례대로 데이터를 저장하고, 두 곳의 데이터 중 최신 데이터를 검증해서 둘 다 최신 데이터로 업데이트 방식입니다.
이 방법을 선택한 이유는 다른 컴퓨터 2개(local)로 각각 작업을 하더라도 하나의 디자인 파일을 작업할 확률이 높기 때문입니다.
예를 들어, 회사 컴퓨터에서 “AAA”라는 디자인 파일에서 플러그인을 실행시켜 다음과 같이 정리했어요.
Category1. 프로토타입
▶️ A, B
Category2. UI 패턴
▶️ C, D, E
Category3. 그래픽 리소스
▶️ F, G, H
우선적으로 회사 컴퓨터에 저 목록이 저장되었기 때문에, 회사 컴퓨터에선 어떤 디자인 파일을 들어가서 플러그인을 실행해도 A~H까지의 목록은 똑같이 보일 거예요.
그런데 문제는 만약 컴퓨터와 디자인 파일 간에 데이터를 동기화하지 않는다면, 집에서 똑같이 회사 계정으로 “AAA”라는 디자인 파일에 들어와도 A~H까지의 목록을 확인할 수 없어요.
목록이 저장되지 않은 다른 컴퓨터이기 때문이죠.
그래서 우선적으로 컴퓨터에 목록 데이터를 저장하고, 곧바로 “AAA”라는 디자인 파일에도 다시 저장해 두는 동기화 방식을 선택했습니다.
이렇게 되면, 플러그인을 실행시킨 컴퓨터가 다르더라도 “AAA”라는 디자인 파일을 실행시킨 순간, “AAA”에 저장된 데이터를 이전과 다른 이 컴퓨터에도 저장시키기 때문에 두 컴퓨터가 동일한 목록을 볼 수 있게 되어요.
사실 이 동기화에 대한 내부 로직은 꽤 복잡합니다. 예를 들어, 두 곳에 저장된다고 해도, 어떤 조건과 주기에 따라 해당 목록 데이터를 동기화해야 하는지 컴퓨터는 알 수 없기 때문에, 특정 로직을 잡아줘야 하는데 단순히 시간을 기준으로 잡기에는 예외 케이스가 생길 수 있기 때문이죠.
그래서 솔직히 오늘 본문보다 개발적으로 고민했던 내용이 훨씬 길지만… 제 브런치는 놀랍게도 디자이너를 위한 블로그이기 때문에 꾹 참고 스킵하겠습니다.
고민의 흔적 첨부복잡한 얘기는 생략하고, 아무튼 현재 목적 자체는 빠르게 플러그인 배포 플로우를 태우는 것이기 때문에 가장 효율적인 방식을 택해서, 최대한 간단하게 구현해 두었습니다.
가능하면 외부 DB를 사용하는 게 베스트니깐요. (아마도..)
어떻게 되었나요?
지금은 문제가 꽤 있지만 곧 빠르게 개선해보겠습니다.. 커밍 soon~https://www.figma.com/community/plugin/1411371212812217200/my-real-plugin
버튼의 글자랑 이모지 간격 좁은 거 저만 킹 받나요?
사용법은 간단합니다! 피그마 커뮤니티나 플러그인 상세 정보에서 해당 플러그인 링크(URL)을 복사해서 입력창에 붙여 넣고 아래의 항목들을 입력해서 저장하면 돼요~!
다만, 현재는 이 플로우 역시 꽤 번거롭기 때문에, 추후에는 제 플러그인 내부에서 플러그인을 조회하고 바로 저장할 수 있도록 개선할 예정입니다!
후.. 새벽 4시쯤 첫 배포했을 때의 순간이 잊히지가 않네요. 만들고 나니 참 별 게 없다 싶으면서도 뿌듯했어요. 불과 한 달 전만 해도 “내가 어떻게 해~”라고 생각하고 있었는데, 역시 우리 삶에서 ‘시작’이 가장 큰 허들이네요.
디자이너인 제가 이 플러그인을 제작하는 데 걸린 시간은 5일 정도인 것 같아요. 퇴근하고 남는 시간에 했다는 걸 고려했을 때 풀타임이었으면 더 빨리 할 수도 있었을 것 같네요.
물론 디자인이나 브랜딩적인 요소는 의도적으로 배제하는 걸 전제로 산정된 시간이죠. 장담하는데 이름 짓는 데 걸리는 시간이 5일보단 길 것 같네요.
사실 제가 만들었기 때문에 벌써 어떤 점이 부족하고 불편한지 인지하고 있지만, 현재 이 개선 과정을 하나의 프로젝트로 준비하고 있어서 크게 손대지 않았어요.
또한, 같은 이유로 현재는 public 하게 공개해두지는 않았지만, 어느 정도 준비가 되면, 본격적으로 홍보를 시작해 보겠습니다 후후..
앞으로 어떻게 할까요?
아직 현재까지도 경력이 없는 제가 그동안 느꼈던 채용 시장의 불편함 중 하나는 예비 프로덕트 디자이너들은 제품을 개선시키는 경험을 하기 정말 어렵다는 점이에요.
경력이 없으니 네카라쿠배당토 같은 선망하는 기업은 꿈도 못 꾸고, 기껏해야 사이드프로젝트 출시 경험 하나로 우려먹을 수밖에 없는데, 그런 경험은 실무자들에게 크게 와닿지 않죠.
단순히 취업 이전의 문제는 아니에요. 우여곡절 스타트업에 신입으로 들어가더라도, 진짜 제품을 개선할 경험을 하기는 굉장히 어렵습니다. 절반은 랜딩페이지나 PPT를 만들고 있을 확률이 높아요.
그래서 생각했습니다. 그런 제품 개선 경험이 없는 사람이 쉽게 본인의 제품을 갖고 개선하는 경험할 수 있는 순간들을요! 피그마의 존속이라는 디펜던시가 있긴 하지만, 플러그인은 시장과 경쟁자, 타깃 모두 명확히 있는 생태계이고, 무엇보다 여러분들은 피그마에 친숙하잖아요~!
그래서 앞으로 관심 있는 디자이너들에게 기획을 받아서, MVP까지만 배포해 주고 제품의 모든 오너십을 넘길 생각이에요. 많은 디자이너들의 창의적인 활약이 기대되네요!
당장은 구직 이슈로 힘들겠지만, 이 역시 어느 정도 안정화되면 빠르게 진행하고 현황을 알려드리겠습니다 후후.
짧은 회고.
요즘 절실히 느끼는 것 중 하나는, 백엔드를 고려하지 않는다는 전제하에 디자이너가 리액트 같은 프론트 언어를 배우는 것은 메이커로서 굉장히 큰 잠재력을 가지게 되는 것 같아요. 디자인과 코딩을 동시에 할 수 있거든요..
물론 이런 게 "디자이너로서 강력한 무기"가 된다고 생각하지는 않습니다. 디자이너는 디자인을 하는 사람이기에, 본인의 역량은 철저하게 디자인으로 이야기해야 한다고 생각합니다.
하지만, 이런 구현 로직을 어느 정도 이해한 디자인을 한다면?! 혹은 이런 이해를 바탕으로 협업을 진행한다면?!
음.. 그래도 디자인을 잘하는 게 제일 중요한 것 같네요. 사업 생각 있는 게 아니라면, 개발 공부 말고 디자인 공부를 하십시오..!!
종종 어떻게 배우지도 않은 개발을 하냐고 물어보시는 분들이 꽤 있는데, 저도 잘 모릅니다. 여태까지 했던 모든 과정은 철저하게 GPT나 구글링으로 복붙해와서 그 안에서 규칙을 찾고 파라미터를 조금씩 수정하는 방식으로 진행했어요. 구현을 위한 요구사항만 명확하게 나의 언어로 정리할 수 있으면, 분명 누구나 할 수 있다고 생각합니다..
또한.. 현재 저에게 이런 GPT based 개발이 파파고를 사용해서 영어 이력서를 쓰는 것과 비슷하다고 생각해요.
X라는 목적을 위해 파파고로 영어 이력서를 작성하는 상황에서 중요한 건.. 영어 문법이 아니라 X라는 목적을 이룰 수 있는 이력서 내용인지가 가장 중요하듯, 제가 고민할 부분은 개발 언어 자체가 아니라 이 기능이 고객의 문제를 해결할 수 있는가? 가 되어야 한다고 생각하면서 작업하고 있습니다.
갑자기 엄숙하게 글이 마무리되고 있네요. 아무튼 정말 재미있는 경험이었고, 잘 진행시켜서 또 찾아오겠습니다.
하 내일 예비군인데 너무 가기 싫네요. 그럼 안녕!
