Codeit UX Writing Checker

코드잇의 UX Writing 규칙 DB를 기반으로 Figma 내 UI 텍스트를 검토하는 플러그인입니다.

기능

• Figma에서 텍스트 레이어를 선택하면 AI(GPT-4o-mini)가 UX writing 가이드라인 위반 여부를 검토
• 교정 제안을 한 번의 클릭으로 적용/되돌리기/무시 가능
• Notion에 관리되는 가이드라인을 실시간 동기화 가능

구조

src/
  plugin/code.ts          # Figma 샌드박스 (텍스트 추출/교체)
  ui/                     # React + Tailwind UI
    services/openai.ts    # OpenAI API 호출 (Worker 프록시 경유)
    services/reviewer.ts  # 검토 프롬프트 구성
    services/notion.ts    # 가이드라인 동기화
  shared/types.ts         # 공유 타입

worker/                   # API 프록시 (Vercel Serverless)
  api/blocks.js           # Notion 페이지 블록 조회
  api/databases.js        # Notion DB 쿼리
  api/review.js           # OpenAI 프록시

scripts/
  sync-notion.mjs         # 가이드라인 빌드타임 동기화 (Worker 경유)

설치 및 실행

1. 의존성 설치

npm install

2. 가이드라인 동기화

Notion에서 최신 가이드라인을 가져와 src/ui/data/guidelines.json에 저장합니다.

npm run sync

3. 빌드

npm run build

dist/ 폴더에 code.js, ui.html, manifest.json이 생성됩니다.

4. Figma에서 로드

1. Figma > Plugins > Development > Import plugin from manifest...
2. dist/manifest.json 선택

업데이트

Notion 가이드라인이 변경된 경우 플러그인 설정 탭에서 동기화해 주세요.

플러그인 코드에 변경이 있으면 사용자 각자 다시 빌드해야 합니다.

git pull
npm install
npm run build

Figma에서 플러그인을 다시 로드할 필요는 없으며, dist/ 폴더가 갱신되면 자동 반영됩니다.

Worker

Figma 플러그인은 외부 API를 직접 호출할 수 없어서 (CORS), Vercel에 프록시 서버를 배포합니다. Notion API와 OpenAI API 호출을 모두 서버에서 처리하며, API key는 Vercel 환경변수로 관리됩니다.

• 배포 위치: Vercel codeit-com 팀
• 프로젝트: figma-ux-writing-plugin-worker

Worker 재배포

cd worker
npx vercel --prod

환경 설정

항목	위치	설명
Notion Page ID	scripts/sync-notion.mjs	가이드라인 페이지
Notion DB ID	scripts/sync-notion.mjs	규칙 데이터베이스