Domscribe: AI 코딩 에이전트에게 프론트엔드 실행 화면을 보여주는 도구

섹션별 상세

기존 AI 코딩 에이전트는 소스 코드 파일만 읽을 수 있어 실제 렌더링된 화면의 상태를 파악하지 못하는 한계가 있었다. Domscribe는 실행 중인 프론트엔드와 에이전트 사이의 간극을 메워 실시간 DOM 정보를 전달한다. 에이전트는 더 이상 화면 구성을 추측할 필요 없이 실제 렌더링 데이터를 기반으로 작업한다. 이를 통해 프론트엔드 수정의 정확도가 비약적으로 향상된다.

Code-to-UI 기능을 통해 에이전트는 특정 소스 코드 위치를 쿼리하여 해당 코드가 브라우저에서 어떻게 렌더링되는지 확인할 수 있다. MCP를 기반으로 라이브 DOM, Props, 상태 데이터를 스크린샷 없이 텍스트 기반으로 정확하게 수신한다. 에이전트는 런타임 컨텍스트를 확보하여 복잡한 상태 변화에 따른 UI 버그를 더 쉽게 파악한다. 별도의 시각적 분석 모델 없이도 텍스트 데이터만으로 화면 구조를 이해한다.

코드에서 UI 상태를 조회하는 워크플로우 다이어그램 — Diagram코딩 에이전트가 특정 코드 라인에서 무엇이 렌더링되는지 쿼리하면, Domscribe 런타임 매니저가 DOM 스냅샷, Props, 상태 정보를 캡처하여 응답하는 과정을 보여준다. 에이전트가 실시간 런타임 컨텍스트를 확보하는 방식을 시각화한다.

UI-to-Code 워크플로우는 개발자가 브라우저에서 요소를 직접 클릭하고 수정 사항을 입력하는 방식으로 작동한다. 시스템은 클릭된 요소의 AST(Abstract Syntax Tree)를 분석하여 정확한 파일명, 라인, 컬럼 정보를 에이전트에게 전송한다. 에이전트는 전달받은 위치 정보를 바탕으로 즉시 해당 소스 코드를 편집한다. 개발자는 코드를 직접 찾을 필요 없이 화면에서 바로 지시를 내릴 수 있다.

UI에서 코드로 이어지는 수정 워크플로우 다이어그램 — Diagram개발자가 브라우저에서 요소를 클릭하고 지시사항을 입력하면, Domscribe가 이를 어노테이션으로 변환하여 코딩 에이전트에게 전달하고 에이전트가 소스 코드를 수정하는 과정을 보여준다. 요소의 위치 정보(Button.tsx:12)를 정확히 식별하여 에디터에 반영하는 메커니즘을 설명한다.

빌드 타임에 안정적인 ID를 주입하는 방식을 사용하여 런타임 환경에서도 소스 코드와 DOM 요소 간의 매핑을 정확하게 유지한다. Vite, Webpack, Turbopack 플러그인이 트랜스파일 단계에서 각 요소에 고유 식별자를 부여한다. 이 과정은 프로덕션 환경의 성능이나 최종 번들 코드에는 영향을 주지 않도록 설계되었다. 개발 환경에서만 활성화되어 에이전트와의 통신을 지원한다.

Domscribe 전체 아키텍처 다이어그램 — DiagramInject(ID 주입), Annotate(수정 지시), Resolve(위치 식별), Fix(코드 수정)의 4단계 아키텍처를 상세히 보여준다. AST 분석을 통한 매니페스트 생성과 릴레이 서버를 통한 에이전트 통신 구조를 설명한다.

React, Vue, Next.js, Nuxt 등 주요 프레임워크와 다양한 빌드 도구 생태계를 폭폭넓게 지원한다. MIT 라이선스로 공개된 오픈소스 프로젝트이며 모든 MCP 호환 에이전트와 즉시 연동 가능하다. Claude Code, Cursor, GitHub Copilot 등 기존 개발 도구들과 결합하여 강력한 AI 개발 환경을 구축할 수 있다. 프레임워크에 구애받지 않는 범용적인 아키텍처를 지향한다.

기술

React
Vue
Next.js
Nuxt
Vite
Webpack
Turbopack
MCP

활용 사례

AI 에이전트를 이용한 UI 버그 수정
브라우저 기반 자연어 코드 편집
실시간 DOM 상태 분석 및 코드 매핑

언급된 리소스

문서Domscribe Documentation