바이브데일리에 질문 봇을 붙였어요, 질문 한 번에 약 12원

바이브데일리 메인 화면 오른쪽 아래에 로고 버튼이 생겼어요. 누르면 채팅 창이 열리고, 궁금한 걸 물으면 우리 기사 안에서 찾아서 답해줘요. 답 아래에는 근거로 쓴 기사가 붙어서 눌러서 바로 갈 수 있어요. 기사를 읽는 중에는 위쪽 메뉴의 물어보기를 누르면 돼요.

어제 쓴 API 정리 기사에 나온 내용을 그대로 우리 사이트에 써본 거예요. 만든 방법, 실제로 든 돈, 처음에 틀렸던 것까지 정리했어요.

어떻게 답하냐면

AI는 기사를 전부 읽지 않아요. 서버가 질문에 맞는 부분을 골라서 넘겨주면, 그것만 읽고 답해요.

그림의 예시는 실제로 "API 키는 어디에 둬야 안전해요?"를 물었을 때 찾아진 기사들이에요. 4개 중 근거가 된 건 하나뿐이라, 화면에는 그 하나만 붙어요. 지어내지 않게 하는 게 제일 중요했어요.

1–3단계에는 AI가 들어가지 않아요. 단어를 뽑고, 기사를 찾고, 부분을 고르는 건 전부 우리 앱(데이터베이스와 서버)이 해요. AI는 4단계에서 처음 등장해서, 골라준 자료를 읽고 답만 써요. 그래서 처음에 틀린 답이 나왔을 때도 AI 설정이 아니라 1–3단계를 고쳤어요.

이렇게 먼저 찾고, 찾은 걸 붙여서, AI가 답하게 하는 방식을 RAG(검색 증강 생성)라고 해요. 사내 문서 봇이나 고객센터 봇도 대부분 이 구조예요.

API 키는 이렇게 쓰여요

API 키는 Anthropic에 "이 요청은 바이브데일리가 보낸 거예요, 청구는 여기로 해주세요"라고 알려주는 출입증이에요. 그래서 키를 누가 쥐고 있느냐가 제일 중요해요.

1. 방문자가 질문을 보내면, 질문만 바이브데일리 서버로 가요. 화면에는 키가 없어요
2. 서버는 넣어둔 키를 꺼내고, 관련 기사를 찾아서 키 + 질문 + 기사를 Anthropic에 보내요
3. Anthropic은 키가 맞는지 확인하고 답을 써요. 이때 쓴 토큰만큼 키 주인에게 청구돼요
4. 서버는 받은 답만 화면에 보내요. 키는 끝까지 서버 밖으로 나가지 않아요

키를 화면 코드에 넣으면 브라우저에서 누구나 꺼내볼 수 있어요. 그 키로 남이 쓴 돈이 내 청구서로 와요. 그래서 키는 서버에만 둬요. 바이브데일리는 Vercel의 환경 변수(서버에만 보이는 설정값)에 넣어뒀어요.

Claude를 부르는 창구, Messages API

Anthropic은 Claude를 부를 수 있는 공식 창구를 열어두고 있어요. Messages API라고 해요. 서버가 키와 함께 "이 모델에게, 이 규칙으로, 이 내용을 물어봐줘"를 보내면, 답과 쓴 토큰 수가 돌아와요.

주소를 직접 부르지 않아도 되게, 언어별 공식 도구(SDK)도 있어요. 파이썬, 자바스크립트(TypeScript), 자바, Go 등이에요. 바이브데일리는 TypeScript용을 썼고, 실제로 Claude를 부르는 부분은 이게 전부예요.

import Anthropic
  from '@anthropic-ai/sdk';
 
// 키는 환경 변수에서 읽어요
const client = new Anthropic();
 
const res = await client.messages
  .create({
    model: 'claude-haiku-4-5',
    max_tokens: 700,
    system: '기사로만 답해요',
    messages: [{
      role: 'user',
      content: '기사 + 질문',
    }],
  });

돌아온 res.usage에 입력·출력 토큰 수가 들어 있어요. 이걸 기록해서 질문 한 번 값을 계산했어요.

• 같은 Claude를 Amazon Bedrock, Google Cloud, Microsoft Foundry에서도 부를 수 있어요. 이미 그 클라우드를 쓰는 회사가 청구를 한 곳으로 모으려고 많이 써요
• Claude Code를 구독으로 쓸 때는 이 키가 필요 없어요. 계정 로그인으로 쓰고, 값은 플랜 한도에서 빠져요. 내 사이트나 앱에서 Claude를 부를 때 API 키가 필요해요

모델은 Claude Haiku 4.5

Claude 모델 중 가장 싸고 빠른 모델이에요. 100만 토큰당 입력 1달러(약 1,400원), 출력 5달러(약 7,000원)예요. 어려운 판단이 아니라 기사에서 찾아 요약하는 일이라 이걸로 충분했어요.

직접 잰 값

