AI디자이너를 위한 MCP 이해하기

Jun 10. 2025

MCP(Model Context Protocol)의 등장은 거대언어모델과 같은 AI 서비스들을 다른 디자인 도구들과 통합적으로 연결함으로 디자인 방식에 획기적인 변화를 가져오고 있다. 아직 MCP를 활용할 수 있는 서비스와 범위는 제한적이지만 앞으로 MCP는 거의 대부분의 서비스와 통합된 연결 및 디자인 방식의 혁신을 가져올 것이다. 보다 멋진 AI 디자인을 위해 MCP에 대해서 알아보자.

MCP에 대해서 알아보자

Anthropic사가 처음 제안한 MCP는 AI 모델이 기존의 도구와 데이터에 안전하게 연결되도록 해주는 개방형 표준으로, 여러 개별 서비스마다 각각 연동 코드를 짜지 않아도 되게 하는 일종의 범용 어댑터 역할을 한다. 쉽게 말해 MCP는 AI 시대의 “USB-C 포트”와 같다. 다양한 앱이나 데이터 소스를 AI에 연결하려면 원래 각각 다른 API와 키, 규칙을 다뤄야 했지만, MCP를 쓰면 한 가지 방식으로 여러 시스템을 연결할 수 있다. 특히 디자인 분야에서 MCP의 등장은 디자인 작업과 AI의 만남을 가속하고 있다. MCP를 사용하면 Figma 같은 디자인 툴과 AI 언어모델이 직접 소통할 수 있게 되어, 그동안 수동으로 해오던 디자인-코드 변환 작업을 자동화하거나 보조할 수 있다.

출처: What is Model Context Protocol (MCP)? by Norah Sakal

예를 들어 AI가 Figma 디자인 파일에 직접 접근하여 색상, 레이아웃 등의 정보를 읽고, 이를 토대로 코드로 변환해주는 시나리오를 생각해보자. 과거에는 디자인 시안을 이미지로 첨부해 추론하거나 수동으로 치수를 입력해야 했다. 이제는 AI가 MCP를 통해 디자인 파일의 실제 데이터에 접근함으로써, 훨씬 정확하고 신속하게 UI 코드를 한 번에 완성할 수 있게 되었다. 뿐만 아니라 AI가 디자인 시스템의 라이브러리나 컴포넌트 정보를 바로 참고하여 디자인 일관성을 유지한 제안이나 변형을 만들어낼 수도 있다. 실제로 MCP는 디자인 작업 자동화, 협업 효율 향상에 획기적인 변화를 주고 있는데, 디자인 스타일 자동 변경, 다크모드 테마 자동 생성, 컴포넌트 변형 제안 같은 일들도 가능해지고 있다. 요컨대 MCP의 등장은 디자인-개발 워크플로우에서 AI 활용의 새 장을 열었고, 사람은 보다 창의적인 작업에 집중하면서 반복적이고 번거로운 부분은 AI에게 맡기는 협업 모델을 실현해나가고 있다.

MCP의 핵심 구성 요소

MCP를 활용하기에 앞서 간단한 기술적이 이해를 해두면 좋다. MCP를 구성하는 주요 구조는 모델(Model), 컨텍스트(Context), 프로토콜(Protocol) 세 부분으로 이해할 수 있다. 여기서 모델은 곧 AI 언어모델 혹은 AI 비서를 뜻한다. 사용자의 명령을 이해하고 추론하여 필요한 작업을 수행하는 지능의 핵심이 바로 이 모델이다. 예를 들어 Cursor와 같은 AI 코딩 도구에서 동작하는 GPT계열 모델이나 Anthropic Claude 등이 모델에 해당한다.

