Plan 모드로 구현 순서 정하기

1강에서 앱 대신 TASK_APP_BRIEF.md를 만들었어요. 조금 답답했을 수도 있어요. 하지만 명세가 있으면 “무엇을 만들지”로 실랑이하는 시간을 줄이고 “어떻게 안전하게 만들지”에 집중할 수 있습니다.

오늘도 완성 코드는 만들지 않아요. Codex의 Plan 모드로 프로젝트를 읽고 구현 순서를 합의합니다. 공식 가이드도 복잡하거나 애매한 작업일수록 먼저 계획하라고 권해요. VS Code Codex 작성창에서 /plan을 선택하거나 Shift+Tab으로 전환할 수 있습니다.

오늘 만들 것

PLAN.md 한 장을 만들어요. 파일별 변경, 작업 순서, 위험, 검증 방법, 이번에 하지 않을 일이 한 화면에 들어갑니다. 내일 구현할 때는 이 문서가 조리 순서표가 돼요.

준비물

• 1강의 TASK_APP_BRIEF.md
• 변경사항이 없는지 확인할 수 있는 Git 프로젝트
• 약 25분

따라 하기

1. Plan 모드 켜기

Codex 작성창에 /plan을 입력해 Plan mode를 선택하세요. 메뉴에 보이지 않으면 Shift+Tab을 눌러 모드를 바꿔 보세요. 그래도 없다면 일반 대화에서 “코드를 수정하지 말고 계획만 세워”라고 요청해도 이 강을 진행할 수 있어요.

공식 IDE 명령 안내에서 현재 제공되는 슬래시 명령을 확인할 수 있습니다.

2. 명세와 현재 파일을 함께 읽게 하기

TASK_APP_BRIEF.md와 현재 프로젝트 구조를 읽고 구현 계획을 세워 줘.
아직 파일을 수정하거나 패키지를 설치하지 마.

계획에는 다음을 포함해:
1. 바꿀 파일과 새로 만들 파일
2. 사용자가 쓰는 순서대로 구현 단계
3. localStorage 데이터 모양
4. 접근성과 모바일에서 놓치기 쉬운 위험
5. 각 완료 조건을 어떻게 검증할지
6. 이번 계획에서 하지 않을 일

결정이 필요한 부분이 있으면 계획을 확정하기 전에 질문해 줘.

이 코스의 기본 파일은 tasks.html, tasks.css, tasks.js 세 개와 기존 index.html의 링크 하나예요. Codex가 프레임워크나 데이터베이스를 제안한다면 “명세의 제약을 다시 읽어 줘”라고 하세요. 계획은 기술을 많이 쓰는 대회가 아니라 범위를 지키는 약속입니다.

3. 순서를 사용자 행동 기준으로 다시 보기

좋은 계획은 파일 이름만 나열하지 않아요. 사용자가 할 일을 입력하고, 체크하고, 새로고침하는 흐름을 따라갑니다. 아래 질문으로 계획을 한 번 압박해 보세요.

이 계획을 초보 사용자의 실제 동선으로 검토해 줘.
'빈 목록 → 첫 할 일 추가 → 완료 → 필터 → 새로고침 → 삭제' 순서에서
누락된 상태와 오류가 있는지 찾아. 발견하면 계획만 고쳐 줘.

빈 입력, 공백만 있는 입력, 저장된 데이터가 깨진 경우처럼 평소에는 안 보이는 상태가 여기서 나와야 해요. 계획할 때 발견하면 구현 뒤에 뜯어고치는 비용이 줄어듭니다.

4. 검증을 마지막 한 줄이 아니라 단계로 넣기

계획 끝에 “테스트한다” 한 줄만 있으면 부족해요. 무엇을 어떤 환경에서 확인할지 적혀야 합니다.

검증 단계를 세 갈래로 나눠 줘.
- Codex가 코드와 명령으로 확인할 수 있는 것
- 실제 브라우저에서 사람이 확인할 것
- 배포 후 실제 URL에서 확인할 것

도구가 없어 확인하지 못한 항목은 PASS라고 쓰지 않는 규칙도 추가해.

이 문장이 4강에서 아주 중요해져요. 에이전트가 “문제없습니다”라고 말한 것과 실제로 눌러 본 것은 같은 증거가 아니니까요.

5. 합의한 계획만 파일로 남기기

계획을 읽고 고칠 부분이 없다면 Plan 모드를 끈 뒤 아래처럼 요청하세요.

방금 합의한 최종 계획을 프로젝트 루트의 PLAN.md에 저장해 줘.
체크박스 목록으로 만들고 각 단계 아래에 검증 방법을 한 줄씩 붙여.
이번 작업에서는 PLAN.md 외의 파일을 수정하지 마.

git diff 또는 변경사항 패널을 열어 정말 PLAN.md만 생겼는지 확인하세요. 범위를 확인하는 습관은 코드가 복잡해질수록 더 큰 안전장치가 됩니다.

막혔을 때

• /plan이 없어요 — Codex 확장을 업데이트한 뒤 새 작업을 열어 보세요. 당장은 일반 모드에서 “읽기 전용으로 조사하고 계획만 작성”이라고 요청해도 됩니다.
• 계획이 너무 길어요 — “30분 단위 다섯 단계 이내로 줄이고, 세부 구현은 각 단계 아래 한 줄만 남겨”라고 하세요.
• 계속 새 도구를 설치하려 해요 — TASK_APP_BRIEF.md의 “외부 패키지 없음”을 명시하고 브라우저 기본 기능만 쓰게 하세요.
• Codex가 계획 중 파일을 바꿨어요 — Git 변경사항을 확인하고 해당 변경만 되돌린 뒤 Plan 모드인지 다시 확인하세요.

마무리 체크

□ PLAN.md에 바꿀 파일과 순서가 적혀 있다
□ localStorage 데이터 모양과 오류 처리가 있다
□ 접근성·모바일 위험이 계획에 포함됐다
□ 자동 확인, 사람 확인, 배포 후 확인이 구분됐다
□ 하지 않을 일이 다시 확인됐다
□ 앱 파일은 아직 바뀌지 않았다

이제 주문표와 조리 순서표가 모두 생겼어요. 3강에서는 Codex에게 자율성을 주되, 이 두 문서라는 울타리 안에서만 앱을 만들게 합니다.