AI는 놀라울 정도로 코드를 잘 작성할 수 있습니다. 하지만 브라우저 내부에서 일어나는 일을 디버깅하는 것은 여전히 다른 차원의 도전 과제입니다.

capture markdown that your ai agent can read

만약 여러분이 Claude, Gemini CLI, Codex, Cursor 또는 기타 현대적인 AI 코딩 어시스턴트(AI coding assistant)를 사용해 보았다면, 아마 이런 상황을 겪어보았을 것입니다.

여러분은 AI에게 이렇게 말합니다:

"버튼이 작동하지 않아요."

그러면 AI는 이렇게 답합니다:

"스크린샷을 공유해 주시겠어요?"

그래서 여러분은 스크린샷을 보냅니다.

그러면 AI는 다음과 같이 질문합니다:

요소를 검사(inspect)할 수 있나요?
HTML을 복사할 수 있나요?
콘솔 에러(console errors)가 있나요?
네트워크(Network) 탭에는 무엇이 표시되나요?
어떤 CSS 규칙이 스타일을 덮어쓰고 있나요?

이 시점에서 AI는 여러분의 애플리케이션을 디버깅하고 있는 것이 아닙니다.

그것은 여러분을 인터뷰하고 있는 것입니다.

빠져 있는 조각: 런타임 컨텍스트 (Runtime Context)

대규모 언어 모델(Large language models, LLM)은 소스 코드를 매우 잘 이해합니다.

하지만 그들에게 보통 결여되어 있는 것은 현재 브라우저에서 무엇이 일어나고 있는지에 대한 접근 권한입니다.

다음과 같은 것들 말이죠:

렌더링된 DOM (The rendered DOM)
계산된 CSS (Computed CSS)
콘솔 에러 (Console errors)
실패한 네트워크 요청 (Failed network requests)
선택된 요소 (Selected elements)
브라우저 메타데이터 (Browser metadata)
런타임 상태 (Runtime state)

이러한 정보 없이는 모델이 추측을 해야만 합니다.

때때로 그 추측은 맞을 수도 있습니다.

하지만 많은 경우 틀립니다.

스크린샷만으로는 충분하지 않은 이유

스크린샷은 무엇이 일어나고 있는지를 보여줍니다.

하지만 그것이 왜 일어나는지는 설명하지 못합니다.

이 HTML을 상상해 보세요:

Save

스크린샷은 단순히 다음과 같이 보여줍니다:

버튼이 존재한다.
클릭해도 아무런 반응이 없다.

진짜 문제는 다음과 같을 수 있습니다:

pointer-events: none
클릭 핸들러(click handler)를 방해하는 JavaScript 예외(exception)
클릭을 가로채는 숨겨진 오버레이(overlay)
실패한 API 요청
CSS 스택킹(stacking) 문제
이벤트 리스너(event listener)가 아예 연결되지 않음

이러한 정보 중 그 어느 것도 스크린샷 내부에는 존재하지 않습니다.

현재의 AI 디버깅 워크플로 (The Current AI Debugging Workflow)

많은 개발자에게 워크플로는 다음과 같이 보입니다:

스크린샷을 찍습니다.
AI에게 보냅니다.
AI가 콘솔 로그 (Console logs)를 요청합니다.
콘솔 로그를 복사합니다.
AI가 HTML을 요청합니다.
HTML을 복사합니다.
AI가 네트워크 요청 (Network requests)을 요청합니다.
그것들도 복사합니다.

문제가 마침내 식별될 때까지 이 과정을 반복합니다.

이 방식은 작동합니다.

다만 필요 이상으로 느릴 뿐입니다.

브라우저가 모든 것을 제공할 수 있다면 어떨까요?

정보를 수동으로 수집하는 대신, 고장 난 요소를 한 번만 선택하여 다음을 전송한다고 상상해 보세요:

스크린샷 (Screenshot)
DOM
계산된 CSS (Computed CSS)
콘솔 로그 (Console logs)
네트워크 요청 (Network requests)
페이지 URL
브라우저 정보
요소 계층 구조 (Element hierarchy)

이제 AI는 개발자가 디버깅을 시작하기 전에 통상적으로 수집하는 것과 동일한 컨텍스트 (Context)를 갖게 됩니다.

"이 요소를 검사해 줄 수 있나요?"라고 묻는 대신,

AI는 즉시 근본 원인 (Root cause)에 대해 추론하기 시작할 수 있습니다.

Vynix를 만든 이유

AI 코딩 에이전트 (AI coding agents)와 작업하면서, 우리는 동일한 과정을 계속 반복하고 있다는 사실을 깨달았습니다.

DevTools 열기.

HTML 복사.

콘솔 로그 복사.

네트워크 요청 내보내기.

스크린샷 찍기.

모든 것을 채팅창에 붙여넣기.

그래서 우리는 Vynix를 만들었습니다.

Vynix는 브라우저 컨텍스트 (Browser context)를 캡처하여 AI 친화적인 보고서로 패키징하며, 이를 통해 코딩 에이전트가 스크린샷 너머에서 무엇이 일어나고 있는지 이해할 수 있도록 합니다.

목표는 Chrome DevTools를 대체하는 것이 아닙니다.

브라우저와 AI 어시스턴트 사이의 반복적인 작업을 줄이는 것입니다.

AI 개발이 향하는 방향

AI 모델은 계속해서 똑똑해지고 있습니다.

다음 단계의 개선은 아마 더 나은 프롬프트 (Prompts)만으로는 이루어지지 않을 것입니다.

그것은 더 나은 컨텍스트 (Context)로부터 올 것입니다.

브라우저 내부에서 어떤 일이 일어나고 있는지 더 정확하게 설명할 수 있을수록, AI는 수십 개의 후속 질문을 던지지 않고도 버그에 대해 더 잘 추론할 수 있습니다.

저는 개발자 도구 (Developer tools)가 개발자에게 수동 수집을 기대하는 대신, 더 풍부한 런타임 컨텍스트 (Runtime context)를 제공하는 데 점점 더 집중할 것이라고 생각합니다.

여러분의 생각은 어떠신가요?

현재 AI로 브라우저 문제를 어떻게 디버깅하고 계신가요?

여전히 콘솔 로그를 수동으로 복사하시나요?
주로 스크린샷에 의존하시나요?
여러분만의 워크플로 (Workflow)를 구축하셨나요?

다른 분들은 이 문제를 어떻게 해결하고 있는지 궁금합니다.

Vynix 소개

Vynix는 AI 코딩 에이전트 (AI coding agents)를 위해 구축된 시각적 피드백 및 브라우저 컨텍스트 (browser context) 도구입니다. 이 도구는 스크린샷을 DOM, 콘솔 로그 (console logs), 네트워크 활동 (network activity) 및 요소 정보 (element information)와 함께 캡처하여, AI가 UI 문제를 더 쉽게 이해하고 수정할 수 있도록 돕습니다.

웹사이트: https://www.vynix.in