피그마, 클로드 코드와 연동… 실행 중인 웹 UI를 편집 가능한 디자인으로 변환

지금까지의 프로덕트 제작은 디자이너가 Figma에서 화면을 그리고, 개발자가 이를 코드로 구현하는 방식이 정석이었습니다.

하지만 AI 코딩 도구가 보편화되면서 흐름이 바뀌기 시작했습니다. Claude Code를 켜고 프롬프트를 몇 번 입력하면 실제 작동하는 웹 프로토타입이 곧바로 완성됩니다. 문제는 이렇게 만든 결과물을 팀원과 검토하려면 화면을 캡처해 보내거나 로컬 서버를 직접 띄우게 해야 해 협업에 병목이 생겼다는 점입니다.

Figma는 2월 17일, Claude Code 등에서 실행된 실제 브라우저 UI를 캡처해 편집 가능한 Figma 프레임으로 바로 변환하는 기능을 공개했습니다.

브라우저 화면을 편집 가능한 레이어로 추출

이 기능의 핵심은 브라우저에서 구동되는 실제 코드를 캔버스로 역공학해 가져오는 것입니다.

로컬 개발 환경인 localhost는 물론, 스테이징이나 실제 서비스 중인 프로덕션 환경의 UI까지 모두 캡처할 수 있습니다. 단순한 정적 이미지가 아니라 텍스트와 레이아웃을 직접 수정할 수 있는 Figma 프레임 형태로 캔버스에 붙여넣어집니다.

여러 단계로 이어지는 사용자 흐름도 한 번의 세션에서 여러 화면을 연속으로 캡처해 전후 맥락을 유지한 채 캔버스에 배치할 수 있습니다.

프롬프트로 프로토타입을 제작하는 Figma Make와 함께 활용하면, 코드로 시작하든 캔버스에서 시작하든 자유롭게 아이디어를 발전시킬 수 있습니다.

MCP를 활용한 코드-디자인 양방향 순환

Figma의 목표는 단순히 화면을 가져오는 데서 끝나지 않고 코드로 다시 돌아가는 완전한 루프를 만드는 것입니다.

Figma MCP 서버를 연결하면, 캔버스에서 수정한 프레임 링크를 Claude Code 같은 에이전트 도구에 프롬프트와 함께 넘겨줄 수 있습니다. LLM이 수정된 시각적 맥락을 읽어내고 이를 바탕으로 디자인이 반영된 코드를 다시 작성하는 방식입니다.

2024년 Figma에 인수된 Dynaboard의 창업자 Alex Kern과 AI 디자인 디렉터 Gui가 이 프로젝트를 이끌며 디자인과 코드 사이의 단절을 메우고 있습니다.

왜 중요한가

우리는 이 조치가 AI 코딩 시대에 Figma가 취할 수 있는 가장 영리한 전략적 대응이라고 봅니다.

최근 Claude Code나 Cursor 같은 도구가 강력해지면서 많은 개발자가 디자인 툴을 거치지 않고 터미널에서 곧바로 프로토타입을 만들어내고 있습니다. 자칫하면 Figma가 제품 초기 기획과 프로토타이핑 과정에서 뒤로 밀려날 수 있는 상황이었습니다.

Figma는 코드 우선 방식과 경쟁하는 대신, 구동되는 코드를 캔버스로 빨아들여 다시 협업의 중심지로 끌고 오는 방식을 택했습니다.

AI로 프론트엔드를 직접 개발하는 사람이라면 지금 당장 써볼 가치가 큽니다. 버튼 간격을 맞추려고 터미널에서 프롬프트를 서너 번씩 고쳐 쓰는 것보다, 캔버스로 긁어와 직접 배치해 보고 MCP로 코드에 반영하는 편이 훨씬 빠르기 때문입니다.

복잡한 웹 코드가 기존 디자인 시스템 규격과 얼마나 매끄럽게 호환될지는 지켜봐야겠지만, 디자이너와 개발자 사이를 가로막던 장벽을 허무는 데 중요한 진전을 이뤄낸 것은 분명해 보입니다.