🎨 피그마 MCP + 클로드 코드로 바이브 코딩? 디자인 시스템이 핵심이었다

 

"AI한테 시키면 되는 거 아닌가요?"라는 오해부터 시작됩니다

바이브 코딩이라는 말, 요즘 개발자나 디자이너 커뮤니티에서 정말 많이 들리죠. AI에게 "이런 느낌으로 만들어줘"라고 하면 뚝딱 결과물이 나오는 것처럼 보이는 그 방식이에요.

그런데 막상 해보신 분들은 아실 거예요. 처음엔 신기하게 잘 나오는 것 같다가, 화면이 늘어날수록 어딘가 어긋나기 시작한다는 걸요. 버튼 색상이 페이지마다 조금씩 다르고, 여백이 들쭉날쭉하고, 수정하려고 프롬프트를 다시 치면 또 다른 부분이 틀어집니다.

저도 처음엔 "그냥 말로 시키면 되겠지"라고 생각했는데, 피그마 MCP랑 클로드 코드를 본격적으로 써보면서 완전히 생각이 바뀌었어요. 바이브 코딩을 제대로 하려면, 오히려 사전 준비가 훨씬 더 중요합니다. 그 핵심이 바로 디자인 시스템이에요.

디자인 시스템 없이 바이브 코딩하면 이런 일이 생깁니다

AI는 컨텍스트가 없으면 그냥 지어냅니다. 색상도, 폰트 크기도, 버튼 스타일도요. 처음 한 화면은 그럴듯하게 나오는데, 두 번째 화면을 만들 때쯤 되면 AI는 첫 번째에서 정한 값을 정확히 기억하지 못해요. 그래서 결과물이 조금씩 달라지기 시작합니다.

그렇게 되면 수정 프롬프트가 쌓이고, 그 수정을 위한 컨텍스트가 쌓이고, 어느 순간 클로드 코드 오른쪽 하단의 컨텍스트 수치가 70%를 훌쩍 넘어가 있어요. 이게 반복되면 토큰은 토큰대로 녹고, 결과물의 일관성은 일관성대로 무너지는 상황이 됩니다.

요즘 개발자들 사이에서 "바이브 코딩은 토큰 먹는 기계"라는 말이 나오는 이유가 바로 여기 있어요. 디자인 기준이 없으니까 수정이 끝이 없는 거죠.

피그마 디자인 시스템의 핵심, 딱 세 가지만 기억하세요

피그마에서 디자인 시스템을 구성하는 요소는 크게 세 가지예요. 어렵게 생각하실 필요 없고, 이 세 가지만 이해하면 절반은 된 거예요.

첫 번째는 베리어블(Variables)입니다. 색상, 폰트 크기, 여백 같은 속성 값을 하나의 변수로 저장해두는 기능이에요. 예를 들어 "브랜드 메인 컬러는 #3B82F6"이라고 한 번만 등록해두면, 그 변수를 사용하는 모든 요소가 자동으로 같은 색상을 씁니다. 나중에 컬러를 바꿔야 할 때도 변수 하나만 수정하면 끝이에요.

두 번째는 스타일(Styles)입니다. 베리어블이 개별 속성이라면, 스타일은 여러 속성을 세트로 묶은 거예요. 타이포그라피처럼 폰트 종류, 크기, 줄간격, 자간 등 여러 속성이 함께 움직여야 하는 경우에 스타일로 묶어두면 훨씬 편하게 관리할 수 있습니다.

세 번째는 컴포넌트(Components)입니다. 반복적으로 쓰이는 UI 요소(버튼, 카드, 내비게이션 등)를 원본 하나만 만들어두고, 화면마다 인스턴스(사본)로 꽂아 쓰는 방식이에요. 원본을 수정하면 연결된 모든 인스턴스가 자동으로 바뀌죠. 이게 코드에서도 똑같이 작동합니다.

이 세 가지의 공통점은 딱 하나예요. 원본을 수정하면 연결된 모든 곳이 한 번에 바뀐다는 것. 피그마 파일에서도, 코드에서도 동일하게 적용됩니다.

피그마 MCP, 쉽게 말하면 AI와 피그마 사이의 다리예요

MCP는 Model Context Protocol의 약자로, 클로드 코드 같은 AI 코딩 도구가 피그마의 디자인 데이터를 직접 읽어올 수 있게 해주는 연결 고리입니다. 흔히 "AI 분야의 USB-C 커넥터"에 비유되기도 해요.

이전까지는 AI에게 디자인을 전달하려면 화면을 캡처해서 이미지로 넘기거나, JSON 파일을 별도로 추출해야 했어요. 피그마 MCP가 등장하면서 AI가 디자인 파일 자체를 읽어서 컴포넌트 구조, 베리어블 값, 레이아웃 정보를 직접 가져올 수 있게 됐습니다.

피그마 MCP는 크게 두 종류가 있어요. 하나는 데브모드 MCP로, 피그마 유료 플랜에서 사용 가능한 공식 기능이에요. 베리어블 추출이나 코드 생성에 특히 강하고, 디자인 시스템 기반 워크플로우에 최적화돼 있습니다. 다른 하나는 Talk to Figma MCP로, 서드파티 플러그인 기반이에요. 피그마 안에서 직접 디자인을 수정하거나 인스턴스를 교체하는 작업에 유리하고, 무료 계정에서도 쓸 수 있습니다.

실전에서는 간단하게 기억하면 됩니다. 디자인을 코드로 변환할 땐 데브모드 MCP, 피그마 안에서 디자인 작업 자체를 자동화할 땐 Talk to Figma MCP예요.

