AI 번역 기능을 탑재한 예약 관리형 챗봇(ChatBot): Space Chat

프로젝트 배경

- AI가 각광을 받게 되면서 이를 활용한 프로젝트에 흥미를 느끼게 됨

- 퍼스널 컬러 통역 아르바이트를 하며, 한국에 뷰티 관광을 오는 사람들이 많으며,

  예약에 불편함을 겪는 외국인들이 많다는 사실을 알게 됨

- 최근, K-beauty가 SNS에서 각광을 받으면서 한국에 뷰티 관광을 오는 외국인들이 증가한다는 사실을 조사

  그러나, 뷰티 관광 특성 상 대기업 보다는 개인이 운영하는 소규모 업체가 많아 소통 오류와 예약 누락이 빈번

- 이러한 문제를 문제를 개선하고자 예약 기능과 번역 기능을 탑재한 AI 챗봇을 제작하게 됨 

- 대표적으로 현재 각광 받고 있는 퍼스컬 컬러 사업을 예시로 프로젝트 진행

 

프로젝트 시장 조사

- 예약 과정에서, 주로 네이버 예약과 카카오톡 오픈 채팅방을 이용한다는 사실을 조사

- 네이버 예약의 경우, 사이트 전체가 영어로 번역되어야 하는데 이러한 기능이 탑재되어 있지 않음

  (있어도 찾기 불편-파파고에 들어가서 해당 URL을 입력해야 함)

- 라인을 이용하여 소통할 경우, 따로 번역용 챗봇을 초대하여야 하는 번거로움이 있음

- 카카오톡의 경우, 채팅방 내에서 즉각적으로 번역하는 기능을 제공하고 있지 않음

  (직접 메세지를 복사해서 번역기를 돌려야 함)

-인스타그램 또한 디엠에서 상대방의 메세지를 즉각적으로 번역하는 기능을 제공하고 있지 않음

 

주요 역할과 경험

(사실 3명이서 진행한 프로젝트라 역할 구분이 명확하지 않았음...)

- 웹 디자인과 프론트엔드를 맡아서 진행

  모바일 화면과 노트북 화면에 맞춘 UI를 모두 구성

- ChatGPT fine-tuning에 참여

- AI 번역을 위해 DeepL API 사용

- 가비아를 사용하여 도메인 생성(www.spacechat.com) : 현재는 폐쇄됨

- HTTP 포트 에러 수정 및 구글 로그인 구현

- AWS EC2위에 프로젝트를 구현 및 배포

- 외국인 대상으로 한 User Experience 설문 조사 진행

 

 

 

프로젝트 내용

 

 

시스템 구조도

 

시스템 구조도

 

우선, 간단한 시스템 구조도는 위와 같다.

- Web Client는 사용자가 브라우저를 통해 접속하는 프론트엔드 서버이다

- 사용자는 HTTP 요청을 보내고, 받은 HTTP 응답에 따라 웹 페이지에 접근 가능

- 클라이언트 서버는 HTML, CSS, JavaScript를 통해 구현

- Web Server(Apache)는 클라이언트의 요청을 받아 해당 요청을 처리한 결과를 다시 반환

- API Gateway는 받은 요청을 분석해 규칙에 따라 백엔드의 API로 라우팅

- DeepL API(번역 기능 구현)는 API Gateway를 통해 받은 요청을 처리하고 응답

- 구글 캘린더 API를 통해 관리자의 구글 캘린더로 예약 내역을 전송

- ChatGPT API 키를 통해 Fine tuning한 언어 모델을 불러와 적용

- RDS MySQL DB에 사용자 및 예약 데이터를 저장하고 VPC를 통해 Web Server와 통신하여 보안과 안정성을 확보

 

 

 

프로젝트의 대표적인 기능

Space Chat 시작 화면

 

1. 로그인(회원)/비회원 기능 제공

 

- 회원으로 로그인 시, 프로필 사진을 저장 및 변경 가능

