Figma 퍼블리싱, 순차에서 병렬로 — Claude Code 서브에이전트 활용기

문제: 왜 피그마 퍼블리싱에서 누락이 발생할까?

Figma MCP의 get_design_context는 한 번에 반환할 수 있는 데이터량에 한계가 있다. 큰 프레임을 통째로 조회하면 하위 레이어가 조용히 잘린다.

체감 기준

실제로 자주 잘리는 것들:

• 테이블 3~4행 이후의 반복 행
• 페이지네이션 (테이블 맨 아래에 위치)
• 아이콘 SVG 내부 path 데이터
• Dropdown/Select의 펼쳐진 옵션 목록
• 모달 안에 있는 폼 요소들

비유하자면 A4 용지 2~3장 분량의 코드를 반환한다고 생각하면 된다. 프레임이 그보다 복잡하면 하위 레이어가 아무 경고 없이 빠진다.

해결: 노드 트리를 먼저 확인하고, 쪼개서 조회한다

get_metadata를 먼저 호출하면 전체 노드 트리를 XML 형태로 받을 수 있다. 이 트리를 보고 기능 단위로 분리한 뒤, 각 영역을 개별 get_design_context로 조회하면 누락이 거의 없어진다.

실제 노드 트리 예시

20301:35155  최상위 프레임 (1440×1024)
├── LNB (좌측 네비게이션)
├── Master Container
│   ├── GlobalHeader
│   ├── PageHeader
│   └── Content Container
│       ├── Filter
│       └── Table Container
│           ├── Table Header (건수 + 필터옵션 + 버튼)
│           ├── Table Row (컬럼 구조)
│           ├── Empty State (빈 상태 UI)
│           └── ⭐ Pagination ← 깊이 6단계, 가장 먼저 잘리는 후보

이 구조를 보면 자연스럽게 기능 단위가 보인다:

병렬 퍼블리싱: 서브에이전트로 동시에 만든다

기능 단위로 분리했으면, 각 영역을 Claude Code의 서브에이전트(Task 도구)에게 동시에 맡길 수 있다.

전체 흐름

메인 세션 (오케스트레이터)
│
├── 1. get_metadata → 노드 트리 파악
├── 2. get_design_context ×5 병렬 호출 → 각 영역 스펙 확보
├── 3. 공통 타입/인터페이스 준비
│
├── 4. 서브에이전트 ×5 동시 실행
│   ├── Agent 1 → Filter.tsx
│   ├── Agent 2 → TableHeader.tsx
│   ├── Agent 3 → TableRow.tsx
│   ├── Agent 4 → EmptyState.tsx
│   └── Agent 5 → Pagination.tsx
│
├── 5. 결과 수집 → page.tsx 조립
└── 6. 검증

각 서브에이전트는 자기 파일만 생성하고, 최종 조립은 메인 세션이 순차적으로 한다. 파일이 겹치지 않으니 충돌이 발생하지 않는다.

기존 방식과 비교

기존: 순차 퍼블리싱

get_design_context 1회 (잘림 발생 가능)
    → Filter 구현
    → Table Header 구현
    → Table Row 구현
    → Empty State 구현
    → Pagination 구현 (누락되어 있으면 재조회 + 재작업)

새 방식: 병렬 퍼블리싱

get_metadata → get_design_context ×5 병렬
    → Agent 1~5 동시 실행
    → 조립 + 검증

비교표

핵심 차이 3가지

1. 누락 방지

기존 방식에서는 get_design_context를 한 번에 호출하면 응답이 잘려서 Pagination, 아이콘이 빠졌다. 완성한 뒤에야 누락을 발견하고 재작업하는 경우가 많았다.

병렬 방식에서는 get_metadata로 전체 노드를 확인한 뒤 개별 조회하기 때문에 애초에 누락이 발생하지 않는다.

2. 속도

기존에는 컴포넌트 5개를 직렬로 만드니까 시간이 합산됐다. 병렬에서는 동시에 만드니까 가장 오래 걸리는 1개의 시간만 소요된다. 체감 2~3배 빠르다.

3. 컨텍스트 효율

기존에는 메인 세션에서 전부 처리하면서 컨텍스트 창이 빠르게 소모됐다. 후반부로 갈수록 앞에서 만든 코드를 잊어버리거나, 품질이 떨어지는 문제가 있었다.

병렬에서는 각 서브에이전트가 자기 컴포넌트만 담당하므로 컨텍스트가 가볍고 집중적이다.

실전 팁

파일 충돌 방지

각 서브에이전트가 독립적인 파일을 담당하도록 분리한다. 공통 파일(타입, 테마 등)은 메인 세션에서 먼저 준비해놓는다.

components/
├── Filter.tsx          ← Agent 1
├── TableHeader.tsx     ← Agent 2
├── TableRow.tsx        ← Agent 3
├── EmptyState.tsx      ← Agent 4
└── Pagination.tsx      ← Agent 5
 
page.tsx                ← 메인 세션이 마지막에 조립

기존 컴포넌트 재사용

프로젝트에 이미 Table, Pagination, Select 등의 공통 컴포넌트가 있다면 새로 만들지 말고 재사용한다. 서브에이전트에게 프롬프트를 전달할 때 기존 컴포넌트 경로와 사용법을 함께 알려주는 것이 중요하다.

사전 확인 포인트

메인 세션에서 병렬 실행 전에 한 번 확인하는 것이 좋다:

• 기능 분리 단위가 맞는지
• 파일 경로/라우트가 맞는지
• 기존 컴포넌트 중 재사용할 것이 있는지

한계

• 서브에이전트가 프로젝트 컨벤션을 정확히 따르려면 프롬프트에 규칙을 충분히 전달해야 한다
• 컴포넌트 간 의존성이 있으면 (A가 B를 import) 완전 병렬은 안 된다
• API 호출량이 늘어나므로 비용은 비슷하거나 약간 높을 수 있다

결론

Figma 퍼블리싱에서 누락이 발생하는 근본 원인은 "큰 프레임을 한 번에 조회하는 것"이다. get_metadata로 노드 트리를 먼저 확인하고, 기능 단위로 쪼개서 서브에이전트에게 병렬로 맡기면 누락 없이, 2~3배 빠르게 퍼블리싱할 수 있다.

시간은 빨라지고, 누락은 거의 0에 가까워지는 대신, 비용은 비슷한 트레이드오프다. 복잡한 페이지일수록 이 방식의 이점이 크다.