가입 버튼 안 눌릴 때 7분 AI 재현 프롬프트 5칸

회원가입 화면을 만들었는데 이메일, 비밀번호, 비밀번호 확인을 모두 넣어도 가입하기 버튼이 회색으로 남아 있으면 답답합니다. 이때 AI 코딩 도구에 바로 "버튼이 안 눌려요, 고쳐 주세요"라고 쓰면 입력값 검증, 상태 업데이트, CSS, 클릭 이벤트, API 요청을 한꺼번에 추측하기 쉽습니다. 필요한 것은 긴 설명이 아니라 버그를 다시 만들 수 있는 입력값입니다.

OpenAI의 프롬프트 작성 가이드는 원하는 결과, 형식, 제약을 구체적으로 주는 방식을 권합니다. OpenAI Codex CLI 문서는 로컬 코드베이스에서 코드를 읽고 실행하며 수정 작업을 진행하는 개발 도구로 Codex를 설명합니다. 버튼 버그를 맡길 때도 같은 원리입니다. AI에게 "수정"을 먼저 시키기보다 재현 조건과 검증 기준을 먼저 고정해야 합니다.

버튼 버그는 설명보다 재현 순서가 먼저입니다

버튼이 안 눌리는 문제는 겉으로는 하나처럼 보이지만 원인은 여러 갈래입니다. 이메일 형식 검증이 통과하지 않았을 수도 있고, 비밀번호 확인 값이 상태에 늦게 반영될 수도 있습니다. 약관 체크박스가 숨겨져 있거나, disabled 속성이 계속 남아 있을 수도 있습니다. MDN의 disabled 문서는 비활성화된 폼 컨트롤은 클릭과 제출 같은 상호작용에서 제외된다고 설명합니다. 그래서 먼저 확인할 것은 "왜 disabled가 남았는가"입니다.

막연한 요청	AI가 놓치기 쉬운 부분	먼저 넣을 정보
가입 버튼이 안 눌려요	어느 입력에서 막히는지 알 수 없습니다	이메일, 비밀번호, 확인값
버튼이 비활성화돼요	정상 조건이 없습니다	언제 활성화되어야 하는지
고쳐 주세요	수정 범위가 넓어집니다	건드리지 말 파일과 검증 명령

이 표를 채우면 AI가 파일을 무작정 바꾸기 전에 같은 화면을 재현하려고 시도합니다. 특히 회원가입 화면처럼 상태가 얽힌 버그는 한 번 실패한 입력값을 그대로 전달해야 합니다.

7분 입력표는 상황, 재현, 기대, 금지, 검증만 씁니다

처음부터 완전한 버그 리포트를 만들 필요는 없습니다. 아래 5칸만 채우면 AI가 원인을 좁히기 시작할 수 있습니다.

칸	넣어야 할 내용	예시
상황	사용자가 어디에서 멈추는지	`/signup`에서 모든 값을 넣어도 버튼이 비활성화됨
재현	같은 문제를 만드는 순서	이메일 입력, 비밀번호 입력, 확인값 입력, 버튼 상태 확인
기대	정상이라면 어떻게 되어야 하는지	값이 유효하면 버튼이 활성화되고 클릭할 수 있어야 함
금지	바꾸면 안 되는 범위	API, 라우팅, 디자인 토큰은 건드리지 않음
검증	수정 뒤 무엇을 실행할지	관련 테스트, 브라우저 수동 확인, 콘솔 에러 확인

여기서 가장 중요한 칸은 기대입니다. "안 됩니다"만 있으면 AI는 현재 상태만 봅니다. "정상이라면 버튼이 활성화되고 클릭 시 회원가입 요청이 실행된다"까지 쓰면 수정 방향이 보입니다.

바로 붙여 넣는 AI 버그 재현 프롬프트

아래 프롬프트는 Codex, ChatGPT, 다른 AI 코딩 도구에 모두 사용할 수 있습니다. 파일명과 명령어만 현재 프로젝트에 맞게 바꾸면 됩니다.

회원가입 페이지에서 버튼이 비활성화된 채 눌리지 않는 문제를 고쳐 주세요.

상황:
- /signup 페이지에서 이메일, 비밀번호, 비밀번호 확인을 모두 입력해도 가입하기 버튼이 disabled 상태입니다.
- 사용자는 회원가입을 완료할 수 없습니다.

재현 순서:
1. /signup 페이지로 이동합니다.
2. 이메일에 [email protected]을 입력합니다.
3. 비밀번호와 비밀번호 확인에 Aa123456!을 입력합니다.
4. 가입하기 버튼 상태를 확인합니다.
5. 버튼 클릭이 가능한지 확인합니다.

