세 가지 신호가 같은 방향을 가리키고 있다
최근 며칠 사이 프론트엔드 워크플로우를 둘러싼 의미 있는 신호 세 개가 동시에 등장했다. Figma MCP와 Claude를 연동한 바이브 코딩 실전 사례, Anthropic의 Claude Design 공개, 그리고 100개 사이트를 'AI 에이전트 준비도' 기준으로 채점했더니 전부 낙제였다는 충격적인 리포트. 각각 따로 보면 흥미로운 도구 업데이트지만, 한 줄로 엮으면 다른 이야기가 된다. 디자인 단계부터 배포 이후까지, AI 에이전트가 프론트엔드 워크플로우 전 구간에 개입하기 시작했다는 것이다.
바이브 코딩은 이미 실무 현장에 착지했다
브런치에 올라온 실전 후기는 개념 소개가 아니라 실제 작업 로그다. Claude 데스크탑에 두 줄의 MCP 명령어를 입력하면 로컬 Figma 앱과 Figma 공식 서버가 동시에 연결된다. 여기에 CLAUDE.md로 프로젝트 컨텍스트—디자인 시스템 구조, 토큰 위치, 기술 스택—를 한 번 정의해두면, 새 세션을 열 때마다 '우리 서비스 버튼은 이렇고요...'를 반복하지 않아도 된다.
핵심은 완성도의 재정의다. Figma 프레임 링크를 넣으면 HTML로 변환되는데, 완성도가 100%가 아닌 70~80% 수준이다. 그런데 이게 오히려 실용적이다. 모바일·데스크탑 링크를 같이 넣으면 반응형까지 한 번에 처리되고, 결과물을 브라우저에서 바로 확인하면서 "이런 느낌이요" 대신 "이걸 기반으로 해주세요"가 가능해진다. 기획 단계에서 스펙 구멍을 개발 착수 전에 발견할 수 있다는 것, 이게 프로토타이핑 사이클에서 진짜 가치다.
Claude Design: 핸드오프라는 개념 자체가 사라진다
이 흐름에 Anthropic이 Claude Design을 투입했다. Claude Opus 4.7 기반으로 작동하는 이 도구는 단순한 디자인 생성기가 아니다. 온보딩 단계에서 팀의 코드베이스와 디자인 파일을 읽어 디자인 시스템을 구성하고, 이후 색상·타이포그래피·컴포넌트를 자동 적용한다. 완성된 결과물은 Canva, PDF, PPTX, HTML로 내보낼 수 있고—결정적으로—Claude Code로 전달하는 핸드오프 번들로 묶인다.
디자이너가 Figma에서 정적 목업을 만들고, 개발자에게 건네고, 개발자가 코드로 옮기는 3단계 핸드오프 구조가 '디자인 → 핸드오프 번들 → Claude Code 배포'로 압축되는 그림이다. PM은 와이어프레임을 직접 만들어 개발팀에 전달할 수 있고, 마케터는 랜딩 페이지를 스스로 뽑을 수 있다. 역할 경계가 흐려지는 게 아니라, 각 역할이 더 앞단까지 직접 실행할 수 있게 된다.
그런데 배포된 웹은 AI 에이전트를 맞을 준비가 안 돼 있다
dev.to에 올라온 리포트는 불편한 진실을 꺼낸다. 100개 인기 사이트를 'AI 에이전트 준비도' 기준—Discovery(발견 가능성), Structure(구조), Actions(행동 가능성), Policies(정책)—으로 채점했더니 평균 40점, 최고점 48점, 통과한 사이트 0개였다.
흥미로운 건 실패 지점이다. Schema.org, 시맨틱 HTML, HTTPS 같은 Structure는 대부분 잘 갖춰져 있다. 구멍은 Discovery와 Policies다. AI 에이전트에게 이 사이트가 무엇을 할 수 있는지 알려주는 곳이 없고, 에이전트가 어떻게 행동해야 하는지 규칙을 정의한 곳도 없다. 검색 크롤러를 위한 robots.txt는 있어도, AI 에이전트를 위한 '프론트 도어'는 존재하지 않는다.
agent.json: AI 에이전트를 위한 robots.txt
이 문제에 대한 제안이 agent.json이다. 도메인 루트에 위치하는 이 파일은 사이트 이름, 제공 기능(search_products, place_order 같은 capability), 브랜드 보이스 가이드라인, 레이트 리밋, 그리고 언제 사람에게 에스컬레이션해야 하는지를 선언한다. npx agentweb score https://yoursite.com으로 현재 에이전트 준비도를 진단하고, npx agentweb init으로 스타터 파일을 생성할 수 있다. 스펙은 아직 초안 단계지만, 방향성은 명확하다. AI 에이전트가 웹과 상호작용하는 표준 레이어가 필요하다는 것.
세 흐름이 만드는 하나의 워크플로우
이 세 가지를 이어 붙이면 윤곽이 잡힌다. Figma MCP로 디자인-코드 간극을 줄이고 → Claude Design으로 핸드오프를 번들로 압축하고 → agent.json으로 배포된 서비스가 AI 에이전트와 통신할 수 있도록 선언하는 구조다. 각 단계에서 AI가 단순 보조 도구가 아니라 워크플로우의 실행 주체로 들어온다.
주목할 것은 이 흐름이 '새로운 서비스를 뚝딱 만드는 것'보다 기존 서비스에 새 화면을 빠르게 붙이거나, 반복적인 핸드오프 마찰을 줄이는 데 훨씬 현실적인 가치를 만든다는 점이다. 브런치 실전 후기가 강조한 것처럼, 인하우스 팀에서 새 화면 하나를 기획-디자인-개발-검증까지 사이클 타임을 줄이는 게 실제 임팩트다.
지금 프론트엔드 개발자가 주목해야 할 것
세 도구 모두 아직 초기다. Claude Design은 연구 프리뷰, agent.json 스펙은 커뮤니티 제안 단계, Figma MCP는 셋업 과정에서 여전히 에러가 튀어나온다. 하지만 방향은 분명하다. 프론트엔드 워크플로우에서 AI가 개입하는 구간이 '코드 자동완성'에서 '디자인 토큰 해석 → 컴포넌트 생성 → 핸드오프 번들 → 에이전트 정책 선언'으로 넓어지고 있다.
이 흐름에서 개발자에게 남는 핵심 역량은 두 가지다. 하나는 컨텍스트 설계 능력—CLAUDE.md를 어떻게 구조화하고, 디자인 시스템을 어떻게 토큰으로 정의하느냐가 AI 결과물의 품질을 좌우한다. 다른 하나는 에이전트 인터페이스 설계—내가 만든 서비스가 AI 에이전트와 어떻게 통신할 것인지를 agent.json 같은 레이어로 선언하는 능력이다. 도구가 빠르게 바뀌는 만큼, 도구 사용법보다 이 두 가지 설계 감각이 더 오래간다.