지출 합계 계산기 만들기: 입력·삭제까지 되는 프롬프트

지출 계산기를 만드는 프롬프트 예시입니다. 처음 작동하지 않던 추가 버튼은 수정 요청 후 정상 작동했습니다.

1. 코딩 에이전트에서 빈 작업 폴더를 열고 아래 프롬프트를 붙여 넣습니다. 이번 예제는 Codex 앱으로 제작했습니다. 2. 완성된 demo.html을 브라우저 창에 끌어다 놓습니다. 위치를 모르겠으면 에이전트에게 파일 위치와 여는 방법을 물어보세요. 3. 아래 결과와 동작을 비교합니다. 막히면 화면이나 오류 문구와 함께 후속 요청을 보내세요.

나는 코딩을 처음 해. 오늘 쓴 돈을 더해 보는 작은 지출 계산기를 만들어줘. 항목 이름과 금액을 입력하고 «추가»를 누르면 목록에 들어가고, 위쪽에 합계가 나오게 해줘. 각 항목의 «삭제»를 누르면 합계도 바로 줄어들게 해줘. 처음 목록은 비워줘. 금액은 원 단위의 양의 정수만 받고, 이름이 비거나 금액이 0·음수·소수·글자이면 이유를 보여주고 추가하지 마. 금액의 최대값은 1,000,000원, 항목은 최대 20개로 제한해줘. 이름에 특수문자를 넣어도 글자로만 표시해줘. 네이비색과 연두색으로 합계가 눈에 띄게 해줘. 페이지를 새로 열면 목록이 비워진다는 안내를 넣어줘. HTML 파일 하나로 만들어줘. 필요한 디자인과 동작도 같은 파일에 넣고, 별도 설치나 외부 서비스 연결 없이 브라우저에서 열리게 해줘. 휴대폰에서도 글씨와 버튼을 편하게 볼 수 있게 하고, 키보드로 버튼을 사용할 수 있게 해줘. 저장이나 실제 주문 기능은 넣지 마. 파일 이름은 demo.html로 해줘. 완성하면 파일을 여는 방법과 확인할 동작 3가지를 알려줘.

최초 버전은 운영과 같은 sandbox에서 추가를 눌러도 빈 목록과 0원이 유지됐다. 아래 후속 요청으로 수정한 뒤 다시 확인했다. 수정 후 커피 4,500원과 점심 9,000원을 추가하자 합계가 13,500원이었고, 커피를 삭제하자 9,000원이 남았다. Enter로 추가하는 동작도 확인했다. 브라우저 기록에서 빈 이름·0·음수·소수·문자·1,000,000원 초과 입력은 안내와 함께 거부됐다. 독립 검수자는 소수 거부를 별도 재확인했다. 390×844 화면을 확인했다.

항목과 금액을 입력해도 추가 버튼이 반응하지 않아요. 폼을 전송하지 않고 추가 버튼을 누르면 목록과 합계가 바로 바뀌게 고쳐줘. 입력칸에서 Enter를 눌러도 추가되게 해줘. 기존 화면과 금액 검사·삭제 기능은 유지하고 관련 부분만 수정해줘.

VibeAZ 자체 제작 예제입니다. Codex 앱에서 제작하고 Chromium 브라우저의 실제 동작과 390px 화면을 확인했습니다. 다른 모델의 동일한 결과는 확인하지 않았습니다. 처음 추가 버튼이 작동하지 않아 아래 수정 요청을 한 번 더 보냈습니다. 목록은 새로 열면 비워집니다. 이 결과는 확인한 VibeAZ 자체 예제와 해당 검수 환경에 한정됩니다. 동일 프롬프트의 매번 같은 결과나 다른 모델·도구·브라우저 호환성은 확인하지 않았습니다. 요금제·무료 이용 조건은 확인하지 않았습니다. 20개 상한과 특수문자 표시의 브라우저 동작은 검사하지 않았습니다.