- 회원으로 로그인 시, 예약 내역 확인 가능

초기 로그인 화면

 

- 시작 화면 클릭 시 로그인 화면 제공

  퍼스널 컬러 업체 직원(Manager)나 로그인을 통해 예약 관리를 하고 싶은 고객이라면 로그인 기능 활용 가능

- 비회원으로 로그인 없이 진행하고 싶다면, 'Start without login' 버튼을 통해 비회원으로 접속 가능

 

Creat an account 화면 클릭시 회원 생성 가능

개인정보 수집 및 이용 동의서

 

- 본격적인 회원가입에 앞서 개인정보 수집 및 이용 동의서를 통해 동의 여부 수집

 

초기 회원가입 화면

 

- 이전 화면에서 동의를 할 경우 회원가입 페이지로 리다이렉드

- 이름과 이메일을 입력 받음(이름은 실명), 1자 이상 입력해야 함

- 이메일은 인증 후 사용 가능

  이메일 형식을 지키지 않을 시 오류 발생

모바일/노트북 인증 코드 발송

 

- 이메일 실존 인증을 위해 인증 코드 발송

- js로 인증 코드 생성, flask app 으로 fetch, smtp 프로토콜을 이용하여 이메일로 해당 인증 코드 발송

메일 인증코드

 

- 입력한 이메일로 인증코드가 발송 된 것을 확인 가능

인증 코드 입력 및 확인

 

- 인증 코드는 3분 내에 입력

  3분 초과 시 인증 코드 만료 -> 재발송 해야 함

- 입력한 인증 코드가 verify되면 일관성을 위해 이메일 수정 불가

 

회원 가입 성공 화면

 

- 이메일 중복 및 비밀 번호 조건 부합 등의 문제가 없다면,

  성공적으로 회원가입 성공-> success 페이지로 리다이렉트

- Return to 'Sign in' 클릭시 로그인 화면으로 리다이렉트

회원 정보 테이블

 

- AWS RDS DB의 회원 정보 테이블에 성공적으로 추가된 것을 확인 가능

- 보안을 위해 비밀 번호는 해시화 후 추가

 

로그인 수행

 

- 회원 가입한 이메일과 비밀 번호로 로그인 가능

 

회원/비회원 초기 입장 화면

 

- 채팅방에 입장한 화면

- 회원을 채팅방 입장 시 왼쪽 사진과 같이 이메일로 입장했다는 메세지 제공

- 회원 입장 시 우측 상단에 프로필 사진 변경 가능

- 비회원 입장 시 비회원으로 표시

- 비회원 입장 시 기본 이모티콘으로 표시

 

 

 

2. AI 기반 번역 기능 제공

 

- 채팅방 전체가 한, 중, 일, 영으로 번역되어 챗봇 및 사람과의 상담 기능 이용 시 소통 오류 감소

- 디폴트 언어는 한국어로 제공

초기 언어 설정 화면

 

- 채팅방에 입장을 하게 되면, 우선 언어를 선택할 수 있는 화면 제공

언어 설정 메뉴

 

-언어 설정은 추후에도 오른쪽 상단 메뉴 아이콘을 사용하여 변경 가능

언어 버튼 선택 시 번역 결과

 

- 본인의 언어에 맞는 선택 버튼을 누르면, 채팅방이 번역되어 위와 같이 대화 가능

- 선택 버튼도 번역됨

- 우측 상단 국기를 통해 현재 언어 확인 가능

- 우측 상단 국기 클릭시 한->영->중->일 순서대로 언어 번경 가능

 

 

 

3. 챗봇을 통한 예약 기능 제공

 

- 챗봇을 통한 예약 시에도 채팅 전체를 선택한 언어로 번역하여 볼 수 있음

- 챗봇과의 대화 도중 언어 변경 언제든지 가능

영어 버튼 중 English 선택

 