기대 결과:
- 모든 필드가 유효하면 가입하기 버튼이 활성화되어야 합니다.
- 버튼을 클릭하면 회원가입 요청이 실행되어야 합니다.
- 실패하더라도 콘솔 에러나 화면 메시지로 원인을 확인할 수 있어야 합니다.

수정 금지:
- 인증 API 계약은 바꾸지 마세요.
- 라우팅 구조와 디자인 토큰은 바꾸지 마세요.
- 문제와 직접 관련 없는 파일은 수정하지 마세요.

작업 방식:
- 먼저 버튼이 disabled로 유지되는 조건을 찾아 주세요.
- 가능한 원인을 입력값 검증, 상태 업데이트, 약관/체크박스 조건, 클릭 핸들러, CSS 가림 문제로 나누어 확인해 주세요.
- 수정 전후로 어떤 파일을 왜 바꾸는지 짧게 설명해 주세요.

검증:
- 관련 테스트가 있으면 실행해 주세요.
- 테스트가 없으면 같은 재현 순서로 버튼 활성화 여부를 확인하는 최소 검증 방법을 제안해 주세요.

이 프롬프트의 핵심은 "원인을 맞혀 보라"가 아니라 원인을 나눠 확인하라는 점입니다. AI가 먼저 조건을 분류하면, 수정이 입력 검증 함수 하나로 끝나는지, 상태 업데이트 흐름까지 봐야 하는지 빨리 갈립니다.

AI가 너무 많은 파일을 바꾸면 수정 범위를 다시 묶습니다

버튼 하나를 고치는데 레이아웃, 인증 API, 라우팅 파일까지 넓게 바뀌면 다시 멈춰야 합니다. 이때는 아래처럼 수정 범위를 줄이는 프롬프트를 붙입니다.

방금 제안한 수정 범위가 너무 넓습니다.

목표를 다시 좁혀 주세요.
- 가입하기 버튼이 disabled 상태로 유지되는 직접 원인만 찾습니다.
- API 계약, 라우팅, 전역 스타일은 바꾸지 않습니다.
- 먼저 관련 컴포넌트와 검증 함수만 확인합니다.
- 수정 후보를 3개 이하로 줄이고, 각 후보마다 확인 방법을 붙여 주세요.

출력 형식:
1. 가장 가능성 높은 원인
2. 확인할 파일과 코드 위치
3. 최소 수정안
4. 수정 후 검증 방법

수정 범위를 줄이는 문장은 버그를 늦게 고치는 말이 아닙니다. 관련 없는 파일을 바꾸는 비용을 막는 말입니다. 특히 운영 중인 가입 화면이라면 작게 고치고 바로 검증하는 흐름이 더 안전합니다.

마지막 30초에는 "고쳤다"가 아니라 "눌린다"를 확인합니다

AI가 수정했다는 설명을 내놓아도 작업은 끝난 것이 아닙니다. 버튼 버그는 화면에서 실제로 활성화되고 클릭되는지 확인해야 합니다. Playwright 문서는 브라우저에서 사용자 동작을 테스트로 작성하는 흐름을 안내합니다. 테스트를 바로 만들 수 없다면 최소한 같은 재현 순서로 직접 눌러 봐야 합니다.

수정이 끝났다면 아래 30초 검증표로 결과를 확인해 주세요.

검증할 항목:
1. 이메일, 비밀번호, 비밀번호 확인을 모두 입력했을 때 버튼이 활성화되는가
2. 버튼 클릭이 실제로 실행되는가
3. 콘솔 에러가 없는가
4. 비밀번호 확인값을 틀리게 넣으면 다시 비활성화되는가
5. 수정과 관련 없는 파일이 바뀌지 않았는가

출력:
- 통과한 항목
- 실패한 항목
- 추가로 확인해야 할 항목
- 아직 추측인 부분

이 검증표를 붙이면 AI의 답변이 "수정했습니다"에서 멈추지 않습니다. 사용자가 겪은 입력값으로 다시 확인하게 만듭니다. 오늘 필요한 목표는 큰 리팩터링이 아니라 버튼이 활성화되는 조건을 작게 찾아내는 것입니다.

참고 출처

OpenAI Help Center, Prompt engineering: https://help.openai.com/en/articles/6654000-best-practices-for-prompt-engineering-with-the-openai-api
OpenAI Developers, Codex CLI: https://developers.openai.com/codex/cli
MDN Web Docs, HTML disabled attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/disabled
Playwright Docs, Writing tests: https://playwright.dev/docs/writing-tests