Make to Design & Code

02. Make to Design & Code (일방통행 싱크 전략)

전략 개요

Figma Make를 단일 출발점(SoT) 으로 삼고, 거기서 출발한 변경이 Figma Design 파일과 React Code(GitHub) 양쪽에 일방향으로 흘러가게 하는 전략입니다.

┌──────────────────────────────────────┐
│         Figma Make (SoT)             │
│   - AI 채팅으로 디자인/코드 동시 수정 │
└──────────────┬───────────────────────┘
               │
       ┌───────┴────────┐
       ▼                ▼
[Copy to Figma]   [Push to GitHub]
       │                │
       ▼                ▼
[Figma Design     [React Repository
 라이브러리/페이지]  → Vercel 자동 배포]
Plain Text
복사

왜 일방통행인가?

•

양방향 싱크의 어려움: Figma Design  Code 의 양방향 동기화는 현재 기술 수준에서 충돌/유실 위험이 큼

•

단일 출발점 원칙: 변경은 Make 한 곳에서만 발생 → 충돌 없음

•

Make의 강점 활용: AI 채팅 한 번으로 디자인+코드 동시 갱신

•

Make의 약점 보완: 시각적 폴리싱은 Figma Design에서, 운영은 GitHub에서

적용 시나리오

•

빠르게 움직이는 스타트업의 MVP / PoC

•

디자이너 1~2명, 개발자 소수의 소규모 팀

•

마케팅 랜딩 페이지, 캠페인 사이트

•

제품 아이디어 검증 단계

단계별 워크플로

1) 변경 발생 (Make에서만)

•

디자이너/개발자/PM 누구든 Make 채팅으로 변경 요청

•

예: "Pricing 페이지에 Enterprise 플랜 카드 추가"

2) Make에서 검증

•

Make의 라이브 프리뷰로 즉시 확인

•

AI와 대화하며 다듬기

3) 두 갈래 동기화 (동시)

A. Figma Design으로 복사

•

변경된 컴포넌트만 선택 → Copy to Figma

•

디자이너가 Figma Design에서 폴리싱 (색상 미세 조정, Variants 정리 등)

•

라이브러리 컴포넌트라면 Publish Library → 사용처 자동 업데이트

B. GitHub로 Push

•

Make → Push to GitHub (자동 PR 생성)

•

코드 리뷰 → main 병합

•

Vercel/Netlify 자동 배포

4) 사후 검증

•

Vercel Preview URL과 Figma Design 비교

•

차이 발견 시 → 수정은 다시 Make에서 (직접 코드/디자인 편집 금지)

운영 규칙 (Critical)

규칙	이유
코드 직접 수정 금지	다음 Make Push 시 덮어쓰기 발생
Figma Design 직접 수정 금지 (구조 변경)	다음 Copy 시 충돌
폴리싱(시각 미세 조정)만 Figma에서 허용	디자이너 자유도 확보
모든 구조/내용 변경은 Make 채팅으로	SoT 유지
배포 전 양쪽 동시 게시	디자인-코드 일치 보장

장점

•

디자인-코드 싱크 항상 보장

•

AI 활용으로 변경 속도 극대화

•

작은 팀이 큰 산출물을 만들 수 있음

한계 / 위험

•

Make 의존성: Make 서비스 중단/정책 변경에 취약

•

복잡한 백엔드 로직: Make 한계 → Supabase 등 외부로 분리 필요

•

거대한 프로젝트에는 부적합 (Make 컨텍스트 한계)

•

디자이너가 Figma Design에서 자유롭게 작업하기 어려움 → 폴리싱 외엔 Make로 가야 함

•

History/Blame 분리: 코드 변경 의도 추적이 어려워질 수 있음

보완 장치

•

Make 변경 PR에 AI 자동 요약 첨부 (코드 리뷰 보조)

•

Figma Design에 "Make Source Frame" 플래그 → 직접 수정 금지 표시

•

정기적으로 Make  GitHub  Figma Design 3자 검증 점검회

다음 전략과의 관계

•

이 전략의 한계(Make 종속, 코드 자유도 부족)를 보완하는 것이
03. Copilot to Make to Design 전략