첫 소규모 프로젝트 완성하기

Codex 학습 목차로 돌아가기

이 강의의 목표

시작 전: 올바른 버전 선택

Small Steps 실습 자료를 풀면 start, broken, expected가 나옵니다. 이번에는 expected만 새 codex-first-site 폴더로 복사하고 압축을 푼 원본을 보존합니다. start는 필터가 미완성이고 broken에는 의도적인 오류가 있어 뒤 강의에서 씁니다. 세 폴더를 합치면 어떤 버전을 검증하는지 알기 어려우므로 따로 둡니다.

복사본 바로 아래에 index.html, style.css, app.js, core.mjs, core.test.mjs가 있어야 합니다. HTML은 구조, CSS는 스타일, app.js는 브라우저 상호작용, core.mjs는 데이터 동작, test 파일은 핵심 검사를 담당합니다. 전부 이해할 필요는 없지만 다섯 파일은 확인해야 합니다. Codex, Node.js, Python 3가 필요하며 이미 있다면 재설치 대신 명령 실행 여부를 확인합니다.

Windows에서는 이 폴더에서 PowerShell을, macOS/Linux에서는 터미널을 엽니다. 위치 확인이 낯설면 터미널과 경로를 먼저 봅니다. Python은 Windows에서 py --version, 나머지는 python3 --version으로 확인하며 Node는 모두 node --version을 씁니다. 명령이 없다면 해당 도구를 설치하고 터미널을 다시 엽니다. package.json이 없으므로 npm install이나 npm test는 사용하지 않습니다.

1단계: 수정 전 정상 동작 확인

복사본 루트에서 핵심 테스트를 실행해 3개 통과, 0개 실패를 확인합니다. 이는 수정 전 증거입니다. 이미 실패하면 start나 broken을 복사했거나 파일이 빠졌는지 확인하세요. 잘못된 기준 상태에서 화면 수정과 모든 오류 수정을 동시에 요청하면 어떤 요구가 어떤 결과를 만들었는지 판단하기 어렵습니다.

node --test core.test.mjs

Windows에서는 아래 명령으로 미리보기를 시작합니다. 이 터미널은 서버 로그를 계속 표시하므로 열어 두고 바로 프롬프트로 돌아오기를 기다리지 마세요. 다른 명령은 새 터미널에서 실행합니다. 서버는 로컬 주소 127.0.0.1에만 연결됩니다.

py -m http.server 4173 --bind 127.0.0.1

macOS/Linux에서는 아래의 동등한 명령을 사용합니다. 자신의 플랫폼 명령 하나만 실행하며 두 서버가 4173 포트를 같이 쓸 수는 없습니다. 다른 실습에서 사용 중이면 확인된 서버를 중단하거나 4174로 바꾸고 이후 URL도 맞춥니다.

python3 -m http.server 4173 --bind 127.0.0.1

브라우저에서 http://127.0.0.1:4173을 엽니다. 이 origin에 보존할 가상 작업이 있다면 먼저 기록하세요. About this exercise를 열고 Reset practice data를 선택한 뒤 All tasks에서 빈 목록을 확인합니다. 이 작업은 실습 데이터만 지우며 소스 파일을 복원하지 않습니다. Read와 Build를 추가하고 Read를 완료한 뒤 Completed에는 Read만, Active에는 Build만 보이는지 확인합니다. 새로고침해 상태가 유지되는지도 봅니다. index.html을 더블클릭하면 file URL 제한으로 모듈을 못 불러올 수 있으므로 실행한 HTTP 주소를 사용하세요.

2단계: 읽은 뒤 수정 요청하기

데스크톱은 codex-first-site를 프로젝트로 선택하고 CLI는 루트에서 시작합니다. 먼저 파일 다섯 개의 역할, 작업 경로, 테스트 명령을 읽기만 해서 보고하도록 요청합니다. 패키지 설치가 필요 없는 정적 사이트임을 이해했는지 확인한 뒤 아래 전체 요청을 보냅니다. 작은 화면 수정도 보존할 기능을 함께 알려야 합니다.

Work only in this codex-first-site practice folder.
1. In index.html, set the h1 text to "Small steps, clear progress."
2. In style.css, set the :root background to #fff8ed.
Keep all todo behavior, labels, storage keys and data formats unchanged.
Do not add packages or external requests. Do not deploy the site.
Run node --test core.test.mjs.
Check the page at 390px and 1280px if browser access is available.
Report changed files, checks performed and any checks not run.

