회의 비용 계산기로 배우는 AI 코딩 — 숫자·단위·오류 입력까지 확인하는 20분 실습
AI AUTOMATA · BUILD & VERIFY
작은 계산기로 배우는
AI 결과 검수
만들기 → 실행 → 틀린 입력 → 수정
무엇을 해 볼 것인가
AI가 코드를 출력한 순간은 완성이 아닙니다. 이번에는 작은 계산기를 만들고, 답이 맞는 입력과 일부러 틀린 입력을 넣어 검수합니다. 교수자 특강에서는 코딩 경험보다 “무엇이 맞는 결과인가”를 먼저 쓰는 활동으로 활용할 수 있습니다.
준비물·버전·비용
텍스트 편집기와 JavaScript를 실행할 수 있는 최신 웹브라우저가 필요합니다. 제공 코드는 HTML·JavaScript 표준 기능만 사용하며 서버·API·외부 라이브러리가 없어 실행 비용이 없습니다. AI로 새로 생성하려면 사용 중인 코딩 지원 도구의 계정과 해당 요금제가 필요하며, 모델별 생성 결과와 한도는 다릅니다. 실제 급여 대신 아래 가상 값을 사용하세요.
예제 입력과 계산 기준
6명
45분
30,000원/시간
6명 × (45분 ÷ 60분/시간) × 30,000원/시간 = 135,000원. 참석자별 비용이 같다는 가정입니다. 시설비·부대비용·회의 효과는 포함하지 않습니다.
20분 따라 하기
- 0~3분: 계산기 없이 위 계산을 손으로 하고 135,000원을 검사표에 씁니다.
- 3~7분: 최초 프롬프트로 HTML을 생성합니다. AI 없이 실습하려면 아래 검수용 참조 코드를 복사합니다.
- 7~10분: 메모장에 붙여 넣고 파일 형식을 모든 파일, 인코딩 UTF-8로 지정해 meeting-cost.html로 저장합니다. 확장자가 .html.txt가 아닌지 확인한 뒤 브라우저로 엽니다.
- 10~16분: 표의 정상·0·빈칸·소수 입력을 실행합니다. 화면 결과를 그대로 기록하고 기대값과 비교합니다.
- 16~20분: 실패한 입력과 실제 결과를 수정 프롬프트에 넣습니다. 수정 뒤 정상 입력까지 다시 검사하고 HTML·검사표를 함께 저장합니다.
복사 가능한 자체 제작 프롬프트
최초 제작
교육용 회의 비용 계산기를 외부 라이브러리 없는 단일 HTML로 만들어라. 인원(1~1000 정수), 회의 시간(0~1440분 정수), 가상 1인 시간당 비용(0~10000000원 정수)을 받는다. 계산식은 인원×분/60×시간당 비용이며 마지막에만 원 단위 반올림한다. 기본값은 6명·45분·30000원이다. 입력마다 연결된 label, 계산 버튼, aria-live 결과 영역을 제공하라. 빈칸·음수·범위 초과·인원 소수는 화면 안에 오류로 표시하고 과거 결과를 지워라. alert 팝업, 외부 통신, 로그인, 저장 기능을 넣지 마라. 코드 전체와 저장 방법을 출력하라. 추정 인건비가 회의의 가치나 직원 생산성을 뜻하지 않는다고 명시하라.
점검
위 HTML을 실행했다고 주장하지 말고 먼저 정적 검토하라. 6명·45분·30000원=135000원, 6명·30분·30000원=90000원, 1명·1분·100원=2원(최종 반올림), 시간0=0원, 빈칸=오류, 인원1.5=오류를 검사할 표를 만들어라. 각 행에 기대값·실측값(미실행이면 미실행)·판정·관련 코드 위치를 적어라. 분을 시간으로 바꾸는 /60과 빈칸이 숫자0으로 바뀌는 문제를 특히 확인하라.
오류 수정
실행 기록을 보고 실패한 항목만 고쳐라. [실패 입력], [기대 결과], [실제 결과], [현재 HTML]을 받는다. 원인을 설명하고 수정된 전체 HTML과 회귀 검사표를 제공하라. 인원·시간·비용의 의미와 단위를 바꾸지 마라. 미실행 검사는 통과라고 쓰지 마라. 개인정보 입력·서버 저장을 추가하지 마라.
확장
기본 검사를 통과한 계산기를 회의 시간 비교 수업으로 확장하라. 인원6·시간당비용30000원을 고정하고 45분과30분의 추정 비용 및 차이를 나란히 표시하라. 차이45000원은 시간 가정에 따른 추정치이며 실측 절감액으로 표현하지 마라. 연습문제 2개와 정답·단위 설명을 제공하고 회의 품질은 이 계산만으로 판단할 수 없다는 토론 질문을 넣어라.
직접 열어 볼 참조 코드
아래 코드는 이 글을 위해 별도로 만든 참조 구현입니다. 원영상의 코드를 복제한 것이 아니며, 다른 AI 모델에 같은 프롬프트를 넣은 결과가 항상 이 코드와 같다는 뜻도 아닙니다. 전체를 복사해 HTML 파일로 저장하세요.
완전한 HTML 코드 펼치기
<!doctype html><html lang="ko"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>회의 비용 검수 실습</title><style>body{max-width:680px;margin:40px auto;padding:24px;font:18px/1.8 sans-serif;background:#eef4f7;color:#15334a}label{display:block;margin:15px 0}input,button{font:inherit;padding:10px;border:1px solid #889dab;border-radius:8px}button{background:#126e74;color:white}output{display:block;padding:25px;background:white;margin-top:20px}small{display:block}</style><h1>회의 시간은 얼마일까요?</h1><p>가상 평균 시간당 비용으로 비교하는 학습용 계산기입니다. 실제 급여를 입력하지 마세요.</p><form id="costForm" novalidate><label>참석 인원 (명)<input id="people" type="number" min="1" max="1000" step="1" value="6" required></label><label>회의 시간 (분)<input id="minutes" type="number" min="0" max="1440" step="1" value="45" required></label><label>1인 시간당 비용 (원/시간)<input id="rate" type="number" min="0" max="10000000" step="1" value="30000" required></label><button>계산하기</button></form><output id="result" aria-live="polite">값을 입력한 뒤 계산하세요.</output><small>외부 전송·저장 기능 없음. 추정 인건비이며 회의 가치나 직원 성과를 뜻하지 않습니다.</small><script>
document.getElementById('costForm').addEventListener('submit',function(e){e.preventDefault();const ids=['people','minutes','rate'];const fields=ids.map(id=>document.getElementById(id));const out=document.getElementById('result');if(fields.some(f=>f.value.trim()===''||!f.checkValidity()||!Number.isFinite(Number(f.value)))){out.textContent='입력 오류: 빈칸 없이 범위에 맞는 정수를 입력하세요. 인원 1~1000, 시간 0~1440분, 시간당 비용 0~10000000원.';return;}const [n,m,r]=fields.map(f=>Number(f.value));const total=n*m/60*r;out.textContent='추정 비용 '+Math.round(total).toLocaleString('ko-KR')+'원 · '+n+'명 × '+m+'분 ÷ 60 × '+r.toLocaleString('ko-KR')+'원/시간';});</script></html>결과 확인
| 검사 입력 | 기대 결과 | 확인할 문제 |
|---|---|---|
| 6명·45분·30000원 | 135,000원 | 분→시간 환산 |
| 6명·30분·30000원 | 90,000원 | 시간 변경 반영 |
| 1명·1분·100원 | 2원 | 최종 반올림 |
| 시간 0분 | 0원 | 0과 빈칸 구분 |
| 시간 빈칸 | 입력 오류 | 빈칸을 0으로 처리하지 않음 |
| 인원 1.5명 / -1명 | 입력 오류 | 정수·하한 검사 |
2026-10-22 내부 브라우저에서 제공 참조 HTML을 실제 실행했습니다. 정상값 135,000원·90,000원·반올림 2원·0분 0원과 빈칸·1.5명·-1명 오류를 포함한 7가지 입력 검사를 모두 통과했습니다. 이는 이 참조 구현의 실행 결과이며, 외부 AI 제품별 동일 프롬프트 재현 검사는 미실행입니다.
오류 해결과 대체 방법
금액이 60배로 나오면 /60이 빠졌는지 봅니다. 빈칸이 0원으로 나오면 숫자 변환 전에 빈 문자열을 검사하도록 수정합니다. 오류 뒤 이전 금액이 남으면 결과 영역을 오류 메시지로 교체합니다. 입력 숫자가 맞아도 단위가 시간인지 분인지 확인하세요.
AI 계정이나 인터넷이 없어도 참조 HTML을 실행할 수 있습니다. 브라우저 실행이 어려우면 종이에 인원×분÷60×시간당 비용을 계산하거나 스프레드시트에서 =A2*B2/60*C2를 입력합니다. 가정과 결과를 함께 기록하는 기준은 같습니다.
연습과 평가
연습 1: 8명·20분·45000원일 때 기대값은 120000원입니다. 연습 2: 6명·30000원 조건에서 45분을 30분으로 바꾸면 차이는 45000원입니다. 두 경우 모두 실제 비용 절감 실적이 아닌 모형의 계산값입니다.
평가기준 4점: 단위와 가정 설명 1점, 정상·경계 입력 검사 1점, 오류 입력 차단 1점, 실패와 수정 기록 1점. 금액이 낮다는 이유만으로 회의가 더 좋다고 결론내리면 해석을 수정합니다.
출처·확인 범위
- 딩코의 AI 심야 아지트 — 바이브코딩 초기초 1편, 회의 비용 계산기 만들기. 게시일 2026-10-21. 2026-10-22 공개 RSS 제목·설명 확인. 영상 장면·자막·타임스탬프는 미확인입니다. 설명에 소개된 계산기 주제를 교육용 검수 활동으로 확장했습니다.
- MDN 숫자 입력 문서. min·max·step·required와 입력 검증 확인. 브라우저 입력 검증을 서버 보안 검증으로 대체할 수는 없습니다.
프롬프트·가상 데이터·도식·참조 코드는 자체 제작입니다. 원영상의 배포 자료는 채팅방 경유로 안내되어 공개 원문과 이용조건을 확인하지 못했으며 전재하지 않았습니다. 이 글은 신기능 출시 소식이 아니라 기존 웹 기술을 활용한 후속 실습입니다. 확인일: 2026-10-22.
댓글
댓글 쓰기