Codex · 실전 코스 · Codex로 할 일 웹앱 완성하기04 / 06다음: /review로 변경사항 점검하기

Codex 무료 강의 · 실전 코스 · 4강 / 6

완료라고 말하기 전에 검증하기

ChatGPT 구독자를 위한 Codex 실전 4강 — Codex 검사와 사람 확인을 구분해 기록하고, 실패를 수정한 뒤 다시 검증해요.

끝나면 손에 남는 것: PASS·FAIL·사람 확인이 구분된 TEST_REPORT.md

이 강의 완성 예시 열어보기검사를 실행해 실패 하나를 찾고 수정 후 전부 통과시키는 검증 보드예요.

3강에서 앱이 움직였어요. 하지만 “한 번 됐다”와 “완료 조건을 통과했다”는 달라요. 오늘은 Codex에게 검증을 맡기되, 도구로 확인한 것과 추측한 것을 섞지 못하게 합니다.

공식 Codex 모범 사례는 변경을 만든 뒤 관련 테스트, 타입·형식 검사, 실제 동작, diff 리뷰까지 확인하라고 권해요. 작은 HTML 앱에도 같은 원칙을 가볍게 적용할 수 있습니다.

오늘 만들 것

프로젝트에 TEST_REPORT.md가 생겨요. 각 완료 조건은 다음 셋 중 하나로 표시됩니다.

  • PASS — 실제 명령이나 브라우저 동작으로 확인함
  • FAIL — 재현 가능한 실패가 있음
  • NEEDS HUMAN — 현재 Codex 도구로 확인할 수 없어 사람이 눌러 봐야 함

확인하지 않은 것을 PASS로 적지 않는 것이 오늘의 가장 중요한 규칙이에요.

준비물

  • 작동 중인 tasks.html, tasks.css, tasks.js
  • TASK_APP_BRIEF.md의 완료 조건
  • 약 30분

따라 하기

1. 기능 추가를 잠그고 검사만 요청하기

이제 새 기능은 만들지 마. TASK_APP_BRIEF.md의 완료 조건을 기준으로
현재 할 일 앱을 검증해 줘.

먼저 네가 사용할 수 있는 도구를 확인해.
- 실제로 실행하거나 조작해 확인한 것은 PASS
- 재현된 문제는 FAIL
- 브라우저나 화면 크기처럼 직접 확인 못 한 것은 NEEDS HUMAN

코드만 읽고 실제 동작을 PASS라고 추정하지 마.
결과는 조건, 상태, 증거, 재현 방법 네 열로 정리해 줘.
아직 코드는 수정하지 마.

Codex 환경에 브라우저 도구가 있으면 직접 페이지를 열고 버튼을 누를 수 있어요. 없다면 코드 검사와 실행 가능한 명령까지만 하고 나머지를 NEEDS HUMAN으로 남기는 게 맞습니다. 도구의 차이는 실패가 아니에요. 증거의 종류가 다른 거예요.

2. 사람 몫만 직접 확인하기

Codex가 남긴 NEEDS HUMAN 항목을 브라우저에서 확인하세요. 최소한 아래는 직접 해 봅니다.

□ 폭 360px에서 가로 스크롤이 없다
□ Tab 키로 입력 → 추가 → 필터 → 항목 버튼까지 이동한다
□ 포커스 위치가 눈에 보인다
□ 빈 입력이나 공백만 입력하면 항목이 생기지 않는다
□ 완료 상태와 현재 필터가 화면에서 구분된다
□ 새로고침 후 항목과 완료 상태가 남는다

개발자 도구를 몰라도 괜찮아요. 브라우저 창 폭을 손으로 줄이고, 마우스 대신 키보드를 쓰면 됩니다. 실패한 항목에는 정확한 순서와 보인 결과를 적어 주세요.

3. 실패 하나씩 최소 수정하기

여러 실패를 한꺼번에 고치면 어떤 수정이 효과가 있었는지 흐려집니다. 하나씩 맡기세요.

검증 중 이 실패를 확인했어:
- 조건: 공백만 입력하면 항목이 생기지 않아야 한다
- 재현: 입력칸에 스페이스 세 번 → 추가
- 실제 결과: 빈 항목이 목록에 추가됨

