MCP란 무엇인가?
MCP(Model Context Protocol)는 OpenAI에서 제안한 일종의 AI 모델과 외부 시스템 간의 인터페이스 표준이다. 기존에는 단순히 이미지나 구조 데이터를 AI에 전달하는 방식이었다면, MCP는 이보다 더 구조적이고 의미 있는 컨텍스트를 AI에 제공함으로써 정확하고 일관된 코드 생성을 가능하게 한다.
예를 들어, Figma 디자인을 MCP를 통해 전달하면 "단순히 이게 무엇처럼 보인다"가 아니라 "이 요소는 버튼이고, 오토 레이아웃이며, 반복되는 UI 컴포넌트다" 라는 식의 정제된 정보가 포함된다. 그 결과, Cursor와 같은 AI 코딩 툴은 더 정확하고 의미 있는 코드를 자동으로 생성할 수 있게 된다.
연동 과정 요약
MCP 서버 설정
Cursor에서 Figma MCP를 활용하기 위해서는 로컬에 MCP 서버를 구동해야 한다. 프로젝트 루트에 다음과 같은 .cursor/mcp.json 파일을 생성하여 MCP 서버를 정의한다:
{
"mcpServers": {
"figma-developer-mcp": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "본인의 Figma API 키"
}
}
}
}- figma-developer-mcp는 Figma 측에서 제공하는 공식 MCP 서버이다.
- FIGMA_API_KEY는 Figma 계정의 Personal Access Token을 통해 발급 가능하다.
- 보안을 위해 해당 키는 절대 git에 업로드되지 않도록 .gitignore에 등록해야 한다.
디자인 가져오기
서버가 정상적으로 설정된 이후, Cursor 내에서 Cmd+K → Figma: Import 명령을 입력한 뒤, Figma 파일 링크를 삽입하면 원하는 디자인 프레임을 선택할 수 있다. 선택된 프레임은 MCP 서버를 통해 해석되어, Cursor 상에서 자동으로 React + Tailwind 기반의 코드로 변환된다.
사용 후기 및 기술적 관찰
장점
- UI 반복 작업의 자동화
로그인 폼, 리스트 항목 등 반복적으로 사용되는 UI는 높은 정확도로 자동 생성되며, 코드 품질도 충분히 실용적이었다. - 계층 구조의 인식 능력
오토 레이아웃, 프레임, 컴포넌트 등의 구조를 정확하게 인식하여 코드에 반영해주는 점은 기대 이상이었다. - 직접 제작한 디자인도 문제 없이 인식 가능
전문 디자이너가 제작한 것이 아니더라도, 명확한 구조를 가진 디자인이라면 MCP를 통해 충분히 활용할 수 있다.
한계점
- 대형 프레임 처리의 제한
한 번에 너무 많은 요소를 불러올 경우 정확도가 떨어지거나 응답이 지연되는 경우가 있었다. 디자인은 기능 단위로 나누어 가져오는 것이 효율적이다. - 불필요한 속성 자동 추가
예: use client를 과도하게 삽입하거나, 필요 없는 wrapper div 생성 등은 정제 작업이 필요하다. - 코드 중복 문제
컴포넌트화되지 않은 스타일 중복이 종종 발생하여, 별도의 리팩토링이 필요하다.
MCP 활용 팁
1. cursor_rules.mdc 활용
Cursor는 프로젝트 내부의 규칙을 반영할 수 있는 .mdc 파일을 제공한다. 다음과 같이 작성해두면, 생성되는 코드가 프로젝트 스타일에 더욱 잘 맞는다:
- Function Component 사용
- Tailwind CSS 적용
- 공통 컴포넌트는 src/components 디렉토리에 저장
- React의 use client는 반드시 필요한 경우만 사용
2. 프레임 단위 구성
전체 페이지를 한 번에 처리하기보다는 UI 단위별로 쪼개서 불러오는 방식이 훨씬 안정적이고 코드 품질도 좋다. 예: Header, Sidebar, Form 등으로 분할.
3. 커스텀 컴포넌트 선제시
Cursor는 기존에 작성된 컴포넌트를 참조하여 유사한 구조를 제안할 수 있다. Button.tsx, Input.tsx 등의 기본 컴포넌트를 미리 정의해두면, 이후 생성되는 코드의 일관성을 높일 수 있다.
결론 및 총평
| 항목 | 평가 |
| 초기 도입 난이도 | 보통 (설정 필요) |
| 코드 정확도 | 높음 (특히 단위 UI 기준) |
| 확장성 | 중간 (복잡한 디자인은 제한 있음) |
| 생산성 향상 | 높음 (단순 UI에 대해 매우 빠름) |
개인 개발자 관점에서 볼 때, MCP는 아직 발전 중인 기술이지만, 작은 규모의 프로젝트나 반복 UI가 많은 작업에서 충분한 가치를 제공한다. 특히 Cursor와의 연계는 자동화 가능성을 실질적으로 체감할 수 있는 경험이었다.
향후 계획
- Emotion, SCSS 등 Tailwind 외 프레임워크로 확장 가능성 실험
- 디자인 시스템과 연계한 자동화 시나리오 구성
- 협업 환경에서의 MCP 워크플로우 검토
마무리
MCP는 단순한 디자인 → 코드 자동화 수준을 넘어, "디자인의 의미"를 AI가 이해할 수 있게 만들어주는 중요한 기술로 여겨진다. 아직 학습 리소스나 사례가 많지는 않지만, 직접 실험해보는 과정에서 많은 인사이트를 얻을 수 있었다.
Cursor + MCP 조합은 특히 개인 개발자에게 시간과 품질 모두를 절약할 수 있는 도구가 될 수 있다. 실무에 적용하지 않더라도, 학습 목적으로 충분히 시도해볼 만한 가치가 있다.
