Hacker News 2026.03.25 37

AI 코딩 에이전트에게 '눈'을 달아주는 도구, ProofShot

AI가 코드를 짜는 시대, 근데 UI는 누가 확인하죠?

요즘 Cursor, Copilot, Claude Code 같은 AI 코딩 에이전트를 쓰시는 분들 많으시죠. 코드를 자동으로 생성해주니까 정말 편한데, 한 가지 근본적인 문제가 있어요. AI가 만든 UI가 실제로 의도한 대로 보이는지, AI 스스로는 확인할 수가 없다는 거예요. AI 에이전트는 코드의 텍스트만 볼 수 있지, 브라우저에 렌더링된 결과물을 "눈으로" 볼 수는 없거든요. 그래서 버튼이 겹쳐 있거나, 레이아웃이 깨져 있거나, 색상이 전혀 다르게 나와도 AI는 모르고 넘어가는 경우가 많았어요.

ProofShot은 바로 이 문제를 해결하려고 만들어진 오픈소스 도구예요. 이름 그대로 "증거 사진"을 찍어주는 건데요, AI 코딩 에이전트가 UI를 만들거나 수정한 뒤에 자동으로 스크린샷을 캡처해서 AI에게 다시 보여주는 방식이에요.

어떻게 동작하는 건가요?

ProofShot의 동작 원리는 생각보다 단순하면서도 영리해요. 핵심은 MCP(Model Context Protocol) 서버로 동작한다는 점이에요. MCP가 뭐냐면, AI 에이전트가 외부 도구나 데이터 소스와 소통할 수 있게 해주는 일종의 표준 프로토콜인데요, Anthropic에서 제안한 방식이에요. 쉽게 말해서 AI 에이전트에 플러그인을 꽂을 수 있게 해주는 규격이라고 보시면 돼요.

ProofShot을 MCP 서버로 설정해두면, AI 에이전트가 코드를 수정한 뒤 ProofShot에 "지금 화면 캡처해줘"라고 요청할 수 있어요. 그러면 ProofShot이 브라우저를 열어서 해당 페이지의 스크린샷을 찍고, 그 이미지를 AI 에이전트에게 돌려주는 거예요. AI는 그 이미지를 보고 "아, 버튼 위치가 잘못됐네" 하고 스스로 코드를 수정할 수 있게 되는 거죠.

기술적으로는 Playwright 같은 헤드리스 브라우저 자동화 도구를 활용해서 스크린샷을 찍어요. 특정 URL을 지정하면 그 페이지를 렌더링한 뒤 캡처하는 방식이에요. 전체 페이지를 찍을 수도 있고, 특정 CSS 셀렉터로 원하는 영역만 찍을 수도 있어요. 예를 들어 "헤더 부분만 찍어줘" 같은 요청도 가능하다는 거예요.

왜 이게 중요한 건가요?

지금 AI 코딩 에이전트 생태계에서 가장 뜨거운 화두 중 하나가 바로 "피드백 루프"예요. AI가 코드를 짜고, 그 결과를 확인하고, 다시 수정하는 순환 과정을 얼마나 자동화할 수 있느냐가 에이전트의 성능을 좌우하거든요. 텍스트 기반 코드는 린터나 테스트 실행으로 피드백을 줄 수 있는데, UI 영역은 그동안 사각지대였어요.

Devin이나 OpenHands 같은 AI 코딩 에이전트들도 내부적으로 브라우저 접근 기능을 넣고 있긴 한데, 대부분 자체 플랫폼에 종속되어 있어요. ProofShot은 MCP라는 표준을 쓰기 때문에 Claude, Cursor 등 MCP를 지원하는 어떤 에이전트와도 연동할 수 있다는 게 장점이에요. 특정 도구에 묶이지 않고 범용적으로 쓸 수 있는 거죠.

비슷한 접근으로는 Browser Use나 Stagehand 같은 프로젝트가 있는데, 이것들은 브라우저 자체를 AI가 조작하는 데 초점을 맞추고 있어요. ProofShot은 조작보다는 "시각적 확인"에 집중한다는 점에서 용도가 좀 달라요. 조작은 다른 도구에 맡기고, 확인만 깔끔하게 해주겠다는 전략이에요.

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

프론트엔드 작업에 AI 에이전트를 활용하고 계신 분이라면 한번 써볼 만해요. 특히 디자인 시안을 받아서 구현하는 작업에서, AI에게 시안 이미지와 함께 ProofShot으로 찍은 현재 구현 결과를 비교하게 하면 꽤 쓸 만한 워크플로우가 만들어질 수 있어요. npm으로 설치할 수 있고, MCP 설정만 해주면 되니까 진입 장벽도 낮은 편이에요.

다만 아직 초기 단계 프로젝트라 한계도 있어요. 동적인 인터랙션(클릭 후 상태 변화, 애니메이션 등)은 정적 스크린샷만으로 확인하기 어렵고, 반응형 디자인의 다양한 뷰포트를 자동으로 체크하는 기능도 더 발전해야 할 부분이에요.