MCP를 통한 UI 간단제작기

소개

저는 2년 정도 flutter를 통한 앱개발을 하고 있습니다만, 업무 시간 중의 1/3 정도는 UI를 그리는데 소요됩니다.
MCP를 통해 복잡한 코드 없이 api처럼 구현하는게 많이 편해졌기에 이 기회에 한 번 활용해보고자 합니다.
간단한 코드는 chat gpt도 실행해주기 때문에 MCP와 비교하는 시간도 가져보고자합니다.

진행 방법

Cursor - MCP 서버를 열어주기 위한 개발 프로그램입니다. 설치를 하셨다는 가정하에 진행합니다.
Figma - 개발에 들어가기 전 디자인한 피그마 링크가 필요합니다. 미리 디자인이 있다는 가정하에 진행합니다.
Flutter sdk - 모바일, 윈도우, 웹사이트 등을 통합 지원하는 멀티 플랫폼 sdk입니다. 모든 프로그램의 설치 방법은 언제나 docs에서 get started를 참고하시길 바랍니다.

사용할 MCP는 아래와 같습니다. 오픈소스이며, 다운로드할 필요는 없습니다.
https://github.com/GLips/Figma-Context-MCP

먼저 피그마의 api key가 필요합니다. mcp하면서 이 부분이 제일 힘들었어서 기록할 겸, 방법을 공유합니다. 빨간 네모를 따라가시면 됩니다.
1. 피그마 홈페이지에 들어가 좌측상단의 프로필을 클릭하고 나오는 팝업창에서 Settings를 클릭합니다.

  1. Settings를 클릭하면 나오는 창에서 Security를 클릭하고 Personal access tokens을 클릭합니다.

  1. token의 이름을 짓습니다. cursor-mcp로 하겠습니다. 권한을 설정해줘야하는데 피그마를 직접 수정할 것이 아니므로 전부 Read-only로 설정합니다. Generate Token을 클릭하여 token을 만듭니다. Settings창으로 넘어갈텐데 그때 api key값을 잘 기록합니다. (나중에 못 찾아봅니다.)

Adobe Acrobat에서 새 페이지를 만드는 방법

Cursor MCP 서버도 넣어줍니다.

Windows 10의 설정 메뉴의 스크린 샷
Adobe Adobe Adobe Adobe에서 코드 편집기의 스크린 샷
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=여기에넣어주세요", "--stdio"]
    }
  }

아래와 같은 디자인도 준비합니다. flutter package까지 적용한, 생각보다 복잡한 구조이기에 완벽한 재현까지는 못해주네요.

(Figma링크 또는 이미지)
이 링크의 디자인을 flutter코드로 변환해줘

프롬프트를 입력합니다.

MCP 결과

한국어 앱의 스�크린 샷
chat gpt 결과

프롬프트 결과는 위처럼 나옵니다.

결과와 배운 점

당연하게도 복잡한 UI(위젯을 감싸는 부분 등)에 대한 코드는 MCP도 완전히 구현해주지 않네요. 다만 Chat gpt에 비해 추가할 부분에 대한 확장이 더 자유롭게 짜줍니다. 이미지처럼 코드를 구현하는데 1시간 걸린다면 30분은 아낄 수 있겠네요. Chat gpt도 장점이 있다면, key없이 이미지만 보여주어도 상당히 유사하게 구현해줍니다.

Claude를 통한 MCP를 이용해봤습니다만 무료버전은 길이 제한이 있고, 디지털 월세 부담이 있네요. 다음에는 LM 스튜디오를 통한 로컬 서버로 MCP를 구현해보고자 합니다. 조언은 언제나 환영합니다!

6
1개의 답글

👉 이 게시글도 읽어보세요