피그마 메이크, 로컬 코드 연동 지원: 시각적 편집으로 프로덕션 코드 수정

디자이너가 캔버스에서 픽셀 단위로 정성껏 다듬은 시안이 개발자의 손을 거쳐 화면에 나왔을 때 어딘가 어색하게 틀어져 있는 일은 지금도 흔하게 벌어집니다.

피그마가 5월 28일 자사 도구인 '피그마 메이크(Figma Make)'에 로컬 프로덕션 코드베이스를 직접 연결하는 새로운 기능을 발표했습니다. IDE를 열지 않고도 피그마 안에서 실제 배포용 코드를 시각적으로 수정할 수 있는 길이 열린 셈입니다.

마우스로 디자인하면 AI가 코드를 고친다

이번 기능의 핵심은 피그마 메이크와 로컬 저장소 사이에 전용 AI 에이전트가 들어앉았다는 점입니다.

사용자가 메이크 화면에서 요소를 선택하고 레이아웃, 색상, 글꼴, 크기 등을 마우스로 조절하면, AI 에이전트가 코드베이스에서 연관된 코드를 찾아내 디자인 변경 사항이 반영되도록 실제 코드를 고쳐 줍니다.

속성 조정을 넘어선 인터랙션이나 애니메이션을 손봐야 할 때는 화면 요소 위에 직접 주석을 달 수 있습니다. 여러 요소를 한꺼번에 지정하면서 구체적인 맥락을 전달할 수 있어, 백지 상태의 채팅창에 프롬프트를 치는 것보다 훨씬 정확하게 의도를 반영합니다.

개발 환경과의 연동도 충실합니다. 수정 사항은 깃(Git) 워크플로와 맞물려 로컬 커밋으로 관리되며, 브랜치 생성, 커밋 되돌리기, PR(풀 리퀘스트) 제출까지 지원해 기존 개발팀의 코드 리뷰 과정을 그대로 거칠 수 있습니다.

메이크에서 작업한 화면이나 컴포넌트를 일반 피그마 캔버스로 복사해 레이어 단위로 공유하며 협업하는 것도 가능합니다.

맥 전용 베타로 시작, 테스트 기간 무료

이 기능은 5월 28일부터 한정 베타로 시작됐으며, 현재는 맥용 데스크톱 베타 앱에서만 사용할 수 있습니다. 다른 플랫폼 지원은 순차적으로 확대될 예정입니다.

대기자 명단에 등록해야 하며 신청자 전원에게 접근 권한이 주어지는 것은 아닙니다. 베타 기간 동안에는 AI 크레딧이 차감되지 않으며, 정식 크레딧 요금 체계는 추후 공개됩니다.

피그마는 비개발자도 쓰기 쉽게 설정을 개선하고 있지만, 현 단계에서는 회사 코드 저장소에 접근 권한이 있고 개발 흐름을 이해하는 디자이너에게 가장 적합하다고 밝혔습니다.

왜 중요한가

피그마의 이번 선택은 생성형 AI 시대의 협업 도구가 나아갈 방향을 매우 영리하게 짚어냈다고 봅니다.

대다수 AI 코딩 도구가 개발자를 IDE 안에 묶어두려는 반면, 피그마는 디자이너에게 익숙한 시각적 캔버스를 실제 프로덕션 소프트웨어의 조종판으로 탈바꿈시켰습니다. 폰트 크기나 여백 몇 픽셀을 고치려고 지라 티켓을 만들고 프론트엔드 개발자의 일정을 기다려야 했던 낭비가 대폭 줄어들 수 있습니다.

특히 1인 개발자나 소규모 팀에게는 프로토타입과 실제 구현 사이의 장벽을 허무는 강력한 무기가 될 것입니다.

관건은 코드의 품질과 유지보수성입니다. 실제 프로덕션 코드는 복잡한 상태 관리와 컴포넌트 재사용 규칙이 얽혀 있습니다. AI 에이전트가 건드린 코드가 기존 아키텍처를 망치지 않고 개발팀의 PR 검토를 무사히 통과할 수 있을지가 실무 안착의 최대 시험대가 될 것입니다.