[포스코X코딩온] 풀스택 프로젝트 회고록 - 프로젝트명 : ChatFlow

이 포스트는...

코딩온에서 진행한 2차 풀스택 프로젝트 진행 과정을 기록한 회고록 성격의 포스트 입니다.

 

주제 선정 기간

모든 사람이 다양한 아이디어를 하나씩 이야기 하는 시간을 가졌고, 최종 결정까지 약 이틀 정도 소요된 것 같습니다.

 

서비스 소개

사용자와 대화를 하며 인간의 언어를 이해하고, 사용자의 대화를 기억하는 Multi-Turn형 Chat봇인 GPT를 활용하여, 특정 상황에서의 회화 연습을 희망하는 사용자들이 언제든지 회화 연습을 할 수 있게 도와줍니다.  

 

선정 배경

일반적인 게시판에 사용되는 기능을 기반으로 하되, 실용성을 겸비한 아이디어가 담겨져서 있는 만큼 프로젝트로서 가치가 있다고 느꼈고, 즐겁게 진행 할 수 있겠다는 판단을 하였습니다.

 

  사용되는 기술

1) 데이터베이스 연결을 통한 CRUD 구현.

2) 기본적인 테이블 설계.

3) 백엔드와 프론트엔드의 데이터 주고받기.

4) STT와 TTS를 활용한 음성 및 텍스트를 변환.

 

구현할 동작

사용자의 목소리를 입력 받고, => 목소리를 텍스트로 변환 한뒤에 => ChatGpt를 통해서 답변을 생성한 뒤 =>  GPT의 답변을 스피커로 내보내기   

 

구현을 위한 라이브러리

react-speech-kit , whisper, sox

 

라이브러리 선정 배경 및 실패 사례

초기에는 whisper라는 openai 사의 stt를 사용하기위해서 python으로 구현을 시도했고, 블로그와 CHATGPT 등 다양한 레퍼런스를 참고하여 1개의 python 파일과 약 140줄의 app.js 코드를 작성하였다. 그러나 팀원분이 코드관련 질문을 하는 동안 강사님께서 내 코드에 결정적인 문제점을 발견해주셨다. 

클라이언트가 서버측의 A라우터에 접속되면 mic on, B라우터에 접속하며 mic off를 구현하기위하여, 다른 라우터에 간섭 가능하게끔 하려는 목적으로 전역변수를 flag로 사용했었던 것이 문제가 된 것이다., mic 기능을 사용자들은 전역변수인 한개의 flag를 서로 공유하게 되며, 이는 사용자들이 A,B라우터에 접속할 때마다 서로의 flag에 영향을 주고 받으며, 녹음을 방해하므로 정말 큰 기술적 결함이였음을 알게되었다.

다시말해 여러 클라이언트들이 한 가지 전역변수를 공유하는 형태이므로, 내가 마이크를 끄지 않아도 다른 클라이언트가 음성 종료 버튼을 눌러 전역변수 값을 바꾸게 되면 다른 사람의 마이크가 off 되는 이 부적절한 현상을 해결하기 위해서 나는 다른 방법으로 express-session를 사용하기로 했었다.

express-session으 활용하여 클라이언트마다 개별적인 변수를 지정해주고, 클라이언트가 접속한 시간을 기점으로 변수 이름을만들어 그때의 해쉬맵에 각 개체들을 저장하여, 접속한 시간마다 다른 flag를 갖게 하면 해결 가능하다고 생각했지만, 이 조차 제대로 작동하지 않고 서로 같은 변수를 공유하는 형태가 되어 실패하게 되었다. 결국 선생님께 자문을 받아 websocket을 사용하는 방법이 있다는 사실을 알았지만, 그땐 이미 시간이 너무 지체된 상태라 더 이상 헤매이며 코드를 작성 할 수 없었다. 이미 팀원들조차 슬슬 언제 완료되는지 물어보던 중이였꼬, 나또한 나 스스로에게 불안을 느끼던 터였고 그동안 밤새 만든 모든 코드는 폐기되었다. 그리고 선생님께서 쉽게 사용한 speech-react-kit을 추천해주셨다. 사실 처음부터 speech-react-kit을 클라이언트 딴에서 사용한 방식을 선택했다면 이런 일이없었을 것이다. sox와 whisper을 사용해 python과 js를 넘나들며 내가 쓸 툴을 자유자재로 선정하는 멋진 개발자가 되자란 생각들은 나에게 아직 한참 무리였고, 이미 마음이 급해진 나에게 나의 슬로건은 전혀 의미 없었다. 일단 진행 했어야 했음을 분명히 인지했기 때문이다.

 

UI 설계 

우리팀의 프론트 엔드 동료분들께서 UI 설계를 위해 피그마를 사용하시면서, 정말 편하게 디자인리뷰를 받을 수 있었다. 내가 원하는 부분을 움직이면, 모든 팀원들에게 공유되어 마치 게임을 하는 듯했다.

feat) 프로젝트가 끝난 후 책을 통해 알게된 것인데, UI의 버튼 색 하나를 결정하는데도 'A/B 테스트' 라는 방식이 사용되는 등 프론트를 결정하기 전 여러 가지 유용한 방식이 많다는 점이였다. 

'A/B 테스트: 버튼을 두가지 다른 색상으로 만들고 사용자들에게 자유롭게 클릭을 하게 하므로써 더 많이 눌러진 버튼의 색을 채택하는 방식 ' 

 

데이터 베이스

데이터 베이스는 내가 담당하지 않았으므로, 아직 자세히 알지 못한다. 하지만 추후 반드시 알아야 할 필요성이 있음을 느껴, 3일동안 게시판 만들기 프로젝트를 진행할 예정이다...!

 

프로젝트를 마치며

 플젝동안 정말 좋았던 점은 막연히 '기획' 했던 부분들을 code에 녹여낸 점이다. gpt가 있다는 사실은 알았지만, stt나 tts은 실제로 프로젝트를 시작하면서 처음 사용해본 기술들이다. 우리가 사전조사없이 말로 상상한 것들이 정말 현실로 이뤄낼 수 있을까 걱정도 많이했지만, 팀이 모두 고생한 결과 어느순간 기능성 홈페이지 하나가 딱 하고 나타났다. 그 과정은 결코 쉽지 않았다고 생각한다. 하지만 나와 함께한 모든 동료들이 마지막 순간까지 함께해줬고, 새벽이나, 낮이나, 우리 옆에서 함께 해줬다는 점에서 표현하진 않았지만 정말 끈끈한 우정을 느꼈다.. 

가끔 세상에 나혼자라고 생각이 들때가 있지않나 싶다. 나는 사실 최근까지도 취업에 대한 걱정과 낯선환경에서 놓여져서 그런지 그렇게 당연히 난 혼자라고 생각해왔다. 그렇지만, 한가지 목표를 가지고 모두 같은 마음으로 달렸고 난 이것이 날 외로움과 두려움으로 부터 벗어나게 해준 감사한 시간이라고 생각하며 우리 소중한 팀들을 절대 잊지못할 것이다.

 

앞으로의 목표

node js 관련 서적 및 인강 구입해서 공부하기

기업에 이력서 지원하기위해 이력서 작성하기

db를 이해하기위해 3일안에 게시판 하나만들기