Notion DB를 활용한 Figma 플러그인 만들기

"이 화면을 디자인하는데 30분 걸렸는데, 더미 데이터 넣는 데도 30분 걸렸어요."

혹시 디자인에 더미데이터를 입힐 때 너무 귀찮아서 괴로웠던 경험이 있으신가요?

저는 더미데이터를 넣는 시간이 너무 아까워서 코드를 모르지만 Figma 플러그인을 만들어보기로 결심했어요.

Notion 데이터 베이스에 더미 데이터를 저장해두고, 클릭 한 번으로 Figma에 적용하는 플러그인인데요, 오늘은 비개발자 디자이너가 어떻게 실무 문제를 직접 해결했는지 공유할게요.

문제 정의: 더미 데이터 얹기에 쓰는 시간을 0에 가깝게

디자인을 하다 보면 사용 가이드, 업데이트 노트, 마케팅 소재 등에 들어갈 UI 예시를 만들어야 할 때가 많아요. 문제는 이 화면들에 그럴듯한 더미 데이터가 필요하다는 점이에요. "홍길동", "test@test.com" 같은 대충 만든 데이터는 화면 이해 시 몰입도를 떨어뜨리고, 그렇다고 매번 현실적인 데이터를 고민해서 만들자니 시간이 꽤 듭니다.

게다가 여러 화면에 같은 사용자가 등장해야 할 때, 화면마다 데이터를 새로 만들면 일관성도 깨지기 쉽죠. A 화면에서는 "김민수"인데 B 화면에서는 "이영희"가 되어버리는 식으로요.

결국 원했던 건 단순합니다:

• 데이터셋을 저장해두고

• 필요할 때 바로 불러와서 Figma에 적용하는 것

해결 접근: 직접 만들어 보자

기존 플러그인들을 찾아봤지만 딱 원하는 스펙이 없었어요. 직접 만들어두면 다른 팀원들도 함께 쓸 수 있고 팀 전체의 효율을 올리는 데 기여할 수 있겠다는 생각이 들었어요. 그래서 직접 만들어보기로 했어요. 팀 내에서 Cursor, Lovable, Figma Make 같은 바이브 코딩 툴을 조금씩 접해봤던 터라 시작하는 데 거부감은 없었어요.

전체적인 과정

1. PRD 작성하기

   • 클로드와 대화하며 제품 PRD를 구체화해 나갔습니다. 원하는 기능을 한번에 모두 구현하면 수정 시 원하는대로 동작하지 않는 상황을 많이 겪었었기 때문에 기능들을 어떻게 단계적으로 구현할지에 대한 계획도 같이 짰어요.

2. 커서에서 클로드와 대화하기

   • 작성한 PRD를 Cursor(AI 코드 에디터)에 붙여넣고 대화하며 개발을 시작했어요. 물론 AI가 알아서 해주는 부분이 많지만 최대한 왜 그렇게 했는지 같은 기초적인 질문도 던지면서 조금이라도 이해하려고 노력했어요.

3. 피그마에서 플러그인 생성하기

   • 커서와 작성한 파일을 피그마 플러그인으로 생성하면 바로 테스트해보고 수정할 수 있었어요. 버그 뿐만 아니라 내가 기획한 ux가 생각보다 사용성이 좋지 않다는 것을 바로 느끼고 디벨롭 해볼 수 있어서 좋았어요.

만들면서 부딪힌 문제와 해결 과정

문제 1: CORS의 벽

상황: Figma 플러그인에서 Notion API를 직접 호출했더니 CORS 에러가 계속 발생했어요.

시도한 방법: 개발자 도구의 콘솔을 열어 에러 화면을 캡처해서 Cursor에게 보여줬어요. 한참을 헤매다가 ChatGPT에게도 물어봤더니 "중간에서 요청을 전달해 줄 서버가 필요하다"는 답변이 돌아왔어요. 결국 이게 정답이었어요.

해결: CORS는 "모르는 사람한테는 문 안 열어줌" 같은 보안 정책이에요. Notion이 제 플러그인을 몰라서 문전박대한 거죠. 그래서 Notion이 신뢰하는 서버(Supabase Edge Function)를 중간에 세우고, 그 서버가 대신 요청을 전달하게 만들었어요. 무료로 쓸 수 있어서 선택했고, 설정도 어렵지 않았어요.

배운 점:

• AI가 계속 헤맬 때는 다른 모델한테 물어보는 것도 방법이에요. 새로운 대화창에서 상황을 처음부터 설명하고, 에러 화면을 캡처해서 보여주면 의외로 쉽게 풀릴 때가 있어요.

