바이브코딩(Vibe Coding)시작 - Cursor MCP & Figma 연결

 

바이브 코딩이란?

바이브 코딩(Vibe Coding)은 개발자가 전통적인 프로그래밍 언어로 직접 코드를 작성하는 대신, 자연어(예: 한국어나 영어)로 원하는 기능이나 프로그램의 요구사항을 설명하면 인공지능(AI)이 이를 코드로 자동 생성해주는 새로운 프로그래밍 방식

 

 

 

 

MCP란?

MCP(Model Context Protocol)는 대규모 언어 모델(LLM)과 외부 데이터 소스, 도구, 시스템 간의 안전하고 표준화된 통신을 가능하게 하고 서버를 붙이기만 하면 편하게 사용할 수 있는 개방형 프로토콜

- 기존 API처럼 단방향 호출과 달리 MCP는 양방향 정보를 주고받을 수 있음

 

 

 

Cursor MCP 와 Figma 연결해서 사용하기

 

 

1. 플러그인, MCP 설치

 

1. Figma 플러그인 'Cursor Talk To Figma MCP Plugin' 설치
2. Corsor에  Figma MCP - 'TalkToFigma' 설치 (cursor와 figma에서 서로 실시간 수정 가능)

 

    참고: 

    https://www.youtube.com/watch?v=QDQv2Dq5A1c(참고)

     https://cheesechaos.tistory.com/51

 

 

 

 

 

2. FIGMA - Cursor 연결

 

 

1. 피그마 플러그인 중에 'Cursor Talk To Figma MCP Plugin' 을 열고 Use localhost 활성화 하고

 

 

 

2. 피그마에서 연결이 제대로 되면 '녹색 줄에 뜨는 주소 복사'해서 or 피그마에서 작업한 디자인 파일 선택하고 오른쪽 마우스 - '복사/붙여넣기옵션 - 선택항목링크복사(그부분만 복사됨 )'

 

 

 

3. cursor 프롬프트 입력창에 ("주소입력" 피그마 연결해서 디자인 작업 시작하자) 이런식으로 프롬프트 입력한다.(여러가지 방법이 있지만 지금 나한테는 이게 제일 편한 것 같음)

 

 

 

 

 

 

필요한 Figma plugin 

 

-html.to.design - 주소입력하면 그대로 디자인 뽑아옴

-builder.io - 디자인된 화면 그대로 소스로 뽑아줌 (next.js)

                       참고영상 https://www.youtube.com/watch?v=Rq9gFzcY0gI&t=502s

 

 

 

 

 

 

프롬프트 테스트 예제

"피그마 주소' 피그마 연결 하고 디자인 작업 시작하자" "연결된 피그마 디자인 1:1로 똑같이 next.js로 구현해줘" "Next.js 기반으로 프로젝트를 생성하고 프론트엔드 부분만 구성하고 백엔드쪽은 기본폴더만 만들어줘. 필요한 데이타나 api가 있다면 임의로 너가 만들어줘. App Router 구조를 사용하고 Tailwind도 포함해줘." "아이콘은 리엑트 아이콘을 사용할거야. 아이콘도 쓸 수 있도록 기본 구현해줘 or 'fontawesome.com'의 아이콘을 사용할거야. 기본 세팅 구현해줘" "웹으로 구현해줘" ( npm run dev ) "이 컴포넌트에 로그인 가능을 추가해줘" "이 HTML 파일을 Next.js 13 app 디렉토리 기반 프로젝트로 바꿔줘. tailwindcss 적용하고, 컴포넌트는 /src/components에 분리해줘. 페이지는 /src/app/page.tsx로 구성하고, 정적 자산은 public 폴더로 이동해줘" "Next.js 디렉토리 기반 프로젝트를 생성해줘. tailwindcss 적용하고, 컴포넌트는 /src/components에 분리해줘. 페이지는 /src/app/page.tsx로 구성해줘" "반응형 레이아웃 깨지는 부분 수정해줘" "오류가 발생하는 부분 찾아서 수정해줘" 폰트설정:  "Tailwind 설정에 Pretendard GOV 폰트를 기본 폰트로 설정해줘. Google Fonts 대신 직접 `@font-face` 방식으로 불러와서 `styles/globals.css`에 적용하고, Tailwind config에서 기본 sans 폰트로 연결해줘."