홈페이지에 AI 챗봇 만드는 법 — Netlify Functions로 뚝딱이 구현하기

💬 홈페이지에 진짜 AI가 대화한다

홈페이지 오른쪽 아래에 붙어있는 챗봇 버튼을 눌러봤는가. "안녕하세요! 저는 뚝딱닷컴 AI 도우미 뚝딱이예요 🤖"라고 인사를 건네는 저 녀석은 흉내가 아니다. 진짜 Anthropic의 Claude AI와 실시간으로 연결되어 대화하는 챗봇이다.

코드 한 줄 없이 AI로 만든 사이트에, AI가 대화하는 챗봇까지 달았다. 개발자 없이, 한 시간 만에. 어떻게 가능했는지 그 방법을 그대로 공개한다.

💡

이미 Netlify로 사이트를 운영 중인 분들께 최적화된 방법이에요. 아직 사이트가 없다면 뚝딱닷컴 교재에서 먼저 만들어 오세요.

⚙️ 어떻게 작동하나?

구조는 단순하다. 사용자가 챗봇에 메시지를 입력하면, 그 내용이 Netlify Functions(서버리스 함수)로 전달되고, Functions가 Anthropic API를 호출해 응답을 받아와서 다시 사용자에게 돌려준다.

👤

사용자
메시지 입력

→

🌐

index.html
챗봇 UI

→

⚡

Netlify
Functions

→

🤖

Anthropic
API

→

💬

AI 응답
반환

핵심은 API 키가 절대 외부에 노출되지 않는다는 점이다. 브라우저에서 직접 Anthropic API를 호출하면 API 키가 소스 코드에 드러나서 누구나 훔쳐볼 수 있다. Netlify Functions는 서버 환경에서만 실행되기 때문에, API 키는 서버 안에만 머문다.

⚠️

API 키를 HTML이나 JavaScript 파일에 직접 적으면 절대 안 된다. 소스 보기를 하면 누구든 키를 볼 수 있고, 그 키로 무제한 API를 호출해 내 돈을 쓸 수 있다.

📦 준비물

세 가지면 충분하다.

Anthropic API 키 — console.anthropic.com에서 $5 크레딧 구매 후 발급. 기간 제한 없이 크레딧 소진될 때까지 사용 가능.
Netlify 계정 — 이미 사이트를 운영 중이라면 그 계정 그대로 사용.
운영 중인 사이트 — index.html이 Netlify에 배포된 상태면 OK.

🪜 만드는 순서

다섯 단계로 끝난다. AI한테 코드를 부탁하면 직접 짤 것도 거의 없다.

netlify/functions/chat.js 파일 생성 프로젝트 폴더 안에 netlify/functions 폴더를 만들고, 그 안에 chat.js 파일을 생성한다. 이 파일이 서버 역할을 한다.

Anthropic API 호출 코드 작성 AI에게 "Netlify Functions로 Anthropic API 연동 챗봇 chat.js 만들어줘"라고 하면 된다. 모델은 claude-haiku-4-5로 지정하면 빠르고 저렴하다.

index.html에 챗봇 UI 추가 채팅창, 입력창, 전송 버튼 HTML과 CSS를 추가한다. AI한테 "챗봇 UI 만들어줘, /.netlify/functions/chat으로 fetch 연결해줘"라고 하면 코드가 나온다.

Netlify 환경변수에 API 키 등록 Netlify 대시보드 → Project configuration → Environment variables에서 ANTHROPIC_API_KEY를 등록한다. 코드에는 절대 직접 넣지 않는다.

배포 Claude Code 터미널에서 netlify deploy --prod 명령어로 배포하면 끝. 챗봇이 실제로 동작하는지 확인한다.

🤖

AI에게 "Netlify Functions로 Anthropic API 연동 챗봇 만들어줘"라고 요청하면 chat.js 코드 전체를 작성해준다. 준비물과 원하는 챗봇 성격(시스템 프롬프트)을 함께 설명해주면 더 정확하다.

🔑 API 키 발급 방법

