요즘 개발자들 사이에서 MCP(Model Context Protocol)가 매우 뜨거운 주제로 떠오르고 있는 것 같습니다. 처음 MCP에 대한 정보를 접했을 때, 개발 툴 생태계가 다시 한번 뒤흔들릴 수 있겠다는 기대감이 생겼습니다. 명령어 한 줄로 AI가 실제로 디자인을 생성하고, 코드를 짜고, API를 호출하는 시대가 열리고 있다는 것이 여러 자료를 통해 실감되었기 때문입니다.
하지만 막상 관련 문서나 유튜브 영상을 찾아보니 아직까지 정보가 많지 않아 예상치 못한 에러에 익히는데 시간이 좀 걸린 것 같습니다. 그래도 이런 변화의 흐름 속에서 뒤처질 수는 없기에, 직접 MCP를 경험해 보기로 결심했습니다. 마침 개인 기술 블로그 프로젝트를 진행 중이었고, Cursor IDE와 Figma MCP 서버를 연동해 자연어로 디자인을 생성해보는 실험을 하며 MCP를 경험해보았습니다.
MCP 개념과 작동 원리
단순한 LLM 기반의 질문응답을 넘어, AI가 진정한 '에이전트'로 진화하고 있습니다. 이제 AI는 외부 도구, API, 파일, SaaS 시스템, 데이터베이스와 연결되어 실시간으로 정보를 받아들이고 이를 활용해 작업을 수행할 수 있습니다. 이 흐름의 중심에는 MCP(Model Context Protocol)가 있습니다.
기존에는 LLM이 외부 정보를 다루려면 매번 별도의 API 연동 작업이 필요했고, 통신 방식도 제각각이라 반복적인 개발이 불가피했습니다. 하지만 MCP는 이러한 통신을 USB-C처럼 표준화하여, 하나의 인터페이스로 다양한 외부 도구를 연결할 수 있도록 만들어줍니다.
MCP는 크게 다음 네 가지 구성 요소로 이루어집니다:
- 클라이언트(Client): Claude, Cursor IDE, Windf 등 AI를 내장한 프로그램
- MCP 서버(Server): 외부 도구를 AI가 이해할 수 있는 포맷으로 변환해주는 서버
- 로컬 데이터 소스(Local Data Source): Git, 파일 시스템 등 내부 리소스
- 원격 서비스(Remote Services): SaaS API, 웹 기반 툴 등
클라이언트는 "create_component_instance", "get_issues" 등의 MCP 툴을 호출해 외부 시스템의 기능을 사용할 수 있습니다. 중요한 점은 AI가 해당 도구의 API를 직접 알 필요 없이, MCP 서버를 통해 고수준의 기능을 안전하고 일관되게 사용할 수 있다는 것입니다.
Cursor와 외부 MCP 서버 연동
1. Cursor IDE ↔ Figma
cursor-talk-to-figma-mcp는 Cursor IDE에서 자연어 명령으로 Figma 디자인을 생성·수정할 수 있도록 해주는 오픈소스 프로젝트입니다. WebSocket을 통해 Cursor와 Figma 플러그인을 연결하고, MCP 서버를 통해 실제 디자인 요소를 생성하거나 수정할 수 있습니다.
2.Cursor IDE ↔ GitHub
GitHub MCP 서버를 사용하면 Cursor IDE에서 자연어 명령을 통해 GitHub 리포지토리의 이슈 생성, PR 작성, 커밋 요약, 코드 리뷰 요청 등을 자동화할 수 있습니다. 예를 들어 "이 코드 수정 내용을 기반으로 PR을 생성해줘"라고 지시하면, MCP 툴이 해당 리포지토리 상태를 읽고 적절한 타이틀과 본문을 포함한 PR을 자동으로 생성해줍니다.
MCP 실전 적용기 : 블로그 프로젝트에 써먹기
Figma에서 자연어로 블로그 UI를 디자인하고, 이를 실제 프로젝트에 반영하는 실험을 진행했습니다.
1. Bun 설치 및 MCP 서버 실행
curl -fsSL https://bun.sh/install | bash
git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git
cd cursor-talk-to-figma-mcp
bun setup
bun socket
⚠️ 해당 명령어는 터미널을 점유하므로, 다른 터미널 창을 새로 열어 다음 명령어를 실행합니다.
bunx cursor-talk-to-figma-mcp2. Cursor IDE 설정
~/.cursor/mcp.json 파일에 다음 내용을 추가합니다.
{
"mcpServers": {
"TalkToFigma": {
"command": "bunx",
"args": ["cursor-talk-to-figma-mcp"]
}
}
}
💡 Tip: readme.md 에서는 MCP 서버를 bunx 명령어로 직접 실행하라고 안내되어 있지만, Cursor의 설정 파일(mcp.json)을 통해 mcp 서버를 등록하면 매번 터미널을 통해 실행하지 않아도 되어 훨씬 간편합니다.
3. Figma 플러그인 설치
- Figma 상단 메뉴에서 Plugins > Development > Import plugin from manifest... 클릭합니다.
- cursor-talk-to-figma-mcp/src/cursor_mcp_plugin/manifest.json 경로에 있는 파일을 선택합니다.
- 이제 Figma의 Plugins > Development 항목에서 해당 플러그인을 실행할 수 있게 됩니다.
mcp서버가 잘 연결되었다면 이미지와 같이 channel : @ 이런식으로 나타납니다.
4. Cursor에서 명령 입력
Cursor에서 자연어 명령을 입력해 MCP 서버에 작업을 요청합니다. MCP 서버가 create_frame, create_text, set_fill_color 등의 툴을 호출하여 Figma 디자인을 자동으로 생성합니다. 더 정확한 작동을 원한다면 join_channel: @your_channel 형식의 명령어를 사전에 입력해 Figma와 Cursor 간 연결을 확실히 해주면 좋습니다.
작업이 잘 연결되었다면, Cursor 채팅창에 MCP 툴 이름이 등장하며, "Run Tool" 버튼이 활성화됩니다. 이때 클릭하여 각 작업에 대한 실행 권한을 승인해야 합니다. 이 과정이 반복되어서 좀 귀찮지만, 디자인 자동화 결과는 만족스러울만큼 좋습니다.
5. 디자인 검토 및 변경
Figma에서 생성된 디자인을 확인하고, 프로젝트에 반영합니다. 실제로 아래 이미지 2페이지를 만드는데 한시간도 채 걸리지 않았으며, 색상, 레이아웃,구성 모두 만족스러웠습니다.
결론
MCP를 직접 사용해보니, 가능성은 상상 이상이었던 것 같습니다.. 반복적인 작업을 AI가 대신하며, 디자인 생성부터 업무 관리까지 몇번의 명령이면 충분했습니다.
특히 프론트엔드 개발자로서, MCP는 단순한 자동화 도구를 넘어 생산성과 창의성을 동시에 높이는 전화점이 될 수 있다고 느꼈습니다. 디자인 시스템을 그대로 코드로 옮기는 단계를 자동화하면서도, 사용자 경험의 본질적인 부분에 더 많은 집중을 할 수 있었습니다.
MCP는 단지 한두개의 도구의 대체재가 아닌, 앞으로 우리가 일하는 방식 자체를 근본적으로 바꾸는 플랫폼이 되지 않을까 생각됩니다. 업무 자동화에서 시작해, AI와의 협업을 통해 더 전략적인 사고와 창의적인 결과물을 만드는 시대가 가까워진 것 같다는 생각..?
그리고 이 변화는 단지 편리함의 차원이 아니라, 우리가 어떤 역량을 더 중요하게 여겨야 할지에 대한 질문으로 이어지는 것 같습니다. 지금까지는 알고리즘, 수학적인 사고력, 로우레벨 코딩 실력이 개발자의 핵심 역량이었다면, 이제는 판단력, 설계력 같은 눈썰미 같은 감각적이고 고차원적인 역량이 더 중요해지는 시대가 아닐까 생각이 듭니다. 이 블로그 디자인도 실제로 내가 내린 여러 오더와 컨펌으로만 디자인이 완성됐고, AI는 반복적인 수고를 했을 뿐입니다.
AI의 발전에 따라 명령을 받는 사람은 점점 대체될 것이며, 명령을 내리는 사람, 즉 AI를 활용하고 전체 구조를 설계하며 방향을 제시할 수 있는 사람이 중심에 서는 구조가 되어가는 것 같습니다.
'프론트엔드 기록' 카테고리의 다른 글
| Tailwind CSS 동적 클래스 스타일 미적용 현상 해결기 (0) | 2025.04.22 |
|---|---|
| 달라진 TailwindCSS v4 커스텀하기 (0) | 2025.04.11 |
