Framelink Figma MCP로 프론트엔드 UI 컴포넌트 자동 생성 및 개발 효율성 검증

Framelink Figma MCP 연동 및 설정

Framelink Figma MCP는 Cursor나 GitHub Copilot 같은 코딩 에이전트와 Figma를 연결하는 도구로, 피그마 노드 URL을 프롬프트에 포함하면 UI를 인식해 코드로 변환한다. 현재 Figma 공식 MCP의 베타 버전이 존재하지만, 안정성 측면에서 Framelink가 더 우수하다는 평가에 따라 이를 사용했다. 설정은 피그마에서 Read-only 권한의 액세스 토큰을 발급받아 Cursor의 MCP 서버 설정에 추가하는 방식으로 이루어진다.

Material UI 시안 기반 컴포넌트 생성 테스트

Google이 유지보수하는 Material UI의 피그마 시안을 활용해 테스트를 진행했다. Layers 메뉴에서 원하는 UI 요소의 URL을 복사하고, 해당 시안을 참고해 React 컴포넌트와 스토리북을 구현하도록 프롬프트를 작성했다. 그 결과 Alert UI에 대응하는 컴포넌트와 스토리북 문서가 자동으로 생성되었다.

실제 프로젝트 적용 및 효율성 분석

OK캐쉬백 서비스의 일부 컴포넌트를 React에서 Vue로 재작업하는 과정에서 MCP를 실제 업무에 적용했다. 생성된 컴포넌트에 motion 라이브러리를 활용해 애니메이션을 다듬는 방식으로 튜닝을 마쳤다. 수작업으로 진행했다면 약 4시간이 소요되었을 작업이 수 분 내에 완료되어, 디테일 보완에 더 많은 시간을 할애할 수 있었다.

한계 및 시사점

화면 전체를 한 번에 코드로 옮기려 하면 유지보수가 어려운 코드가 생성되는 등 AI의 한계는 여전히 존재한다. 하지만 단위 컴포넌트 구현과 스토리북 관리 목적에서는 개발자의 부하를 크게 줄여준다. 디자인을 코드로 옮기는 시간이 단축됨에 따라, 프론트엔드 개발자들은 단순 구현을 넘어 경쟁력을 갖추기 위한 새로운 역할 정의를 고민해야 할 시점이다.