클로드 코드로 쉽게 바이브 코딩하기(Figma MCP)
반나절 만에 바이브 코딩 맛보기
바이브 코딩이 화두다. 사실 눈으로 보기만 하면서 '한번 해봐야지'라는 생각만 했었지만, 실무에서 유용할 것 같은 최근 세이지님의 글을 읽고 피그마 MCP <> 클로드 코드에 대한 굉장히 유용하고 생각되어 비슷하지만 다른 프로세스로 직접 해보기로 했다! (세이지님의 참조한 파일소스들을 참조해서 진행습니다.)
**글 업로드한 지 이틀 만에 클로드 디자인이 나왔습니다! 아직 웹으로만 제공되고 있고, 클로드 유료 사용자라면 한 번 사용해보시는 걸 추천드립니다. 설명이 필요 없을 만큼 아주 쉽습니다 :)
하면 뭐가 좋냐구요 알려주세요..
피그마 MCP <> 클로드 코드를 연결하면 아래와 같은 이점이 있다.
1. 디자인 시스템 그대로 코드가 나온다.
토큰과 컴포넌트가 잘 구축되어 있다면 색상, 타이포, 간격까지 디자인 시스템 기준으로 코드를 만들어준다. 기존에는 디자이너가 피그마에서 열심히 컴포넌트를 만들어도 개발 단계에서 "이 버튼 색이 왜 달라요?"가 반복됐다면, 연결 후에는 그 간극이 확실히 줄어든다.
2. 피그마 화면을 그대로 코드로 뽑아준다.
피그마 프레임 링크를 넣으면 HTML로 변환해준다. 완성도 100%는 아니지만 체감상 70~80%는 잡아줘서 개발자에게 "이런 느낌이요" 대신 "이걸 기반으로 해주세요"가 가능해진다. 특히 모바일/데스크탑 두 링크를 같이 넣으면 반응형까지 한 번에 처리된다.
(물론 디자인시스템이나 컴포넌트가 구축이 잘 안되어 있고, 복잡한 화면일수록 완성도는 떨어진다. 그럴땐 직접 요청을 통해 수정해 나가야한다.)
3. 아이디어를 빠르게 실제 화면으로 검증할 수 있다.
기획 단계에서 "이 흐름이 맞나?" 싶을 때 피그마에서 작업하고 클로드를 통해 HTML로 뽑으면 실제 브라우저에서 바로 확인할 수 있다. 피그마 프로토타입보다 실제 화면에 훨씬 가깝기 때문에, 스펙 구멍을 개발 전에 발견할 수 있다는 게 크다.
4. 반복 설명을 안 해도 된다.
CLAUDE.md에 프로젝트 컨텍스트를(*쉽게 설명하자면 ai 기억장치 또는 설정한 규칙 파일) 한 번 정리해두면 새 세션을 열어도 클로드가 디자인 시스템 구조, 토큰 위치, 스택을 알아서 참고한다. 매번 "우리 서비스 버튼은 이렇게 생겼고, 색상 토큰은 이거고..." 반복하지 않아도 된다.
"새로운 서비스 뚝딱"보다 기존 서비스에 새 화면을 빠르게 붙이는 것이
인하우스 디자이너한테는 훨씬 현실적인 이점이다.
그래서 어떻게 하는거에여?
개념 설명은 세이지님과 하이서님께서 아주 쉽게 설명하고 있으니 저는 패스..
찾아보면 다른 분들께서도 아주 알기 쉽게 설명해주셨지만, 최근 **클로드 데스크탑 서비스에 코드 기능이 추가되면서 나오면서 초기 세팅이 어려운 사람들에게도 매우 쉽게 할 수 있게 되어 해당 방법을 설명하려한다.
준비해야 되는 것
- 클로드 데스크탑 설치 및 Pro 구독 (유료)
- 피그마 데스크탑 및 DEV 플랜 (유료)
- 피그마의 정리된 디자인 시스템 및 화면(해당 샘플을 복사해서 이용해주세요.)
진행요약
시작하기
설치된 클로드를 열고 로그인 후
1. 좌측 코드 패널 클릭 (클로드 터미널)
2.사용될 폴더 생성하기(경로는 자유지만 본인이 알 수 있는 위치로, 명칭은 짧고 영문이면 좋다.)
이제 인풋 창에 피그마를 연동하기 위해 두가지 입력 창을 입력해야되는데,
우선 피그마 데스크톱에서 dev mode > MCP(클로드)를 허용해야한다. 세팅 가이드 링크
그리고 아래로 다시 클로드로 돌아와서 두개의 명령어를 각각 입력하면된다.(클로드 터미널)
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp
첫번째는 내 컴퓨터에서 실행 중인 피그마 데스크탑 앱에 직접 연결
두번째는 인터넷을 통해 Figma 공식 서버에 연결 (옵션)
**(TIP) 진행중 연결이 안되거나 에러가 뜬다면 몇번 다시 명령어를 입력하거나, 클로드 웹창을 따로 띄어서 과정을 복사해 채팅으로 물어보면 해결 방법을 친절히 알려준다.
그리고 클로드 데스크톱 종료(Cmd + Q) 후 재실행, 아래와 같은 명령어를 입력하면
claude mcp list
위와 같이 정상적으로 연결된 모습이 나타난다.
준비 끝! 이제 실전
연결하는 모든 준비는 끝났다. 간단히 아래 명령어를 통해 프로젝트 폴더에CLAUDE.md에 프로젝트 컨텍스트를(*쉽게 설명하자면 ai 기억장치 또는 설정한 규칙 파일) 만들면 된다.
touch CLAUDE.md
해당 파일 안 기준으로 클로드에게 명령어를 내려주면 작업을 수행한다. 그래서 해당 파일안의 내용을 어떻게 입력하는지가 중요하고, 섬세하고 의도한 작업이 나올 수 있다.
(입력에 대한 가이드는 다른 분들의 좋은 팁과 글들이 검색하면 많이 나오기에 해당 아티클에선 제외합니다!)
그리고 해당 파일을 열기 위해선 비주얼 VS code나 Cursor를 통해 열고 편집하는게 일반적인데, 설치가
번거롭다면 파일>우클릭>다음으로 열기>기타>텍스트 편집기 으로 충분히 수정할 수 있다.
마지막으로 피그마와 클로드를 활용해 디자인시스템 웹페이지를 만들자면,
1. 피그마 파일에서 플로그인 design tokens를 통해 json파일을 클로드 폴더에 위치한다.
2. 클로드에게 해당 디자인 시스템을 참조하도록 요청한다.
> 2번처럼 직접 명령어를 입력하거나 아래와 같이 CLAUDE.md 파일에 가이드를 넣을 수 있다.(가이드도 클로드에게 요청해서 피드백 받을 수 있다.)
# Design System
## 기본 규칙
- 항상 dss-tokens.tokens.json 토큰 기준으로 작업
- Figma 컴포넌트 참조
- HTML 기본 스택
- 반응형 필수
## 리소스
- 디자인 토큰: ./dss-tokens.tokens.json
**명령어를 입력하면 토큰이 소비되고 직접 파일에 입력하면 토큰을 덜 사용하기에 그만큼 아낄 수 있다.
그리고 다음 명령어를 진행하면,
"디자인 시스템으로 가이드 웹페이지 만들어줘"
1번처럼 실행되며(코드가 길수록 처리 시간이 길어지므로, 양을 줄여 사용하는 것이 토큰 소비를 줄일 수 있다),
2번과 같이 폴더에 파일이 생성된다.
결과물
만들어진 웹페이지 좌측 패널을 보면 네비게이션도 있다.
디자인 컴포넌트까지 만들어주고, 호버,프레스,입력 등 직접 사용할 수 있는 상태이다.마무리하며,
위 프로세스까지 완료했다면, Claude를 활용해 “로그인 페이지를 만들어줘”, “커머스 메인 페이지를 만들어줘”와 같은 요청만으로도 디자인 시스템을 기반으로 자동으로 페이지를 생성할 수 있다.
디자인시스템을 반영해서 명령어로 만들어진 로그인페이지(조건을 추가하면 다음 스텝의 플로우도 만들어준다.)또한 Figma에서 작업한 화면(아트보드) 링크를 복사해 Claude에 입력한 뒤 “디자인 시스템을 참고해서 웹페이지를 만들어줘”라고 요청하면, 해당 디자인 시스템을 반영한 페이지가 빠르게 구현된다.
마찬가지로, Figma 내 디자인 컴포넌트 링크를 첨부하면 이를 기반으로 사이트를 제작하는 것도 가능하다.
이 과정을 몇 번 반복하다 보면, 어떤 프롬프트를 입력해야 의도한 디자인이 나오는지 자연스럽게 감을 잡게 된다.
특히 CLAUDE.md 설정과 요청 내용의 중요성을 체감하게 되는데, 잘못 설계하면 토큰이 빠르게 소진되는 문제도 함께 경험하게 된다.
마지막으로 이 프로세스가 처음에는 다소 어렵게 느껴질 수 있다. 하지만 ‘바이브 코딩’이 점점 확산되면서 사용성은 계속 개선되고 있고, 앞으로는 누구나 쉽게 접근할 수 있는 환경이 될 가능성이 크다.
결국 중요한 것은 단순히 실행 자체가 아니라, 내가 의도한 디자인을 정확히 반영하기 위해 디자인 시스템을 어떻게 설계하고, 어떤 명령어를 사용할 것인지에 대한 고민이 중요하게 보인다.