- 영어 사용자라고 가정하고 예약 진행

 

예약 가능 옵션 제공

 

- 앞선 화면에서 챗봇이 말한 Make an appointment 버튼 클릭시 예약 기능 사용 가능

- 예약 시 선택할 수 있는 옵션(코스) 들이 제공되며 자체적으로 선택할 수 있다

- 한 번 선택한 선택지의 버튼은 다시 누를 수 없다

 

예약 날짜 및 시간 선택

 

- DB에서 예약 가능한 시간을 탐색

- 예약 가능 시간만 선택할 수 있도록 클라이언트에게 제공, 이 중에서 선택 가능

 

한국어로 보는 예약 프로세스

 

- 한국어로 예약 프로세스를 한 눈에 보면 위와 같다

- 이미 지난 날짜와 시간은 선택할 수 없음

- 캘린더를 통해 원하는 시간과 날짜 선택 가능

 

예약 내역 재확인

 

- 예약을 진행하면서 DB에 저장된 예약 정보를 가져와 클라이언트에게 확인 요청

- 확인 메세지에서 No를 누를 경우, 코스 선택부터 다시 예약 진행

- Yes 누를 시 개인정보를 입력 받는 단계로 넘어감

 

한국어로 보는 예약 프로세스[개인정보 입력]

 

- 예약을 위한 개인정보를 입력 받는 단계이다

- 이름과 전화번호, 이메일을 입력 받는다

- 이때, 전화번호는 국제 표준에, 이메일은 이메일 형식에 어긋나지 않도록 유효성 검사 실시

- 입력한 이메일로 추후에 예약 정보 전송

 

예약 완료 확인 및 질문 프로세스

이메일로 전송된 예약 내역

 

- Reservation 테이블의 모든 column에 데이터가 들어오면 예약 완료 메세지 제공

- 동시에 앞서 받은 이메일 정보로 예약 내역 전송

- 질문이 있으신가요? 에서 '예'를 누를 시 챗봇(ChatBot)과 질의 응답 가능

- '아니오' 누를 시 예약 완료 메세지 제공

 

 

 

4. 챗봇을 통한 문의하기 기능 제공

 

각 언어로 챗봇과 질의응답

 

- 문의하기 선택 시 챗봇(ChatBot)과의 대화 기능 제공

- 앞선 초기 화면에서 예약 대신 '문의하기(Contact Us)' 버튼 클릭시 접속 가능

  그 외, 예약 후 질문 있으신가요? 에서 '예' 선택 시  접속 가능

ChatGPT fine-tuning

 

- ChatGPT를 fine-tuning한 모델 사용

- 매장 정보와 예상 질문들로 fine-tuning

- 한국어를 토대로 fine-tuning 하였기 때문에,

  DeepL이 사용자의 질문을 한국어로 번역하여 전달, 전달받은 답변을 다시 사용자 선택 언어로 번역하는 중간 매개체 역할 수행

 

 

 

5. 관리자(사람)과 직접 연결하여 상담할 수 있는 기능 제공

 

- 웹소켓 기반으로 관리자와 직접 소통할 수 있는 기능을 구현

고객(Customer)에게 보이는 대화 화면-영어사용고객

매니저(관리자) 페이지

 

- 관리자와 채팅하기 버튼을 누르면, 실제 직원과 상담이 가능

- 소통 시, 각자의 언어로 입력하여도 상대방의 창에서는 자동으로 상대방의 언어로 보임

  ex) 고객(영어 사용 가정), 매니저(한국어 사용 가정)

        이럴 경우, 관리자는 한국어로, 고객은 영어로 자신의 채팅 나용을 치면,

        고객의 채팅 내용은 자동으로 번역되어 관리자에게 한국어로 보이며, 고객에게는 자동으로 번역되어 영어로 보임

- 관리자 ID와 PW로 로그인하여 관리자 페이지에 진입 시, 진행된 예약 내역을 볼 수 있으며, 사용자와 채팅이 가능

