코드 모르는 디자이너가 5시간 만에 Figma 플러그인을 만든 방법

디자인하는 데 30분, 더미 데이터 넣는 데 30분. 채널톡 프로덕트 디자이너 클레어(김윤지)가 체감한 현실이에요. 사용 가이드, 업데이트 노트, 마케팅 소재 — 이런 화면들에 그럴듯한 더미 데이터를 넣어야 하는데, "홍길동", "[email protected]" 같은 데이터는 몰입을 깨뜨리잖아요. 그렇다고 매번 현실적인 이름과 이메일을 고민하자니 시간이 디자인만큼 들어가더라고요.

더 짜증나는 건 일관성 문제였어요. 여러 화면에 같은 사용자가 등장해야 하는데, A 화면에서는 "김민수"이고 B 화면에서는 "이영희"가 되어버리는 거죠. 결국 원했던 건 단순했어요. 데이터셋을 저장해두고, 필요할 때 바로 불러와서 Figma에 적용하는 것. 기존 플러그인들을 뒤져봤지만 딱 맞는 게 없었고, 직접 만들면 팀원들도 같이 쓸 수 있겠다 싶어서 도전했어요.

코드를 모르는 디자이너가요.

Claude로 PRD 짜고, Cursor로 바로 개발에 들어갔다

팀 내에서 Cursor, Lovable, Figma Make 같은 바이브 코딩 도구를 조금씩 써봤던 터라 시작하는 데 거부감은 없었다고 해요. 과정은 세 단계였어요. 먼저 Claude와 대화하면서 PRD를 구체화했어요. 여기서 중요한 포인트가 하나 있는데, 원하는 기능을 한꺼번에 다 구현하면 수정할 때 원하는 대로 동작하지 않는 상황이 반복됐거든요. 그래서 기능을 어떤 순서로 단계적으로 구현할지 계획부터 짰어요.

그다음 작성한 PRD를 Cursor에 붙여넣고 대화하면서 개발을 시작했어요. AI가 알아서 해주는 부분이 많지만, "왜 이렇게 했는지" 같은 기초적인 질문도 던지면서 이해하려고 노력했다는 게 인상적이더라고요. 마지막으로 Cursor에서 만든 파일을 Figma 플러그인으로 바로 올려서 테스트했어요. 버그뿐만 아니라 자기가 기획한 UX가 생각보다 불편하다는 걸 바로 느끼고 고칠 수 있었다고 해요.

CORS라는 벽, 그리고 AI가 한국어를 무시한 날

근데 순탄하지만은 않았어요. 첫 번째 벽은 CORS였어요. Figma 플러그인에서 Notion API를 직접 호출했더니 보안 정책에 막힌 거죠. 개발자 도구 콘솔의 에러 화면을 캡처해서 Cursor에 보여줬는데, 한참을 헤맸어요. 결국 ChatGPT한테도 물어봤더니 "중간에서 요청을 전달해줄 서버가 필요하다"는 답이 돌아왔고, 이게 정답이었어요.

CORS는 쉽게 말하면 "모르는 사람한테는 문 안 열어줌" 같은 보안 정책이에요. Notion이 플러그인을 몰라서 문전박대한 거죠. 그래서 Notion이 신뢰하는 중간 서버를 Supabase Edge Function으로 세웠어요. 무료에 설정도 어렵지 않았다고. (AI가 계속 헤맬 때는 다른 모델한테 물어보는 것도 방법이라는 교훈을 여기서 얻었다고 합니다.)

두 번째 문제는 더 황당했어요. 기존 데이터를 예시로 주면서 "동일한 포맷으로 생성해줘"라고 했는데, AI가 뱉은 결과물이 좀 웃겼어요. 예시가 박희철, 김민수 같은 한국 이름이었는데 AI 출력은 Support Ticket, Agent005. 아니 이게 뭔가요. "한국어로", "예시와 동일하게" 같은 지시를 넣어봤지만 여전히 엉뚱한 결과가 나왔어요. 결국 해결책은 필드별로 "세 글자 한국식 이름", "6자리 숫자 ID", "한국어 시간 형식" 같은 힌트를 직접 프롬프트에 넣어주는 거였어요. AI가 패턴을 알아서 파악해주길 기대하면 안 되더라고요.

5시간 사투 끝에 1차 완성 — 근데 팀원들이 Supabase를 몰라요

