학점 계산기 만들기
성적표를 보며 계산기를 두드리던 일을 페이지 하나로. 오늘의 핵심은 "학점만큼 무게를 주는 평균"과 소수 둘째 자리 반올림이에요.
바로 쓰기: 평균 평점 계산
| 과목 | 학점 | 성적 |
|---|
목표 평점까지
환산표(4.5: A+ 4.5 · A0 4.0 · B+ 3.5 … / 4.3: A+ 4.3 · A0 4.0 · A- 3.7 …)와 P(통과)를 평균에서 빼는 규칙은 예시예요. 학교마다 다르니 학칙·성적 안내를 확인하세요. 성적은 이 브라우저 밖으로 보내지 않아요.
1AI에게 세 줄로 요청하기
HTML 파일 하나로, 학점 계산기 페이지를 만들어줘. 과목마다 학점과 성적(A+, A0, B+ 같은 것)을 고르면 전체 평균 평점이 나오게 해줘. 인터넷 연결이나 설치 없이 파일 하나로 동작하게 해줘.
과목 줄 늘리기, 4.5/4.3 만점, P·F 처리는 일부러 말하지 않았어요.
2연습장에서 실행하기
두 과목에 3학점 A+, 3학점 B+를 넣으면 4.00이 나와야 해요. 자동 검사는 성적 고르는 칸(A+가 들어 있는 선택 칸)과 학점 칸을 찾아 직접 넣어 봐요.
3미션: 평균은 "학점만큼", 검산은 손으로
- 기본: 평점이 나온다
3학점 A+ + 3학점 B+ → 4.00 (4.5 만점 기준).
- 과목 추가·삭제 ⭐
"과목을 마음대로 추가하고 삭제할 수 있게 해줘." 추가·삭제할 때마다 평점이 바로 바뀌는지, 전부 지우면 에러 대신 "-" 같은 안내가 나오는지 보세요.
- 학점만큼 무게, 손으로 검산 ⭐
3학점 A+, 3학점 B+, 1학점 C0. (3×4.5 + 3×3.5 + 1×2.0) ÷ 7 = 3.71. 평점끼리 그냥 평균 내면 3.33으로 틀려요. "학점이 큰 과목이 평균에 더 크게 반영되도록 계산해줘."
- 우리 학교 표로 맞추기
학교 환산표를 붙여넣고 "4.5와 4.3을 고르는 칸도 넣어줘". 자동 검사는 4.3을 골라 3학점 A+ + 3학점 B+가 3.80(A+ 4.3, B+ 3.3 예시표)인지 봐요.
- P(통과)는 내가 정한 규칙으로
"P 과목은 평균에서 빼고, 취득 학점에는 더해줘." (학교 규정에 맞게 바꾸세요.) P를 넣어도 평점이 낮아지지 않는지 봐요.
- 소수 둘째 자리 반올림
점수 합 53.5 ÷ 학점 20 = 2.675. 손으로는 2.68인데 2.67로 나오는 페이지가 있어요(실험 ②). 어떻게 할지 정해서 말해요.
- 자유
안 될 때 확인할 것
| 증상 | 원인과 해결 |
|---|---|
| 손계산과 값이 다르다 | 평균 방식이나 환산표가 달라요. "학점만큼 반영하는지, 어떤 환산표를 쓰는지 말로 설명해줘" |
| 소수 셋째 자리에서 한 끗 차이 | 반올림 방식(실험 ②). "소수 셋째 자리에서 반올림(또는 버림)하도록 정해줘" |
| 과목을 다 지우면 NaN | 0으로 나눴어요. "과목이 없으면 '-'로 보여줘" |
| P를 넣었더니 평점이 낮아진다 | P가 0점으로 들어갔어요. 미션 5 |
| 미션을 요청했더니 원래 기능이 사라졌다 | "기존 기능은 그대로 두고, 전체 코드를 처음부터 끝까지 줘" |
실험 ①: 학기 평점끼리 평균 내면 틀려요
실험 ②: 2.675가 2.67로 나오는 이유
컴퓨터는 소수를 이진수로 저장해서 2.675가 안에서는 처럼 아주 조금 모자라요. 그래서 흔한 반올림 함수(toFixed(2))가 2.67을 내요. 이 브라우저가 계산한 값이에요.
블로그 원문: 극초보 바이브코딩 #20은 블로그에 곧 올라와요
이전 실습: #19 평수 변환기 · 다음: #21 연차 계산기 · 전체 실습 목록
자주 묻는 질문
평균 평점은 어떻게 계산하나요?
(학점 × 환산 점수)를 모두 더한 값을 학점 합계로 나눠요. 학점이 큰 과목이 더 크게 반영돼요.
4.5 만점을 4.3 만점으로 바꾸려면?
비율로 단순 환산하는 건 공식 방법이 아니에요. 같은 성적을 4.3 환산표로 다시 계산하거나, 학교·제출처의 환산 기준을 따르세요.