Figma MCP로 실무에 쓸 수 있는 코드 만들기
컴포넌트화 + Tailwind CSS + Shadcn UI 조합
Figma MCP + Tailwind CSS + Shadcn 실무 코드 자동화 실험기
이전 글에서 Figma MCP를 활용하여 디자인 화면을 코드로 변환하는 실험을 소개한 바 있습니다. 예상보다 높은 수준의 코드가 출력되었고, 디자인-코드간 일치도가 높다는 점에서 가능성을 확인할 수 있었습니다.
하지만 디자인 한두 장을 코드로 바꾸는 것과, 하나의 프로젝트 전체를 구성하는 일은 전혀 다른 문제입니다. 페이지가 한두 장일 때는 AI가 생성한 코드를 그대로 활용해도 큰 문제가 없지만, 화면 수가 늘어나면 이야기가 달라집니다. 페이지마다 마크업 구조와 클래스 네이밍이 달라지고, 같은 UI 요소도 중복 정의되는 경우가 많아지기 때문입니다. 결국 사람이 코드를 정리할 때, 전체 구조를 파악하는 데 더 많은 공수가 들어가는 문제가 발생합니다.
이런 문제에 대해 개발사 대표님과 논의하던 중, AI가 Tailwind CSS와 Shadcn 기반으로 코드를 생성하면 유지보수 공수를 줄일 수 있을 것이라는 의견을 받았습니다. 이 아이디어를 바탕으로, Figma MCP를 활용해 컴포넌트 단위로 코드를 생성하는 테스트를 진행해 보기로 했습니다.
디자이너가 코드 생성 과정에 개입한다는 것
디자이너는 Figma 화면과 구현 코드의 시각적 디테일을 비교하며, 필요할 경우 디자인 시스템 자체를 Tailwind CSS나 Shadcn 변환에 적합한 형태로 조정할 수 있습니다. Figma MCP를 통해 디자이너가 직접 코드를 생성할 수 있다면, 코드와 디자인 간의 시각적 일치도를 효과적으로 높일 수 있습니다. 이는 단순히 코드 생성 속도의 문제가 아니라, 개발 이후의 디자인 검수 과정을 단축시킬 수 있다는 점에서 중요한 의미를 가집니다.
물론 전체 프로젝트의 아키텍처 구성, 상태 관리, 라우팅 처리, 성능 최적화 등은 여전히 개발자의 영역입니다. 따라서 이번 테스트에서는 AI 코드 생성을 정적인 프레젠테이션 컴포넌트 수준에서만 진행했습니다.
Figma 디자인 설계 시 체크리스트
디자인은 고객사의 허락을 받아 이전에 진행한 웹디자인 프로젝트의 일부 결과물을 활용했고, 디자인 시스템의 구조를 재설계했습니다.
Figma 디자인 시스템은 다음을 기준으로 재설계 했습니다.
실제 개발에 가까운 단위로 컴포넌트를 분리
Figma 네이밍은 Tailwind CSS와 Shadcn 변수 체계에 맞게 정리
반복 UI는 중복 생성을 피하고 공통 컴포넌트로 구조화
Auto layout 및 속성 지정은 Flex 기반 코드 추출에 최적화
Tailwind CSS와 Shadcn 변수 체계에 맞게 정리한 Figma 디자인 화면 설정Figma MCP → 코드 변환 시 체크리스트
Figma에서 구조화한 디자인 컴포넌트를 Cursor를 통해 Claude에게 전달하고, 코드로 구현해주는 과정을 반복했습니다. AI가 생성한 결과물이 실제 개발 환경에 적합한지를 검토할 때는, 단순히 ‘비슷하게 보이는가’보다 훨씬 더 구체적인 기준이 필요했습니다.
특히 다음 기준에 집중했습니다.
1. Tailwind CSS 변수와의 정확한 매핑
텍스트 스타일, 간격, 컬러 등 시각적 속성이 Figma 변수에서 Tailwind 토큰으로 일관되게 전환되는지를 중심으로 검토했습니다.
2. Shadcn 컴포넌트 구조에 대한 정합성
Button, Tabs, Dropdown 등 각 UI 요소가 Shadcn의 props, 구조와 충돌 없이 구현되었는지 확인했습니다.
3. 재사용성과 수정 효율성 확보
동일한 구조를 반복 구현할 경우, 중복 생성 없이 공통 컴포넌트로 병합할 수 있는 형태로 설계되었는지를 판단했습니다.
좌 : Shadcn Button 원본 코드 / 우 : AI가 수정한 커스텀 코드AI 코드 생성 프롬프트, 시행착오와 개선 방향
처음에는 프롬프트 작성에 꽤 시행착오가 있었습니다. Tailwind 토큰 매핑은 비교적 잘 적용되었만, Shadcn 구조 정합성을 맞추는 데는 시간이 걸렸습니다. 클래스 누락, 네이밍 불일치, UI 디테일 오류 등으로 여러 번 명령을 수정해야 했습니다.
하지만 프롬프트를 계속 다듬다 보니 반복되는 구조에 대해선 점점 더 빠르게, 더 정확하게 구현하는 결과가 나왔습니다.
결과적으로 이번 테스트의 목표였던 아래 세 가지 기준은 모두 일정 수준 이상 충족되었습니다.
Tailwind CSS 유틸리티 기반으로 클래스 구성
Shadcn UI 컴포넌트를 활용한 구조 정리
디자인 시안과의 시각적 일치도 확보
하단에 결과물 스크린샷과 라이브 링크를 첨부했습니다.
좌 : 디자인 시안 / 우 : Figma MCP + Tailwind CSS + Shadcn UI로 구현한 화면https://main.d17qoprn4m4cjt.amplifyapp.com/
다만, 이번에 테스트한 시안은 반응형 속성이 명확히 정의되지 않은 상태였습니다. 그 영향으로, Claude가 Shadcn UI 기준에 맞춰 자동 변환하는 데 한계가 있었고, 기대한 결과와는 다소 차이가 났습니다. 이 부분은 디자인 단계에서 조금 더 명확하게 기준을 잡고 들어가는 것이 필요하다는 점을 확인했습니다.
마치며
이번 테스트는 도구를 사용해본 기록이라기보다, 협업 구조를 설계해본 과정에 가까웠습니다. 디자인에서 코드로, 코드에서 유지보수 가능한 구조로. 그 사이의 전환을 어디까지 다듬을 수 있는지 확인해본 시간이었습니다.
물론 자동 생성 코드만으로는 부족한 부분이 분명히 존재합니다. 하지만 MCP 같은 도구는 분업의 간극을 좁혀주는 역할을 분명히 해내고 있고, Tailwind와 Shadcn을 기준으로 컴포넌트를 정리하는 방식은 규모 있는 프로젝트에서도 충분히 유효할 수 있다고 느꼈습니다.
이런 협업 흐름에 관심 있는 분이라면 브런치를 통해 편하게 문의주시면 좋겠습니다. 언제든 환영합니다.
