Domscribe
Domscribe · 코딩
Domscribe는 AI 코딩 에이전트에게 실행 중인 프런트엔드를 볼 눈을 달아주는 오픈소스 프런트엔드 디버깅 도구다. 하나의 임무를 위해 만들어진 오픈소스 개발 도구라고 보면 된다. 그 임무는 코드가 말하는 것과 브라우저가 실제로 렌더링하는 것 사이의 간격을 좁히는 것이다. 브라우저와 소스 코드를 양방향으로 연결한다. DOM 요소를 클릭하고 변경 사항을 설명하거나, 에이전트가 소스 파일에 질의해 라이브 DOM 스냅숏과 컴포넌트 props, 상태를 본다. 내부적으로는 빌드 시점에 만들어진 DOM 소스 대응 위에서 돌아가므로, 모든 요소가 정확한 파일과 줄을 가리킨다. 어떤 MCP 호환 에이전트와 어떤 번들러에서도 동작하고, MIT 라이선스로 배포되며, 프로덕션 빌드에서는 계측 코드를 모두 제거한다. 유료 등급은 없다. 좌석 제한도 없다.
Domscribe 소개
Domscribe란 무엇인가
Domscribe는 AI 보조 프런트엔드 작업을 위한 픽셀 투 코드 다리다. 코딩 에이전트는 소스 파일을 읽을 수 있지만 브라우저에 실제로 무엇이 렌더링되는지는 보지 못한다. 그래서 레이아웃과 스타일, 컴포넌트 구조를 추측한다. Domscribe는 DOM과 소스 트리 사이에 양방향 연결을 세워 그 간격을 메운다.
이 도구는 빌드 시점에 AST 파싱을 통해 결정적인 data-ds 속성을 주입한다. 각 대응을 매니페스트에 기록한다. 실행 시점에는 라이브 props와 상태, DOM 스냅숏을 캡처한다. 그러면 에이전트가 단순한 질문을 던진다. 이 줄은 무엇을 렌더링하는가. 해석해야 하는 스크린샷이 아니라 실제 답을 받는다.
가장 큰 한계는 범위다. Domscribe가 현재 다루는 것은 React, Vue, Next.js, Nuxt이며 다른 구성에는 맞춤 어댑터를 제공한다. 따라서 지원하지 않는 스택에서는 프레임워크 고유의 내부 구조가 정확히 대응되지 않는다. 에이전트가 MCP를 쓴다는 전제도 깔려 있어, 순수 텍스트 프롬프트만 받는 도구는 대상에서 빠진다.
시작하기
- 패키지를 설치하고 프로젝트 루트에서
npx domscribe init을 실행한다. - 빌드 도구에 맞는 번들러 플러그인(Vite 5-7, Webpack 5, Turbopack)을 추가해 소스 파일에 안정적인
data-dsID를 주입한다. - Claude Code, GitHub Copilot, Cursor, Gemini 같은 MCP 호환 에이전트를 Domscribe의 MCP 엔드포인트로 향하게 한다.
- 개발 서버를 켜고 앱을 연 뒤 아무 요소나 클릭해 쉬운 말로 변경 요청을 남긴다.
- 에이전트가 소스 위치를 질의하고 편집하게 한 뒤, 라이브 DOM과 견줘 결과를 확인한다.
제품 정보
Domscribe의 요금, 지원 플랫폼, 성능을 한눈에 확인해 보세요.
추천 대상
이 도구가 가장 잘 맞는 사용자, 작업, 상황입니다.
사용자
- 프런트엔드 개발자
- AI 에이전트와 일하는 풀스택 엔지니어
- 이미 Claude Code나 Cursor를 쓰는 팀
작업
- 레이아웃과 스타일 버그 수정
- 컴포넌트 props와 스타일 조정
- 특정 소스 줄이 무엇을 렌더링하는지 검토
활용 상황
- 기능 개발 중 빠른 UI 반복
- 상태 기반 렌더링 디버깅
- 낯선 코드베이스 적응
주요 기능
빌드 시점의 안정 ID
Domscribe는 빌드 중에 각 소스 파일을 파싱해 xxhash64로 결정적인 data-ds 속성을 주입하고, 모든 대응을 매니페스트에 기록한다. 이 ID는 핫 모듈 교체와 패스트 리프레시를 넘어 안정적으로 유지된다. 다시 말해 대부분의 프런트엔드 작업을 규정하는 편집, 저장, 새로고침의 반복을 견딘다. 파일을 편집하는 순간 깨지지 않는다. 실행 시점 휴리스틱도 없다. 어떤 요소가 어떤 것인지 추측할 일도 없다.
DOM과 소스의 양방향 연결
이 도구는 양쪽 방향으로 동작한다. DOM 요소를 클릭하고 원하는 변경을 설명하면 Domscribe가 그것을 에이전트가 편집해야 할 정확한 소스 위치로 해석한다. 또는 에이전트가 소스 파일과 줄을 질의해 지금 거기서 무엇이 렌더링되는지 보게 한다. 어느 방향을 쓸지는 작업에 달렸다. 어느 쪽도 상대를 두고 추측하지 않는다.
깊은 실행 시점 캡처
원시 HTML을 넘어 Domscribe는 React fiber 순회와 Vue VNode 검사를 통해 라이브 props와 상태, 컴포넌트 메타데이터를 추출한다. 에이전트는 렌더링된 요소 뒤의 전체 컴포넌트 컨텍스트를 얻는다. 마크업만이 아니다. 이건 중요하다. 무언가 왜 그렇게 보이는지 에이전트가 따져볼 수 있다는 뜻이다.
REST 계층을 갖춘 MCP 지원
애너테이션은 저장소 안의 .domscribe/annotations/ 폴더에 JSON 파일로 존재하고, REST API로 노출되며 MCP 서버가 에이전트 접근용으로 감싼다. Domscribe는 MCP를 통해 12개 도구와 4개 프롬프트를 제공하고, Claude Code, GitHub Copilot, Cursor, Gemini, Kiro, 그 밖의 모든 MCP 클라이언트에서 동작한다. 모든 것이 로컬에 머물고 외부 의존성이 없다.
개인정보 마스킹
이메일과 토큰, 민감한 패턴은 데이터가 브라우저를 떠나기 전에 자동으로 걸러진다. 이는 실질적인 안전장치다. 실제 사용자 데이터를 다루는 앱을 만드는 팀에게는 스테이징 환경에서 돌려볼 수 있는 도구와 그렇지 않은 도구를 가르는 차이다.
프로덕션 영향 없음
모든 data-ds 속성과 오버레이 스크립트, 릴레이 연결은 프로덕션 빌드에서 제거되며 CI가 이를 강제한다. 출하하는 번들은 깨끗하게 유지된다. 따라서 번들 크기를 희생하지도, 계측 코드를 최종 사용자에게 노출하지도 않는다.
장단점
장점
- MIT 라이선스의 무료 오픈소스로, 유료 등급도 좌석 제한도 없다.
- DOM 요소를 정확한 소스 위치에 대응시켜 에이전트가 엉뚱한 파일을 편집하지 않는다.
- 라이브 props와 상태를 캡처해, 스크린샷이 줄 수 없는 컨텍스트를 에이전트에게 준다.
- 지원 목록 안에서 프레임워크에 구애받지 않고, 모든 MCP 기반 에이전트와 호환된다.
- 개인정보 마스킹과 프로덕션 제거로 민감한 데이터와 번들 크기를 통제한다.
단점
- 지원 프레임워크(React, Vue, Next.js, Nuxt)나 맞춤 어댑터가 필요하고, 지원하지 않는 스택은 정확히 대응되지 않는다.
- MCP 호환 에이전트에서만 쓸모가 있어, 순수 프롬프트 도구는 사용할 수 없다.
- 설정이 번들러 설정과 개발 서버를 건드리므로, 뭔가 하기 전에 한 단계가 늘어난다.
자주 묻는 질문
실행 중인 프런트엔드와 AI 코딩 에이전트 사이에 다리를 놓는다. 에이전트는 DOM 요소 클릭에 응답하거나 소스 줄을 질의해 라이브 DOM과 props, 상태를 보고, 전체 컨텍스트로 편집할 수 있다.
관련 콘텐츠
Domscribe와 관련된 도구, 스킬, 아티클을 살펴보세요.
Domscribe 대안
Forefront
Forefront · 코딩Forefront는 오픈소스 AI로 무언가를 만드는 웹 플랫폼이다. 대표적인 오픈소스 언어 모델을 자신의 데이터로 미세 조정하고, 성능을 평가하고, API로 실행하거나 내보내 직접 호스팅할 수 있다. 폐쇄형 플랫폼의 편의를 원하면서도 모델과 데이터의 소유권은 놓지 않으려는 개발자가 대상이다.
Startkit
StartKit.AI · 코딩Startkit은 AI SaaS와 AI 래퍼 제품을 만들기 위한 보일러플레이트다. 지루한 부분을 미리 연결해 둔 AI 스타트업 보일러플레이트라고 생각하면 된다. 인증, Stripe와 Lemon Squeezy 결제, 사용량 제한, 트랜잭션 이메일, 그리고 OpenAI, Anthropic, Groq, Llama와 통신하는 AI API 스타터 키트가 포함된다. 저장소를 복제하고 가격을 정한 뒤 사용자가 실제로 돈을 내는 부분에 착수하면 된다. React와 Tailwind 위의 Next.js로 만들어졌기 때문에 보일러플레이트 코드의 상당 부분이 이미 익숙하게 느껴진다.
Testim
Tricentis · 코딩Testim은 웹, 모바일, Salesforce 애플리케이션 전반에 걸쳐 엔드투엔드 테스트를 만들고 실행하는 AI 기반 테스트 자동화 플랫폼이다. 머신러닝에 기대어 인터페이스가 바뀌어도 테스트를 안정적으로 유지하므로, 팀은 깨진 셀렉터를 고치는 데 쓰는 시간을 줄인다. 오늘부터 쓸 수 있는 자동화 테스트 도구치고 나쁘지 않다. 브라우저에서 동작을 녹화해 테스트를 만들고, 더 세밀한 제어가 필요하면 JavaScript를 더한다. 바쁜 QA 팀에게 탄탄한 선택이다.