AI가 만든 UI를 AI가 직접 눈으로 확인한다 — ProofShot 살펴보기

AI 코딩 에이전트의 맹점: "보이는 것"을 모른다

요즘 Cursor, Copilot, Claude 같은 AI 코딩 에이전트 쓰시는 분들 많으시죠? 코드 자동 생성은 정말 빨라졌는데, 한 가지 아쉬운 점이 있어요. AI가 프론트엔드 코드를 생성할 때, 실제로 화면에 어떻게 보이는지는 모른다는 거예요.

이게 뭐냐면, AI가 React 컴포넌트나 CSS를 짜줬는데 막상 브라우저에서 열어보면 레이아웃이 깨져있거나, 버튼이 엉뚱한 데 있거나, 반응형이 안 맞는 경우가 있잖아요. AI는 코드의 텍스트만 보고 생성하지, 그 코드가 렌더링된 결과물을 "보지" 못하거든요. 그래서 개발자가 직접 브라우저를 열어서 확인하고, 수정 사항을 다시 AI에게 전달하는 반복이 필요했어요.

ProofShot는 이 문제를 해결하려는 도구예요. AI 코딩 에이전트에게 말 그대로 "눈"을 달아주는 건데요, AI가 생성한 UI의 스크린샷을 자동으로 캡처해서 AI에게 다시 보여주고, AI가 스스로 결과물을 검증할 수 있게 해주는 MCP(Model Context Protocol) 서버예요.

어떻게 동작하나요?

MCP라는 개념이 좀 생소할 수 있는데요, 쉽게 말하면 AI 에이전트에 외부 도구를 연결해주는 표준 인터페이스예요. USB 포트처럼, MCP를 통해 AI에게 다양한 기능을 "플러그인"할 수 있는 거죠.

ProofShot의 동작 흐름은 이래요. AI 코딩 에이전트가 프론트엔드 코드를 생성하면, ProofShot이 그 페이지의 스크린샷을 캡처해요. 이 스크린샷을 AI 에이전트에게 이미지로 전달하면, AI가 "아, 이 부분은 의도한 대로 나왔고, 저 부분은 레이아웃이 틀어졌네"라고 판단해서 스스로 코드를 수정할 수 있게 되는 거예요.

이걸 비주얼 피드백 루프라고 할 수 있는데요, 사람이 코드를 짜고 브라우저에서 확인하고 다시 수정하는 그 과정을 AI가 자동으로 수행하는 거예요. 사람이 중간에 개입하지 않아도 AI가 여러 번 반복하면서 UI를 개선할 수 있죠.

주요 기능으로는 현재 페이지의 전체 스크린샷 캡처, 특정 영역만 캡처, 그리고 디자인 시안과 실제 구현 결과를 비교하는 기능이 있어요. 디자인 시안 비교 기능은 특히 유용한데, 피그마 같은 도구에서 나온 디자인을 기준으로 AI가 "현재 구현이 디자인과 얼마나 일치하는지"를 판단할 수 있거든요.

왜 지금 이런 도구가 나왔을까?

이 도구가 나온 배경에는 AI 에이전트의 진화 방향이 있어요. 지금까지 AI 코딩 도구는 주로 텍스트(코드) 생성에 집중했는데, 최근에는 AI가 단순히 코드를 짜는 게 아니라 전체 개발 워크플로우를 자율적으로 수행하는 방향으로 발전하고 있거든요.

비슷한 방향의 도구로는 Vercel의 v0가 있어요. v0는 프롬프트를 넣으면 UI 컴포넌트를 생성하고 미리보기까지 보여주는 서비스인데요, ProofShot은 이런 시각적 검증을 특정 서비스에 종속되지 않고 어떤 AI 에이전트에서든 쓸 수 있게 해준다는 점에서 차이가 있어요.

Anthropic의 Computer Use 기능도 비슷한 맥락이에요. Claude가 실제 컴퓨터 화면을 보고 마우스와 키보드를 조작할 수 있게 해주는 기능인데, ProofShot은 이보다 훨씬 가볍게 "UI 스크린샷 확인"이라는 특정 목적에 집중한 도구라고 볼 수 있어요.

MCP 생태계 자체도 빠르게 성장하고 있어요. Anthropic이 MCP 표준을 공개한 이후로 다양한 MCP 서버들이 만들어지고 있는데, ProofShot은 그 중에서도 "AI에게 시각 정보를 제공하는" 카테고리에 해당하는 거죠.

한국 개발자에게 주는 시사점

실무에서 바로 써볼 수 있는 도구예요. 특히 AI 에이전트로 프론트엔드 작업을 많이 하는 분들에게 유용한데요, 매번 브라우저 열어서 확인하고 스크린샷 찍어서 AI에게 보여주는 수동 과정을 자동화할 수 있거든요.

다만 아직 초기 단계 프로젝트라 한계도 있어요. 복잡한 인터랙션(호버 효과, 애니메이션, 스크롤 동작 등)은 정적 스크린샷만으로 검증하기 어렵고, 다양한 브라우저나 디바이스에서의 호환성 테스트까지는 아직 안 되거든요.

더 넓게 보면, MCP 서버 개발은 지금 꽤 블루오션이에요. AI 에이전트에 연결할 수 있는 도구를 만드는 건 새로운 종류의 개발자 도구 시장이 열리는 것과 같거든요. ProofShot처럼 특정 문제를 해결하는 MCP 서버를 만들어보는 것도 좋은 사이드 프로젝트가 될 수 있어요.