Notion DB를 활용한 Figma 플러그인 만들기
프론트엔드
Notion DB를 활용한 Figma 플러그인 만들기
두줄요약
Notion DB와 Figma 플러그인을 연결해 더미 데이터 입력을 자동화한 사례를 소개했습니다. CORS 문제와 AI 데이터 생성 이슈를 해결하며 팀용 도구로 확장한 과정도 담았습니다.
문제 상황
- 디자인 화면에 필요한 더미 데이터 생성과 입력에 반복 시간 소모
- 여러 화면에서 일관된 사용자 데이터를 유지하기 어려움
- 기존 플러그인과 실제 업무 요구사항 사이의 간극
해결 방법
- Notion DB에 더미 데이터를 저장하고 Figma 플러그인으로 즉시 불러오는 구조 설계
- Supabase Edge Function을 중간 서버로 두어 Notion API 호출의 CORS 문제 해결
- CSV 업로드와 AI 기반 더미 데이터 생성·수정 기능 추가
적용해볼 점
- 비개발자도 바이브 코딩 도구로 실무 반복 작업을 자동화할 수 있음
- 익숙한 도구를 데이터 관리 허브로 삼아 팀 단위 확장성 확보 가능
- AI 사용 시 구조화된 입력과 명확한 제약 조건 제공이 중요