피드로 돌아가기
강남언니 공식 블로그Frontend
원문 읽기
클릭 한 번으로 Figma에 Notion 페이지 연동하기
강남언니가 Figma Widget으로 Notion 문서를 Figma 내에 실시간 동기화해 제품 정책 파편화 문제 해결
AI 요약
Context
제품 정책이 Notion과 Figma 디자인 파일에 분산되어 관리되면서, 정책 변경사항이 한쪽에만 반영되는 문제 발생했다. 개발자들이 Figma와 Notion 두 문서를 비교해야 정확한 정책을 파악할 수 있었고, 문서 간 불일치로 인해 개발 중 요구사항을 누락하는 일이 발생했다.
Technical Solution
- Figma Widget 활용: Notion 페이지 링크를 Figma Widget에 전달하면 해당 페이지 내용을 Figma UI로 렌더링
- Notion API 프록시 서버 구축: Notion Private Token을 서버 환경 변수에 저장해 Widget에서 관리하지 않음
- Block ID 기반 URL 파싱: Notion 웹 페이지 URL에서 Block ID를 추출해 Notion API 요청에 사용
- 수동 동기화 버튼: Widget 내 새로고침 버튼을 클릭해 원본 Notion 문서와 동기화하고, 마지막 동기화 시간 표시
- Widget Code 렌더링: Figma Widget API와 Widget Code Generator Plugin을 활용해 Notion 스타일과 유사한 UI를 Figma에 구현
Key Takeaway
조직 내 협업 도구 간 정보 단편화 문제는 기존 플랫폼의 공식 API와 확장 기능(Widget, Plugin)을 활용해 원본 소스 단일화로 해결할 수 있다. 내부 도구 개발 시 사용자 인증과 공개 배포를 최소화하면 프로토타입 개발 속도를 단축할 수 있다.
실천 포인트
Figma, Notion 등 여러 협업 도구를 사용하는 제품 팀에서 Figma Widget이나 Plugin을 개발할 때, 각 도구의 공식 API를 통해 원본 문서를 참조하는 구조로 설계하면 정보 동기화 문제를 자동화할 수 있다. 이때 외부 인증 로직을 프록시 서버에서 처리하면 Widget 코드 노출을 방지하면서도 사용자 편의성을 확보할 수 있다.