AI를 활용하는 디자이너 되기 (1) : Talk to Figma MCP

AI를 활용한 플러그인

점점 다양한 플러그인이 쏟아지는 가운데, "AI가 만든 디자인"을 조금씩 체감할 수 있는 기술들이 늘어나고 있는 것 같습니다.

저도 이런 부분에 대해 트렌드를 빠르게 파악하기 위해 꾸준히 공부하려고 노력하는데요. 최근에는 피그마 커뮤니티를 보다가, MCP를 활용한 Figma 플러그인을 알게 되었습니다. 아직 AI에 대한 지식이 부족해, 플러그인을 사용하기 전 알아야 할 정보들에 대해 우선 정리해보았습니다.

---

플러그인을 써보기 전에... MCP가 뭘까?

1. MCP(Model Context Protocol)란 

MCP란,앤트로픽이 발표한 오픈 소스 프로토콜 입니다. AI에 대한 다양한 프로그램을 쉽게 연결해서 쓸 수 있도록 만든 표준 통신 형식인데요.AI 품질이 빠르게 발전하고 있지만, 정작 데이터에 연결되지 못해서 확장성에 한계가 존재했다고 합니다. 이에, AI 데이터 소스와 연결하기 위한 보편적이고 개방적인 표준을 제공하여 단편화된 통합을 단일 프로토콜인 ‘MCP’로 대체하게 되었다고 합니다.

2. 프로토콜(Protocol)은 뭔데..? 

간단히 말해,공식적인 절차나 규범을 의미합니다. 컴퓨터나 시스템끼리 말이 통하도록 정해놓은 공통의 대화법이자 규칙 체계로, 컴퓨터 네트워크에서 데이터가 송수신되는 방식을 규정하는 일련의 규칙이라고 합니다. 예로 들어, 신호 체계, 인증, 오류 감지 및 수정 기능을 포함하고 있죠.

3. MCP는 ‘USB-C’ 포트와 같다

MCP를 더 설명하자면, USB-C 포트로 비유할 수 있습니다. 다양한 하드웨어 연결 포트 규격들이 USB-C로 통일되고 나서, 여러 기기들간의 호환이 가능해졌다고 합니다. MCP도 AI와 다양한 데이터 소스 및 도구를 연결하는 표준화된 방식으로서 유사한 것이죠. MCP를 사용하면, LLM 애플리케이션에 외부 앱을 연동하고 확장하는 일이 쉬워지고, 이로써 AI 활용 장벽 대폭 낮아지게 되는 것입니다.

MCP는 오픈 소스로 제공되었기에, 누구나 사용해서 AI용 앱(MCP 서버)을 만들 수 있다는 점이 차별점이기에, 앤트로픽은 ‘MCP를 표준으로 만듦으로서, 협력적인 오픈 소스 프로젝트이자 생태계’로 만들고 있습니다.

4. MCP 원리

‘호스트’가 여러 개의 ‘서버’에 연결해서 작업할 수 있다는게 핵심인데요. 아래 3가지가 연계된 원리로 이뤄지고 있습니다.
비유해보자면, 호스트는 회사 CEO, 서버는 정보와 동작을 실행하는 각 부서로 볼 수 있습니다. 여기서 MCP는 문서 양식, 클라이언트는 비서로 이해하면 더 쉬울 것 같습니다.

• MCP 호스트 : 주로 클로드, 챗GPT, IDEs와 같은 LLM 애플리케이션
• MCP 클라이언트 : 호스트 안에 서버와 1:1 연결 유지하는 모듈로, 서버에 ‘요청’을 함
• MCP 서버 : 구글 드라이브, 슬랙, 깃헙처럼 클라이언트 요청 받아서 정보 제공 및 동작 실행

5. MCP의 장점

= ‘도구’로 쓸 수 있다는 것입니다.

예를 들어, 클로드에 노션 MCP 서버를 연결하면, ‘노션에 코멘트 생성하기’, ‘노션에 데이터베이스 만들기’ 등의 도구들이 나열되는데요.

이 도구들이 이미 규격화되어 있으며, 클라이언트가 간단한 요청 과정을 통해서 쓸 수 있는 도구를 알아보고 선택할 수 있는게 장점입니다. 결국, 하나의 프로토콜을 쓴다 = ‘규격화’라고 볼 수 있습니다.

MCP가 있다면 더 쉽고 빠르게 LLM과 외부 프로그램을 연동할 수 있고,  LLM에 연동할 수 있는 앱을 한번 구현해두면 활용성이 높아져, 더 많은 사람들이 MCP 서버를 만들어낼 수 있습니다. 모두가 같은 언어로 말하고, 같은 형식으로 연결되고, 같은 방식으로 확장할 수 있음이 좋은 점인 것이죠. 이제 생성형 AI는 채팅창 속 신기한 장난감이 아니라, 사람들의 컴퓨터와 생산성 툴을 연결해 ‘진짜’ 결과물을 내는 에이전트로 나아가고 있습니다.

6. MCP 활용 사례

MCP가 나타남에 따라, 개인과 기업은 AI에 프로그램 이것저것 연결해서 쓸 수 있게 됐습니다. 간단하게 코드를 클로드 데스크톱에 MCP 서버를 연결하면, 클로드 대화창에서 노션과 관련된 동작을 지시할 수 있습니다. 아래 예시를 참고해 보세요.

• 'AI 에이전트 리서치와 정리, 초안 작성을 위한 페이지를 하나 만들고 싶어.'

이렇게 클로드에 명령했을 때, 클로드와 노션에서 MCP가 작동하는데요. 클로드에 생성된 내용에서 결과 보기 누르면 세밀하게 동작 과정 알 수 있으며, 노션에 생성된 글은 연동되어 데이터베이스 관리에 효율적입니다. 

• 클로드: 새 페이지 생성 → ‘글감/초안’ 데이터베이스를 찾아줌 → 목차, 기본 세션까지 스스로 추가해가면서 내용을 만듦
• 노션: ‘글감/초안’ 데이터페이스에 해당 페이지가 생성되어 있음 (노션 연동)

기업 또한 발빠르게 MCP 서버를 제공하고 있습니다. 직접 에이전트 서비스하는 기업의 경우, 공급자에서 그치지 않고, 우리 회사의 AI 에이전트가 ‘사용자’로서 MCP 서버들을 도구로 쓸 수 없을까 고민을 하고 있다고 합니다. (예: ‘스트라이프’라는 회사는 AI 에이전트로 ‘결제’ 가능하도록 하여, 온라인 쇼핑의 새로운 지평을 열고자 함)

 

---

 

다음 블로그: 'Talk to Figma MCP' 플러그인 사용해보기 

MCP에 대한 원리와 활용 방안에 대해 알아보았는데요. 다음 블로그에서는 'Talk to Figma MCP' 플러그인을 사용해보고, 활용 방법에 대해 소개해보려고 합니다. 이는 직접 디자인하지 않고 명령어로 화면을 만들어주는, 디자이너들이 항상 기대하면서도 걱정하고 있던 기술을 경험할 수 있는 플러그인 인데요, 아직까지 플러그인이 초기 단계여서 제대로된 배치나 결과물이 나오지 않을 때도 있지만, 추후 더 고도화되었을 때 유연하게 활용할 수 있도록 여러분들도 미리 익혀두면 어떨까요?

다음 블로그에서 뵙겠습니다!

 

'Talk to Figma MCP'  플러그인 사용해보기👇

https://www.figma.com/community/plugin/1485687494525374295/cursor-talk-to-figma-mcp-plugin