- 관리자 역시 자동으로 한국어로 번역된 문의 사항을 볼 수 있음

 

매니저(관리자) 페이지 - 채팅방 목록 확인

 

- 화면 우측 상단 메뉴 버튼을 클릭하며, 채팅방 목록 조회 가능

- 비회원과는 비회원 채팅방에서, 회원가입을 한 사용자와는 회원 별 채팅방에서 채팅 가능

- 각 이메일(버튼) 클릭 시, 해당 채팅방으로 연결 되어 대화 내역을 볼 수 있음

 

예약 내역 구글 캘린더 연동

구글 캘린더 연동 화면

 

- 관리자 페이지 좌측 하단의 'Connect to Google Calendar' 클릭시 구글 로그인 페이지로 리다이렉트

- 캘린더 연동을 하고 싶은 계정으로 로그인 하면 자동으로 일정들이 캘린더에 추가

- 지속적인 업데이트를 위해 백그라운드 작업 스케줄링에 의해 1시간마다 자동으로 연동

 

 

 

6. 마이페이지 기능 제공

 

마이페이지 화면

 

- 회원으로 로그인하여 예약을 진행할 경우, 마이페이지에 예약 내역 제공

- 프로필 사진 등 변경 가능

마이페이지 부가 기능

비밀번호 변경 화면

 

- 비밀번호 변경, 로그 아웃 및 계정 탈퇴 등의 부가 기능 제공

 

 

 

개발 환경

 

- 서버: AWS EC2

- 프레임 워크: Flask

- DB Cloud: AWS RDS

- 웹 서버: Apache

 

 

 

간단한 후기

 

사실 처음에 캡스톤종합설계 프로젝트를 수행한 후, 여기서 받은 User experience 피드백을 바탕으로 개선하여 공모전에 출품을 했던 프로젝트이다. 처음에 프로젝트를 수행할 때에는 챗봇 문의하기를 직접 일일히 트레이닝 하여 제공하였으나, 정확도가 떨어지고 원만한 소통이 이루어지지 못해 ChatGPT API를 도입하였다. 또한, 구글 캘린더 연동에 실패 하였던 것을 공모전 준비 기간에 성공하여, 보다 편리하게 서비스를 이용할 수 있도록 하였다.

 

사용자 경험 후기는 다음과 같았다

 

사용자 테스트

 

이러한 피드백을 반영하여, 변경 사항을 반영한 것이다. 대표적으로는 아까 언급한

- ChatGPT를 이용하여 fine-tuning한 것으로 챗봇 응답 대체

- 구글 캘린더 연동 서비스

- 이전 선택지 클릭 버튼 비활성화

- 날짜 선택 UI 개선(아이폰일 경우 문제가 있었음)

등의 사항을 개선하였다. 사용자 경험을 받아 수정을 반영해본 것은 처음이었지만, 프로젝트를 더욱 발전시키는 즐거운 경험을 할 수 있어서 유의미 하였다.

그 밖에 웹서비스를 만들기 위하여 HTTP를 연결하고, 포트를 바꾸는 등 여러 네트워크 적인 요소들도 배울 수 있는 좋은 기회였다.

어파치에 오류가 있어서 포트 연결이 안되고, 구글 버전이 바뀌어서 연동에 어려움을 겪는 등의 문제들도 있었지만, 다같이 고민하고 해결하면서 경험을 쌓을 수 있었다. 여러 개발 툴들도 써보고 제대로 된 프로젝트를 수행해 본 것이 처음이라 버겁기도 하였지만 즐겁기도 하였다.

또한, 프론트엔드 경험은 처음이었지만, 다들 디자인이 마음에 든다고 해줘서 뿌듯하기도 했다. 도메인을 직접 구입한 것도 색다른 경험이었다.

여러 가지로 경험하고 공부할 수 있었던 좋은 기회였던 것 같다