하이브리드 전략 선택 가이드

08. 하이브리드 / 컨텍스트 기반 전략 선택

전략 개요

앞선 7가지 전략은 상호 배타적이지 않습니다. 프로젝트의 단계/규모/조직 특성에 따라 전략을 조합하거나 단계적으로 진화시키는 것이 현실적입니다.

의사결정 매트릭스

프로젝트 단계 기준

단계	추천 전략
Idea / PoC	02. Make to Design & Code (Make 단독 SoT)
MVP	02 + 01 (디자인 시스템 키트 구축 시작)
초기 운영	03 (Copilot to Make) + 04 (토큰 도입)
확장 운영	05 (Storybook SoT) + 06 (Library Registry)
대규모 / 자동화	07 (MCP 자동화 파이프라인)

조직 특성 기준

조직	추천
디자이너 우세	02, 04
개발자 우세	03, 05, 07
디자인 시스템 전담팀	04, 05, 06
멀티 플랫폼	04, 06
사내 다수 제품	06
1인 개발자	02

제품 특성 기준

제품	추천
마케팅 사이트	02
B2B SaaS	03, 05, 06
모바일 앱	04 + Figma to Code
디자인 시스템 SDK	06 + 05
빠르게 변하는 실험 제품	02 + 07

진화 로드맵 (예시)

Year 0–1: 빠른 검증

Make to Design & Code

•

디자인 시스템은 Make 안에서만 관리

Year 1: 안정화

Make 디자인 시스템 키트 → npm 배포

토큰 시스템 도입

Year 2: 시스템화

Storybook 도입, Code Connect 매핑

Copilot 워크플로 정착

Monorepo + Changesets

Year 3+: 자동화

MCP 기반 자동 PR

•

멀티 플랫폼 확장

전략 조합의 시너지

Combo A: "AI 가속 일방통행"

•

02 (Make SoT) + 04 (토큰)

•

Make의 hex 출력을 토큰으로 자동 치환하는 빌드 스텝 추가

•

작은 팀에 최적

Combo B: "코드 우선 + AI 보조"

•

03 (Copilot to Make) + 05 (Storybook) + 06 (Registry)

•

개발자 주도 + 디자이너는 검토자

•

B2B SaaS에 최적

Combo C: "완전 자동화"

•

04 + 05 + 06 + 07

•

모든 변경이 토큰/Storybook/Registry/PR로 흐름

•

대규모 멀티 제품 조직

싱크 문제에 대한 종합 처방

문제: 코드 → Figma Design 싱크 정확도가 낮다

대응 우선순위:

토큰 통일 (04) — 표면 차이 제거

Code Connect 매핑 (05) — 컴포넌트 1:1

Make를 중계자로 사용 (03) — Copy to Figma의 정확도 활용

수동 폴리싱 단계 명시 (02) — 완벽 대신 검수

AI Agent 검증 (07) — 자동 차이 리포트

문제: 디자이너와 개발자의 작업이 충돌한다

대응:

•

단일 SoT 정책 합의 (Make / 코드 / 토큰 중 택1)

•

변경 권한과 영역 명시 (RACI 매트릭스)

•

정기 싱크 점검회 (격주)

문제: AI가 디자인 시스템을 무시한다

대응:

•

copilot-instructions.md / claude.md에 키트 사용 강제

•

프롬프트 템플릿화 ("기존 컴포넌트만 사용" 명시 필수)

•

ESLint 룰로 hex/임의 spacing 차단

•

Code Connect로 Figma → 코드 컴포넌트 강제 매핑

마지막 조언

•

완벽한 양방향 싱크는 환상 — 일방향 + 검수가 현실적

•

도구는 수단, 사람의 합의가 핵심

•

점진적 도입 — 한 번에 모든 전략 적용 금지

•

측정: 어떤 전략이든 "디자인-코드 일치율"을 정기 측정

•

AI 의존도와 통제 사이에서 항상 균형 유지