Figma MCP와 Claude Code를 도입해 텍스트가 많은 정적 페이지를 Figma 디자인에서 모크(HTML/CSS)→Laravel(3개 언어)까지 구현하는 시간을 1페이지 8시간에서 20분으로 줄인 워크플로와 배운 점을 정리한다.
업무로 웹사이트 리뉴얼을 하고 있습니다.
텍스트 양이 많은 정적 페이지를 Figma 디자인에서 모크(HTML/CSS) → Laravel에 통합(3개 언어 지원) 까지 구현하는 작업이 있었습니다.
처음에는 수작업으로 1페이지에 8시간이 걸렸습니다.
Figma MCP + Claude Code를 도입하니 1페이지 20분이 되었습니다.
이 글은 그 경험에서 느낀 점을 정리한 것입니다.
이 방법을 실현하려면 아래가 필요합니다.
Figma 유료 플랜(Dev Mode를 사용할 수 있는 플랜)
Figma에서 Auto Layout이 제대로 활용되어 있을 것
Claude Code(Anthropic)
Figma MCP(Model Context Protocol)는 Claude Code에서 Figma 디자인 데이터에 직접 접근할 수 있게 해주는 구조입니다. Dev Mode로 공개된 디자인 정보를 AI가 읽어 자동으로 코드로 변환해 줍니다.
즉, 디자이너가 Figma에서 Auto Layout을 제대로 사용해 디자인해 두는 것이 이 효율화의 가장 중요한 전제가 됩니다.
이번에 정착한 플로우는 **“모크 작성 → 수정 → 애플리케이션 통합”**의 2페이즈 구성입니다.
textPhase 1: 모크 작성 페이지 리스트 → GitHub CLI로 ISSUE 생성 → Figma MCP로 디자인 취득 → HTML/CSS 생성 → 브라우저에서 확인·수정 → 커밋 Phase 2: 애플리케이션 통합 GitHub CLI로 ISSUE 생성 → 수정 완료된 모크를 기반으로 Laravel 통합 → Figma MCP로 다국어 텍스트 취득 → Blade/CSS/번역 파일 생성 → 커밋
키 포인트는 페이지 리스트에 Figma 노드 ID를 기재해 두는 것입니다. 이런 형태의 리스트를 준비합니다.
text| 페이지명 | EN (PC) | EN (SP) | ZH (PC) | KR (PC) | |----------|---------|---------|---------|---------| | 이용약관 | 1234:56 | 1234:78 | 5678:90 | 9012:34 | | 회원약관 | 2345:67 | 2345:89 | 6789:01 | 0123:45 | | ... | ... | ... | ... | ... |
이 리스트를 Claude Code에 넘기면, 각 페이지에 대해 gh issue create로 이슈를 만들고, 브랜치 생성 → Figma MCP로 디자인 취득 → 파일 생성 → 커밋까지 자동으로 진행해 줍니다. 사람이 하는 일은 이슈 확인과 최종 체크 정도입니다.
Phase 1에서 모크를 만들고 사람이 확인·수정한 뒤, 수정된 모크를 Phase 2에서 애플리케이션에 통합합니다. 이렇게 하면 디자인의 미세 조정을 모크 단계에서 먼저 잡고 통합 단계로 들어갈 수 있어, 되돌림(재작업)이 줄었습니다.
정적 페이지 작업을 쪼개면 다음과 같습니다.
텍스트가 많은 정적 페이지는 섹션이 10~15개인 경우도 흔합니다. 섹션별로 Figma에서 텍스트를 복사해 PHP 번역 배열로 가공합니다. 그리고 그게 EN / ZH(번체 중국어) / KR(한국어) 3개 언어 분량입니다.
php// 이런 배열을 수작업으로 만들고 있었다 'articles' => [ [ 'title' => '섹션 1의 제목', 'body' => '<p>본문...</p><ol class="page__list"><li>항목1</li><li>항목2</li></ol>', ], // × 15 섹션 × 3개 언어... ],
텍스트를 복붙하고, HTML 태그를 붙이고, 싱글쿼트를 이스케이프하고, 배열 구조로 정리하고…. 소소하지만 시간이 순식간에 녹아 없어집니다.
“이 섹션의 gap은 몇 px?” “padding은?” “font-size는?”
Figma를 왔다 갔다 하며 CSS를 씁니다. 정적 페이지는 구조가 깊습니다(섹션 > 제목 > 본문 > 리스트 > 서브리스트). 값 확인만으로도 시간이 꽤 듭니다.
PC 디자인을 구현한 뒤, SP(스마트폰) 디자인도 확인해 반응형 CSS를 작성합니다. Figma에서 매번 모바일 프레임으로 전환하고, 여백/폰트 크기 차이를 확인한 뒤, 미디어 쿼리를 추가하고…. 여기 역시 은근히 시간이 드는 지점입니다.
Blade 템플릿 작성, CSS 작성, 라우팅 추가, 푸터 링크 추가.
여기는 순수 코딩 작업입니다.
페이지 리스트와 Figma 노드 ID만 넘기면 Claude Code가 gh issue create로 이슈를 만들고, 대응 브랜치를 자동 생성해 줍니다.
bash# Claude Code가 해주는 것 gh issue create --title "[정적] ○○ 페이지 작성" --body "..." git checkout -b feature/#212
이슈 번호가 그대로 브랜치명/커밋 메시지에 사용되어 트레이서빌리티도 확보됩니다.
Figma MCP의 get_design_context에 노드 ID만 넘기면 텍스트와 레이아웃 구조가 한 번에 반환됩니다.
Claude Code가 텍스트 취득 → HTML 태그 부여 → 이스케이프 → PHP 배열 정리까지 한 번에 처리합니다. 3개 언어 파일이 수분 내로 완성됩니다.
get_design_context 반환값에 Tailwind 클래스가 포함되어 있어, Figma를 열어 값을 확인할 필요가 없습니다.
textFigma MCP 반환값: gap-[30px] px-[15px] text-[20px] font-bold leading-[1.5] ↓ Claude Code가 자동 변환 CSS: gap: 30px; padding-inline: 15px; font-size: calc(20/16 * 1rem); font-weight: var(--font-weight-bold); line-height: 1.5;
PC/SP 각각의 노드 ID를 넘기면, Claude Code가 차이를 감지해 미디어 쿼리까지 생성해 줍니다. 프로젝트의 CSS 변수 매핑도 처음 몇 페이지에서 학습한 뒤에는 자동으로 해주었습니다.
Phase 1에서 만든 모크를 브라우저로 확인하고, 미세한 들여쓰기나 여백을 수정합니다. 수정이 끝나면 Phase 2로 진행해, 수정 완료된 모크의 HTML/CSS를 기반으로 Claude Code가 그대로 Laravel(Blade/번역 파일/라우팅)로 변환해 줍니다.
모크 단계에서 해결한 문제가 그대로 통합 결과에 반영되므로, “Laravel에 넣으니 또 틀어졌다” 같은 되돌림이 거의 사라졌습니다.
| 공정 | Before | After |
|---|---|---|
| 이슈 생성·브랜치 생성 | 10분 | 자동 |
| 텍스트 추출(3개 언어) | 2~3시간 | 5분 |
| 레이아웃 값 확인 + 반응형 | 3~5시간 | 거의 0 |
| 구현(Blade/CSS/라우팅) | 1~2시간 | 15분 |
| 합계 | 약 8시간 | 약 20분 |
※ 2페이지째 이후의 수치입니다. 1페이지째는 패턴을 확립하는 데 시간이 더 들어서 조금 더 걸립니다.
Claude Code에는 Task tool(서브 에이전트)이 있어 “3개 언어를 병렬로 가져오면 더 빠르지 않을까”라고 생각했지만, 서브 에이전트에서 Figma MCP를 호출하면 권한 에러가 나는 경우가 있었습니다. Figma Desktop Plugin 연결은 메인 스레드에서만 안정적인 듯합니다.
get_design_context는 텍스트와 Tailwind 클래스를 반환해 주지만, 복잡한 중첩 구조(리스트 중간에 문단이 끼어드는 등)는 코드만으로 판단하기 어렵습니다.
get_screenshot으로 실제 보이는 모습을 확인하고 나서야 올바른 HTML 구조를 알 수 있었던 케이스가 몇 번 있었습니다. get_design_context → get_screenshot은 세트로 쓰는 것이 철칙입니다.
장시간 작업하면 Claude Code의 컨텍스트 윈도우가 압축되어 앞부분 작업 내용이 유실됩니다. 어떤 페이지는 1세션에 끝나지 않고 2세션으로 넘어갔습니다.
2세션째에는 이전 요약이 전달되지만, 세세한 CSS 설계 의도는 빠질 때가 있습니다. 중요한 설계 판단은 작업 중 문서나 주석으로 남겨두는 편이 안전합니다.
Figma MCP는 텍스트와 레이아웃 값을 정확히 가져옵니다. 하지만 “왜 padding이 15px인지”, “이 리스트와 문단의 들여쓰기 관계가 어떻게 되어야 하는지”는 디자인 의도이므로 도구가 알 수 없습니다.
어떤 페이지에서 “리스트의 이어지는 문단은 리스트와 같은 들여쓰기 레벨이어야 한다”는 판단은 스크린샷을 보고 사람이 결정한 부분이었습니다.
그래서 모크→수정→통합의 2페이즈가 효과적이었습니다. AI에게 한 번에 완성품을 만들게 하는 게 아니라, 먼저 모크로 초안을 만들고 사람이 눈으로 보며 고친 뒤, 그 수정된 결과를 통합 단계로 넘깁니다.
GitHub CLI로 이슈를 만들고, 이를 바탕으로 Claude Code가 작업을 진행합니다. 이 플로우가 한 번 돌아가기 시작하면, 사람은 페이지 리스트와 Figma 노드 ID만 넘겨도 이슈 발행부터 커밋까지 한 번에 진행됩니다.
“무엇을 만들지”는 사람이 정하고, “어떻게 만들지”는 AI가 기존 패턴에서 판단한다. 이 역할 분담이 잘 맞았습니다.
1페이지째는 “어떤 Figma MCP 도구를 쓸지”, “반환값을 어떻게 변환할지”, “CSS 설계를 어떻게 할지” 같은 시행착오가 있습니다. 여기는 사람의 판단이 필요합니다.
하지만 2페이지째부터는 확립된 패턴 반복이므로, Claude Code에 “이전과 동일하게”라고 말하면 거의 자동으로 완성됩니다. 패턴 확립 이후의 양산 속도가 압도적입니다.
Claude Code는 세션 종료 시 /wrap 커맨드를 사용하면, 세션에서 학습한 내용과 확립된 패턴을 CLAUDE.md에 자동으로 내보내는 기능이 있습니다. 다음 세션 시작 시 CLAUDE.md가 자동으로 로드되므로, 1페이지째에 확립한 패턴을 다음 세션에서도 그대로 사용할 수 있습니다.
텍스트가 많고, 다국어 대응이 필요하며, 구조가 패턴화된 정적 페이지. 이런 페이지에는 Figma MCP + Claude Code 조합이 꽤 잘 맞았습니다.
1페이지 8시간 → 20분. 7페이지 × 3개 언어로 계산하면 총 150시간 이상 절감입니다.
키 포인트는 5가지입니다.
반대로 인터랙션이 복잡한 페이지나 디자인 의도 해석이 어려운 페이지는, 사람의 개입이 좀 더 필요할 것 같습니다.
정적 페이지를 대량으로 만들고 있는 분이라면, 시도해 볼 가치가 있습니다.
