KUMA는 자연스러운 채팅을 기반으로 하는 챗봇 서비스와 구글 캘린더 연동 서비스, 날씨 서비스 등을 제공하는 가상 비서 서비스 웹앱입니다. 현재 앱은 V1에서 V2로 업그레이드되고 있습니다.
배포 APK (Expo 기반 APK) : 구글 드라이브에서 다운받으실 수 있습니다.
평소에 유튜브를 보면서 버추얼 유튜버의 캐릭터와 같이 귀여운 3D 캐릭터들과 이야기하는 공간도 있으면 좋겠고, 그 공간 안에 다양한 분야에서 도와줄 수 있는 서비스도 있으면 좋겠다는 생각으로 아이디어를 내게되었습니다.
아이디어를 구체화하면서 대화형 챗봇 API을 알게되었고, 친구나 가족에게 털어놓을 수 없는 이야기들을 털어놓으면서 챗봇이라는 가상 친구와의 소통 공간을 만들어보고싶다라는 생각에서 프로젝트를 시작하게 되었습니다.
💡 아이디어
🧮 KANBAN
🖼️ Mockup
기술 검증
기능 구현
리팩토링 및 버그 수정
배포 및 리드미, 테스트코드 작성
시연 영상 준비
-
Frontend
- React
- Three.js
- Styled Component
-
Backend
- Node.js
- Express
- Dialogflow API
- Google Calendar API
- 메인페이지에서는 사용자가 선택한 캐릭터와 문장이 나오는 말풍선, 페이지 메뉴를 볼 수 있습니다.
- 각 아이콘에 맞는 메뉴를 클릭하면 Chatbot, Calendar, Weather, Preference 페이지로 이동합니다.
- 챗봇 페이지에서는 사용자와 챗봇이 자유롭게 대화를 나눌 수 있습니다.
- 챗봇 페이지에서 챗봇과 했던 소통들은 저장되지 않습니다.
- 캘린더 페이지에서는 사용자의 구글 캘린더와 연동하여 일정을 등록할 수 있습니다.
- 마이크 버튼을 누르면 음성인식이 활성화되며, 음성인식이 종료되면 일정을 수정할 수 있는 모달이 나타납니다.
- 음성인식을 사용하지 않고도 직접 일정을 입력해 구글 캘린더에 등록할 수 있습니다.
- 날씨 페이지에서는 현재 시간의 날씨와 온도, 현재 날씨에 맞는 추천 아이템을 보여줍니다.
- 비가 온다면 현재 강수량이 얼마나 되는지 표시됩니다.
- 설정 페이지에서는 사용자 닉네임 수정과 캐릭터 선택 창, 각 페이지에 대한 도움말 페이지를 볼 수 있습니다.
-
Google Calendar API
Google API의 인증 방식에 대한 지식이 많이 부족하여, 인증 로직을 구현하는 데 시간이 많이 걸렸습니다. 기획 당시에는 Firebase의 Token을 사용해 인증을 처리하려고 생각했습니다. 하지만 Google API에 대해 알아가면서 Firebase의 Token으로 처리하는 방식은 오래되고 사용할 수 없는 인증 방식이라는 것을 알게되었습니다.
Google API의 인증 방식은 총 3가지로 API 키 방식, OAuth Client ID 방식, 서비스계정 키 방식이 있었는데, 그 중 Google Calendar API를 인증을 할려면 OAuth Client ID 방식을 사용해야한다는 것을 알게되어 OAuth Client ID 방식으로 인증 로직을 구현했습니다.
하지만 Client와 연결하는 과정에서 CORS가 발생하였고, 인증 링크를 리다이렉트하는 과정에서 CORS가 발생한다는 것을 알아냈습니다.
그래서 DOM을 직접 조작해 form 사용해 직접 보내거나, 구글 프로젝트의 인증 주소에 Client URL을 추가하거나, Server의 CORS 설정을 바꿔보는 등의 작업을 해보았으나 모두 실패했었습니다. 조금 더 고민을 해보다가 Client에 인증 링크를 리다이렉트하지 않고 인증 링크를 보내서 Client에서 실행하게 끔하면 CORS가 뜨지 않을까라는 생각으로 구현을 해보았더니 CORS가 더 이상 발생하지 않게되었습니다.
무언가를 해결하기 위한 방법이 있다면 안된다고 생각하지 말고, 바로바로 시도해봤어야하는데 그러지 못한 점이 문제점였고, 이번 CORS를 해결하면서 다시 한 번 느끼게 되었습니다.
-
아쉬웠던 점
-
기획
개인프로젝트를 진행하면서 팀원들도 없이 오로지 혼자서 기획과 개발을 해야하는 상황에 놓여지니 팀원들과 함께 진행했을 때는 기획 과정이 오래걸린다고 생각을 했는데, 막상 혼자서 기획 과정을 진행하니 배는 더 걸리는 것 같은 느낌을 받았습니다. 그리고 기획 과정을 거치고 개발 단계로 들어갔을 때 Server 작업을 하면서 기획을 꼼꼼하게 하지 않았다라는 것을 절실히 깨닫게되었습니다. Client 작업이라고 생각했던 부분들이 Server 작업으로 들어가는 부분이 되는 경우가 정말 많았고, 기술 검증을 조금 더 꼼꼼하게 했다면, 이러한 경우들이 적었을 것이다라는 생각이 들어서 기획에 대한 중요성을 깨닫게 되었습니다.
-
TensorflowJS - Chatbot
챗봇 개발을 위해서 기술검증을 들어갔을 때, TensorflowJS의 universal sentence encoder 모델과 Dialogflow API 중 어떤 기술을 사용해서 챗봇을 개발할지 정말 많이 고민했고 그만큼 기술 검증에도 시간이 오래걸렸습니다. TensorflowJS를 사용해 챗봇을 개발한다면 챗봇을 제외한 모든 기능을 포기하고 오로지 챗봇에만 매달려야하는 상황이었고, Dialogflow API를 사용하면 코딩을 거의 하지 않고 챗봇을 구현해야하는 상황이었기에, 고민을 정말 많이 했었습니다. 촉박한 시간과 사용자에 대한 응답이 빨라야된다는 생각으로 Dialogflow API를 사용해 챗봇을 구현하기로 결정했지만, TensorflowJS로 구현을 해보고 싶다는 아쉬움이 남습니다.
-
-
소감
개인 프로젝트를 진행하면서 가장 부담이 되었던 것은 팀이 아닌 혼자라는 것이었습니다. 팀 프로젝트 때에는 제가 놓친 부분이 있다면 팀원들이 보완해주고 팀원들이 놓친 부분이 있다면 제가 보완해주는 등 서로 도와가며 프로젝트를 진행했지만, 개인 프로젝트 때는 오로지 홀로 모든 것을 진행하니까 내가 놓친 부분을 발견하지 못하면 로직에 구멍이 생길 것이고, 그 구멍이 많아질수록 프로젝트에 대한 완성도도 떨어질 것이고 같은 온갖 걱정 때문에 너무 막막했습니다.
그래서 기획을 하면서 내가 할 수 있는 만큼만 일정을 계획하자라는 목표를 가지고 계획을 짰는데도, 개발 단계에 들어가면서 미처 기획에서 살피지 못했던 부분들이 속속히 발견되니까, “ 내가 이걸 시간 내에 마무리 할 수 있을까? “ 라는 불안감이 점점 커졌습니다.
특히 Google API와 메인페이지 구현하는 과정에서 딜레이가 너무 많이 되서 더 부정적으로 생각하게 되었지만, 동기분들과의 소통과 중간중간의 해주시는 켄님의 조언 덕분에 위축되지 않고 조금씩 계획을 실천하다보니 프로젝트를 완료할 수 있게 되었던 것 같습니다. 물론 아직 부족한 점이 많지만 개인 프로젝트를 진행하면서 처음으로 시작부터 끝까지 혼자서 해냈다는 뿌듯함과 문제 해결에 대한 자신감을 얻을 수 있었습니다.