실전 작업 순서, 이 세 단계만 따라가면 됩니다

단계별 흐름은 생각보다 단순해요. 디자인 토큰 추출, 컴포넌트 코드 생성, 페이지 완성, 이 세 단계예요.

첫 번째, 디자인 토큰을 추출해서 theme.js 파일을 만듭니다. 피그마에서 컬러와 타이포그라피 관련 섹션을 선택하고, 클로드 코드에 연결된 데브모드 MCP를 통해 베리어블을 읽어오게 합니다. "피그마의 컬러와 타이포그라피 변수들을 읽고 theme.js 파일을 업데이트해줘"라고 요청하면 색상, 간격, 폰트 등 디자인 속성이 코드로 정리된 파일이 생성돼요. 이때 피그마 데브모드가 켜져 있어야 MCP가 데이터를 읽을 수 있다는 점, 꼭 기억하세요.

두 번째, 컴포넌트 코드를 자동 생성합니다. 피그마에서 컴포넌트 섹션을 선택하고 "선택한 섹션의 컴포넌트를 코드로 만들어줘"라고 요청하면, 앞서 만든 theme.js를 기반으로 버튼, 드롭다운, 헤더, 카드 등 컴포넌트 파일들이 자동으로 만들어집니다. 이 과정에서 AI가 토큰을 참조하기 때문에 하드코딩 없이 일관된 코드가 나와요.

세 번째, 완성된 페이지를 구현합니다. 피그마에서 완성된 화면 프레임을 선택하고 "선택한 프레임 읽어서 컴포넌트, 토큰 구조 파악하고 랜딩 페이지 구현해줘"라고 요청합니다. 이때 중요한 건 "하드코딩 하지 말고, 없는 요소가 있으면 먼저 물어봐"라고 함께 지시하는 거예요. 이 한 마디가 결과물의 일관성을 크게 좌우합니다.

CLAUDE.md 파일, 이게 없으면 절반은 손해입니다

많은 분들이 바이브 코딩을 하면서 놓치는 부분이 있어요. 바로 CLAUDE.md 파일 활용이에요.

매번 프롬프트에 "토큰 재사용해줘", "하드코딩 하지 마세요", "없는 요소는 물어봐줘" 같은 지시를 반복하면 컨텍스트만 쌓이고 토큰이 낭비됩니다. 이 내용을 CLAUDE.md 파일에 한 번만 등록해두면, 클로드 코드가 작업을 시작할 때마다 이 파일을 먼저 읽고 원칙에 맞게 움직입니다.

파일 내용은 이런 식으로 등록하면 돼요. "기존 토큰이 있으면 반드시 재사용할 것. 새 토큰이 필요하다면 없다고 물어보고 진행할 것. 컴포넌트에 없는 요소가 생기면 하드코딩 하지 말고 먼저 확인을 구할 것."

이 파일 하나가 전체 작업의 기준점이 됩니다. 있고 없고의 차이가 결과물 품질에서 확실히 드러나더라고요.

컨텍스트 관리도 바이브 코딩 실력입니다

바이브 코딩을 하다 보면 작업이 길어질수록 컨텍스트가 쌓입니다. 클로드 코드 화면 오른쪽 하단에 컨텍스트 사용량이 퍼센트로 표시되는데, 70%가 넘어가면 /compact 명령어로 맥락을 압축해주는 게 좋아요.

100%가 되면 클로드가 알아서 압축하는데, 그 과정에서 중요한 작업 원칙이 유실되는 경우가 있어요. 그러면 앞서 잡아놓은 일관성이 갑자기 흔들리거나, 하드코딩이 슬쩍 들어오는 일이 생깁니다. 미리 적정 타이밍에 직접 줄여주는 습관이 바이브 코딩 실력의 일부예요.

요즘 "토큰 녹는다"는 말 많이 쓰시잖아요. 디자인 시스템을 잘 세팅해두면 불필요한 수정 프롬프트가 줄어들고, 컨텍스트 압박도 훨씬 덜합니다. 효율이 달라지는 게 직접 느껴져요.

처음부터 만들기 부담스럽다면, 커뮤니티 소스부터 시작하세요

디자인 시스템을 처음부터 만들어야 한다고 생각하면 부담스러울 수 있어요. 그럴 땐 피그마 커뮤니티를 먼저 들어가 보세요. 무료로 사용 가능한 디자인 시스템 소스들이 꽤 많이 올라와 있습니다. 라이선스 확인은 필수이지만, 좋은 시작점이 될 수 있어요.

2025년 이후 피그마에 AI 기능이 도입되면서 화면에서 베리어블과 스타일을 자동으로 추출해 등록하는 작업도 점점 간편해지고 있어요. 자연어 프롬프트만으로 디자인을 인터랙티브 프로토타입으로 전환하는 방향으로도 계속 발전 중이고요. 진입 장벽이 낮아지고 있는 만큼, 지금 시작해두는 게 나중에 확실히 유리합니다.

마무리

디자인 시스템은 대기업 팀만 쓰는 게 아니에요. 오히려 혼자 또는 소규모로 빠르게 만들어야 할 때 더 빛을 발합니다.

토큰과 컴포넌트를 한 번만 잘 세팅해두면, 그다음부터는 "이 시스템 기반으로 화면 만들어줘"라는 말 한마디로 일관된 결과물이 나와요. 수정 프롬프트 줄이고, 토큰 낭비 줄이고, 결과물 품질 올리는 이 세 가지를 동시에 해결하는 게 디자인 시스템입니다. 피그마 MCP와 클로드 코드 조합, 한 번 제대로 세팅해 두면 그다음부터는 확실히 달라집니다.