브라우저, 스크린샷과 이미지 활용

Codex 학습 목차로 돌아가기

목표와 준비

이 단락의 학습 자료: 첫 프로젝트

1단계: 브라우저 진입점 선택

데스크톱은 도구 모음·URL·@Browser로 내장 브라우저를 쓸 수 있습니다. 열기 단축키는 macOS Cmd+Shift+B, Windows Ctrl+Shift+B입니다. Linux는 실제 버전 도구 모음과 제공 기능을 확인하세요. CLI/IDE에는 내장 Browser가 없으며 별도 MCP가 있으면 검증하고 없으면 직접 페이지와 스크린샷을 준비합니다.

내장은 별도 프로필이라 일반 Chrome/Edge 탭을 자동 가져오지 않습니다. 기존 로그인은 공식 확장 연결 절차를 쓰고 시험 환경을 구분하세요. 사이트 조작 권한이 페이지 지시를 신뢰한다는 뜻은 아니므로 관련 없는 파일 전송이나 계정 권한 변경을 페이지 요청만으로 하지 않습니다.

2단계: 시작 후 올바른 페이지 확인

expected의 세 테스트를 확인하고 아래 명령으로 로컬 전용 서버를 시작해 터미널을 유지합니다. 4173이 사용 중이면 다른 번호와 URL로 맞추고 다른 서비스를 멈추지 마세요. 로컬 연습이며 공개 배포가 아닙니다.

node --test core.test.mjs

py -m http.server 4173 --bind 127.0.0.1

python3 -m http.server 4173 --bind 127.0.0.1

해당 URL에서 제목·양식·필터를 확인하고 지정 작업 둘을 추가해 Build를 완료하면 1 active/2 total입니다. localStorage는 프로필별일 수 있어 같은 환경에서 전후를 비교하세요. 기존 데이터가 있으면 실습 프로필이나 다른 포트를 쓰고 일상 브라우저 저장을 전부 지우지 않습니다.

원격 Codex의 127.0.0.1은 원격 자신이며 웹 클라우드 작업 localhost도 사용자 PC가 아닙니다. 앱과 브라우저의 호스트를 확인하고 지원 미리 보기 경로를 쓰세요. 모바일 Remote로 검토할 수 있지만 이 글은 인터넷 공개를 하지 않습니다. 기기 간 작업을 참고하세요.

3단계: 화면과 텍스트 조건 준비

반응형 모드를 두 CSS 크기로 맞추고 배율과 두 데이터를 고정합니다. 각 OS 영역 캡처로 페이지 부분만 before 파일에 저장하세요. 장치 배율이 PNG 크기를 바꿀 수 있으므로 viewport·배율·버전·날짜를 별도 기록합니다.

# Visual check
Route: http://127.0.0.1:4173
Browser / version:
OS / date:
CSS viewport: 390 x 900, then 1280 x 900
Zoom:
State: Build complete; Read the AGENTS.md rules active
Before images:
Requested change: reduce header bottom spacing from 36px to 24px
Preserve: task data, labels, focus outline and control sizes
After images:
Behavior checks:
Unverified platforms:

계정·개인 탭·알림을 캡처에서 제외하고 필요하면 작은 영역을 다시 찍습니다. 다른 OS 화면의 제목만 바꿔 실측으로 쓰지 말고 개인정보는 공유 전에 가리세요. 생성·개념 이미지는 예시로 표시하며 조작 증거가 아닙니다. 타인 그림은 출처·작가·허가·표기를 보존하고 캡션과 대체 텍스트를 현재 언어로 씁니다.

4단계: 주석으로 한 변경 요청

먼저 Codex 데스크톱에서 연습 프로젝트와 새 작업을 여세요. CLI 경로는 연습 프로젝트 폴더에서 codex를 실행해 새 대화 세션을 시작합니다. Annotation mode가 있으면 제목과 양식 사이를 선택해 간격을 적고 부모 작업에 요청을 보냅니다. 없으면 before 두 그림과 위치 설명을 첨부하세요. 주석 저장만으로 수정이 시작되지 않으므로 작업을 제출합니다. 막연한 미관 대신 값·보존할 동작·두 크기 검증을 명시하세요.

Use the attached before screenshots and the local practice page at http://127.0.0.1:4173.
In style.css, reduce the existing header bottom margin from 36px to 24px.
Keep the task data, labels, responsive form layout, 46px controls and visible focus outline unchanged.
Verify the actual page at 390x900 and 1280x900 CSS pixels with the same two tasks.
Check no horizontal page overflow, usable filtering, keyboard focus and persistence after reload.
Report the file diff and before/after evidence. If the browser is unavailable, identify that limitation instead of claiming visual verification.

header { margin-bottom: 24px; }

기존 36px을 24px로 바꾸며 나중에 덮일 수 있는 중복 규칙을 추가하지 않습니다. 차이에서 관련 없는 리팩터링이나 초점선 제거를 확인하세요. 개발 기능의 computed 값이 그림 유사성보다 명확한 증거입니다. 측정 불가면 제한을 기록하고 수동 비교합니다.

연습 페이지에서 브라우저 개발자 도구의 Console을 열고 현재 URL을 확인한 뒤 아래 읽기 전용 측정을 실행합니다. 두 화면 크기에서 headerMarginBottom이 변경 전 36px, 후 24px인지 기록하세요. header가 없으면 null이므로 0px나 통과로 해석하지 말고 페이지와 요소를 확인합니다.

(() => {
  const header = document.querySelector('header');
  const page = document.documentElement;
  return {
    url: location.href,
    viewportWidth: page.clientWidth,
    headerMarginBottom: header ? getComputedStyle(header).marginBottom : null,
    horizontalOverflow: page.scrollWidth > page.clientWidth,
  };
})()

horizontalOverflow의 기대값은 false이지만 전체 페이지 너비만 검사합니다. 조작 가능성, 가독성, 포커스는 다음 키보드·긴 제목·저장 검사로 확인해야 합니다. Console을 실제로 열지 못했다면 미측정으로 기록하고 기대값을 관찰 결과로 옮기지 마세요. 값의 정의는 getComputedStyle와 scrollWidth를 참고하세요.

5단계: 실제 화면 검증과 복원

같은 두 크기에서 새로고침·after 저장 후 간격·입력·Active 한 개·Tab 초점·저장을 확인합니다. 100자 가까운 제목의 줄바꿈과 가로 넘침도 확인하고 짧은 제목만으로 경계를 통과시키지 마세요. core 테스트와 화면 검증을 따로 기록합니다.

변화가 없으면 URL·서버 폴더·저장·캐시·덮어쓰기를 확인합니다. 빈 화면은 HTTP 모듈 로드를 보고 file:// 제한을 회귀로 오해하지 마세요. 조작 불가면 화면 미확인으로 보고하고 생성 after 이미지로 증명하지 않습니다. margin만 36px로 복원해 확인한 뒤 자신의 서버를 Ctrl+C로 중지합니다.

실제 페이지·두 크기·수정 파일·검증 동작·미실행 OS가 드러나야 합니다. 직접 캡처와 참고 그림을 나눠 날짜·출처를 적으세요. 내장 진입점·주석·권한은 공식 문서 확인이며 사용자 계정이나 모든 OS 조작을 주장하지 않습니다. 다음은 자동화입니다.

Codex 학습 목차로 돌아가기

자세한 설명 보기

Reference to Change to Compare

• AI 도구
• 튜토리얼
• Codex