클로드 코드로 쉽게 바이브 코딩하기(Figma MCP) - 브런치

반나절 만에 바이브 코딩 맛보기 바이브 코딩이 화두다. 사실 눈으로 보기만 하면서 '한번 해봐야지'라는 생각만 했었지만, 실무에서 유용할 것 같은 최근 세이지님의 글을 읽고 피그마 MCP <> 클로드 코드에 대한 굉장히 유용하고 생각되어 비슷하지만 다른 프로세스로 직접 해보기로 했다! (세이지님의 참조한 파일소스들을 참조해서 진행습니다.) **글 업로드한 지 이틀 만에 클로드 디자인이 나왔습니다! 아직 웹으로만 제공되고 있고, 클로드 유료 사용자라면 한 번 사용해보시는 걸 추천드립니다. 설명이 필요 없을 만큼 아주 쉽습니다 :) 토큰과 컴포넌트가 잘 구축되어 있다면 색상, 타이포, 간격까지 디자인 시스템 기준으로 코드를 만들어준다. 기존에는 디자이너가 피그마에서 열심히 컴포넌트를 만들어도 개발 단계에서 "이 버튼 색이 왜 달라요?"가 반복됐다면, 연결 후에는 그 간극이 확실히 줄어든다. 피그마 프레임 링크를 넣으면 HTML로 변환해준다. 완성도 100%는 아니지만 체감상 70~80%는 잡아줘서 개발자에게 "이런 느낌이요" 대신 "이걸 기반으로 해주세요"가 가능해진다. 특히 모바일/데스크탑 두 링크를 같이 넣으면 반응형까지 한 번에 처리된다. (물론 디자인시스템이나 컴포넌트가 구축이 잘 안되어 있고, 복잡한 화면일수록 완성도는 떨어진다. 그럴땐 직접 요청을 통해 수정해 나가야한다.) 기획 단계에서 "이 흐름이 맞나?" 싶을 때 피그마에서 작업하고 클로드를 통해 HTML로 뽑으면 실제 브라우저에서 바로 확인할 수 있다. 피그마 프로토타입보다 실제 화면에 훨씬 가깝기 때문에, 스펙 구멍을 개발 전에 발견할 수 있다는 게 크다. 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 설정과 요청 내용의 중요성을 체감하게 되는데, 잘못 설계하면 토큰이 빠르게 소진되는 문제도 함께 경험하게 된다. 마지막으로 이 프로세스가 처음에는 다소 어렵게 느껴질 수 있다. 하지만 ‘바이브 코딩’이 점점 확산되면서 사용성은 계속 개선되고 있고, 앞으로는 누구나 쉽게 접근할 수 있는 환경이 될 가능성이 크다. 결국 중요한 것은 단순히 실행 자체가 아니라, 내가 의도한 디자인을 정확히 반영하기 위해 디자인 시스템을 어떻게 설계하고, 어떤 명령어를 사용할 것인지에 대한 고민이 중요하게 보인다.