백엔드개발자, Claude Code와 Figma MCP로 2.5일만에 실무 프론트 앱 배포하다

5 분 소요

안녕하세요! 최근 화제가 되고 있는 Claude Code와 Figma MCP를 실무 프로젝트에 적용해보았습니다.

결론부터 말씀드리면, 백오피스용 관리 애플리케이션을 2.5일(약 20시간)만에 완전히 동작하는 상태로 구현할 수 있었습니다.
디테일을 다듬어야 할 부분은 있지만, 모든 기능이 정상 작동하며 실제 운영 환경에 배포까지 완료했습니다.

이번 글에서는 Claude Code와 Figma MCP를 어떻게 실무에 적용했는지, 어떤 시행착오가 있었는지 상세히 공유해보겠습니다.

🔍 Figma MCP란 무엇인가?

Figma MCP의 정의

Figma MCP(Model Context Protocol)는 AI 모델이 Figma 디자인 리소스와 직접 상호작용할 수 있게 해주는 표준화된 프로토콜입니다.

쉽게 말해, Claude나 기타 AI 도구가 Figma 디자인 파일을 직접 읽고 이해할 수 있게 해주는 브릿지 역할을 합니다.

MCP의 혁신적 가치

MCP는 AI 시스템이 다양한 데이터 소스와 원활하게 연결될 수 있도록 지원하는 표준화된 프로토콜입니다.
특히 프론트엔드 개발에서는 다음과 같은 작업을 자동화할 수 있습니다:

디자인에서 코드로의 자동 변환
디자인 토큰 자동 추출
컴포넌트 기반 개발 지원
디자인-개발 간 일관성 보장

⚙️ Claude Code에 Figma MCP 연결하기

1단계: Figma Desktop 앱 설정

Figma Desktop 앱에서 MCP 서버를 활성화해야 합니다.

Figma Desktop → Preferences → Enable Dev Mode MCP Server ✅
서버 주소: http://127.0.0.1:3845/sse

중요: Dev Mode가 활성화된 Figma 파일에서만 MCP를 사용할 수 있습니다.

2단계: Claude Code MCP 서버 연결

터미널에서 다음 명령어로 MCP 서버를 추가합니다:

claude mcp add --transport sse figma-dev-mode http://127.0.0.1:3845/sse

3단계: 연결 확인

Claude Code에서 /mcp 명령어를 입력하면 현재 연결된 MCP 서버 목록을 확인할 수 있습니다.
정상적으로 연결되면 Figma 관련 도구들을 사용할 수 있게 됩니다.

🏗️ 마이크로 프론트엔드 앱 초기 구성 전략

기존 성공 패턴 참조 접근법

새로운 프로젝트를 시작할 때, Claude Code에게 기존 성공 사례의 패턴을 참고하여 앱을 구축하도록 지시했습니다.
이는 검증된 아키텍처를 재사용하여 안정성을 확보하기 위함이었습니다.

검증된 구조 활용의 장점

즉시 적용 가능: 이미 운영 환경에서 검증된 패턴
일관성 유지: 기존 애플리케이션들과 동일한 아키텍처
문제 예방: 이전 프로젝트에서 해결된 이슈들 회피
학습 비용 절약: 새로운 패턴 도입에 따른 리스크 최소화

🎨 디자인 시스템 연동의 중요성

발견한 문제점

Figma MCP를 활용할 때 가장 중요한 발견은 기존 디자인 시스템의 존재를 AI에게 명확히 인지시켜야 한다는 점이었습니다.

초기에는 Figma 디자인을 빠르게 코드로 변환해주어서 만족했지만, 곧 이것이 날것의 CSS와 인라인 스타일로 구현되었다는 것을 발견했습니다.
우리는 체계화된 디자인 시스템을 사용하고 있으므로, 이에 맞는 대응이 필요했습니다.

적용한 해결 전략

기존 컴포넌트 패턴 분석 지시: 성공 사례에서 디자인 시스템 사용 패턴 분석
컴포넌트 참조 명시: Claude Code에게 특정 컴포넌트 구현 시 디자인 시스템 패턴 참조하도록 지시
디자인 토큰 활용 강제: CSS 변수와 토큰 기반 스타일링 적용

