엘리스트랙 - 3차 팀프로젝트 회고 [MyElecCar]
길다면 길고 짧다면 짧은 6개월간의 엘리스 AI 트랙 부트캠프가 끝났습니다. 마지막 팀프로젝트인 AI 웹서비스 팀 프로젝트를 되돌아보는 시간을 가져보도록 하겠습니다. :)
1. 프로젝트 소개
전기차 추천 서비스 ‘myElecCar’
myElecCar는 유저의 성향, 현재 차량, 주유 내역 등을 토대로 유저에게 적합한 전기차를 추천해주며 유저들간 소통의 공간을 제공해주는 서비스 입니다.
유저의 성향
mbti와 유사한 간단한 테스트를 통해 유저의 성향을 16개로 구분지어 파악한 후 가장 어울릴만한 전기차를 추천합니다.
현재 차량 이미지
유저가 현재 가지고있는 내연기관 차량 혹은 드림카의 이미지를 입력받아 브랜드, 차종을 분류한 후 전기차를 추천해줍니다. 브랜드, 차종이 분류되지 않는 경우 AI가 유사하다고 판단한 차량들을 선택하도록 안내해주고 전기차를 추천해줍니다.
주유 내역
기존 내연 기관 차량을 소지하고 있던 유저라면 주유 내역을 기록해 연비와 가장 흡사한 전비를 가진 전기차를 추천해줍니다.
유저는 위 3가지 기준을 통해 각각의 전기차를 추천받고 최종 하나의 전기차를 선택합니다.
개발 기간
- 기획 기간 : 2022.11.14 ~ 2022.11.28
- 개발 기간 : 2022.11.29 ~ 2022.12.16
- AI 모델 학습 : 2022.12.02 ~ 2022.12.15
기술 스택
Front-End
- React.js
- TypeScript
- ReactQuery
- styled-component
Back-End
- Express.js
- Flask
- MongoDB
AI
- TensorFlow
- Resnet50
프로젝트 이미지
- 랜딩 페이지
- 메인페이지
- 차량 이미지 등록
- 성향 테스트
- 추천 결과 페이지
- 안내 챗봇
2. 담당 역할
메인페이지
- 전기차 추천 리포트 컴포넌트 제작
- 회원 안내 컴포넌트 제작
- 추천 과정 안내 컴포넌트 제작
- 안내 챗봇 제작
모델 학습
- resnet50 사용하여 이미지 분석 모델 학습
- 모델 학습 최종 결과
loss: 0.6139, accuracy: 0.8819
차량 이미지로 추천
- 이미지 업로드 기능 구현
- 학습한 모델 웹서비스에서 동작하도록 연결 구현
- 유사 차량 결과 컴포너트 구현
- 플라스크 서버 연결
인터페이스
- 모바일 페이지 최적화
3. 발생한 팀 이슈... 🥲
팀 구성 불균형 문제
- 6명으로 이루어진 다른 팀들보다 적은 5명으로 이루어진 팀 구성
- AI 과제가 주어진 프로젝트인데 AI 담당 부재..
- BE 1명, FE 4명으로 팀 구성 불균형
팀원 이탈 문제...
-
3주차때 1명 뿐이던 백엔드 팀원이 아무말 없이 사라지셨습니다... 거기다 팀장님 이셨는데...
-
원래 불균형하던 팀 구성이 FE 4명으로 되어버렸습니다 ㅋㅋㅋ..
-
담당하시던 백엔드 API 문서 정리해서 주신다고 하셨는데 받지 못하였습니다.
-
깃에 백엔드 코드도 올라와있지 않았습니다...
4. 프로젝트 중 노력한 부분
팀 화합 부분
- 기존 FE 총괄 역할 있었기 때문에 팀장님이 나가신 이후 팀장 역할을 하려고 노력하였습니다.
- 매일 매일 프로젝트 진행도 파악
- 팀원 각각 담당 파트 진척도 파악(어려움 여부 확인)
- 항상 긍정적으로 할수있다는 분위기 조성
- 전체적인 프로젝트 구성 파악 - 프론트엔드 파트에 더 집중하고 싶었지만... 팀원분들이 기피하는 모델 학습 및 모델 적용 부분을 담당하였습니다.
프로젝트 부분
- 모델 학습 부분이 제대로 완료되지 않는 경우를 대비하여 teachable machine 이용한 보험 코드를 마련해 두었습니다.
- 저번 프로젝트 때 모바일에 최적화되지 않았던것이 아쉬웠기 때문에 이번 프로젝트는 모바일 UI에도 최적화 되도록 노력하였습니다.
5. 아쉬웠던 부분
tensorflow.js
- tensorflow.js를 이용해서 학습한 모델을 사용하려고 하였는데 tensorflow.js를 사용시 에러가 지속적으로 발생하였습니다.
- 텐서플로우, 레딧, 기타 블로그 등 거의 모든 관련 게시글을 보고 적용하였는데도 해결 안됨... (node 버전 변경, xcode 설치, 가상 환경, m1 mac 문제 등등)
- 결국 익스프레스 내부에서 학습한 모델을 사용하지 않고 따로 플라스크 서버를 만들고 파이썬으로 모델을 적용하여 사용하였습니다.
플라스크 서버
- 기존 프론트 서버, 백엔드 서버(익스프레스), DB서버로만 구성된 프로젝트만 경험해보았는데 이번에 익스프레스 서버에서 플라스크 서버로 요청을 보내고 응답을 받는 것이 추가된 프로젝트를 처음 경험해 보았습니다. 처음 해보기도 했고 시간이 부족해서 요청 에러 처리를 제대로 하지 못했습니다..
백엔드 처리
- 백엔드에서 아주 기초적인 CRUD만 처리하도록 코드가 작성되어 필터(검색), 정렬 등의 기능을 프론트에서 처리하도록 하였습니다. 임시 방편이기 때문에 데이터가 많아질수록 로딩이 길어지는 문제가 눈에 보여서 아쉬웠습니다..
6. 마치며...
3주차 팀장님이 나가셨을때는 정말 아무 결과물도 못나올거라고 생각했었는데 팀원분들 모두 노력해서 결과물을 완성할 수 있었습니다. 물론 프로젝트에 있어 미숙한 부분도 많지만 포기하지 않고 긍정적인 분위기로 프로젝트를 진행해보는 좋은 경험해보았습니다.
엘리스 트랙을 끝마치는 마지막 프로젝트였는데 아쉽게도 수상은 하지 못하였습니다 ㅠㅠ...
그래도 엘리스 트랙 마지막 수료식에서 성실상을 받게되어 위안으로 삼았습니다.. 앞으로 더 노력하며 화이팅!!
