AI가 브라우저 화면 보고 UI 고친다

코딩하는 인공지능이 자기가 만든 웹 화면을 직접 '눈으로 보고' 고칠 수 있게 해 주는 도구가 나왔다. 피크(Peek-CLI)는 브라우저에 열려 있는 탭의 화면을 스크린샷으로 잡아 에이전트에게 넘겨주는 오픈소스 유틸리티로, AI가 코드만 보고 짐작하던 프론트엔드 작업을 실제 렌더링 결과를 확인하며 다듬도록 바꿔 준다.

무슨 일인가 / 배경

지금까지 코딩 에이전트의 약점 중 하나는 자기 결과물의 '겉모습'을 보지 못한다는 점이었다. 버튼이 밀렸는지, 색이 이상한지, 간격이 어긋났는지는 사람이 브라우저를 열어 확인하고 다시 지시해 줘야 했다. 피크는 이 시각적 되먹임 고리를 자동화한다. 브라우저 확장 프로그램이 열린 탭의 화면을 웹소켓(WebSocket)으로 전송하면, 에이전트가 그 이미지를 받아 만족스러운 디자인이 나올 때까지 스스로 수정과 확인을 반복한다. 클로드 코드(Claude Code)뿐 아니라 코덱스(Codex), 코파일럿(Copilot) 등 여러 에이전트와 함께 쓸 수 있다.

핵심 짚어보기

사용법은 간단하다. 웹소켓 서버를 켜고 브라우저를 연결한 뒤, 원하는 주소의 화면을 명령 한 줄로 캡처하면 이미지 파일로 저장된다. 보안 설계도 눈에 띈다. 개발사는 에이전트가 오직 스크린샷 요청만 보낼 수 있을 뿐, 브라우저에 직접 접근하거나 스크립트를 심어 어떤 조작도 할 수 없다고 강조한다. 요청은 확장 프로그램을 거쳐 웹소켓 서버로만 오가기 때문이다. MIT 라이선스 오픈소스이며 크롬 웹스토어(Chrome Web Store) 등록도 마쳤다.

1인기업 실전 적용 포인트

• 디자이너 없이 랜딩 페이지를 만들 때 활용하라. "여백을 더 주고 버튼을 키워"라고 지시하면 AI가 화면을 확인하며 스스로 맞춰, 수정 왕복 횟수를 크게 줄인다.
• 반응형 확인에 써먹어라. 창 크기를 바꿔 가며 캡처를 시키면 모바일·데스크톱 화면이 깨지는 지점을 사람이 일일이 열어 보지 않고도 잡아낼 수 있다.
• 스크린샷만 가능한 권한 구조이므로 로그인 세션이 열린 브라우저에서도 상대적으로 안심하고 쓸 수 있다. 다만 민감한 탭은 닫아 두는 습관이 안전하다.
• 캡처된 이미지를 작업 로그로 남기면, 디자인이 어떻게 바뀌어 왔는지 기록·검수 자료로도 재활용할 수 있다.

전망 / 주의점

에이전트가 결과물을 '보는' 능력은 코드 생성의 정확도를 한 단계 끌어올리는 열쇠다. 다만 스크린샷은 정적인 한 장면일 뿐, 클릭·입력 같은 실제 상호작용까지 검증하지는 못한다. 그럼에도 '보지 못하는 AI'의 한계를 값싸게 메운다는 점에서, 1인 개발자의 프론트엔드 생산성을 실질적으로 높여 줄 도구로 평가된다.

출처: HN (https://github.com/puffinsoft/peek-cli)