#Design

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

Summary

Cursor와 Notion을 결합해 반복 업무를 0으로 만드는 마법 같은 자동화 여정

비개발 직군인 디자이너가 AI 코딩 도구를 활용해 실무의 페인 포인트를 직접 해결한 사례입니다. 단순한 데이터 주입을 넘어 Notion DB와 AI 생성 기능을 결합해 팀 전체의 생산성을 높인 메이커로서의 도전기를 다룹니다.

반복적인 UI 작업에 지친 디자이너와 AI 도구의 실전 활용법이 궁금한 기획자에게 강력 추천합니다. 특히 비개발 직군이 실무 자동화를 시도할 때의 구체적인 문제 해결 패턴을 배울 수 있습니다.

디자인 작업 중 매번 수동으로 더미 데이터를 입력하는 데 소요되는 시간 낭비와 여러 화면 간 데이터 일관성이 깨지는 문제를 해결하고자 했습니다.

Cursor 및 Claude 등 AI 코딩 도구를 활용해 Notion API와 연동된 Figma 플러그인을 개발했으며, CORS 문제 해결을 위해 Supabase Edge Function을 중간 서버로 구축했습니다.

데이터 입력 시간을 대폭 단축하고 팀원들이 익숙한 Notion 인터페이스를 통해 데이터셋을 관리하도록 개선하여 협업 효율성을 높였으며, AI 데이터 생성 기능을 통해 활용성을 확장했습니다.

Trade-off

Figma 환경의 보안 정책으로 인해 Notion API와의 직접 통신이 불가능하여 Supabase를 통한 중계 서버를 추가로 관리해야 하는 아키텍처적 비용이 발생했습니다.

Concept · 01

피그마 내 인터페이스와 레이어를 제어하고 외부 데이터를 주입할 수 있도록 제공되는 자바스크립트 기반 프로그래밍 인터페이스입니다.

Concept · 02

웹 브라우저에서 실행되는 스크립트가 다른 도메인의 자원에 접근할 때 보안상 허가를 받도록 하는 정책입니다.

Figma 플러그인에서 Notion API로 직접 요청 시 발생하는 차단 에러를 해결하기 위해 Supabase를 프록시 서버로 활용하는 계기가 되었습니다.

Concept · 03

AI 모델이 내장된 코드 에디터로, 자연어 명령을 통해 코드를 작성, 수정 및 디버깅할 수 있게 돕는 도구입니다.

Continue reading · same source