[바이브코딩] Cursor AI + MCP로 업무 컨텍스트 주입하기 - Figma / GitHub 연동
목차
1. MCP란
2. Figma MCP 세팅
3. GitHub MCP 세팅
4. 실제 활용 사례
5. 정리
1. MCP란
MCP(Model Context Protocol)는 AI가 외부 도구에 직접 접근할 수 있게 연결해주는 규격임. Anthropic이 2024년에 공개한 오픈소스 표준으로, Cursor AI 같은 AI 에디터에서 GitHub, Figma, Notion, Slack 등 외부 서비스를 연결해 사용할 수 있음.
일반 AI 활용과의 차이는 하기와 같음.
| 구분 | 일반 AI | MCP 활용 |
| 데이터 소스 | 학습된 지식만 활용 | 실제 내 프로젝트 데이터 직접 읽음 |
| 명령 방식 | "웹 포트폴리오 버튼 컴포넌트 동그랗게 만들어주고 전체적인 틀은 기본 양식으로 진행해줘 " | "내 Figma 디자인 읽어서 웹 포트폴리오 만들어줘" |
| 결과 품질 | 일반적인 답변 | 프로젝트 맥락이 반영된 답변 |
| 추가 작업 | 스펙/배경 직접 설명 필요 | MCP가 자동으로 컨텍스트 수집 |
※ 컨텍스트(Context) : AI가 답변을 생성할 때 참고하는 배경 정보. MCP를 사용하면 내 실제 프로젝트 데이터가 컨텍스트로 주입됨.
실무에서 MCP를 활용하게 되면 더 복잡한 방식으로 진행되겠지만, 간단하게 예시를 들어보면 하기와 같음.
| 연결 도구 | 주입되는 컨텍스트 | 실무 활용 예 |
| Figma MCP | 디자인 토큰, 레이아웃 구조 | "Figma에서 미리 만든 디자인 읽어서 HTML 짜줘." |
| GitHub MCP | 커밋 히스토리, 변경 파일 | "레포에서 최근 실행한 10개의 커밋 분석해서 개발 내용 정리해줘." |
| Jira MCP | 이슈, 티켓 내용 | "Jira 청구 카테고리의 9월 티켓 기반으로 코드 짜줘." |
| Notion MCP | 문서, API 스펙 | "API 스펙 읽어서 테스트 코드 짜줘." |
| Slack MCP | 팀 대화 내용 | "어제 논의한 내용을 기반으로 PR 설명 짜줘." |
2. Figma MCP 세팅
2-1. 전체 세팅 순서
| 순서 | 작업 | 비고 |
| 1 | Git Bash 설치 | Windows 기준 |
| 2 | bun 설치 + PATH 영구 등록 | 트러블슈팅 참고 |
| 3 | cursor-talk-to-figma-mcp 설치 및 WebSocket 서버 실행 | 3055포트 |
| 4 | Figma 파일 복사 (Duplicate to your drafts) | Variables 포함된 파일 필요 |
| 5 | Token Studio 플러그인으로 tokens.json 추출 | 트러블슈팅 참고 |
| 6 | Cursor Rules 등록 | 트러블슈팅 참고 |
| 7 | Cursor MCP 연결 확인(40 tools) | Settings -> Tools & MCPs |
※ cursor-talk-to-figma-mcp --> Cursor 쪽에 까는 npm 패키지. Cursor와 Figma가 대화할 수 있도록 브릿지 역할을 함.
※ Talk to Figma (플러그인) --> Figma에 까는 플러그인. WebSocket 서버랑 실시간 연결 -- bunx cursor-talk-to-figma-socket으로 WebSocket 서버 실행
※ Tokens Studio for Figma (플러그인) --> 마찬가지로 Figma에 까는 플러그인. tokens.json 추출하는 역할을 함.
2-2. bun 설치 + PATH 등록
cursor-talk-to-figma-mcp는 bun 런타임이 필요함. 설치 후 PATH 영구 등록까지 해야 터미널을 새로 열어도 정상 작동함.
echo 'export PATH="$HOME/.bun/bin:$PATH"' >> ~/.bash_profile
source ~/.bash_profile
bun install
2-3. WebSocket 서버 실행
Figma MCP는 Cursor와 Figma 플러그인 사이에 WebSocket 중간 서버가 필요함. 아래 명령어로 실행하면 3055포트에 서버가 뜸. 작업하는 동안 터미널을 닫으면 안 됨.
bunx cursor-talk-to-figma-socket
# → WebSocket server running on port 3055
동작 구조: Cursor AI ↔ WebSocket 서버(3055) ↔ Figma 플러그인 → tokens.json → 코드 생성
2-4. Figma 파일 복사 + tokens.json 추출
Figma MCP가 디자인 토큰을 읽으려면 Variables가 등록된 Figma 파일이 필요함. 파일 복사 후 Tokens Studio 플러그인으로 추출함.
- Figma에서 파일명 옆 ∨ → Duplicate to your drafts
- Tokens Studio for Figma 플러그인 설치 및 실행
- All token sets 체크 → Load and Export → Single file 탭 → Export
- 추출된 tokens.json을 프로젝트 루트에 배치
my-react-app/
├─ src/
├─ public/
├─ index.html
└─ tokens.json ← 루트에 배치
※ Variables: Figma 안에서 색상, 폰트 등을 변수로 관리하는 기능. 이게 있어야 Tokens Studio로 값을 제대로 추출할 수 있음.
※ tokens.json: 색상, 폰트 크기, 간격 같은 디자인 값을 JSON 형식으로 정리한 파일. Figma 디자인과 코드 사이의 번역 사전 역할을 함.
2-5. Cursor Rules 등록
Cursor Rules는 "이 프로젝트에서 AI가 코드를 짤 때 항상 따라야 하는 규칙"을 등록하는 곳임. 등록해두면 매번 지시하지 않아도 자동 적용됨.
등록 방법: Cursor Settings → Rules → + New → 규칙 내용 붙여넣기 → Save
본 프로젝트에서 등록한 규칙 핵심 내용:
| 1차 HTML/CSS | Figma 레이어명 그대로 class명 사용 / CSS 변수는 width 3개 + color + font-family만 허용 / 나머지 값은 직접 px 값으로 작성 / 모든 스타일 기준은 tokens.json |
| 2차 React+Tailwind | 1차 HTML 구조 유지하며 컴포넌트 분리 / Tailwind 표현 불가 값은 style 속성에 직접 작성 |
※ Cursor Rules: Cursor AI에게 프로젝트 전용 코딩 규칙을 미리 지시해두는 기능. 예전에는 .mdc 파일로 관리했으나 Cursor 업데이트 이후 Settings UI에서 직접 관리하는 방식으로 변경됨.
- 트러블슈팅
1) bun 설치 후 매번 PATH 초기화
echo 'export PATH="$HOME/.bun/bin:$PATH"' >> ~/.bash_profile
source ~/.bash_profile
※ bun : Node.js 대신 쓸 수 있는 빠른 JavaScript 런타임. 패키지 설치/실행 속도가 훨씬 빠르다.
※ PATH : 운영체제가 명령어를 어디서 찾을지 알려주는 경로 목록. 여기 등록이 안 되면 터미널에서 명령어를 못 찾는다.
2) tokens.json이 비어있음 {}
원인
Exports 시 All token sets 체크박스가 선택되지 않아 빈 파일이 생성됨
해결
Token Studio에서 All token sets 체크 확인 -> Single file 탭으로 재출
3) figma-token-rulse 검색해도 안 뜸
원인
Cursor가 업데이트 되면서 UI가 바뀌어서 예전에는 검색창에서 figma-token-rulse를 검색했어야 되는데 지금은 .mdc 파일 방식 대신 Setings UI에서 직접 관리함.
해결
Cursor Settings -> Rules -> + New 클릭 -> 규칙 내용 붙여넣기 -> Save
3. GitHub MCP 세팅
3-1. Personal Access Token 발급
GitHub MCP가 레포지토리에 접근하려면 PAT(Personal Access Token)가 필요함.
- GitHub 로그인 → Settings → Developer settings
- Personal access tokens → Tokens (classic)
- Generate new token (classic) 클릭
- 권한 체크: repo, read:org
- 발급된 토큰 즉시 복사 (페이지 벗어나면 다시 볼 수 없음)
※ PAT (Personal Access Token) : GitHub 계정 접근용 열쇠. 비밀번호 대신 쓰는 긴 문자열로, ghp_로 시작함.
3-2. mcp.json 설정 (Figma + GitHub 공존)
기존 Figma MCP 설정을 덮어쓰면 안 됨. 두 MCP를 mcp.json에 함께 등록해야 함.
{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["-y", "cursor-talk-to-figma-mcp"]
},
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_토큰여기"
}
}
}
}
+ 전체 흐름(Figma MCP/ GitHub MCP)
4. 실제 활용 사례
4-1. Figma -> HTML 초기 구조 생성
웹 포트폴리오 제작 시 tokens.json과 Cursor Rules가 등록된 상태에서 Figma URL을 Cursor에게 넘기면 AI가 디자인 토큰 기반으로 HTML/CSS를 생성함. 실제 사용한 명령어 예시는 하기와 같음.
tokens.json 읽어서 Hero 섹션 HTML/CSS 만들어줘. Figma 레이어명 그대로 class명 쓰고, CSS 변수는 width/color/font-family만 써줘.
---> Cursor AI가 token.json의 색상, 폰트, 간격 값을 읽어 Cursor Rules에 맞는 코드를 생성함.
Figma MCP의 경우 인프런 의 J.영이라는 분의 인강을 들으며 진행하였는데, 선수로 습득해야할 Figma 지식이 꽤나 있고 커서 ai에서 최초에 설정해야 할 환경 세팅도 생각보다 많은 작업이 필요했음. 그래서 이 환경 세팅을 상대적으로 빈약하게 세팅 한 탓인지 코드 실행 결과 실제로 Figma에 설계한 디자인과 다른 부분이 많아서 수정사항이 굉장히 많았음... (Figma 디자인도 직접 하지 않았고, 인프런 강의에 배포된 디자인을 기준으로 진행됨) Figma MCP는 백엔드 취준생으로서 실무 활용도가 아주 크다고 느껴지지는 않았음... 첫 틀은 커서 ai가 짜주고 그 이후에는 다 수동으로 수정 진행함. 다만 디자인 리소스를 코드로 변환하는 흐름과 AI 기반 자동화 방식을 경험해볼 수 있었다는 점에서는 의미가 있었다고 생각함
4-2. GitHub 커밋 히스토리 분석
최근에 개발 진행한 프로젝트가 들어있는 깃헙 레포를 커서 ai에게 제공하고 하기의 명령어를 실행함. (최근 커밋 목록을 알려주고 분석해달라는 요지)
실제 사용한 명령어 예시:
lhk9311/Final_hotel 레포의 최근 커밋 목록 보여주고 백엔드 관점에서 어떤 개발을 했는지 요약해줘
- 커서 AI 답변 : 커밋 메시지 패턴(feat/fix/build/merge)을 분류해서 정리를 하기와 같이 해줌.
여기에 더해서 특정 커밋의 변경 파일을 조회해서 기술적으로 정리해달라고 요청함.
실제 사용한 명령어 예시 :
swagger 추가, sonarqube fix 커밋의 변경 파일 목록 가져와서 어떤 Controller/Service/Util을 손댔는지 기술적으로 정리해줘
- 커서 AI 답변
1) feat: swagger 추가 커밋 (SHA: 56cd307…)
커밋: https://github.com/lhk9311/Final_hotel/commit/56cd3075d9d30569a0eb8b5aa69bd1ebb8b26a5c
변경 파일 목록
Build/Dependency
Final_hotel/build.gradle
Security/Config
Final_hotel/src/main/java/com/spring/app/jh/security/config/SecurityConfig.java
Runtime Config
Final_hotel/src/main/resources/application.yml
무엇을 손댔는지 (백엔드 기술적으로)
Swagger(OpenAPI) 의존성 추가
build.gradle에 org.springdoc:springdoc-openapi-starter-webmvc-ui:2.8.8 추가
→ Spring MVC 기반 프로젝트에 Swagger UI + OpenAPI 스펙 생성 기능을 붙인 작업.
Spring Security에서 Swagger 엔드포인트 예외 처리
SecurityConfig.java에서 정적 리소스 allow-list에
/swagger-ui/**, /swagger-ui.html, /v3/api-docs/** 를 추가
→ 인증/인가 때문에 Swagger 화면/스펙 접근이 막히지 않도록 보안 경로 화이트리스트를 확장.
springdoc 설정 추가
application.yml에 springdoc.swagger-ui.path, default-produces-media-type 설정 추가
→ Swagger UI 경로 고정 및 기본 응답 미디어타입 지정으로 문서 노출/테스트 편의성 개선.
결론: 이 커밋은 “컨트롤러 기능 변경”이라기보다, API 문서화/테스트 기반(관측성)과 보안 설정 정합성을 맞춘 백엔드 인프라성 작업이에요.
2) fix: sonarqube ... 커밋 (SHA: 0a2a468…)
커밋: https://github.com/lhk9311/Final_hotel/commit/0a2a468136a6a761a6a714b15ca4e2455986592a
변경 파일 목록 (Controller/Service/Util/Mapper/Config)
Util
Final_hotel/src/main/java/com/spring/app/common/FileManager.java
Controller
Final_hotel/src/main/java/com/spring/app/hk/payment/controller/PaymentController.java
Final_hotel/src/main/java/com/spring/app/jh/ops/admin/controller/AdminHqShuttleOpsController.java
Final_hotel/src/main/java/com/spring/app/jh/ops/user/controller/ShuttleOpsController.java
Final_hotel/src/main/java/com/spring/app/js/promotion/controller/PromotionController.java
Service
Final_hotel/src/main/java/com/spring/app/hk/reservation/service/ReservationService_imple.java
Final_hotel/src/main/java/com/spring/app/jh/ops/admin/service/AdminHqShuttleOpsService_imple.java
DB/Mapper (MyBatis)
Final_hotel/src/main/resources/mybatis/mapper/hk_room_reservation.xml
Runtime Config
Final_hotel/src/main/resources/application.yml
무엇을 손댔는지 (기술적 포인트별)
(Util) 파일 삭제 실패 케이스를 예외로 승격
FileManager.java: file.delete() 결과를 boolean으로 받고 실패 시 예외 throw
→ “조용히 실패”를 없애고 실패를 감지 가능한 형태로 전환 (운영/디버깅 안정성).
(Controller) 결제 토큰 응답 NPE 방지
PaymentController.java: tokenResponse.getBody() null 가능성 체크 후 처리
→ 외부 API(PortOne/Iamport) 연동에서 Null-safety 강화(정적분석 지적 해결).
(Service + Mapper) 예약 코드 포맷/LPAD 자리수 정합
ReservationService_imple.java: 예약코드 String.format("%04d") → "%08d"
hk_room_reservation.xml: LPAD(...,4,'0') → LPAD(...,8,'0')
→ Java 레벨과 SQL 레벨에서 예약코드 규칙을 일치시켜 데이터 정합성/표준화 개선.
(Controller) equals 사용으로 래퍼/원시 타입 비교 오류 제거
AdminHqShuttleOpsController.java: h.getHotelId() == hotelId → hotelId.equals(h.getHotelId())
→ Integer 비교에서 ==로 인한 동등성/박싱 이슈 제거(정적분석 포인트).
(Service) 분기 로직(항상 false) 제거 및 유효성 검증 로직 정리
AdminHqShuttleOpsService_imple.java: “항상 false로 평가되는 조건” 블록을 정리하고, TO_HOTEL / FROM_HOTEL 각각에 대해 시작/도착 장소 제약을 명확히 검증
→ 도메인 규칙을 명시적 validation으로 재구성(버그 예방 + 가독성).
(Controller) 불필요한 boxing 제거
ShuttleOpsController.java: Integer.valueOf(...) 대신 직접 반환
→ 자바 오토박싱을 활용해 불필요한 객체 생성/정적분석 지적 제거.
(Controller) auth null 가능성 방어 + 업로드 파일명 null/empty 방어
PromotionController.java:
auth가 null일 수 있어 권한 체크 블록을 null-safe하게 변경
attach.getOriginalFilename() null/empty일 때 분기 추가
→ SecurityContext/Multipart 처리에서 NPE 방지, 예외 흐름 안정화.
(Config) 로컬/배포 프로파일 및 DB 접속 설정 토글
application.yml: active: local/prod, jdbcUrl 로컬/컨테이너용 주석 전환
→ 환경별 실행을 위한 설정 스위칭 정리(다만 커밋 목적이 “sonarqube fix”라면 함께 묶인 설정 변경이라 운영 정책상 주의 포인트).5. 정리
정리하면, MCP는 AI에게 업무 컨텍스트를 주입하는 것임. 실제 프로젝트 데이터(디자인 토큰, 커밋 히스토리 등)를 AI가 읽게 함으로써 맥락 있는 결과를 뽑아낼 수 있음. 다만 이번 경험을 통해 느낀 것은, MCP는 목적과 방향이 명확한 경우에만 의미가 있을 것 같다고 판단이 됨. 이번의 경우 Figma 디자인을 직접 디자인하지 않았고, MCP 환경세팅을 미흡(이 부분은 Variables 등의 Figma 선수지식이 필요했기 때문임)하게 해서 결과물을 수동으로 수정해야 해서 생각보다는 비효율적인 과정을 겪었음. 더해서 GitHub MCP는 커밋 분석 수준에 그치고, 실제 개발 작업과는 연결되지 않았음.
다만 굳이 의미를 찾자면 코딩 중 컨텍스트 스위칭 없다는 점이 장점이라고 볼 수 있을 것 같음. 일반 AI를 쓰면 AI와 툴을 왔다갔다 해야 하는데 Cursor 안에서 MCP로 진행하면 한 창에서 진행이 되기 때문에 이 부분은 편리한 점이라고 생각됨.
의미가 있게 쓰려면 하기와 같은 보완이 필요하다고 생각함.
1) Fima Variables 직접 설계하기 ---> 남이 만든 디자인 파일을 쓰면 토큰 구조를 이해하기 어렵고, 수정 범위도 파악이 어려움. 직접 컬러/ 폰트/ 간격을 Variables로 정의하고 token.json으로 추출하는 흐름을 처음부터 적용해야지 MCP를 제대로 활용할 수 있을것임.
2) 개발 작업과 GitHub MCP를 실시간으로 연결하기 ---> 이번에는 커밋 분석 회고용으로만 사용을 했는데, 실제로 "이슈 생성 -> 코드 작성 -> 커밋 -> 분석" 까지 한 사이클을 MCP로 연결해보면 컨텍스트 주입으로 결과물을 내볼 수 있을 것임. 이번의 경우는 사실 일반 AI보다 크게 성능적으로 뛰어난 결과를 내지는 못함.. 협업시 파일이 너무 많은데 의존 관계 추적이 필요한 경우(팀 프로젝트에서 타인의 변경사항을 확인해야 하는 경우)는 의미가 있을 것 같은데 이것도 살짝 막연함.
3) 목적을 먼저 ---> MCP는 특정 목적이 있을 때에만 효과가 있는 것 같음. 이를 테면 "어떤 어떤 부분을 자동화 하고 싶다"는 등의 명확한 목적. 세팅 자체가 목적이 되면 결국 경험 수준에 머물게 됨.
'5. 기타' 카테고리의 다른 글
| [쌍용교육센터] AWS & Docker를 활용한 Java Full-Stack 개발자 양성과정 수강 후기 — 2편 (0) | 2026.05.04 |
|---|---|
| [쌍용교육센터] AWS & Docker를 활용한 Java Full-Stack 개발자 양성과정 수강 후기 — 1편 (0) | 2026.04.29 |