앱 내 브라우저

앱 내 브라우저는 스레드 안에서 렌더링된 웹 페이지를 사용자와 Codex가 함께 볼 수 있게 합니다. 웹 앱을 만들거나 디버깅하면서 페이지를 미리 보고 시각적 댓글을 달고 싶을 때 사용합니다.

로컬 개발 서버, 파일 기반 미리보기, 로그인하지 않아도 열 수 있는 공개 페이지에 사용합니다. 로그인 상태나 브라우저 확장이 필요한 경우에는 일반 브라우저 또는 Codex Chrome 확장을 사용합니다.

앱 내 브라우저는 툴바에서 열거나, URL을 클릭하거나, 브라우저에서 직접 이동하거나, Cmd+Shift+B를 눌러 열 수 있습니다. Windows에서는 Ctrl+Shift+B를 사용합니다.

앱 내 브라우저는 인증 흐름, 로그인된 페이지, 일반 브라우저 프로필, 쿠키, 확장, 기존 탭을 지원하지 않습니다. Codex가 로그인 없이 열 수 있는 페이지에 사용하십시오.

페이지 콘텐츠는 신뢰할 수 없는 컨텍스트로 취급하십시오. 브라우저 흐름에 비밀 정보를 붙여 넣지 마십시오.

브라우저 사용

브라우저 사용 기능을 사용하면 Codex가 앱 내 브라우저를 직접 조작할 수 있습니다. Codex가 클릭, 입력, 렌더링 상태 검사, 스크린샷 촬영, 페이지에서 수정 검증을 해야 할 때 로컬 개발 서버와 파일 기반 미리보기에 사용합니다.

사용하려면 Browser 플러그인을 설치하고 활성화합니다. 그런 다음 작업에서 Codex에게 브라우저를 사용하라고 요청하거나 @Browser로 직접 참조합니다. 앱은 브라우저 사용을 앱 내 브라우저 안으로 제한하며, 설정에서 허용 또는 차단된 웹사이트를 관리할 수 있게 합니다.

예:

Use the browser to open http://localhost:3000/settings, reproduce the layout
bug, and fix only the overflowing controls.

웹사이트를 허용하지 않았다면 Codex는 사용 전에 확인을 요청합니다. 허용 목록에서 사이트를 제거하면 Codex가 다시 사용 전에 묻습니다. 차단 목록에서 사이트를 제거하면 Codex는 차단된 것으로 취급하는 대신 다시 물을 수 있습니다.

Chrome에서 로그인된 웹사이트를 사용하려면 Codex Chrome 확장을 참고하십시오.

페이지 미리보기

통합 터미널 또는 로컬 환경 작업으로 앱 개발 서버를 시작합니다.
URL을 클릭하거나 브라우저에서 직접 이동해 인증이 필요 없는 로컬 경로, 파일 기반 페이지, 공개 페이지를 엽니다.
렌더링된 상태를 코드 diff와 함께 검토합니다.
변경이 필요한 요소나 영역에 브라우저 댓글을 남깁니다.
Codex에게 댓글을 처리하되 범위를 좁게 유지하라고 요청합니다.

피드백 예:

I left comments on the pricing page in the in-app browser. Address the mobile
layout issues and keep the card structure unchanged.

페이지에 댓글 달기

버그가 렌더링된 페이지에서만 보일 때는 브라우저 댓글로 Codex에게 페이지에 대한 정확한 피드백을 제공합니다.

댓글 모드를 켜고 요소나 영역을 선택한 뒤 댓글을 제출합니다.
댓글 모드에서 Shift를 누른 채 클릭하면 영역을 선택할 수 있습니다.
클릭하는 동안 Cmd를 누르면 댓글을 즉시 보냅니다.

댓글을 남긴 뒤 스레드에 메시지를 보내 Codex에게 이를 처리하라고 요청합니다. 댓글은 Codex가 정확한 시각적 변경을 해야 할 때 가장 유용합니다.

좋은 피드백은 구체적입니다.

This button overflows on mobile. Keep the label on one line if it fits,
otherwise wrap it without changing the card height.

This tooltip covers the data point under the cursor. Reposition the tooltip so
it stays inside the chart bounds.

브라우저 작업 범위 유지

앱 내 브라우저는 검토와 반복을 위한 도구입니다. 각 브라우저 작업은 한 번에 검토할 수 있을 만큼 작게 유지합니다.

페이지, 경로, 로컬 URL을 명시합니다.
로딩, 빈 상태, 오류, 성공처럼 관심 있는 시각적 상태를 명시합니다.
변경이 필요한 정확한 요소나 영역에 댓글을 남깁니다.
Codex가 코드를 변경한 뒤 업데이트된 경로를 검토합니다.
Codex가 브라우저를 사용하기 전에 개발 서버를 시작하거나 확인하라고 요청합니다.

저장소 변경 사항은 리뷰기능을 사용해 검사하고 댓글을 남깁니다.