WeniVooks

검색
북마크 이동

바이브코딩 에센셜 with claude code

피그마 MCP 활용

1. 디자인 툴 Figma 소개

1.2 Figma란?
Figma: the collaborative interface design tool.

Figma는 UI/UX 디자인을 위한 클라우드 기반 협업 디자인 플랫폼입니다.

쉽게 말해 웹 브라우저에서 디자인 작업을 하고, 링크 하나로 팀원들과 실시간으로 협업할 수 있는 도구입니다. 포토샵이나 일러스트레이터처럼 프로그램을 설치할 필요가 없습니다. 크롬만 있으면 어디서든 작업할 수 있죠.

디자인 파일을 공유하는 방식(기존 디자인 툴 vs 피그마)
1.1 왜 Figma를 알아야 할까

바이브 코딩을 하다 보면 디자이너와 협업할 일이 생깁니다. 또는 직접 디자인을 해야 할 때도 있죠. Figma는 현재 전 세계 디자이너들이 가장 많이 사용하는 도구입니다. 2023년 설문조사에서 압도적인 1위를 차지했습니다.

위니브에서도 디자인 시스템 구축, 웹/앱 UI/UX 디자인, 카드뉴스 제작, 교안 이미지 제작, 책 표지 디자인 등 거의 모든 디자인 작업을 Figma로 진행합니다.

타 UIUX 디자인 툴 vs 피그마 비교
1.2 Figma의 핵심 장점

웹 환경에서 작동합니다

프로그램 설치가 필요 없습니다. 맥이든 윈도우든 상관없이 브라우저만 있으면 됩니다.

실시간 저장과 협업

작업 내용이 자동으로 저장됩니다. 여러 명이 동시에 한 파일에서 작업할 수 있습니다. 구글 독스처럼요.

무료로 충분합니다

대부분의 기능을 무료로 제공합니다. 바이브 코딩 수준에서는 유료 기능이 거의 필요 없습니다.

1.3 Figma 제품군 이해하기

Figma는 이제 단순한 디자인 툴이 아닙니다. 아이디어 구상부터 웹 페이지 배포까지 전 과정을 지원하는 플랫폼으로 진화했습니다.

1.3.1 핵심 도구들

  1. Figma Design - 디자인 작업의 중심

    UI/UX 디자인을 만드는 메인 툴입니다. 컴포넌트, 오토 레이아웃, 디자인 시스템을 구축할 수 있습니다.

  2. Dev Mode - 개발자를 위한 모드

    개발자가 디자인을 코드 친화적으로 확인할 수 있는 전용 뷰어입니다. CSS 속성, 간격, 색상 코드 등을 바로 확인할 수 있어 협업에 유용합니다.

  3. FigJam - 아이디어 정리 도구

    디지털 화이트보드입니다. 브레인스토밍, 플로우차트, 회의록 등 협업 아이디어를 시각적으로 정리할 때 사용합니다.

  4. Slides - 프레젠테이션 제작

    발표 자료를 만들 수 있는 툴입니다. 파워포인트처럼 활용할 수 있으며, 피그마 디자인 에셋을 바로 가져와 쓸 수 있어 편리합니다. 웹 기반으로 브라우저에서 바로 공유할 수 있다는 장점이 있습니다.

1.3.2 최신 AI 도구들

  1. Make - AI 프로토타입 제작

    AI가 프롬프트를 받아 디자인과 코드 제안을 생성합니다. 아이디어를 빠르게 시각화하고 프로토타입으로 확장할 수 있습니다.

  2. Sites - 웹사이트 퍼블리싱

    디자인한 웹사이트를 코딩 없이 바로 배포할 수 있습니다. 반응형 웹사이트 제작을 지원해 디자이너가 손쉽게 웹 퍼블리싱까지 할 수 있습니다.

1.4 바이브 코딩에서 Figma 활용법

디자인 참고하기

Figma Community에서 수많은 무료 템플릿과 디자인 시스템을 찾을 수 있습니다. 이걸 레퍼런스로 활용하세요.

디자인을 코드로 변환하기

뒤에서 다룰 Figma MCP를 활용하면 Figma 디자인을 Claude Code가 바로 코드로 변환합니다.

협업하기

디자이너가 Figma로 디자인을 만들면 링크 하나로 공유받을 수 있습니다. Dev Mode로 보면 필요한 코드 정보를 바로 확인할 수 있죠.

Figma를 마스터할 필요는 없습니다. 하지만 기본적인 사용법과 구조를 이해하면 디자이너와 소통이 훨씬 편해집니다. 무엇보다 Figma MCP를 통해 디자인을 코드로 변환할 수 있다는 점이 바이브 코딩에서는 가장 중요합니다.

처음엔 Community에서 템플릿을 찾아보는 것부터 시작하세요. 마음에 드는 디자인을 발견하면 그걸 Claude Code로 변환해보는 겁니다. 이것만으로도 충분히 멋진 서비스를 만들 수 있습니다.



2. Figma Dev Mode MCP를 Claude Code에 활용하기

2.1 Figma 디자인이 있다면

