techlist.io
KREN
figma

MCP 핵심 요약: 컨텍스트의 중요성과 활용 방법 | Figma 블로그 (새 탭에서 열림)

figmaaidesign-systemsmodel-context-protocolagentic-aidesign-to-codecode-generation

MCP(Model Context Protocol)는 AI가 Figma의 디자인 파일과 컴포넌트, 토큰, 레이아웃 결정 같은 맥락을 코드 작성 도구에서 활용하도록 연결한다. 이를 통해 AI가 단순히 화면을 모방하는 대신 디자인 시스템에 맞는 코드를 생성하고, 코드와 캔버스를 오가며 제품을 반복적으로 개선할 수 있다. 글의 결론은 MCP의 효과가 기술 자체뿐 아니라 팀이 얼마나 구조적이고 일관된 디자인 맥락을 구축했는지에 달려 있다는 것이다.

MCP가 제품 개발에 필요한 이유

  • MCP는 AI 도구가 팀이 사용하는 도구와 데이터에서 맥락을 가져올 수 있도록 하는 표준화된 연결 방식이다.
  • 기존 제품 개발의 선형적인 흐름은 디자인 → 개발 순서로만 진행되지 않는다.
    • 팀은 필요에 따라 어느 단계에서든 시작한다.
    • 개발 중 디자인으로 돌아가거나, 완성된 UI를 다시 캔버스에서 검토할 수 있다.
  • Figma MCP 서버는 디자인 정보를 개발자의 코드 작성 환경으로 전달한다.
  • 반대로 코드로 구현된 실제 UI를 Figma 캔버스로 가져와 탐색·수정하고, 다시 개발 환경으로 돌려보낼 수도 있다.

스크린샷만 보는 AI의 한계

  • AI 코딩 도구가 Figma 화면만 참고하면 최종 결과의 시각적 형태만 파악하고, 그 결과를 만든 설계 의도는 알기 어렵다.
  • 예를 들어 AI는 다음과 같은 문제를 일으킬 수 있다.
    • 브랜드 색상과 비슷하지만 실제 토큰에 연결되지 않은 색상을 선택한다.
    • 팀이 반복적으로 사용한 기존 카드 컴포넌트 대신 새 카드를 처음부터 만든다.
    • 여러 중첩 컴포넌트로 구성된 폼을 하나의 단순한 요소로 평탄화한다.
  • 결과물은 겉보기에는 비슷해도 디자인 시스템에서 벗어난 코드가 되고, 화면과 컴포넌트가 늘어날수록 불일치가 누적된다.
  • MCP는 컴포넌트, 디자인 토큰, 레이아웃 구조 등 Figma 파일의 구조화된 정보를 AI에 제공해 이러한 번역 오류를 줄인다.

디자이너에게 달라지는 점

  • 디자인 시스템은 제품의 시각적 일관성을 유지하는 수단을 넘어, AI가 생성하는 코드의 품질과 방향을 결정하는 입력값이 된다.
  • 파일의 구조와 명명, 컴포넌트 재사용성, 토큰의 일관성이 AI 생성 결과에 직접 영향을 준다.
  • AI가 대규모로 코드를 생성하기 때문에 작은 파일 정리 문제도 여러 화면에 반복될 수 있다.
    • 과거에는 개발자가 구현 과정에서 한 번 수정하면 끝날 문제가 될 수 있었다.
    • 이제는 하나의 불일치가 AI를 통해 여러 곳에 복제될 수 있다.
  • MCP를 사용하면 개발자가 코드로 구현한 결과를 디자이너가 다시 캔버스에서 확인할 수 있다.
  • 디자이너는 누락된 상태를 추가하고 세부 사항을 다듬어, 기존 구현을 다시 만드는 대신 제품을 완성도 있게 개선할 수 있다.

개발자에게 달라지는 점

  • AI 코딩 도구는 개발 속도를 높이지만, 디자인 맥락이 없으면 개발자가 디자인 의도를 코드로 번역하는 작업을 여전히 직접 해야 한다.
  • MCP는 개발 도구 안에서 다음 정보를 활용할 수 있게 한다.
    • 재사용해야 할 컴포넌트
    • 색상·간격·타이포그래피 등의 디자인 토큰
    • 레이아웃과 계층 구조
    • 디자인 시스템에 포함된 구성 방식
  • 따라서 개발자는 화면을 추측하거나 비슷하게 재현하는 데 쓰는 시간을 줄이고, 실제 기능 구현과 제품 완성도 향상에 집중할 수 있다.
  • 디자인과 코드가 연결된 상태로 유지되므로 구현 과정에서 발생한 차이를 더 빠르게 발견하고 수정할 수 있다.

디자인 시스템이 AI 품질을 좌우한다

  • MCP의 성능은 연결 방식만으로 결정되지 않고, AI가 읽는 디자인 파일의 품질에 크게 의존한다.
  • 명확하게 정리된 컴포넌트와 토큰은 AI가 일관된 결과를 생성하도록 돕는다.
  • 반대로 중복 컴포넌트, 불명확한 이름, 임의의 스타일 값이 많으면 AI가 잘못된 패턴을 학습하고 이를 여러 곳에 확산시킬 수 있다.
  • 디자인 시스템은 AI 기반 워크플로에서 생산성을 높이는 기준점이자, 생성 결과가 브랜드와 제품 규칙에 맞도록 제한하는 장치가 된다.

실무적으로는 Figma 파일을 AI가 읽기 쉬운 구조로 정리하고, 컴포넌트·토큰·상태를 명확히 관리하는 것이 우선이다. MCP는 디자인 시스템을 대체하는 기술이 아니라, 잘 구축된 디자인 시스템을 개발과 AI 생성 과정에 연결해 주는 기술로 활용해야 한다.