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

"이 화면을 디자인하는 데 30분 걸렸는데 더미 데이터 넣는 데도 30분 걸렸다"는 문제에서 출발해, 코드를 모르는 디자이너가 Notion 데이터베이스의 더미 데이터를 클릭 한 번으로 Figma에 적용하는 플러그인을 직접 만든 기록이다. 기존 플러그인 중 원하는 스펙이 없었고, 만들어두면 팀원들도 함께 쓸 수 있겠다는 판단에서 시작했다.

핵심 포인트

대충 만든 더미 데이터는 화면 이해 시 몰입도를 떨어뜨리고, 매번 현실적인 데이터를 고민하자니 시간이 든다.
여러 화면에 같은 사용자가 등장해야 할 때 화면마다 데이터를 새로 만들면 일관성이 깨진다.
기능을 한 번에 모두 구현하면 수정 시 원하는 대로 동작하지 않는 경험이 많아, Claude와 PRD를 구체화하며 단계적 구현 계획도 함께 짰다.
Figma 플러그인에서 Notion API를 직접 호출하니 CORS 에러가 났고, 중간에서 요청을 전달할 서버가 필요하다는 것이 정답이었다.
AI가 계속 헤맬 때는 다른 모델에 물어보는 것도 방법이다. 새 대화창에서 상황을 처음부터 설명하고 에러 화면을 캡처해 보여주면 의외로 쉽게 풀릴 때가 있다.

상세 정리

배경: 사용 가이드나 업데이트 노트, 마케팅 소재에 들어갈 UI 예시를 만들 일이 많은데 그 화면들에 데이터를 채우는 작업이 반복된다.
시작 조건: 팀 내에서 Cursor나 Lovable, Figma Make 같은 바이브 코딩 툴을 조금씩 접해봐서 시작에 거부감이 없었다.
개발 과정: 작성한 PRD를 Cursor에 붙여넣고 대화하며 개발했고, AI가 알아서 해주는 부분이 많아도 왜 그렇게 했는지 같은 기초 질문을 던지며 조금이라도 이해하려 노력했다.
빠른 피드백 루프: 작성한 파일을 Figma 플러그인으로 생성하면 바로 테스트하고 수정할 수 있어, 버그뿐 아니라 기획한 UX의 사용성이 생각보다 좋지 않다는 것도 즉시 느끼고 개선할 수 있었다.
CORS 해결 과정: 개발자 도구 콘솔의 에러를 캡처해 Cursor에게 보여줬지만 한참 헤맸고, ChatGPT에 물어보니 중간 서버가 필요하다는 답이 돌아왔다.
CORS를 "모르는 사람한테는 문 안 열어줌" 같은 보안 정책으로 설명하며, Notion이 플러그인을 몰라서 문전박대한 것이라고 비유한다.
해법으로 Notion이 신뢰하는 서버를 중간에 세워 대신 요청을 전달하게 했고, 무료로 쓸 수 있고 설정도 어렵지 않아 Supabase Edge Function을 골랐다.
저자가 뽑은 일반화된 교훈은 웹에서 외부 서비스 데이터를 가져올 때 이런 보안 장벽에 부딪힐 수 있으며, 직접 안 되면 중간 다리를 놓는다는 것이 흔한 해결 패턴이라는 점이다.
또 다른 난관: 기존 데이터를 변형해 예시로 주고 동일한 포맷으로 생성해 달라고 했는데 결과가 이상했다. "한국어로", "예시와 동일하게" 같은 지시를 넣어 프롬프트를 여러 번 고쳤지만 때때로 여전히 엉뚱한 결과가 나왔다.