[회고록] AI 챗봇 프로젝트 스터디 1차 회고록

목차

1. 프로젝트 개요

2. 프로젝트 진행 과정

3. 프로젝트를 통해 배운 점

4. 프로젝트 결과

5. 마치며

🤖 프로젝트 개요

---

📖 프로젝트 목표

그리다는 사용자와 대화하며 하루의 기분을 파악하여 그에 맞는 그림을 그려주는 AI 채팅 웹사이트이다. 원하는 컬러와 화풍을 선택하고 10번의 대화를 진행 후에 멋진 그림을 탄생시켜서 사용자에게 매일 그림 선물을 해준다.

 

진행 기간

• 2023년 5월 8일 ~ 2023년 5월 26일 (15일)

팀 구성

• Front-End: 3명, Back-End: 3명

기술 스택

• React, TypeScript, SCSS, Node.js, Expree.js, MongoDB, AWS

프로젝트에서 담당한 기능 (Front-End)

• Open AI 채팅 기능 구현
• 대화 요약 후 이미지 생성 기능 구현

🤖 프로젝트 진행 과정

---

📖 주 3회씩 회의해서 이슈 공유하기

부트캠프 내에서 진행한 스터디로, 강의도 들으면서 우리는 3주의 시간 동안 스터디하여 결과물을 제출해야 했다. 상대적으로 시간이 부족한 우리는 데일리 스크럼보다는 월, 수, 금 게더타운에서 만나 이슈 공유를 하고, 각자 진행상황을 공유했다. 혹시나 개발을 진행하다가 급하게 큰 이슈가 있다면 바로 게더타운에 모여서 해결하는 과정을 가졌다.

 

사람보다 더 많은 검은 고양이들

🤖 프로젝트를 통해 배운 점

---

📖 리액트 상태관리에 대한 고민

처음으로 리액트, 타입스크립트를 써보는 프로젝트였다. 다른 팀원들도 마찬가지였다. 그래서 리액트 강의 도중에 진행하는 프로젝트라 그런지 내가 코드를 작성하고도 이렇게 작성해도 되는 건가? 하는 불안감이 엄청났다. 그중 제일 고민이었던 것은 상태관리 부분이었다. 다들 처음이다 보니 이번 프로젝트 스터디에서는 따로 상태관리 라이브러리를 쓰지 않고, 메인 컴포넌트에서 상태를 모두 끌어올리고 Prop Drilling이 발생하는, props를 하위 컴포넌트에 전부 전달하는 방식을 채택했다. 이 방식을 써보니까 장단점을 확실히 알게되었다.

 

우선 장점은 useState로만 구현을 하게 되니, 구현이 상대적으로 간편했다. 상태와 상태 변화가 단순한 프로젝트일 수록 이 특징이 극대화되고, 그래서 소규모 프로젝트에서 쓰기 편하다는 것을 체감했다.

단점도 확실했다. 최하위 컴포넌트에서 필요한 상태나 상태 변화가 필요하다면 최상단 컴포넌트에서부터 쭉 끌어와서 리렌더링이 전부 진행된다는 점, Prop Drilling이 발생한다는 점이다. 컴포넌트 간의 결합도가 높아서 리팩토링도 쉽지 않다.

이래서 useState로만 상태관리를 하게 된다면 리스크가 크다는 걸 많이 깨달았다. 

 

그렇다면 우리 프로젝트가 useState로 상태관리를 하는 게 적합했을까? 나는 반은 맞고 반은 아니다라고 대답할 수 있다. 사실 1차 구현 결과물에서는 서로 담당한 페이지마다 결합도가 높지는 않았지만 각자 페이지마다 컴포넌트를 분리하다 보니 이 측면에서 결합도가 확 높아졌다. 당연한 결과였지만 컴포넌트 계층을 살펴보면 2 계층, 최대 3 계층 밖에 되지 않아서 어느 정도는 적절했다. 그치만, 컬러선택의 컬러 요소, 화풍 선택의 화풍 요소, 채팅의 요약 메세지와 이미지 url, 결과 페이지까지 각 페이지별로 state를 1~2개씩 가지고 전달해줘야 했다. 여기서 우리는 세션 스토리지를 써서 각자 마운팅되자마자 useState에 바로 담아주고 다시 세션스토리지에 저장하고의 반복이었다. 이 부분에서 아니라고 대답할 수 있다.

