페이지를 떠나지 않고 묻는다: codezip.kr 플로팅 AI 상담 창 구현기

오른쪽 아래 동그란 버튼 하나. 그 버튼이 제대로 대답하기까지의 기록입니다.

플로팅 버튼이란

'플로팅(floating)'은 말 그대로 화면 위에 떠 있다는 뜻입니다. 스크롤을 내려도 같은 자리에 그대로 있는 버튼이죠. 쇼핑몰 오른쪽 아래의 상담 아이콘이나 앱의 '+' 버튼을 떠올리면 됩니다.

이런 버튼이 흔한 이유는 간단합니다. 보던 페이지를 떠나지 않고 언제든 누를 수 있고, 누르기 전까지는 본문을 거의 가리지 않기 때문입니다. 궁금한 게 생긴 바로 그 순간, 바로 그 자리에서 물어볼 수 있다는 것. 플로팅 버튼의 가치는 여기에 있습니다.

codezip.kr에서는 이렇게 생겼습니다

codezip.kr 화면 오른쪽 아래를 보면 지름 56픽셀짜리 동그란 버튼이 있습니다(관리자 페이지 등 일부 화면에서는 나타나지 않습니다). 누르면 'CodeZip AI 상담' 창이 열립니다.

• 자주 묻는 질문 버튼(예: "엑셀 재고 가져올 수 있나요?")을 누르거나 직접 질문을 입력할 수 있습니다.
• 담당자 연결을 누르면 이름, 이메일, 연락처, 요청 요약을 적어 대화 내용과 함께 문의를 접수할 수 있습니다.
• 대화 초기화 버튼과 문의 폼 링크도 있습니다.
• 창의 왼쪽 위 모서리를 끌면 크기를 바꿀 수 있고, 바꾼 크기는 브라우저가 기억합니다. 크게 보기 버튼도 있습니다.

참고로 사이트에 있는 카카오톡 상담 버튼, ZeroZip 페이지 하단의 고정 버튼은 이 AI 상담 창과는 별개입니다.

똑똑함보다 정확함: 답은 어디서 오나

AI 상담에서 가장 무서운 건 그럴듯하게 틀린 답입니다. 그래서 코드집의 AI 상담은 AI가 원래 알고 있던 지식이 아니라 사이트에 직접 정리해 둔 제품 정보와 FAQ 카드를 바탕으로 답합니다.

1. 질문이 기존 FAQ와 거의 같으면, AI를 부르지 않고 저장된 답을 바로 보여 줍니다.
2. 비슷한 FAQ가 있으면, 관련 카드 3개를 AI에게 참고 자료로 넘겨서 답하게 합니다.

AI 모델로는 구글 Gemini를 씁니다. 상담 기록(질문, 답변, 참고한 출처 등)은 관리자 화면에서 확인할 수 있고, 90일이 지나면 자동으로 삭제됩니다. 상담 창에도 "상담 내용은 품질 개선을 위해 90일간 보관됩니다"라는 안내가 적혀 있습니다.

시행착오 일지

• 9월 24일: 점검해 보니 자주 묻는 질문 버튼은 잘 됐는데, 직접 입력한 질문에는 오류가 났습니다. 원인은 AI 연결 키가 설정되지 않았던 것이었습니다.
• 9월 25일: 여러 AI를 중계해 주는 서비스의 키를 넣었습니다. 하지만 결과를 확인하기 전에 방향을 바꿔 Gemini에 직접 연결하기로 했습니다.
• 9월 26일: 새 버전을 배포한 뒤, 직접 입력한 질문에도 답이 나오는 것을 확인했습니다.

화려한 이야기는 아닙니다. 하지만 "버튼만 있는 상담 창"과 "대답하는 상담 창"은, 버튼을 누르는 사람에게는 완전히 다른 물건입니다.

무엇이 달라졌나

아직 수치로 보여 드릴 수 있는 건 없습니다. [확인 필요: 이용률, 문의 전환 효과] 기능으로 보면 차이는 분명합니다. 전에는 준비된 FAQ 질문에만 답할 수 있었습니다. 지금은 자유롭게 입력한 질문에도 답하고, 필요하면 그 자리에서 담당자 연결까지 접수할 수 있습니다.

[확인 필요: 플로팅 상담 버튼을 처음 도입한 시기와 계기]

마치며

좋은 상담 창은 고객을 붙잡지 않습니다. 고객이 필요할 때 늘 거기 있을 뿐이죠. 지금 codezip.kr에 들어가서 오른쪽 아래 동그란 버튼을 눌러 보세요. ZeroZip에 대해 궁금했던 것 하나만 물어보셔도 충분합니다. 사람의 답이 필요하면 그 자리에서 담당자 연결을 누르시면 됩니다.