개요

NCP CLOVA Chatbot API를 활용하여 챗봇 기능을 구현했다. 도메인은 금융 관련.

챗봇과 관련된 연동 세부 가이드는 NCP 문서를 참조했다.

깃허브 링크

구현 상세

클라이언트 서비스

• 웹 페이지 웹디자인

  • 외부 HTML, CSS, JS코드 수정 후 사용
  • (출처: https://medium.com/@layerspilot.group/build-a-chatbot-template-html-css-full-guide-with-source-code-aac4f81210b9)

• Js 웹 동작

  • 버튼 클릭과 엔터 이벤트

    • 요청 함수 호출
    • 웹페이지 본인 채팅 내역 적용
    • 응답 내용 적용

  • 입력 시 3초 이벤트 동작 제어

    • 채팅 입력 후 3초 이후 응답 데이터 적용
    • 3초 대기 시 추가 요청 제한

  • 중복 입력(연속 입력)처리

    • 메시지 요청을 한 후 응답이 오기 전까지 새로운 메시지를 보낼 수 없게 버튼을 비활성화
    • 메시지 요청 후 응답데이터 화면 적용 여부를 확인하는 Flag 적용
      

  • 로딩 메시지

    • 메시지 요청 후 응답 내용이 화면에 적용되기 전까지 응답 메시지 출력
    • 로딩 메시지에는 임시 Id = "temp"를 부여
    • 응답이 도착하여 화면에 적용될 때 응답메시지 제거(HTML element remove)

• fetch

  • POST방식 서버 요청
  • 서버 요청/응답 시 에러 발생할 경우 에러 상태 처리

Node.js 서버

• express 서버 실행

  • static 파일 저장소 폴더명 'public'으로 지정
  • 비동기 통신(async/await)을 통해 데이터 순서 보장
  • setTimeout을 통해 응답에 대해 3초 지연 지정(단시간 과도한 요청 방지)

• .dotenv API_KEY/URL 암호화

  • .env 파일에 환경변수로 암호화

• api 통신

  • api 요청/응답 데이터 예외 처리 진행
  • try-catch로 요청/응답의 문제가 발생할 경우 고정된 값을 전달
    -> 브라우저 고정된 예외 파라미터 전달시 화면에 에러메시지 출력

결과

로딩중 메시지

서버에서 응답을 받아오기까지의 3초동안 해당 로딩 메시지를 출력한다.

3초가 지나면 로딩 메시지가 삭제되고, 답변을 출력한다.

금융 관련 응답

다음과 같은 금융 관련 질문에 답할 수 있다.

API 통신 오류 시 에러 핸들링

키 값이 잘못되었을 경우, 다음과 같이 출력한다.

개선할 점

모델 빌드

현재 모델에 등록해둔 질문은 다음과 같다.

1. 비대면 계좌 개설 준비물
2. 청년 우대형 적금 가입 조건
3. 안녕하세요
4. 적금 자동이체 날짜 변경
5. 매달 50만원 적금 추천
6. 요금 알려줘 v
7. 요금 어떻게 계산해 v
8. 소비 패턴 맞춤 카드 추천
9. 이번 달 카드 실적 조회
10. 해외 결제 차단 설정 방법
11. 금리 높은 예금 상품 v
12. 정기예금 자동 재예치 여부 v
13. 예금 중도해지 이자

그런데 확인해본 바, (v) 표시가 된 것만 제대로 된 대답을 하고, 나머지는 잘 모르겠단 대답을 하고 있었다.
대답이 잘 되는 질문 또한 핵심 키워드를 정확히 입력해야 한다. (이건 뭐 거의 심심이다)

클로바 API 빌드 설정 페이지에서, '[안녕 | 안뇽 | ㅎㅇ]' 처럼 유사 언어를 직접 설정해줄 수 있는 부분이 있다. 이 부분을 잘 활용하여 넓은 범위의 질문을 커버할 수 있게 만들면 더 좋을 것 같다.