소개
저는 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를 클릭합니다.
Settings를 클릭하면 나 오는 창에서 Security를 클릭하고 Personal access tokens을 클릭합니다.
token의 이름을 짓습니다. cursor-mcp로 하겠습니다. 권한을 설정해줘야하는데 피그마를 직접 수정할 것이 아니므로 전부 Read-only로 설정합니다. Generate Token을 클릭하여 token을 만듭니다. Settings창으로 넘어갈텐데 그때 api key값을 잘 기록합니다. (나중에 못 찾아봅니다.)
Cursor MCP 서버도 넣어줍니다.
"mcpServers": {
"Framelink Figma MCP": {
"command": "cmd",
"args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=여기에넣어주세요", "--stdio"]
}
}아래와 같은 디자인도 준비합니다. flutter package까지 적용한, 생각보다 복잡한 구조이기에 완벽한 재현까지는 못해주네요.
(Figma링크 또는 이미지)
이 링크의 디자인을 flutter코드로 변환해줘프롬프트를 입력합니다.
프롬프트 결과는 위처럼 나옵니다.
결과와 배운 점
당연하게도 복잡한 UI(위젯을 감싸는 부분 등)에 대한 코드는 MCP도 완전히 구현해주지 않네요. 다만 Chat gpt에 비해 추가할 부분에 대한 확장이 더 자유롭게 짜줍니다. 이미지처럼 코드를 구현하는데 1시간 걸린다면 30분은 아낄 수 있겠네요. Chat gpt도 장점이 있다면, key없이 이미지 만 보여주어도 상당히 유사하게 구현해줍니다.
Claude를 통한 MCP를 이용해봤습니다만 무료버전은 길이 제한이 있고, 디지털 월세 부담이 있네요. 다음에는 LM 스튜디오를 통한 로컬 서버로 MCP를 구현해보고자 합니다. 조언은 언제나 환영합니다!