// 디자인 시스템 토큰 적용 예시
const styles = {
  gap: "var(--ds-space-5)",
  padding: "var(--ds-space-4)", 
  color: "var(--ds-text-secondary)",
  borderRadius: "var(--ds-radius-medium)"
}

🎯 단계적 접근: AI에게 모든 걸 한번에 맡기지 않기

체계적인 단계별 진행의 필요성

한 번에 모든 기능을 구현하려고 하지 않고, 단계적으로 접근하는 것이 핵심이었습니다.

처음에는 수십 줄의 세밀한 프롬프트를 작성해서 한 번에 완성하려고 시도했지만, 어느 시점에서 돌이킬 수 없는 상태가 되어 프로젝트가 산으로 가는 경험을 했습니다.

단계별 진행 사례

1단계: 기본 구조 구축

요청: "빈 상태 화면부터 만들어주세요. 기존 성공 패턴을 참고해서요."
검수: 기본 레이아웃과 라우팅이 제대로 동작하는지 확인
피드백: "네비게이션 버튼이 생성되지 않았습니다."

2단계: 모달 기반 CRUD 구현

요청: "데이터 생성 모달을 구현해주세요. 이 Figma 컴포넌트를 참고하세요."
검수: 모달 동작과 폼 유효성 검사 확인  
피드백: "디자인 시스템의 Button 컴포넌트를 사용해주세요."

3단계: API 연동

요청: "OAuth 인증 시스템을 기존 패턴으로 구현해주세요."
검수: 토큰 관리와 API 호출 테스트
피드백: "토큰 저장 키 패턴이 다릅니다. 기존 방식으로 맞춰주세요."

기존 기능 보호의 중요성

개발 과정에서 새로운 기능을 추가할 때 이미 잘 동작하는 기존 기능이 깨지는 현상이 자주 발생했습니다.
따라서 각 단계마다 꼼꼼한 검수와 피드백을 통해 전체적인 방향을 잡아가는 것이 필수였습니다.

예시:

파일 업로드 기능 추가 시 기존 모달이 깨지는 현상
파일 업로드 로직 추가로 인한 기존 검증 로직 누락
새로운 상태 관리 로직으로 인한 기존 API 연동 이슈

🛠️ 실제 활용 방법과 프롬프트 패턴

효과적인 요청 방식

1. Figma 컴포넌트 링크 + 명확한 요구사항

"이 Figma 링크의 데이터 생성 모달을 구현해주세요.
https://figma.com/design/example/App?node-id=156-138891

요구사항:
- 자체 디자인 시스템 컴포넌트 사용
- 기존 성공 사례의 모달 패턴 참고  
- TypeScript 타입 안정성 확보
- 폼 유효성 검사 포함"

2. 기존 성공 사례 적극 활용

"다른 애플리케이션의 파일 업로드 로직과 동일하게 구현해주세요.
2단계 검증(클라이언트 + 서버) 패턴을 사용하세요."

효과적인 피드백 패턴

명확한 컨텍스트 제공: 전체 상황과 목표 설명
구체적인 피드백: “이 API 호출이 400 에러를 반환합니다”, “API 응답은 data 필드로 래핑되어 있습니다”
범위 제한: “이 파일만 수정하고 다른 건 건드리지 마세요”
패턴 일관성: “기존 애플리케이션들과 동일한 구조로 만들어주세요”

🚀 최종 구현 결과

2.5일 동안 구현한 기능들:

✅ 완전한 CRUD 시스템 (생성/조회/수정/삭제)
✅ Excel 파일 업로드/다운로드
✅ OAuth 인증 연동
✅ 2단계 파일 검증 (클라이언트 + 서버)
✅ 디자인 시스템 일관성 적용
✅ 반응형 레이아웃
✅ 에러 핸들링 및 로딩 상태

🤔 한계점과 개선 과제

반복 학습의 피로감

같은 실수를 계속 반복하는 경우가 많았습니다:

이미 해결된 문제를 다시 만드는 경우
존재하지 않는 디자인 시스템 컴포넌트 사용 시도
API 응답 구조를 잘못 파싱하는 문제
이전에 수정한 부분을 다시 되돌리는 현상