이 모델이 혼자 동떨어져 있다면 주어진 프롬프트만 처리할 뿐 외부 세계의 정보를 모르기 때문에, 실제 업무에 활용하려면 현재 작업 중인 문맥, 데이터를 추가로 알려줄 방법이 필요하다. 여기서 등장하는 개념이 컨텍스트(Context)이다. 컨텍스트란 말 그대로 모델이 참고할 외부 정보나 상태를 의미한다. 디자인 작업의 맥락에서 보면 현재 열려있는 Figma 파일의 구성요소, 스타일 가이드, 사용자 입력 데이터 등이 모두 컨텍스트가 될 수 있다. MCP는 이 컨텍스트를 모델에게 공급해주기 위한 표준화된 통로를 만든 것이다. 이를 위해 마지막 구성 요소인 프로토콜(Protocol)이 정의된다. 프로토콜은 모델과 외부 시스템이 소통하는 규칙과 형식을 뜻한다. 쉽게 말해 “AI와 외부툴 간 약속된 대화 방식”이다.

AD_4nXcHb3Q5pld87pQnukgS9ih0V93rzF8Bj2zECOV1LVuBoNCg5KbVrzhzCn-TqJ2ex75strzAY-XBWZbdZjqTf7QcYVtVDOsgc2ciej2Xfk1_WuU8rb-8fdW6miOlq-ba9TPG-MQaKw?key=PkdRZGKac-1Ba5BgBwzoBA

출처: https://diamantai.substack.com/p/model-context-protocol-mcp-explained

MCP에서는 위 세 요소가 호스트(Host)-클라이언트(Client)-서버(Server) 구조로 연결된다. Claude와 같이 AI 모델이 돌아가는 애플리케이션을 호스트라고 부른다. 호스트 안에는 MCP와 통신하는 클라이언트가 내장되어 있다. 이 MCP 클라이언트는 마치 통역사처럼 AI 모델의 요청을 표준 형식으로 변환하고, 반대로 외부 시스템의 응답을 모델이 이해할 수 있게 다시 변환하는 역할을 맡는다. 한편 Figma와 같은 외부 애플리케이션 쪽에는 MCP 서버가 존재한다. 이 서버는 Figma의 기능이나 데이터를 제한된 형태로 공개하며, 모델의 요청에 따라 특정 정보 조회나 동작 수행 결과를 내보낸다. MCP 서버는 제공할 기능과 데이터 범위를 엄격히 정의함으로써, AI가 필요한 컨텍스트만 얻도록 돕는다. 이렇게 모델–프로토콜–서버가 조화를 이루어, AI 비서가 외부 데이터를 읽고 쓰는 일련의 흐름이 가능해지는 것이다.

각 구성 요소가 디자인 업무 자동화와 협업 효율화에서 담당하는 바는 명확하다. 모델(AI)은 사람의 자연어 요청을 이해하고 맥락에 맞게 창의적 산출물(코드, 디자인 제안 등)을 만들어내는 두뇌다. 컨텍스트는 모델의 눈과 귀에 해당하여, 현재 작업에 필요한 정보를 제공함으로써 AI가 실제 상황을 반영한 결과를 내놓을 수 있게 한다. 예컨대 모델이 “로그인 화면을 구현해줘”라는 요청을 받았을 때, Figma 디자인 컨텍스트를 함께 받아야만 우리 팀이 만든 구체적인 디자인에 맞춰 코드를 작성할 수 있을 것이다. 마지막으로 프로토콜은 이러한 과정이 표준화되고 안전하게 이뤄지도록 한다. MCP 프로토콜로 정의된 일정한 규칙에 따라 통신하면, AI와 툴 사이에 오해 없이 자료가 오간다. 또한 프로토콜 덕분에 한번 MCP를 지원하도록 만들면 새로운 툴도 동일한 방식으로 쉽게 연동할 수 있어 확장성과 재사용성이 높아진다. 요약하면 모델은 지능과 자동화의 주체, 컨텍스트는 현실 정보의 공급자, 프로토콜은 이 둘을 연결하는 파이프 역할을 하며, 이 체계가 제대로 갖춰졌기에 디자인 업무에서 AI가 유용한 조력을 할 수 있게 된다.

MCP의 작동 방식

MCP가 실제로 어떻게 동작하는지, 언어모델-피그마(Figma)-Cursor AI 툴이 연결되는 예시로 단계별로 살펴보자. 프로덕트 디자이너와 프론트엔드 개발자가 Cursor AI라는 AI 코딩 도구와 Figma MCP 통합 서버를 세팅했다고 가정해보겠다. 이 환경에서 AI 비서에게 Figma 디자인을 코드로 구현하도록 요청하는 흐름은 다음과 같다.

