현재 다니는 회사에서 프론트엔드를 혼자 하다 보니 여러가지 작업을 동시에 해야 하는 경우가 있습니다.
이번 프로젝트도 사이드 프로젝트 느낌으로 빠르게 제작하였습니다.
문제 정의
=> 사용자로부터 CS가 들어오는데 필자의 회사는 도메인이 외화 환전이기 때문에 외국인들의 CS가 들어오는 경우 발생.
But CS 관리자가 한국어만 대응 가능하여 항상 외국어 CS가 들어오게 되면 대응이 어렵거나 난항 발생.
=> Chat GPT를 이용한 채팅 프로그램을 만들기로 결정
얼마전에 회사에서 한 가지 문제점이 생겼다는 이야기를 들었습니다.
가장 먼저 한 일은 채팅 프로그램의 기본 뼈대가 만들어져 있는 프로젝트를 찾는 것이였습니다.
https://github.com/adrianhajdin/project_chat_application?tab=readme-ov-file
제가 찾은 client 와 server가 둘 다 동작하는 프로젝트 였습니다.프로젝트를 clone 한 후 디자인을 필자의 회사에 맞게 바꾸고
필요한 기능을 추가하고 필요 없는 기능을 제거하였습니다.
변경 및 추가 기능
관리자 페이지
=> 해당 프로젝트는 사용자들끼리의 채팅만 지원하였으며 모든 채팅을 볼 수 있는 관리자 페이지는 존재하지 않아 따로 추가하였습니다.
QR을 통한 채팅방 입장
=> 해당 프로젝트는 방이름, 닉네임을 입력하여 채팅방에 입력하는 방식이였습니다. 하지만 필자는 QR코드를 통한 입장 가능하도록 수정하였습니다.
디자인 수정
=> 기존 디자인에서 필자의 회사에 맞게끔 디자인을 변경하였습니다.
Chat GPT를 이용한 번역
=> 외국인 사용자가 모국어로 채팅을 입력하면 관리자는 한국어로 번역된 채팅을 볼 수 있게끔 하였습니다.
또한 관리자가 한국어로 채팅을 치면 사용자는 모국어로 관련된 글을 볼 수 있습니다.
관리자 로그인 기능
=> 관리자 페이지 같은 경우 구글 로그인을 한 사용자만 접근이 가능하도록 추가하였습니다. 세션 시간은 1시간으로 설정하였으며 1시간동안 방문이력이나 활동을 하지 않았으면 로그아웃 처리되게끔 하였습니다.
슬랙 연동
=> 만약 사용자에게 새로운 채팅이 들어오게 된다면 슬렉으로 알림이 오게끔 설정하였습니다. 슬렉을 통해서 해당 사용자와의 채팅방으로 바로 이동 가능하게끔 하였습니다.
최종 화면
왼쪽이 사용자가 모바일로 접속했을 때 보는 화면이고 오른쪽이 관리자가 보는 화면입니다.
왼쪽에서 사용자가 일본어로 말을하였고 오른쪽페이지에서 Chat GPT를 이용하여 관리자가 그것을 번역문과 함께 받은 것을 볼 수 있습니다.
또한 관리자가 한글로 작성한 텍스트는 사용자에게는 일본어로 전달되게 됩니다.
이렇게 되면 전세계 어떤 언어가 들어와도 사용자는 모국어를 받고 관리자는 한국어로 된 번역문을 받아볼 수 있는 사이트를 만들었습니다.
socket 통신을 처음 이용해보았지만 꽤 괜찮은 시도였고 이번 기회에 많은 것을 배워 좋은 경험을 한 거 같습니다.
위 사진은 슬렉 연동 사진이다. 슬렉에 채팅이 들어오게 되면 해당 채팅이 보이고 채팅방으로 이동을 클릭하게 되면 사용자와 대화 할 수 있는 채팅방으로 이동이 가능합니다.
처음에는 맨땅에 헤딩이라 굉장히 어려웠지만 다 끝나고 보니 어려운 기술도 없었고 그냥 처음이라 조금 어려웠던거 같습니다.
작은 기업의 프론트 라서 아마 한 가지 일 만 하는것이 아닌 여러가지 일을 동시에 하게 되는 상황이 있는데 많은 것을 배우기 좋은 환경인 것 같다는 생각이 드는 요즘입니다.
긴 글 읽어 주셔서 감사합니다.