암묵적 규칙 이해 부족

“이 부분은 건드리면 안 됩니다”, “이 패턴은 레거시라서 피해야 합니다” 같은 프로젝트 고유의 규칙들을 매번 설명해야 했습니다.

과도한 확신 문제

복잡한 아키텍처 결정에서도 확신에 찬 모습으로 구현하려고 해서, 지속적인 검증과 방향 조정이 필요했습니다.

Claude.md의 한계

프로젝트 루트에 Claude.md를 작성하고 지속적으로 업데이트했지만, 다음과 같은 문제가 있었습니다:

프로젝트가 커질수록 가이드라인이 우선순위에서 밀려남
대용량 코드베이스에서 토큰 한계로 가이드라인이 제외됨
최근 대화 내용이 더 높은 우선순위를 가짐
파일 수정 히스토리가 쌓이면서 초기 가이드라인이 희석됨

해결책: 현재는 각 프롬프트마다 “Claude.md를 반드시 따라주세요”라고 명시하고 있습니다. 😅

Figma MCP 연결 불안정성

Figma 컴포넌트 링크를 제공했을 때 MCP 연결 문제로 인해 응답이 멈추는 경우가 종종 발생했습니다.

해결책: 응답이 멈출 경우 MCP 연결 상태를 먼저 확인하도록 Claude.md에 추가했습니다.

💡 실무 도입 시 추천 전략

단기 적용 가능한 영역

디자인-개발 협업 개선: Figma MCP로 디자인 구현 속도 향상
빠른 프로토타이핑: MVP 개발이나 PoC 프로젝트
레거시 코드 리팩토링: 기존 패턴 기반의 점진적 개선
반복적인 CRUD 작업: 비슷한 패턴의 관리 화면들

성공적인 도입을 위한 필수 요소

1. 코드 리뷰 프로세스 강화

AI 생성 코드에 대한 체계적인 검증 프로세스 필요
보안, 성능, 유지보수성 관점의 추가 검토

2. 팀 컨벤션 명문화

프로젝트별 AI 가이드라인 문서 작성
디자인 시스템 사용 규칙 명확화
코딩 스타일과 아키텍처 패턴 문서화

3. 단계적 도입 전략

중요도가 낮은 프로젝트부터 시작
팀원들의 AI 도구 숙련도 향상
성공 사례 누적 후 핵심 프로젝트 적용

🌟 결론과 제언

Claude Code와 Figma MCP는 분명히 강력한 도구입니다. 하지만 도구 의존이 아닌 도구 활용이 핵심이라는 것을 깨달았습니다.

실제 역할 분담

전체 아키텍처 설계 → 개발자가 직접 담당
디자인 시스템 매핑 → AI 도구 도움 + 개발자 검증
비즈니스 로직 구현 → AI 생성 + 개발자 수정
배포 및 운영 설정 → 개발자가 직접 담당

성공 요인 정리

기존 성공 패턴의 적극적 활용: 검증된 구조 재사용으로 안정성 확보
체계적인 단계별 접근: 한 번에 모든 것을 구현하려 하지 않음
Figma MCP를 통한 디자인 일관성: 디자인 시스템 기반 구현
지속적인 검증과 피드백: 각 단계별 꼼꼼한 리뷰

앞으로의 전망

AI 도구들이 빠르게 발전하고 있지만, 결국 도구를 얼마나 효과적으로 활용하느냐가 핵심입니다.
단순히 코드를 생성해주는 것을 넘어서, 전체 개발 프로세스에서 AI와 개발자가 어떻게 협업할 것인지를 고민해야 할 때입니다.

특히 다음과 같은 영역에서 더 많은 연구와 실험이 필요하다고 생각합니다:

AI와 함께하는 코드 리뷰 프로세스
디자인 시스템과 AI 도구의 통합
팀 차원의 AI 도구 도입 전략
AI 생성 코드의 품질 관리 방법

여러분도 AI 도구를 활용한 개발 경험이 있으시다면, 댓글로 공유해주시면 함께 배우고 성장할 수 있을 것 같습니다.

감사합니다!

📚 참고 자료

Twitter Facebook LinkedIn

Jayden