1. 디자인 파일 연결:

우선 사용자(디자이너나 개발자)가 Cursor AI의 대화 창에서 특정 Figma 디자인 파일을 선택하거나 링크를 붙여넣는다. 이를 통해 AI 모델에게 “어떤 디자인을 참고해야 하는지” 컨텍스트를 지정해준다.

2. 자연어로 지시:

사용자는 Cursor AI에게 자연어로 명령을 내린다. 예를 들어 “이 Figma에 있는 로그인 페이지 디자인을 React 코드로 만들어줘”라고 말한다.

3. 모델의 요청 처리:

Cursor 내부의 AI 언어모델은 사용자의 명령을 이해하고, 이를 수행하려면 Figma 디자인의 세부 정보(레이아웃 구조, 색상, 폰트 등)가 필요하다고 판단한다. 그러면 모델은 자신의 MCP 클라이언트를 통해 Figma MCP 서버에게 필요한 데이터를 달라고 요청(tool 호출)한다. 이때 요청 형식은 MCP 프로토콜에 맞춘 표준화된 메시지 형태다. 예컨대 “파일 ID X의 프레임 Y의 모든 레이어 정보 보내줘”와 같은 식으로 요청한다.

4. Figma 측 데이터 전달:

Figma MCP 서버는 요청을 받아 Figma API를 호출함으로써 실제 디자인 데이터를 얻어온다. 그리고 해당 AI 모델에 꼭 필요한 핵심 정보만 추려서 응답 메시지를 생성한다. (예: 프레임 Y의 계층 구조, 각 레이어의 타입과 스타일 속성들을 JSON 형태로 정리). 이 응답이 Cursor AI 쪽으로 전달된다.

5. AI의 응답 생성:

이제 언어모델은 받은 디자인 컨텍스트 데이터를 바탕으로 사용자 명령에 대한 결과물을 만들어낸다. 로그인 페이지 UI에 해당하는 React 코드를 작성하기 시작하는데, 레이아웃은 Figma에서 받은 좌표와 계층 구조를 참고하고, 색상이나 폰트도 디자인 시스템에 정의된 값을 그대로 적용한다. 덕분에 AI가 생성한 코드가 원본 디자인과 높은 정확도로 일치하게 된다.

6. 결과 제공 및 피드백:

Cursor AI는 완성된 코드를 사용자에게 출력한다. 사용자는 즉각 이 코드를 실행하거나 확인해볼 수 있고, 필요한 경우 “폰트 크기를 조금 더 키워줘” 등 추가 지시를 이어간다. AI는 또다시 MCP를 통해 변경할 요소를 찾아 수정된 코드를 내놓거나, Figma 파일 자체를 업데이트하도록 서버에 명령할 수도 있다. 이처럼 사용자-모델-디자인툴 사이에 반복적인 대화가 이루어지면서, 디자인과 개발 작업이 자연스러운 피드백 루프로 연결된다.

위 과정에서 MCP는 말 그대로 중간 매개자로 일한다. 사용자 입장에서는 그냥 AI에게 말을 걸었을 뿐이지만, 무대 뒤에서는 AI 모델이 MCP 툴을 호출하여 Figma API로부터 데이터를 받아오고, 다시 그것을 활용해 답을 만드는 흐름이 자동으로 전개된다. 이는 단순히 정해진 데이터를 넣는 것이 아니라, 필요할 때 필요한 정보를 불러오고 행동까지 수행하는 양방향 소통이라는 점이 중요하다. 또한 MCP 서버는 Figma API로부터 얻은 방대한 응답을 바로 전달하지 않고, 레이아웃과 스타일의 핵심만 추려서 모델에게 제공하도록 설계되어 있다. 불필요한 컨텍스트를 줄여 모델에 주면 AI의 응답 정확도가 높아지고 성능도 향상된다. 이러한 최적화 덕분에 AI는 디자인 맥락을 정확히 파악해 한 번에 원하는 결과를 “원샷”으로 만들어내기 수월해진다. 기존에 화면 캡처 이미지를 억지로 분석하거나, 사용자가 일일이 수치를 불러다 주던 방식보다 훨씬 효율적이고 믿음직한 결과를 얻을 수 있다는 것이 실무자들의 평가다. 결국 MCP의 작동 방식은 디자인 툴과 AI 사이에 실시간 다리를 놓아줌으로써, 디자이너와 개발자가 자연어로 협업할 수 있게 해주는 기술이라 볼 수 있다.

