MCP가 여는 디자인 워크플로의 미래

*원문을 번역한 글입니다.

*원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다.

최근 웹 디자인 도구, 3D 소프트웨어, 심지어 영상 편집기까지 다양한 제품에서 MCP 서버가 쏟아져 나오고 있습니다. 이제 디자이너의 한계는 자신이 다룰 줄 아는 도구가 아니라 무엇을 상상할 수 있는지에 달려 있다는 뜻입니다.

MCP란 무엇인가요?

MCP(Model Context Protocol)는 AI 모델이 다른 도구에 연결해 정보를 가져오거나 사용자를 대신해 작업을 수행할 수 있게 해주는 프로토콜입니다. 예를 들어 앱을 벗어나지 않은 채 3D 도구에 신발의 3D 모델을 만들어 달라고 요청하고, 완성된 모델을 바로 Figma 프로젝트로 가져오는 상황을 떠올려 보시면 됩니다. 게다가 다른 도구를 사용해 본 경험이나 관련 지식이 없어도 됩니다. 계정만 있으면 AI가 해당 도구의 사용법을 파악하고 사용자를 대신해 자동으로 작업을 수행합니다.

디자이너는 MCP 서버로 워크플로를 어떻게 개선할 수 있을까요?

이미지와 에셋 편집하기

Framer에서 웹사이트를 만들고 있는데, 여러 이미지에 같은 스타일로 수정과 편집을 적용해야 한다고 해보겠습니다. 이전에는 디자이너가 이미지를 모두 내보낸 다음 Photoshop으로 가져와 하나씩 직접 편집해야 했습니다.

이런 워크플로만 봐도 꽤 번거로워 보입니다. 이제 Framer에는 MCP 서버를 통해 다른 도구와 연결할 수 있는 AI 에이전트가 있습니다. Adobe 역시 서드파티 도구에서 자사 MCP를 손쉽게 설정할 수 있도록 지원합니다. 연결이 끝나면 Framer의 에이전트에게 선택한 이미지를 Adobe로 편집해 달라고 요청하면 됩니다. 말 그대로 이게 전부입니다.

원하는 그래픽을 만들고 애니메이션 적용하기

LottieFiles는 최근 MCP 서버를 공개해 다른 AI 도구에서도 LottieFiles의 워크플로와 연동할 수 있게 했습니다. 저도 실제로 제 컴퓨터에서 Cursor를 통해 2분 만에 LottieFiles MCP에 연결했습니다.

LottieFiles MCP를 사용해 5분 만에 만든 Duolingo 애니메이션입니다.

그렇게 만들어진 결과물은 놀라울 정도였습니다. AI 모델에 만들고 싶은 벡터 그래픽을 프롬프트로 설명하자, LottieFiles의 벡터 생성기를 이용해 1분도 채 지나지 않아 그래픽을 만들기 시작했습니다. 그다음에는 벡터가 어떻게 움직였으면 하는지 설명을 입력했습니다. 같은 방식으로 브랜드 로고나 아이콘도 간단히 애니메이션으로 만들 수 있습니다(SVG도 지원합니다).

곧 복잡한 움직임이 들어간 부드러운 Lottie 애니메이션이 완성됐고, 저는 Cursor를 통해 이를 웹사이트에 임베드할 수 있는 그래픽으로 가져왔습니다.

Figma에서 코딩 도구로, 다시 Figma로

오랫동안 이렇게 매끄러운 핸드오프는 상상하기 어려웠지만, Figma가 MCP 서버를 지원하면서 상황이 달라졌습니다.

이제 VS Code, Cursor, Claude Code 같은 원하는 코딩 도구를 연결하고, 몇 초 만에 Figma 프로젝트를 코드베이스와 연동할 수 있습니다. 디자인 시스템, 아이콘, 색상, 컴포넌트를 코드 요소로 가져오는 것도 가능합니다.

코딩 도구 안에서 프롬프트로 디자인을 수정한 뒤 그 변경 사항을 기존 코드에 동기화할 수 있습니다. 반대로 코드를 수정했다면 변경 사항을 다시 Figma로 동기화할 수도 있습니다. 덕분에 개발자와 디자이너가 같은 상태를 기준으로 작업할 수 있습니다.

Magnific MCP로 수천 개의 리소스와 에셋 활용하기

Magnific(이전 Freepik)은 이제 전용 MCP 서버를 통해 전체 라이브러리에 접근할 수 있도록 지원합니다. 디자인 도구나 바이브 코딩 플랫폼을 연결하면 프롬프트 한 번으로 그래픽 에셋을 가져올 수 있습니다.

예를 들어 “Magnific에서 모자를 쓴 새 이미지를 찾아줘”처럼 원하는 그래픽을 입력하기만 하면 됩니다. 그러면 사람이 직접 개입하지 않아도 검색하고, 적절한 에셋을 선택한 뒤 프로젝트로 가져옵니다.

물론 유료 플랜을 사용하고 있다면 Magnific의 자체 AI 도구 스택도 이용할 수 있습니다.

디자인 도구에서 업무용 도구까지 모두 연결하기

업무와 비즈니스를 관리하려고 컴퓨터에 수많은 업무·생산성 도구를 설치해 두던 시대는 지나가고 있습니다.

이제 크리에이터들은 Notion, Google Drive를 비롯한 Google 도구, 메일, 캘린더, Zoom, Asana 등 생각할 수 있는 거의 모든 생산성·협업 도구의 MCP 서버를 이용할 수 있습니다.

따라서 회의를 잡고 팀의 업무를 챙기기 위해 열 개씩 되는 도구를 따로 관리하는 대신 하나의 자동화 워크플로를 만들 수 있습니다. 예를 들어 매니저가 이메일로 새로운 업무를 보낼 때마다 Cursor 같은 도구에 다음과 같이 요청하는 겁니다.

업무 내용을 요약해 Asana에 추가하고

Calendar를 통해 팀 미팅을 잡고

Monday의 내 할 일에 추가하고

리마인더를 만들고

심지어 새로운 지시 사항을 바탕으로 Figma 프로젝트까지 시작하도록 할 수 있습니다.

이 모든 일을 프롬프트 하나로 처리할 수 있습니다.

MCP 서버는 왜 디자이너에게 이렇게 잘 맞을까요?

한 단어로 말하면 맥락(context)입니다. 이전의 AI 도구는 서로 분리된 상태로 작동했고, 사용자가 무엇을 필요로 하는지에 대해서도 각자 알고 있는 정보가 달랐습니다. 이제 MCP를 이용하면 도구가 다른 도구와 데이터베이스에서 정보를 가져오고, 작업을 실행하기 전에 사용자가 무엇을 원하는지 파악한 다음 더 풍부한 맥락을 바탕으로 결과를 만들어낼 수 있습니다.

요즘 대부분의 바이브 코딩 도구와 AI 어시스턴트에는 메모리 기능이 있어, 이전에 요청했던 작업을 기억하거나 과거 데이터를 불러와 처리하는 일이 모델 입장에서는 훨씬 간단해졌습니다.

Claude 같은 일부 AI 도구는 로컬 파일과 앱의 정보를 불러올 수 있어, 사용자가 컴퓨터에 저장해 둔 기존 정보를 바탕으로 조사 작업을 수행할 수도 있습니다.

원문 출처: https://medium.com/design-bootcamp/the-future-of-design-is-already-here-mcp-just-unlocked-unlimited-potential-77a9afb1120c

DEET를 구독하고 커리어 성장을 위한 작은 습관을 시작해 보세요.