• 웹에서 외부 서비스 데이터를 가져올 때 이런 보안 장벽에 부딪힐 수 있어요. "직접 안 되면 중간 다리를 놓는다"는 건 생각보다 흔한 해결 패턴이에요.

문제 2: AI가 예시를 무시한다

상황: 기존 데이터를 변형하여 예시로 주고 "동일한 포맷으로 데이터 생성해줘"라고 했는데, 생성한 데이터가 이상했어요.

예를 들어:

• 예시: 박희철, 김민수(한국 이름)

• AI 출력: Support Ticket, Agent005 (???)

시도한 방법: 프롬프트를 여러 번 고쳤어요. "한국어로", "예시와 동일하게" 등의 지시를 넣어봤지만, 때때로 여전히 엉뚱한 결과가 나왔어요.

해결: AI가 알아서 패턴을 파악해주길 기대하기보다, 직접 힌트를 주기로 했어요. 필드별로 "세글자 한국식 이름", "6자리 숫자 ID", "한국어 시간 형식" 같은 정보를 프롬프트에 같이 넣어줬어요.

배운 점

• AI가 패턴을 알아서 파악해주길 기대하기보다, 구조화된 입력과 명확한 제약 조건을 직접 만들어줘야 일관된 결과를 얻을 수 있었어요.

초기 결과물 피드백 받기

• 5시간 정도의 사투 끝에 1차 안이 나왔어요. (위에서 말한 두가지 문제를 해결하느라 대부분의 시간을 쓴 것 같아요 ) 플러그인 사용 방법에 대한 가이드 문서도 AI로 만들어 팀 내에 핸드오프 했어요.

• 플러그인의 사용 방법은 간단합니다.

  • 피그마에서 텍스트 레이어를 선택하고

  • 매칭할 필드를 선택하면 바로 데이터가 변경되는 식이었어요.

피드백 받기

이때 구현한 방식은 더미 데이터를 JSONL 포맷으로 Supabase에 직접 저장해두고 꺼내 쓰는 방식이었어요. 그런데 팀원들이 데이터를 수정하거나 새로운 데이터셋을 만들려면 어렵고 툴도 접근성이 낮았어요. 팀원들마다 맡은 제품이 다르다 보니 필요한 데이터셋도 제각각인데, 매번 저한테 요청하거나 Supabase를 배워야 하는 건 비효율적이었죠.

개선하기

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

최종 결과물

또 개선하기

기존 기능 외에도, 데이터셋을 처음 만들 때 도움이 되는 기능이 있으면 팀원들이 더 잘 쓸 수 있겠다고 생각했어요. 그래서 아래 두가지 기능을 추가했어요. 덕분에 새로운 데이터셋을 구성하는 속도가 훨씬 빨라졌어요.

1. CSV 업로드

• 엑셀에서 만든 데이터를 CSV로 저장해서 업로드하면

• Notion DB에 자동으로 매핑돼요

• 없는 컬럼은 자동으로 추가되고, 기존 데이터 덮어쓰기도 가능해요

2. AI로 더미 데이터 생성/수정하기

• "한국 사용자 10명 만들어줘" 같은 자연어로 요청하면 OpenAI가 데이터를 생성해서 Notion DB에 바로 추가하거나 기존 데이터를 수정해줘요

• 노션 DB를 거치지 않고 피그마에 있는 데이터를 바로 수정하고 싶을때도 활용할 수 있도록 했어요. 테스트로 이 기능을 넣어보았는데 생각보다 꽤 자주 사용하게 되어서 활용도가 좋아 유지하기로 했어요. (피그마에서 Rewrite this 라는 이름의 동일한 기능이 있었지만 생각보다 원하는대로 동작하지 않아서 사용하지 않게 되더라구요.)

마무리 - 메이커로 돌아가는 기쁨

이 플러그인을 만들면서 얻은 건 시간 절약만이 아니었어요.

"어려워 보여도 일단 만들어볼 수 있다"는 마인드셋이 생겼어요. 

예전엔 '이건 개발자가 해야 하는 일'이라고 선을 그었던 것들도 이제는 일단 시도해보게 돼요. 안 되면 말고, 되면 좋고. 무엇보다 오랜만에 메이커로서 재미를 느꼈어요.

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

혹시 여러분도 반복 작업 때문에 짜증 나는 게 있나요?

"이거 자동화할 수 있으면 좋을 텐데..."라고 생각만 하고 계신가요? 

지금의 AI 도구들은 생각보다 훨씬 친절하고 쉬워졌다고 느껴요. 느끼고 계신 문제를 해결하기 위해 5시간이면 충분할지도 몰라요.

지금 미루고 있는 작은 불편함, 한번 도전해보는 건 어떨까요?