5시간 정도의 사투 끝에 1차 버전이 나왔어요. (위 두 문제 해결에 대부분의 시간을 쓴 것 같다고.) 사용법은 간단했어요. Figma에서 텍스트 레이어를 선택하고, 매칭할 필드를 고르면 바로 데이터가 변경되는 방식이었죠.

데이터 주입기여서 "액체를 붓는" 콘셉트로 플러그인 이름과 애니메이션을 깨알처럼 추가했다고 해요. (근데 팀원들이 "이 이모지는 뭐냐"고 물어보셨다는 후문이...)

문제는 따로 있었어요. 이때 구현한 방식이 더미 데이터를 JSONL 포맷으로 Supabase에 직접 저장해두고 꺼내 쓰는 거였는데, 팀원들이 데이터를 수정하거나 새 데이터셋을 만들려면 Supabase를 배워야 했거든요. 팀원마다 맡은 제품이 다르니 필요한 데이터셋도 제각각인데, 매번 클레어한테 요청하는 건 비효율 그 자체였죠.

Notion DB로 갈아탄 이유 — 팀 전체가 쓸 수 있어야 하니까

그래서 구조를 바꿨어요. Supabase에 데이터를 직접 저장하는 대신 Notion 데이터베이스를 활용하기로 한 거예요. 팀원들은 익숙한 Notion에서 더미 데이터를 자유롭게 만들고 수정하고, Supabase는 연동된 Notion DB 링크 목록만 관리하는 역할을 맡겼어요. 한 사람이 DB를 추가하면 모두가 바로 쓸 수 있는 구조. 각자 맡은 제품에 맞는 데이터베이스를 직접 만들 수 있으니 데이터셋을 빠르게 늘려나갈 수 있겠다고 판단했어요.

구조를 바꾸는 김에 사용성도 다듬었고, 업데이트 후에는 팀원들에게 공유해서 사용을 독려했어요.

느리지만 꾸준히 업데이트를 이어갔다고 해요.

CSV 업로드에 AI 더미 생성까지 — 쓰다 보니 기능이 늘어났다

여기서 안 멈췄어요. 데이터셋을 처음 만들 때 도움이 되는 기능이 있으면 팀원들이 더 잘 쓸 수 있겠다 싶어서 두 가지를 추가했어요.

첫째, CSV 업로드. 엑셀에서 만든 데이터를 CSV로 저장해서 올리면 Notion DB에 자동으로 매핑돼요. 없는 컬럼은 자동 추가, 기존 데이터 덮어쓰기도 가능하고요.

둘째, AI 더미 데이터 생성. "한국 사용자 10명 만들어줘" 같은 자연어 요청으로 OpenAI가 데이터를 만들어서 Notion DB에 바로 추가하거나 기존 데이터를 수정해줘요. Notion DB를 거치지 않고 Figma에 있는 데이터를 바로 고치고 싶을 때도 쓸 수 있도록 했는데, 테스트로 넣어본 기능이 생각보다 꽤 자주 쓰이더라고요. (Figma에 "Rewrite this"라는 비슷한 기능이 이미 있긴 한데, 생각보다 원하는 대로 동작하지 않아서 안 쓰게 되더라고요.)

팀원이 보내준 "항상 잘 사용하고 있다"는 피드백. 솔직히 이런 한 줄이 제일 힘이 되잖아요.

메이커로 돌아가는 즐거움

이 플러그인을 만들면서 얻은 건 시간 절약만이 아니었다고 해요. "어려워 보여도 일단 만들어볼 수 있다"는 마인드셋. 예전엔 "이건 개발자가 해야 하는 일"이라고 선을 그었던 것들도 이제는 일단 시도해보게 된다고요.

몇 시간 동안 같은 문제를 붙잡고 있어도 해결하고 나서 바로 써볼 수 있으니까 힘들다기보다 즐거웠다고. 팀원이 "이거 진짜 편하다"고 말해줄 때의 뿌듯함은 디자인 시안 하나 완성했을 때와는 전혀 다른 느낌이었다고 해요. 오랜만에 메이커로서의 재미를 느꼈다는 거죠.

반복 작업에 짜증나는 게 있다면, "이거 자동화하면 좋겠는데..." 하고 생각만 하고 있다면 — 지금의 AI 도구들은 생각보다 훨씬 친절해졌어요. 5시간이면 될지도 몰라요.