08. 예산 집행률 계산기 완성하기

01. 만들기 전에 인수 기준을 적습니다

이번 결과물은 한 부서의 예산 집행률을 확인하는 작은 화면입니다. 가상의 숫자를 넣어 수식과 조건을 익히는 교육용 도구입니다. 만원 단위의 안전한 정수를 입력하며, 예산은 0보다 크고 지출은 0 이상입니다. 누락·비숫자·음수·소수는 계산하지 않고 이유를 안내합니다. 집행률은 지출÷예산×100, 상태는 80% 미만 정상·80% 이상 100% 미만 주의·100% 이상 초과입니다.

화면에는 소수점 한 자리 비율과 상태를 함께 표시합니다. 판정에는 반올림 전 원래 값을 씁니다. 표시 때문에 상태가 헷갈리는 경우 원래 비율도 함께 안내합니다. 예산10000·지출7996은 실제79.96%여서 ‘정상’이지만 한 자리 표시가80.0%가 될 수 있습니다. 경계 근처의 표시 규칙도 요구사항입니다.

02. 제공된 틀에서 세 줄을 완성합니다

1. 학생용 시작 파일을 엽니다. 입력 검증과 화면 구조는 이미 준비되어 있습니다.
2. 첫 입력칸의 0을 (spent / budget) * 100으로 바꿉니다.
3. 초과 조건과 주의 조건의 false를 알맞은 비교식으로 바꿉니다.
4. ‘작성한 규칙 시험하기’를 누르고 예산100·지출80을 시험합니다.
5. 수정 내용을 ‘적용한 계산기 HTML 내려받기’로 저장합니다. 소스 편집이 가능한 환경에서는 HTML의 TODO 세 줄을 직접 수정해 다시 열어도 됩니다.

이 활동은 모든 HTML을 처음부터 타이핑하는 시험이 아닙니다. 수식·조건·검증을 설명하고 실제 결과로 확인하는 것이 목표입니다. 회사에서 다운로드가 제한되면 입력칸에서 동작을 확인하고 워크시트에 세 줄과 검증 결과를 적습니다.

function getStatus(rate) {
  if (rate >= 100) return "초과";
  if (rate >= 80) return "주의";
  return "정상";
}
console.log(getStatus(79));
console.log(getStatus(80));
console.log(getStatus(100));

정상
주의
초과

const budget = 10000;
const spent = 7996;
const rate = (spent / budget) * 100;
console.log(rate);
console.log(rate.toFixed(1));
console.log(rate >= 80);

79.96
80.0
false

03. 검증표로 확인합니다

먼저 예상 결과를 쓰고, 그다음 화면에 입력해 실제 결과를 비교합니다. W08-B에서는 일반50%, 경계80%, 경계100%, 예산0, 지출빈칸, 지출abc의 여섯 사례가 필수입니다. 나머지는 시간이 되면 추가합니다. 검증표에서 ‘소수’는 최종 계산기가 정수 입력만 허용한다는 업무 규칙을 확인하는 사례입니다.

04. 차이를 발견하면 재현 가능한 설명을 남깁니다

“안 돼요” 대신 “starter.html에서 예산100, 지출100을 넣고 계산을 누르면 ‘주의’가 나옵니다. 예상은 ‘초과’입니다. 100 이상 조건이 먼저인지 확인해 주세요”라고 적습니다. 파일 이름, 실행 단계, 입력값, 예상, 실제 결과가 있으면 강사나 개발자가 같은 문제를 확인할 수 있습니다. 고친 뒤에는 이전에 통과한 사례도 다시 시험합니다.

05. AI와 협업할 때도 같은 기준을 씁니다

AI에게 도움을 받을 때는 업무 규칙, 입력 범위, 원하는 출력, 검증 사례를 함께 줍니다. “집행률 계산기를 만들어 줘”보다 “만원 정수, 예산>0·지출≥0, 80·100 경계를 포함, 누락은 오류 안내, 100/80은 주의여야 한다”가 더 검토하기 쉽습니다. 회사 데이터 대신 이 교재의 가상 자료를 씁니다. 생성된 코드를 실행하기 전에 어느 입력을 읽고 어떤 자료를 보내는지 확인하고, 테스트 표로 결과를 검증합니다.