극초보 바이브코딩 #20 · HTML 파일 하나

학점 계산기 만들기

성적표를 보며 계산기를 두드리던 일을 페이지 하나로. 오늘의 핵심은 "학점만큼 무게를 주는 평균"과 소수 둘째 자리 반올림이에요.

바로 쓰기: 평균 평점 계산

과목학점성적
평균 평점
-
취득 학점
0
평점에 들어간 학점
0

목표 평점까지

환산표(4.5: A+ 4.5 · A0 4.0 · B+ 3.5 … / 4.3: A+ 4.3 · A0 4.0 · A- 3.7 …)와 P(통과)를 평균에서 빼는 규칙은 예시예요. 학교마다 다르니 학칙·성적 안내를 확인하세요. 성적은 이 브라우저 밖으로 보내지 않아요.

1AI에게 세 줄로 요청하기

성적표를 들고 평점이 몇 점인지 머리를 싸매던 학생이, 화면에 3.75가 자동으로 나오자 웃는 그림
HTML 파일 하나로, 학점 계산기 페이지를 만들어줘.
과목마다 학점과 성적(A+, A0, B+ 같은 것)을 고르면 전체 평균 평점이 나오게 해줘.
인터넷 연결이나 설치 없이 파일 하나로 동작하게 해줘.

과목 줄 늘리기, 4.5/4.3 만점, P·F 처리는 일부러 말하지 않았어요.

2연습장에서 실행하기

두 과목에 3학점 A+, 3학점 B+를 넣으면 4.00이 나와야 해요. 자동 검사는 성적 고르는 칸(A+가 들어 있는 선택 칸)과 학점 칸을 찾아 직접 넣어 봐요.

3미션: 평균은 "학점만큼", 검산은 손으로

  1. 기본: 평점이 나온다

    3학점 A+ + 3학점 B+ → 4.00 (4.5 만점 기준).

  2. 과목 추가·삭제 ⭐

    "과목을 마음대로 추가하고 삭제할 수 있게 해줘." 추가·삭제할 때마다 평점이 바로 바뀌는지, 전부 지우면 에러 대신 "-" 같은 안내가 나오는지 보세요.

  3. 학점만큼 무게, 손으로 검산 ⭐

    3학점 A+, 3학점 B+, 1학점 C0. (3×4.5 + 3×3.5 + 1×2.0) ÷ 7 = 3.71. 평점끼리 그냥 평균 내면 3.33으로 틀려요. "학점이 큰 과목이 평균에 더 크게 반영되도록 계산해줘."

  4. 우리 학교 표로 맞추기

    학교 환산표를 붙여넣고 "4.5와 4.3을 고르는 칸도 넣어줘". 자동 검사는 4.3을 골라 3학점 A+ + 3학점 B+가 3.80(A+ 4.3, B+ 3.3 예시표)인지 봐요.

  5. P(통과)는 내가 정한 규칙으로

    "P 과목은 평균에서 빼고, 취득 학점에는 더해줘." (학교 규정에 맞게 바꾸세요.) P를 넣어도 평점이 낮아지지 않는지 봐요.

  6. 소수 둘째 자리 반올림

    점수 합 53.5 ÷ 학점 20 = 2.675. 손으로는 2.68인데 2.67로 나오는 페이지가 있어요(실험 ②). 어떻게 할지 정해서 말해요.

  7. 자유

    목표 평점 역산, 과목 저장(#13), 학기별 그래프(#8), 결과 복사

안 될 때 확인할 것

증상원인과 해결
손계산과 값이 다르다평균 방식이나 환산표가 달라요. "학점만큼 반영하는지, 어떤 환산표를 쓰는지 말로 설명해줘"
소수 셋째 자리에서 한 끗 차이반올림 방식(실험 ②). "소수 셋째 자리에서 반올림(또는 버림)하도록 정해줘"
과목을 다 지우면 NaN0으로 나눴어요. "과목이 없으면 '-'로 보여줘"
P를 넣었더니 평점이 낮아진다P가 0점으로 들어갔어요. 미션 5
미션을 요청했더니 원래 기능이 사라졌다"기존 기능은 그대로 두고, 전체 코드를 처음부터 끝까지 줘"

실험 ①: 학기 평점끼리 평균 내면 틀려요

평점끼리 평균 내면 4.10으로 기울고, 학점만큼 무게를 주면 3.83으로 균형이 맞는 저울 그림

실험 ②: 2.675가 2.67로 나오는 이유

2.675를 손으로 반올림하면 2.68이지만 컴퓨터는 2.67로 보여 주는 그림

컴퓨터는 소수를 이진수로 저장해서 2.675가 안에서는 처럼 아주 조금 모자라요. 그래서 흔한 반올림 함수(toFixed(2))가 2.67을 내요. 이 브라우저가 계산한 값이에요.

블로그 원문: 극초보 바이브코딩 #20은 블로그에 곧 올라와요

이전 실습: #19 평수 변환기 · 다음: #21 연차 계산기 · 전체 실습 목록

자주 묻는 질문

평균 평점은 어떻게 계산하나요?

(학점 × 환산 점수)를 모두 더한 값을 학점 합계로 나눠요. 학점이 큰 과목이 더 크게 반영돼요.

4.5 만점을 4.3 만점으로 바꾸려면?

비율로 단순 환산하는 건 공식 방법이 아니에요. 같은 성적을 4.3 환산표로 다시 계산하거나, 학교·제출처의 환산 기준을 따르세요.