Anthropic API 키는 console.anthropic.com에서 발급받는다. 가입 후 바로 사용할 수 있는 것은 아니고, 크레딧을 먼저 구매해야 한다.

console.anthropic.com 접속 Anthropic 콘솔 페이지에 접속해서 계정을 만들거나 로그인한다.

크레딧 구매 Billing 메뉴에서 크레딧을 구매한다. 최소 $5부터 가능하다. 개인 챗봇 수준이면 몇 달은 거뜬히 쓸 수 있는 양이다.

API Keys에서 키 발급 왼쪽 메뉴의 API Keys를 클릭 → Create Key 버튼 → 이름을 정하고 생성. 키는 처음 한 번만 보이므로 반드시 복사해둔다.

💡

크레딧은 기간 제한 없이 소진될 때까지 사용 가능하다. 월정액이 아니라 사용한 만큼만 차감되는 방식이라 소규모 챗봇에 부담이 없다.

🔒 환경변수 등록 — API 키는 여기에만

API 키를 코드에 직접 넣으면 안 된다고 했다. 그렇다면 어디에 넣어야 할까. Netlify 환경변수에 등록하면 된다. 이 값은 서버 환경에서만 읽히고, 배포된 HTML이나 JavaScript 파일 어디에도 노출되지 않는다.

chat.js 환경변수 참조 방식
const apiKey = process.env.ANTHROPIC_API_KEY;

등록 경로는 다음과 같다.

Netlify 대시보드 접속 app.netlify.com에서 내 사이트를 선택한다.

Project configuration → Environment variables 상단 메뉴에서 Project configuration을 클릭하고 왼쪽 사이드바에서 Environment variables를 찾는다.

ANTHROPIC_API_KEY 등록 Add a variable 버튼 → Key: ANTHROPIC_API_KEY, Value: 복사해둔 API 키 입력 → Save. 배포하면 바로 적용된다.

⚠️ 주의할 점

챗봇을 만들 때 알아두면 좋은 것들이 있다.

API 키 절대 하드코딩 금지

chat.js나 index.html 안에 API 키를 직접 적으면 안 된다. GitHub에 올리거나 Netlify에 배포하는 순간, 인터넷 전체에 키가 공개된다. 반드시 환경변수로만 처리해야 한다.

모델 선택 — claude-haiku가 정답

Anthropic에는 여러 모델이 있지만 챗봇용으로는 claude-haiku-4-5가 가장 적합하다. 응답이 빠르고 비용이 저렴하다. Opus나 Sonnet은 챗봇 용도에 비해 과하다.

권장 모델 설정
model: 'claude-haiku-4-5'

대화 길이 제한

대화가 길어질수록 API 호출 비용이 늘어난다. 뚝딱이는 최근 10개 메시지만 기억하도록 제한했다. 이 설정이 없으면 대화가 쌓일수록 비용이 기하급수적으로 늘 수 있다.

✅ 마무리 — 성격을 부여하면 진짜 내 챗봇이 된다

기술적인 연결이 끝났다면, 마지막 단계는 시스템 프롬프트다. chat.js 안에 system 역할의 메시지를 넣어두면 챗봇의 성격, 말투, 역할을 정할 수 있다.

시스템 프롬프트 예시
system: '당신은 뚝딱닷컴의 AI 도우미 뚝딱이입니다. 코딩 없이 AI로 홈페이지 만드는 법을 친절하게 안내합니다.'

뚝딱닷컴의 뚝딱이도 이렇게 탄생했다. 이름을 정하고, 사이트의 목적에 맞는 역할을 프롬프트로 써넣으면 단순한 AI 챗봇이 아니라 내 사이트만을 위한 전용 도우미가 된다.

전체 과정은 뚝딱닷컴 교재에서 코드와 함께 상세하게 다루고 있다. chat.js 전체 코드, 챗봇 UI HTML, 환경변수 설정까지 한 번에 따라할 수 있다.

이 글이 도움이 됐나요?

챗봇 코드 전체와 단계별 실습이 담긴 교재가 무료로 제공되고 있어요.

📖 뚝딱닷컴 교재 전체 보기