🤖 프로젝트 결과

---

📖 서비스 주요 기능 설명

 

1. 로그인 / 회원가입

 

1. 사용자는 로그인을 진행해야 서비스를 이용할 수 있다.
2. 사용자는 로그인, 로그아웃, 회원가입을 할 수 있다.

2. 대화 기능

 

[사용자]

 

1. 사용자는 원하는 색상을 팔레트에서 선택할 수 있다.
2. 사용자는 제공되는 화풍 리스트에서 선택할 수 있다.
3. 사용자는 제공된 화풍 키워드 리스트 중에 원하는 화풍을 선택할 수 있다.
4. 사용자는 대화 턴수 10개를 제한하여 질문에 대한 답변을 한다.

[AI]

 

1. open AI는 지시어를 받아 사용자에게 질문을 시작한다.
   • “너 이제부터 나한테 질문을 해야 해, 오늘 하루에 대해 이야기해보고 싶어.”
2. 사용자와 상호작용을 하며 대화를 이어간다.
3. 사용자의 답변을 통해 최종적으로 그림을 생성하기 적합한 키워드를 도출한다.

3. 이미지 결과 생성/제공

 

[사용자]

 

1. 사용자는 대화 내용을 통해 도출된 자신의 이미지를 볼 수 있다.
2. 사용자는 도출된 이미지에 대해 자신의 갤러리 페이지에 저장 여부를 선택할 수 있다.
3. 사용자는 생성된 이미지를 자신의 인스타그램에 공유할 수 있다.

[AI]

 

1. 도출한 적합한 키워드를 서버측에 넘겨준다.
2. 서버는 키워드를 적절히 가공하여 openAI에게 넘겨준다.
3. openAI는 해당 키워드로 이미지를 생성해서 서버에 넘겨준다.
4. 서버는 해당 이미지 url과 키워드를 DB에 저장한다.

4. 갤러리(컬렉션) 기능

 

[사용자]

 

1. 사용자는 자신이 생성한 이미지를 갤러리 형태로 볼 수 있다.
2. 생성한 이미지를 클릭하면 이미지에 대한 키워드를 확인할 수 있다.
3. 사용자는 이미지를 선택하여 삭제할 수 있다.

[서비스]

 

1. 갤러리 서버에서는 해당 사용자의 갤러리 리스트를 반환한다.
2. 사용자가 선택한 이미지와 키워드를 DB에서 삭제한다.

🤖 마치며

---

그동안 VanillaJS로만 프로젝트를 해왔고 리액트를 다 배운 상태가 아닌 강의 기간 중에 진행한 프로젝트이다 보니 잘 할 수 있을지 걱정이 많이 되었다. 그치만 걱정되는 마음을 떨치기 위해, 동기부여를 얻기 위해 팀장의 역할을 맡았고 팀원 분들에게 피해가 가지 않도록 강의도 놓치지 않고 듣고, 여러 자료들을 찾아보며 리액트를 익혀나갔다. 덕분에 많은 시간을 쏟을 수 없는 환경 임에도 불구하고 팀원 분들의 노력까지 합쳐져 목표 결과물을 기간 내에 완성할 수 있었다. 회의를 진행하면서도 프로젝트를 진행하면서 어려움은 없는지 자유롭게 얘기하도록, 소통에 무리 없도록 분위기를 조성하는데 노력하여 낙오되는 팀원 없이 끝까지 이끌어 갔던 좋은 경험이었다💜