목요일 미니 프로젝트: AI 모델 비용 계산기 10분 컷

이번 주 내내 가격 얘기였잖아요 🧮

Kimi K3부터 GPT-5.6 3형제까지, 이번 주는 모델 가격 비교의 연속이었어요. 그럼 아예 **"토큰 수 넣으면 모델별 비용이 딱 나오는 계산기"**를 만들어버리면 편하겠죠? 오늘 목요일 미니 프로젝트입니다. HTML 파일 하나, 뼈대는 AI로 10분 컷이에요. (배포까지 하면 조금 더 걸리지만, 만드는 건 정말 금방입니다.)

👉 완성본 바로 써보기 — 아래 프롬프트로 만든 실제 계산기예요. 토큰 수 넣으면 바로 작동합니다.

1단계 — 뼈대 프롬프트

AI에게 이렇게 던지세요. 포인트는 "단일 HTML + 라이브러리 금지" — 이게 없으면 프로젝트를 거대하게 만들어버려요:

단일 HTML 파일로 'AI 모델 비용 계산기'를 만들어줘.
- 입력: 입력 토큰 수, 출력 토큰 수 (숫자 입력창)
- 모델별 단가를 배열로 넣고, 각 모델의 예상 비용을 표로 출력
- 가장 싼 모델을 초록색으로 강조
- 모바일 우선, 다크 테마, 외부 라이브러리 금지

2단계 — 핵심 계산 로직

비용 공식은 간단해요 — (토큰 ÷ 100만) × 단가를 입력·출력 각각 구해서 더하면 끝. AI가 짜준 코드의 심장부는 이렇게 생겼습니다:

// 이번 주 다룬 모델들의 100만 토큰당 단가 ($) — 입력/출력
const MODELS = [
  { name: "Claude Fable 5",  in: 10,   out: 50 },  // 최상위 플래그십
  { name: "GPT-5.6 Sol",     in: 5,    out: 30 },
  { name: "Kimi K3",         in: 3,    out: 15 },  // 중국 오픈 모델
  { name: "GPT-5.6 Terra",   in: 2.5,  out: 15 },
  { name: "Grok 4.5",        in: 2,    out: 6  },  // 가장 저렴
];
 
// 토큰 수 → 실제 비용 계산 (핵심 한 줄)
function cost(model, inTokens, outTokens) {
  return (inTokens / 1_000_000) * model.in       // 입력 비용
       + (outTokens / 1_000_000) * model.out;    // 출력 비용
}
// 예: 입력 50만 + 출력 10만 토큰을 Grok에 → 약 $1.6

숫자만 바꿔 넣으면 "내 작업이 모델별로 얼마"인지 바로 나와요. 티어 나누기 판단할 때 이만한 게 없죠.

3단계 — 내 것으로 + 배포

"환율 적용해서 원화도 보여줘", "월 사용량 넣으면 한 달 예상 요금 계산" 같은 걸 한 줄씩 추가하면 실전 도구가 됩니다. 파일 하나라 Vercel·Netlify에 드래그하면 바로 링크가 나와요.

그런데 토큰, 실제론 어떻게 쓰여요?

계산기에 숫자를 넣기 전에, 토큰이 어디서 나가는지 알면 훨씬 정확해요.

• 입력 토큰 = 내 질문 + 첨부한 코드·문서 + (눈에 안 보이는) 시스템 지시문까지 전부
• 출력 토큰 = AI가 생성한 답변 전체 (코드·설명 다 포함)

같은 뜻이라도 한글이 토큰을 더 써요. 모델의 토크나이저마다 다르지만 대략 이런 식이에요:

글자 수는 비슷하거나 오히려 한글이 적은데 토큰은 몇 배죠? 영어는 흔한 단어를 통째로 1토큰으로 처리하는데, 한글은 글자·자모 단위로 잘게 쪼개지기 때문이에요. 한국어로 길게 쓰면 영어보다 요금이 더 나오는 이유입니다. (비용 아끼려고 프롬프트를 영어로 쓰는 사람도 있어요.)

가장 많이 놓치는 함정은 대화가 길어질수록 비싸진다는 거예요. AI는 기본적으로 기억이 없어서, 대화를 이어가면 지금까지의 전체 대화를 매번 통째로 다시 입력으로 넣습니다. 그림으로 보면:

1번째 질문:  [질문1]                     → 입력 100토큰
2번째 질문:  [질문1 + 답변1 + 질문2]      → 입력 400토큰
3번째 질문:  [질문1~답변2 + 질문3]        → 입력 900토큰   ← 점점 커짐!

그래서 긴 대화방은 뒤로 갈수록 한 마디 물어볼 때마다 요금이 커져요. 절약 팁 두 개:

• 주제가 바뀌면 새 대화로 시작 (쌓인 맥락을 리셋)
• 필요 없어진 긴 코드·문서 첨부는 빼기

이걸 알고 나면 계산기의 '입력 토큰'에 왜 생각보다 큰 숫자를 넣게 되는지 감이 올 거예요.

이 미니 프로젝트에서 배우는 것

• 데이터(단가 배열)와 화면(표)을 분리하는 감각
• 제약 조건으로 AI 결과물 크기를 통제하는 법
• 만들기 → 배포 → 공유 한 사이클 완주

만드신 분은 계산기 링크를 방에 공유해주세요. 제일 예쁘게 뽑은 분 다음 주에 소개할게요 🧮⚡