Figma MCP를 활용하면 내 디자인을 빠르게 HTML, CSS 코드로 변환할 수 있습니다. (Figma 유료 구독 필요)

Dev Mode MCP 서버 안내서
2.1.1 MCP란 무엇인가

MCP는 쉽게 말해 AI에게 실제 작업을 시킬 수 있게 해주는 통로입니다.

요즘 AI는 정말 똑똑합니다. 글도 잘 쓰고 요약도 잘합니다. 그런데 현실의 작업은 못합니다. 예를 들어서

  • "내 휴가 일정 등록해줘"
  • "내 컴퓨터에서 OO파일 열어봐"
  • "내 이번달 매출을 엑셀로 정리해줘"

이런 것들은 할 수 없습니다. AI가 실제 컴퓨터나 프로그램을 조작할 수 없기 때문입니다.

그러나 MCP가 나오면서 이런 것들이 가능해졌습니다.

사람: “오늘 누구 휴가야?”

AI: (휴가 관리 시스템에 직접 접속해서 확인하고 알려줌)

사람: “이 자료 PDF로 바꿔줘!”

AI: (파일을 불러오고 변환해서 저장까지 함)

개발자 입장에서 보면, 기존에는 AI에게 명령을 시키려면 복잡한 과정이 필요했습니다. 자연어를 분석하고 코드와 매핑하고 API를 만들고 연결하고... MCP는 이 연결 과정을 표준화합니다. 개발자는 "무슨 일을 시킬지"에만 집중하면 됩니다.

1.2 Figma MCP란

Figma MCP는 Figma와 AI가 직접 대화할 수 있게 해주는 다리입니다.


"이 화면 전체를 React로 만들어줘"

→ AI가 Figma 화면을 보고 완성된 React 코드 생성

"우리 회사 디자인 시스템 컴포넌트 써서 만들어줘"

→ 기존 컴포넌트를 재활용해서 일관성 있는 코드 생성

"이 디자인에 쓰인 색깔이랑 폰트 정보 다 뽑아줘"

→ 디자인 토큰을 자동으로 정리해서 제공

"모바일 버전으로도 만들어줘"

→ 반응형 코드까지 자동 생성

2. MCP 연결 방법

2.1 Figma app 설정

Figma Dev Mode MCP 기능을 활용하려면 Figma 데스크톱 앱이 필요합니다. (최신 버전으로 업데이트 필수)

  1. Figma 앱을 실행합니다
  2. 디자인 파일 내에서 '개발자 모드'를 실행합니다
  3. Main menu > Preferences > Enable Dev Mode MCP server 체크하여 MCP를 활성화합니다
2.2 Claude Code 설정

Figma Dev Mode 확장 프로그램을 사용하려면 코드 편집기가 필요합니다. (VS Code, Cursor, Windsurf, Claude Code 중 선택) 우리는 Claude Code와 Figma MCP를 연결할 것입니다.

터미널에서 다음 명령어를 입력합니다.

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

설치 확인을 위해 다음 명령어를 입력합니다.

claude mcp list
claude mcp list

figma-dev-mode-mcp가 나타나면 성공적으로 추가된 것입니다.


3. Figma 디자인 변환 요청하기

3.1 기본 변환 과정

  • Figma '개발자 모드'에서 변환하고 싶은 프레임을 선택합니다.

    개발자 모드에서 프레임 요소 선택

  • Claude Code에서 명령어를 입력합니다.

    내 Figma 선택 항목을 일반 HTML + CSS로 생성해줘
    내 Figma 선택 항목을 일반 HTML + CSS로 생성해줘
    Claude Code에서 명령어 작성

  • Claude Code가 선택한 디자인을 HTML, CSS로 변환해줍니다.

    선택한 Figma 디자인 요소
Claude Code가 변환한 결과물
3.2 추가 작업 요청

변환된 코드에 추가 작업을 요청할 수 있습니다.

변환한 디자인 유지하고 반응형 적용해줘
변환한 디자인 유지하고 반응형 적용해줘
각 버튼 요소에 호버 애니메이션 자연스럽게 추가해줘
각 버튼 요소에 호버 애니메이션 자연스럽게 추가해줘

4. 팁과 주의사항

  • 아이콘과 로고 처리 아이콘이나 로고를 SVG로 저장하는 기능은 아직 불안정합니다. 직접 저장하는 것을 권장합니다.
  • 복잡한 디자인 처리 선택한 프레임에 디자인 요소가 너무 많으면 변환이 제대로 되지 않습니다. 긴 랜딩페이지나 복잡한 디자인은 섹션별로 분할해서 작업하는 것이 효과적입니다.
  • 권장 작업 방식
    1. 한 번에 하나의 섹션만 선택
    2. 간단한 컴포넌트부터 시작
    3. 점진적으로 복잡한 요소 추가

📕 추천도서

MCP 활용법을 더 자세히 알고 싶다면?

「10분 만에 따라 하는 Claude MCP 업무 자동화 혁신 가이드」 - 이호준
5.5 디자인 시스템 활용5.7 weniv canvas 활용