회사 웹사이트의 대부분의 채팅 버블은 말풍선과 함께 있는 FAQ 페이지입니다. 이들은 키워드와 일치하는 답변을 보여주고, 양식을 작성하도록 유도할 뿐입니다.
웹사이트 AI 에이전트는 다릅니다. 방문자가 실제로 무엇을 요청했는지 읽고, 답변하며, 훌륭한 영업 사원이 할 법한 질문들을 던지고, 방문자가 적합하다고 판단되면 바로 달력에 통화 예약을 잡습니다. 제가 Claude를 사용하여 구축하는 방법과 실행할 수 있는 코드를 소개합니다.
웹사이트 AI 에이전트란 무엇인가?
웹사이트 AI 에이전트는 세 가지 요소를 가진 언어 모델입니다: 명확한 목표, 소수의 도구(tool) 집합, 그리고 수행 가능한 규칙들. 목표는 보통 방문자가 귀사의 서비스에 적합한지 알아내는 것입니다. 도구는 사용자의 달력과 CRM 시스템입니다. 규칙은 이것을 부채가 아닌 동료처럼 보이게 만듭니다.
아키텍처
단순하게 유지하세요. 브라우저는 모델과 직접 대화하지 않습니다.
- 사이트의 채팅 위젯이 방문자의 메시지를 자체 백엔드로 전송합니다.
- 백엔드는 API 키, 대화 기록, 그리고 도구들을 보유합니다.
- 백엔드가 Claude API를 호출합니다. Claude가 도구를 요청하면, 코드가 달력이나 CRM에 대해 실행되고 그 결과를 다시 보냅니다.
- 최종 텍스트는 위젯으로 돌아갑니다.
API 키는 절대 브라우저에 노출되지 않습니다. 사용자의 달력이나 CRM 자격 증명(credentials)도 마찬가지입니다.
시스템 프롬프트는 짧은 규칙서이다
프롬프트는 목표를 명시하고, 적합한 고객의 기준을 설명하며, 규칙들을 나열합니다. 길고 모호한 것보다 짧고 구체적인 것이 효과적입니다.
SYSTEM = """You are the website agent for Northwind Studio, a design agency.
Your goal: help visitors, and book a call with the ones who fit.
...
두 가지 규칙이 보이는 것보다 더 중요합니다. '먼저 답변하기(Answer first)'는 에이전트가 사람들을 심문하는 것을 막아줍니다. '한 번에 한 질문 하기(One question at a time)'는 이것을 양식이 아니라 대화처럼 느끼게 합니다.
두 가지 도구: 사용 가능 여부 확인, 미팅 예약
Python SDK의 @beta_tool 데코레이터는 타입이 지정된 함수를 도구로 변환합니다. 스키마(schema)는 시그니처와 문서 문자열(docstring)에서 가져옵니다. strict=True는 Claude가 도구 입력을 스키마에 정확히 일치시키도록 합니다.
import json
import anthropic
...
```}{
`calendar`와 `crm`은 사용자가 사용하는 것(예: Google Calendar 및 HubSpot)을 감싸는 자체 얇은 래퍼입니다. `summary` 인수는 영업 사원들이 좋아하는 부분인데, 그들은 이미 누구와 왜 통화하는지 알고 미팅에 임할 수 있기 때문입니다.
## 루프 (The loop)
SDK의 도구 실행기(tool runner)가 주고받는 과정을 처리합니다. Claude가 도구를 요청하면, 실행기가 사용자의 함수를 호출하고, 그 결과를 다시 보내며, Claude가 최종 답변을 얻을 때까지 반복합니다.
def reply(history: list[dict], tools) -> str:
"""Run one visitor turn. history holds plain user and assistant text turns."""
runner = client.beta.messages.tool_runner(...)
웹 핸들러는 방문자의 메시지를 `user` 턴으로 `history`에 추가하고, `reply`를 호출한 다음, 텍스트를 반환합니다. 대화당 하나의 `history`와 하나의 `make_tools(...)`를 유지하세요.
사용량에 맞는 모델을 선택하세요. 트래픽이 많은 웹사이트 채팅은 Sonnet과 같은 작고 저렴한 모델로 실행될 수 있습니다. 선택하기 전에 동일한 질문 세트를 두 모델 모두에서 테스트해 보세요.
도구 실행기는 Python SDK에서 베타 버전이므로, SDK 버전을 고정하고 업그레이드하기 전에 변경 로그(changelog)를 읽으세요.
## 코드로 지켜야 할 규칙을 넣기 (Put the rules that must hold in code)
프롬프트는 에이전트를 안내합니다. 하지만 아무것도 보장하지 않습니다. 방문자의 텍스트는 신뢰할 수 없는 입력이며, 조만간 누군가
- **제공 가능한 슬롯만 예약 가능.** `book_meeting`은 해당 대화에서 `check_availability`가 반환한 슬롯과 비교하여 확인합니다. 임의로 만든 시간은 예약을 할 수 없고 오류를 반환합니다.
- **도구는 에이전트가 필요한 것만 수행할 수 있습니다.** CRM 래퍼(wrapper)에 연락처를 생성하고 업데이트할 권한만 부여하고, 다른 것은 아무것도 주지 마세요. 삭제, 내보내기, 다른 기록 읽기는 안 됩니다.
- **루프에 대한 하드 제한을 설정하세요.** `max_iterations`는 한 턴당 도구 라운드를 제한합니다. 엔드포인트(endpoint)에서 IP별 및 대화별 속도 제한을 추가하고, 첫 메시지 전에 봇 검사를 수행하세요.
- **가격은 하나의 출처에서 나와야 합니다.** `<pricing>` 블록을 가격 페이지와 동일한 소스에서 생성하여 두 정보가 어긋나지 않도록 하세요.
[](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fn0gfdd39y6mghd2hh0bj.jpg)
일반적인 규칙: 만약 어떤 규칙을 어기는 것이 돈, 신뢰 또는 GDPR 위반 신고로 이어진다면, 프롬프트만으로는 충분하지 않습니다.
## 실제 질문으로 테스트한 후 라이브에 배포하세요
사서함과 영업 통화에서 실제로 받은 질문 30~50개를 수집하세요. 어색했던 질문들도 포함해야 합니다: 단순히 가격만 알고 싶은 방문자, 적합하지 않은 학생, 자신이 봇과 대화하는지 묻는 사람, 할인을 받으려고 하는 사람.
이 모든 것을 실행해 보고 모든 기록을 읽어보세요. 네 가지를 확인하세요:
1. 질문받기 전에 답변했습니까?
2. 프롬프트에 없는 가격, 할인 또는 날짜를 언급한 적이 있습니까?
3. 방문자가 시간을 선택했을 때만 예약을 했습니까?
4. 추측하는 대신
- AI 에이전트이며 누가 운영하는지 처음에 언급하세요.
- 예약에 필요한 정보만 수집하세요.
- 모델 제공업체를 포함하여 체인 내 모든 공급업체와 데이터 처리 계약(data processing agreement)을 체결하세요.
- 녹취록(transcript)을 얼마나 오래 보관할지 결정하고, 그 기간이 지나면 삭제하세요.
- 녹취록을 분석 도구에 넣지 마세요.
이는 법적 조언이 아닙니다. 회사에서 개인 정보 보호를 담당하는 사람과 확인하세요.
## 직접 구축하거나 맡기기
위의 모든 내용은 스스로 작동하는 에이전트를 구축하기에 충분합니다. 어려운 부분은 거의 코드가 아니라, 규칙서(rulebook), 테스트 세트(test set) 그리고 주간 학습입니다.
만약 직접 구축하고 본인 질문으로 테스트하는 것보다 맡기는 것을 선호한다면, 저는 [Claude를 이용한 웹사이트 AI 에이전트](https://brinvik.com/en/services/website-ai-agent)를 귀하의 CRM 및 캘린더에 연결하여 구축해 드립니다.
_Kim Olsen, Copenhagen._
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47