36. Browser로 미리보고 디버깅하기
데스크톱 앱 안에는 개인 브라우저와 분리된 브라우저가 들어 있습니다. 렌더된 화면을 코드 옆에서 보고 요소에 주석을 남겨 피드백하며, Developer mode를 켜면 콘솔·네트워크·DOM까지 들여다봅니다.
화면을 같이 보면서 짚는 것이 핵심입니다. 말로 설명하는 대신 해당 요소에 주석을 찍고, 원인 추적이 필요하면 Developer mode를 세션 단위로 승인해 켜세요.
내장 브라우저가 하는 일
데스크톱 앱에는 브라우저가 들어 있습니다. ChatGPT가 웹사이트를 열어 최신 정보를 모으고 필요한 동작을 수행하는데, 그 화면을 대화 안에서 함께 봅니다. 평소 쓰는 브라우저와는 프로필이 분리되어 있어서 개인 브라우저의 쿠키·세션·기록과 섞이지 않습니다.
- 공유 화면 — ChatGPT가 무엇을 보고 있는지 같은 창에서 확인합니다.
- 별도 프로필 — 브라우저 데이터가 개인 브라우저와 분리됩니다.
- 작업 검증 — 코드를 고친 뒤 결과 화면을 그 자리에서 확인합니다.
여는 방법
Cmd + Shift + B (Windows는 Ctrl + Shift + B)미리보기 위에 바로 피드백 남기기
렌더된 화면을 코드 옆에 두고 볼 수 있습니다. 고칠 곳이 보이면 해당 요소나 영역에 주석을 찍어 "여기 이 부분" 하고 짚은 다음, 원하는 결과를 함께 적어 보내면 됩니다. 말로 위치를 설명하는 것보다 오해가 훨씬 적습니다.
주석 인터페이스에는 폰트·텍스트·간격·색상을 직접 조절하는 컨트롤도 있습니다. 값을 바꿔 화면에서 먼저 확인한 뒤, 마음에 드는 상태를 그대로 피드백으로 넘기는 흐름입니다.
Computer use와 함께 쓰기
37. Computer use를 켜 두면 ChatGPT가 내장 브라우저를 직접 조작합니다. 페이지를 열고, 클릭하고, 입력하고, 렌더된 상태를 확인하고, 스크린샷을 찍어 작업이 끝났는지 스스로 검증합니다. 로컬 개발 결과를 눈으로 확인시키는 용도로 잘 맞습니다.
Developer mode — DevTools 프로토콜 접근
Developer mode를 켜면 ChatGPT가 Chrome DevTools Protocol(CDP)에 제한적으로 접근합니다. 이걸로 할 수 있는 일은 다음과 같습니다.
- JavaScript 프로파일링
- 콘솔 출력 확인
- 네트워크 트래픽 분석
- DOM 검사
Site tools (WebMCP) — 사이트가 제공하는 동작 쓰기
웹사이트가 AI 에이전트용 동작을 직접 내놓는 방식입니다. 공식 문서는 이를 제안 단계의 표준인 WebMCP를 ChatGPT가 구현한 것이라고 설명합니다. 사이트가 동작을 등록해 두면, ChatGPT는 화면을 하나씩 클릭하는 대신 그 동작을 바로 호출합니다.
- 확인하는 곳 — 내장 브라우저 주소창의 Site tools를 누르면 이 페이지가 제공하는 동작 목록(Available site tools)이 보입니다.
- 켜고 끄는 곳 — Settings > Browser > Permissions
- 승인 — 호출할 때마다 브라우저가 먼저 검토하고, 메시지 전송·데이터 삭제처럼 결과가 남는 동작은 평소처럼 승인을 받습니다.
- 쓸 수 있는 곳 — ChatGPT Work와 Codex(최신 데스크톱 앱). Enterprise · Edu 워크스페이스와 GPT-5.6 Luna에서는 꺼져 있습니다.
사이트를 만드는 쪽이라면 페이지의 최상위 모듈에서 document.modelContext.registerTool()로 동작을 등록합니다. 동작마다 이름, 설명, 입력 스키마, 실행 함수를 넣고, 실행 함수는 앱에 이미 있는 로직을 그대로 호출하면 됩니다.
⚠️ 제한사항
- HTML 폼 속성으로 선언하는 방식(declarative API)은 지원하지 않습니다.
- iframe 안에서 등록한 동작은 찾지 못합니다.
- WebMCP API 중 일부만 지원합니다.
- 동작 정의 자체도 신뢰할 수 없는 콘텐츠로 취급합니다. 호출을 원래 페이지와 등록 정보에 묶어 위험을 줄이지만 완전히 없애지는 못합니다.
다운로드와 권한 설정
| 항목 | 기본값과 조정 위치 |
|---|---|
| 다운로드 위치 | 시스템 Downloads 폴더. Settings > Browser에서 경로를 바꾸거나 저장할 때마다 묻도록 설정합니다. |
| 사이트 접근 | 처음 방문하는 사이트는 열기 전에 확인을 받습니다. |
| 민감한 동작 | 양식 제출·구매·권한 변경·데이터 삭제는 승인이 필요합니다. |
| 권한 정책 | Settings > Browser에서 Always ask · Auto approve · Always allow 중에 고릅니다. |
| 파일 업로드 | 내장 브라우저에서는 자동화되지 않습니다. 직접 올려야 합니다. |
⚠️ 제한사항
- 로그인 불가 — 내장 브라우저는 공개된, 로그아웃 상태의 사이트만 다룹니다. 계정으로 인증하거나 내 기기에 저장된 세션을 가져다 쓸 수 없습니다. 로그인이 필요하면 33. Browser extension으로 내 브라우저를 쓰거나, 대상 플랜이라면 클라우드 브라우저의 사이트 로그인을 이용합니다.
- 차단되는 사이트 — 자동화 브라우저를 막거나 CAPTCHA를 요구하는 사이트가 있습니다.
- 데이터 분리 — 내장 브라우저의 데이터는 개인 브라우저와 공유되지 않습니다.
- 제공 범위 — 플랜과 워크스페이스 설정에 따라 쓸 수 있는지가 달라집니다.
이럴 때 씁니다
- 로컬 개발 서버를 띄워 두고 화면이 의도대로 나오는지 바로 확인할 때
- 레이아웃이 깨진 요소를 말로 설명하기 어려울 때 — 해당 위치에 주석을 찍어 넘깁니다.
- 콘솔 에러나 느린 네트워크 요청의 원인을 Developer mode로 추적할 때
- 공개 문서나 릴리스 노트를 대화 흐름에서 벗어나지 않고 확인할 때
공식 출처
-
Browser
learn.chatgpt.com/docs/browser -
Site tools (WebMCP)
learn.chatgpt.com/docs/webmcp