인프런 커뮤니티 질문&답변

안녕하세요. 전혀 번거롭지 않으니 편하게 질문 주셔도 됩니다. 이런 고민을 하시는 과정 자체가 실제 서비스를 만드는 데 아주 중요합니다.

Lovable로 만든 소스코드와 Figma UX/UI를 Claude Code에 반영하는 방식은 보통 “디자인을 그대로 자동 변환한다”기보다는, Figma를 기준 문서처럼 활용하면서 Claude Code가 그 구조와 의도를 이해하도록 만드는 방식에 가깝습니다. 말씀하신 것처럼 버튼 하나하나를 일일이 따는 방식은 저도 비효율적이라고 생각합니다.

제가 주로 하는 방식은 Figma에서 화면 전체 흐름을 먼저 정리하고, 각 페이지의 역할, 주요 컴포넌트, 사용자 행동, 상태 변화 같은 것을 텍스트로 함께 정리한 뒤 그 정보를 Claude Code에 넣는 것입니다. 즉, 단순히 “이 화면처럼 만들어줘”가 아니라, “이 페이지는 회원가입 화면이고, 상단에는 헤더, 중간에는 입력 폼, 하단에는 CTA 버튼이 있으며, 에러 상태에서는 어떤 메시지를 보여주고, 모바일에서는 어떻게 배치된다”까지 설명해 주는 방식이 훨씬 잘 동작합니다.

MCP 서버를 붙이는 방식도 맞습니다. 다만 핵심은 MCP 자체보다, Claude Code가 Figma의 디자인 토큰, 레이아웃 구조, 컴포넌트 이름, 화면 설명을 얼마나 잘 가져올 수 있게 하느냐입니다. 실제로는 Figma를 연결해서 참고하게 만들 수는 있지만, 결국 결과물이 잘 나오려면 사람이 화면 구조를 어느 정도 해석해서 프롬프트에 녹여주는 과정이 필요합니다. 아직은 완전 자동으로 “디자인 파일 넣으면 바로 서비스 품질로 완성”되는 단계는 아니라고 보시면 됩니다.

그래서 실무적으로는 보통 이렇게 접근합니다. 먼저 Figma에서 한 화면씩 중요한 페이지를 정합니다. 그 다음 Claude Code에 현재 프로젝트 구조와 기술 스택을 알려주고, 해당 화면의 목적과 구성 요소를 설명합니다. 그리고 가능하면 Figma의 섹션 이름, 컴포넌트 이름, spacing, color, typography 규칙까지 같이 전달합니다. 그러면 Claude Code가 그걸 바탕으로 React 컴포넌트나 페이지 코드를 생성하도록 합니다. 이후에 한 번에 전체 앱을 만들기보다는, 공통 컴포넌트(Button, Input, Card, Modal 등)부터 먼저 만들고 페이지를 조립하게 하는 것이 훨씬 안정적입니다.

제 경우에도 Figma를 Claude Code와 쓸 때, 디자인을 “복사”하려고 하기보다 “설계 의도와 규칙을 전달”하는 데 더 집중합니다. 예를 들어 색상 체계, 버튼 종류, 입력 폼 스타일, 카드 스타일, 간격 규칙 같은 것을 먼저 공통 시스템으로 만들게 하고, 그 위에 각 페이지를 구현하게 합니다. 이렇게 해야 나중에 유지보수도 쉽고, 화면이 많아져도 일관성이 생깁니다.

정리하면, Figma와 Claude Code를 함께 쓸 때 가장 효율적인 방법은 버튼 단위로 따는 것이 아니라,
-> Figma를 보고
-> 화면 구조를 문서화하고
-> 디자인 시스템을 먼저 코드로 만들고
그 다음 페이지 단위로 Claude Code에 구현시키는 방식입니다.

즉, MCP는 연결 도구이고, 실제 생산성을 결정하는 것은 “디자인 정보를 어떤 구조로 Claude Code에 전달하느냐”라고 보시면 됩니다.

질문하신 방향은 아주 좋고, 실제로 서비스를 출시하려는 분들이 꼭 부딪히는 지점입니다. 그래서 오히려 지금처럼 고민해 보시는 것이 맞습니다. 괜찮으시다면 다음에는 제가 “Figma 화면을 Claude Code 프롬프트로 바꾸는 실전 예시”까지 드릴 수 있습니다.