데모AI·문서
사이트에 한 줄로 붙는 AI 챗봇 위젯
챗봇 창의 대기·실패 안내와 근거 펼침을 볼 수 있고, 답이 실시간 AI인지 모의 응답인지 창에 표시됩니다.
ai-chat-widget-demo-158862-production.up.railway.app
열어 보시면 이런 걸 확인하실 수 있습니다
- 오른쪽 아래 말풍선을 누르면 예시 질문 3개와 실시간 AI·모의 응답 중 어느 쪽인지 안내가 나옵니다
- 답변 아래 [근거 1]을 누르면 근거가 된 교보재 단락이 펼쳐집니다(창 위쪽에 '고도화 미리보기'로 표시된 기능)
- [설치 안내]에서 [사이트 CSS 공격 켜기]를 눌러도 채팅 창 크기는 그대로입니다
- [응답 지연 재현] 뒤 질문을 보내면 12초 뒤 안내와 [다시 보내기]가 나오고 질문은 남습니다
만들면서 풀어야 했던 것
- 기존 사이트에 챗봇 창을 붙이면 사이트의 스타일 규칙이 창 안으로 스며들어 모양이 깨지기 쉽습니다. 창을 Shadow DOM 독립 영역으로 만들어 페이지에는 스크립트 한 줄만 더하게 했고, [사이트 CSS 공격 켜기]로 거친 스타일을 넣어도 창 크기와 글자 크기가 그대로인지 잰 값으로 비교해 보여 줍니다.
- AI 서비스의 키가 브라우저에 드러나면 안 됩니다. 질문은 같은 주소의 중계 서버로만 보내고 키는 그 서버에만 둡니다. 질문은 500자까지 쓸 수 있고, 중계 서버는 같은 접속지의 요청을 10분에 20번까지만 받으며, 키가 없거나 실시간 답변이 하루 300번에 닿았을 때만 표시를 바꿔 모의 응답으로 답합니다. 등록 시점의 공개 데모는 AI 키 없이 모의 응답으로 동작했습니다.
- 답이 늦거나 실패할 때 사용자가 할 일을 알아야 합니다. 12초 안에 답이 없거나 서버 오류·요청 횟수 초과가 생기면 이유를 한 줄로 알리고 쓴 질문을 입력창에 남긴 채 [다시 보내기]를 제공하며, 한글을 조합하는 중에 누른 Enter로는 보내지 않게 했습니다. 한글 조합 입력은 PC 크롬에 조합 입력 신호를 보내는 자동 검사로 확인했고, 휴대폰 실기기 키보드는 확인하지 않았습니다.
비슷한 걸 만들어 보고 싶으시다면
구간 견적으로 규모를 먼저 가늠해 보시거나, 조건을 적어 보내 주시면 범위를 정리해 회신드립니다.