오늘 실제 사이트에서 질문한 6번의 기록이에요.

입력이 출력보다 30배쯤 많아요. 답은 짧은데, 근거로 넘기는 기사 4개 분량이 대부분이에요.

제가 정가로 계산해보면 6번 합쳐 약 74원, 한 번에 평균 약 12원이에요. 5달러(약 7,000원)를 충전하면 500번 넘게 물어볼 수 있어요.

돈이 새지 않게 막아둔 것

API는 쓴 만큼 나가니까, 붙이기 전에 이것부터 정했어요.

• 키는 서버에만: API 키는 Vercel 환경 변수에 Secret으로 넣었어요. 화면 코드나 깃허브에는 없어요
• 충전식 + 자동 충전 끔: 5달러만 넣고 자동 충전은 껐어요. 다 쓰면 멈춰요
• 횟수 제한: 한 사람당 하루 5번, 사이트 전체 하루 300번이에요. 채팅 창과 물어보기 페이지에 오늘 남은 횟수가 보여요
• 찾은 기사가 없으면 AI를 안 불러요: 돈도 횟수도 안 써요
• 같은 질문은 저장한 답으로: 띄어쓰기·물음표만 다른 질문은 저장해둔 답을 바로 보여줘요. AI를 안 부르니 돈이 안 들고 횟수에도 안 세요

저장한 답은 7일이 지나거나 새 기사가 올라오면 버려요. 질문 원문은 저장하지 않고, 되돌릴 수 없게 바꾼 값(해시)만 키로 써요. 남이 가짜 답을 심지 못하게, 저장은 서버만 아는 비밀값이 맞을 때만 돼요.

처음엔 틀린 답을 했어요

"API 키는 어디에 둬야 안전해요?"라고 물었더니 "기사에서 다룬 적이 없어요"라고 답했어요. 그런데 어제 올린 API 정리 기사에 이 내용이 분명히 있어요.

AI는 기사를 전부 읽고 답하는 게 아니에요. 제가 골라서 넘겨준 부분만 읽고 답해요. 문제는 그 고르는 단계에 있었어요.

• 기사 앞부분만 넘겼어요. 긴 기사는 앞쪽 2,500자까지만 잘라서 넘겼는데, 키 이야기는 기사 뒤쪽에 있었어요. AI는 정말로 그 내용을 본 적이 없었던 거예요. 그래서 이제는 기사를 소제목별로 나누고, 질문과 관련 있는 부분을 골라서 넘겨요
• 상관없는 기사가 위로 올라왔어요. 질문에 붙은 "어디에" 때문이었어요. 아래에서 따로 풀어볼게요
• 안 쓴 기사도 참고 기사로 보여줬어요. 찾은 기사 4개를 전부 링크로 붙였더니 엉뚱한 글이 따라 나왔어요. 그래서 이제는 AI가 답할 때 실제로 쓴 기사만 보여줘요

우리 앱이 기사를 고르는 방법

질문을 단어로 쪼갠 다음, 각 단어가 기사에 나오면 점수를 줘요. 점수가 높은 기사 4개를 골라요.

• 제목에 나오면 3점
• 요약에 나오면 2점
• 본문에 나오면 1점

질문 "API 키는 어디에 둬야 안전해요?"를 쪼개면 API, 키는, 어디에, 둬야, 안전해요가 나와요. 그런데 영상 기사 제목이 "Sora가 끝났어요, 그럼 AI 영상은 어디서?"예요. "어디"가 겹쳐서 영상 기사가 제목 점수를 받아 위로 올라왔어요. API 키와는 아무 상관이 없는 기사인데요.

"어디", "어떻게", "뭐가" 같은 말은 어떤 질문에나 붙는 말이라 주제와 상관이 없어요. 그래서 이런 말은 점수 셀 때 빼기로 했어요. 영상 기사는 본문에 "API"가 나와서 지금도 4개 안에 들긴 하지만, 위로 올라오지 않고 근거로도 쓰이지 않아서 화면에는 붙지 않아요.

정리하면 AI가 틀린 게 아니라 제가 넘긴 자료가 부족했던 거예요. 이런 봇은 어떤 모델을 쓰느냐보다 무엇을 찾아서 넘기느냐가 답을 좌우해요.

짚어둘 것

• 값은 오늘 6번 잰 기록이에요. 질문과 찾은 기사에 따라 달라져요
• 저장한 답으로 나간 질문은 아직 없어서, 캐시로 얼마나 아끼는지는 쌓이면 다시 알려드릴게요
• 단어로 찾는 방식이라, 기사와 전혀 다른 말로 물으면 못 찾을 수 있어요
• 금액은 1달러 1,400원으로 계산한 제 계산이에요

메인 화면 오른쪽 아래 로고나, 위쪽 메뉴의 물어보기를 눌러보세요. 이상한 답이 나오면 카톡 오픈채팅 ⚡ AI랑 코딩하는 사람들에 알려주세요. 바로 고칠게요.