원인을 찾고 이 실패에 필요한 최소 변경만 적용해 줘.
다른 기능이나 디자인은 바꾸지 마. 수정 후 같은 재현 순서를 다시 검사해.

내 앱에서 실패한 내용으로 세 줄을 바꿔 쓰세요. 실패가 하나도 없다면 일부러 망가뜨릴 필요는 없어요. 대신 localStorage에 잘못된 문자열이 들어 있는 경우처럼 계획에 적힌 오류 처리를 한 번 더 검토하게 하세요.

4. 전체 검사를 다시 돌리기

한 곳을 고치면 다른 곳이 흔들릴 수 있어요. 실패 항목만 재검사하지 말고 전체 완료 조건을 다시 봅니다.

수정이 다른 동작을 깨뜨리지 않았는지 TASK_APP_BRIEF.md의 완료 조건 전체를
처음부터 다시 검증해 줘. 이전 결과를 복사하지 말고 가능한 검사를 다시 실행해.
최종 결과를 TEST_REPORT.md에 저장하고, NEEDS HUMAN은 그대로 남겨.
검증 시각과 사용한 명령 또는 조작도 기록해.

사람 확인을 마친 항목은 내가 본 결과를 Codex에게 알려 보고서에 반영하세요. “사용자 확인: 360px, Chrome, 가로 스크롤 없음”처럼 환경까지 적으면 나중에 다시 확인하기 쉽습니다.

5. 계획의 검증 단계 닫기

최종 보고서에 설명되지 않은 FAIL이 없고, 필요한 사람 확인도 마쳤다면 PLAN.md의 검증 단계만 체크합니다. 리뷰와 배포는 아직 남아 있어요.

막혔을 때

  • 모든 항목을 PASS라고 써요 — “각 PASS 옆에 실행한 명령이나 조작 증거가 없으면 NEEDS HUMAN으로 바꿔”라고 하세요.
  • 브라우저 도구가 없다고 멈춰요 — 코드·구문·Git 검사는 계속하고, 실제 조작만 사람용 체크리스트로 분리하게 하세요.
  • 검사하면서 디자인을 바꿨어요 — 검증 단계에서는 새 기능과 취향 변경을 금지하고, 확인된 FAIL만 수정하도록 범위를 되돌리세요.
  • 로컬 저장을 초기화하고 싶어요 — 브라우저 사이트 데이터 삭제는 현재 목록을 지워요. 중요한 내용이 없는지 확인한 뒤 진행하세요.

마무리 체크

□ TEST_REPORT.md에 모든 완료 조건이 있다
□ PASS에는 실제 확인 증거가 있다
□ 확인하지 못한 항목은 NEEDS HUMAN으로 남았다
□ 확인된 실패는 수정 후 전체 재검사를 했다
□ 설명되지 않은 FAIL이 없다
□ PLAN.md에서 검증 단계만 완료됐다

검증은 Codex를 못 믿어서 하는 일이 아니에요. 사람과 에이전트가 같은 완료 기준을 보는 방법입니다. 이제 구현과 검증 기록을 들고, 다른 시선의 /review를 받아 봅니다.

직접 만들고 돌아가는 걸 확인했나요? 그럼 완료를 눌러요. 이 브라우저에만 저장돼요 — 주방 밖으로는 아무것도 나가지 않아요.

어느 단계에서 막혔나요?

여기에 바로 물어보세요. 계정은 필요 없어요. 헤맨 단계가 있다면 그건 레슨에 난 구멍이지, 읽는 사람 잘못이 아니에요. 답변은 본문에 반영돼서 다음 사람은 매끄럽게 지나가요.

더 고픈가요?

새 강의가 열리는 대로 메일함에 도착해요. 스팸 없이, 언제든 구독 취소할 수 있어요.

새 강의가 열리면 메일로 알려드려요.구글 계정으로 가입하면서 새 글 알림을 선택할 수 있어요. 강의는 가입 없이도 계속 무료예요.

가입하고 알림 받기 →