의도한 차이는 index.html의 h1과 style.css의 배경색뿐입니다. HTML 전체를 다시 만들거나 데이터 코드를 다른 프레임워크로 바꾸는 것이 아닙니다. Codex에 브라우저 도구가 없으면 화면 검사를 미실행으로 적고 직접 확인하세요. 화면을 추측하게 하거나 오류 메시지가 없다는 이유로 시각 검증을 통과 처리하지 않습니다.

3단계: 결과 직접 검증하기

두 파일을 다시 열어 문구와 색상 코드를 확인하고 핵심 테스트를 다시 실행해 결과를 남깁니다. 브라우저를 새로고침해 제목, 배경, 기존 Read와 Build를 확인하세요. 약 390px에서는 페이지 전체에 가로 스크롤이 없어야 하고 1280px에서는 내용 폭을 확인합니다. 좁은 화면 검사는 반응형 배치 검증이지 iPhone이나 Android 실기기 테스트가 아닙니다.

경계 사례 두 가지도 확인합니다. 공백만으로는 할 일을 추가할 수 없어야 하고 아래 샘플은 이미지가 아닌 텍스트로 보여야 합니다. Tab으로 입력창, 버튼, 필터, 체크박스를 이동하며 포커스가 보이는지 확인하세요. 작은 화면 수정에 데이터 처리나 키보드 동작 회귀가 섞이지 않았는지 검사하는 것입니다. 핵심 테스트는 CSS 외관을 자동 확인하지 않으므로 두 종류의 증거를 모두 봅니다.

<img src=x>

문제 해결, 중단과 복원

폴더 목록이 나오면 서버를 너무 상위 폴더에서 실행한 것입니다. 중단하고 index.html이 바로 있는 복사본으로 이동해 다시 시작하세요. 포트가 사용 중이면 자신의 미리보기인지 확인하거나 다른 포트를 쓰고 관련 없는 서비스를 중단하지 않습니다. 변경이 안 보이면 저장, URL, 폴더, 새로고침을 확인합니다. 포트가 바뀌면 브라우저 저장 출처도 달라져 할 일이 안 보여도 코드가 삭제했다고 단정할 수 없습니다.

Python 터미널에서 Ctrl+C로 미리보기를 중단합니다. 복원은 보존한 expected 원본에서 이번에 바꾼 index.html과 style.css만 가져오거나 두 줄을 직접 되돌립니다. 브라우저 데이터를 전부 지우지 마세요. 실습 할 일을 없애려면 About this exercise의 Reset practice data가 전용 저장 키만 처리합니다. 필요한 가상 기록은 먼저 남기고 초기화합니다.

추가 연습과 검증 기록

추가 연습으로 주 제목만 다른 영어 문장으로 바꾸고 모든 기능을 보존한 채 정상 입력과 빈 입력을 다시 확인합니다. 실제 차이, 테스트 결과, 두 화면 폭의 관찰, 미실행 항목을 제출하면 완료입니다. 요청 작성, 프로젝트 규칙, 테스트와 검토로 반복 가능한 작업 습관을 만듭니다.

자료는 이 시리즈가 직접 만든 공개 공유 가능한 가상 사이트입니다. 참고 버전의 핵심 및 브라우저 동작은 Windows/Edge에서 확인했으며 다른 OS의 시작 안내를 직접 테스트했다고 주장하지 않습니다. Codex 진입점은 2026-09-20의 공식 빠른 시작과 CLI 문서로 확인했습니다. 이미지는 실습 결과이며 Codex 제품 화면이 아닙니다.

예상 결과와 실제 검사를 나누어 기록하기

아래 표는 예상 인수 결과이며 이번 실행의 통과 기록이 아닙니다. 실제 변경 파일, 테스트 실행 디렉터리와 통과/실패 수, 390px와 1280px 각각의 실제 화면 결과, 미완료 검사를 따로 기록하세요. 세 핵심 테스트는 할 일 데이터 로직을 검사하므로 모두 통과해도 제목이나 배경이 틀릴 수 있습니다. 미리보기를 열 수 없으면 화면 검사를 미실행으로 남기고 소스의 색상 값을 화면 결과로 대신하지 마세요.

Codex 학습 목차로 돌아가기

자세한 설명 보기

Request to index.html to Browser

• AI 도구
• 튜토리얼
• Codex