MCP와 API의 차이점

마지막으로, 실무자들이 혼동하기 쉬운 API와 MCP의 차이를 짚어보자. 간단히 말하면 API는 애플리케이션 프로그래밍 인터페이스(Application Programming Interface)의 약자로, 기존에 우리가 어떤 서비스를 프로그래밍적으로 이용하기 위해 제공되는 기능 명세서이다. 예를 들어 Figma API는 개발자가 HTTP 요청으로 “이 파일의 프레임 목록을 달라”거나 “이 텍스트 레이어의 내용을 수정해달라”고 보낼 수 있는 정해진 규칙과 엔드포인트의 모음이다.

반면 MCP는 앞서 설명했듯 AI 모델을 위한 컨텍스트 통신 프로토콜이다. 즉 사람이 직접 요청을 보내는 게 아니라 AI 에이전트가 필요한 정보를 얻기 위해 MCP 클라이언트를 통해 요청을 보내고 응답을 받는 형태다. 둘 다 “외부 시스템과 상호작용한다”는 점에서는 목적이 비슷하지만, 대상과 방식에서 차이가 있다. API는 개별 서비스 전용으로 만들어진 반면 MCP는 AI 통합 관점에서 범용적으로 설계되었다는 점이 크다.

다시 말해, API가 각각의 문을 여는 각기 다른 열쇠라면 MCP는 다양한 문을 거느리는 하나의 통합 열쇠에 가깝다. MCP를 한 번 구현해두면 그 MCP 서버가 제공하는 여러 기능(툴)을 AI가 스스로 발견해 사용할 수 있기 때문에, 일일이 새로운 API를 학습시키거나 통합 코드를 짤 필요가 줄어든다. 또한 통신 방식에서도 차이가 있는데, 전통적인 API 호출은 주로 요청-응답의 단발성 상호작용인 반면 MCP는 AI와 서버가 계속 세션을 유지하며 실시간 대화를 주고받는 형태를 지원한다. 예를 들어 MCP에서는 AI가 여러 단계로 데이터를 나눠 요청하거나, 중간에 얻은 정보를 토대로 추가 행동을 이어갈 수 있다. 이는 WebSocket처럼 양방향 연결을 활용하기 때문에 가능한 일이다. 반면 일반 API 호출은 매번 독립적으로 인증하고 요청해야 하므로 상대적으로 즉각적인 인터랙션은 어렵다.

결국 API와 MCP는 경쟁 관계가 아니라 상호 보완적인 도구다. 디자이너와 개발자는 상황에 맞게 둘을 활용해 최적의 워크플로우를 구축할 수 있다. 예를 들어 디자인 팀에서는 MCP 기반의 AI 어시스턴트를 써서 반복 작업을 줄이고, 개발 팀에서는 API를 사용해 핵심 시스템과 연동하는 식의 협업이 가능하다. 중요한 것은 MCP의 개념을 이해함으로써, AI 시대의 디자인 협업에서 무엇을 기대할 수 있고 어떻게 준비해야 하는지를 깨닫는 일일 것이다. 현업 디자이너라면 이제 API 명세서뿐 아니라 MCP와 같은 신기술도 알아두어야 한다. 앞으로 더 많은 디자인 툴들이 MCP를 지원하게 된다면, 사람과 AI가 함께 디자인하고 코딩하는 업무 환경이 표준이 될지 모른다. 디자인 프로세스 혁신의 한 축으로 등장한 MCP를 통해, 우리도 자연어와 AI를 활용한 새로운 협업 방식에 한 발짝 다가서게 되었다.