개요
AI를 기반으로 유저의 패션 스타일을 진단하여 유사한 코디를 추천해주고, 디지털 옷장 기능을 통한 코디 기능을 제공하는 모바일 기반 웹 서비스
기술 스택
- Server : Java17, Spring boot 3.0, Spring Security, OAuth2.0, JWT
- Frontend : Vue.js, Openvidu
- Database : Spring data JPA, Redis, MariaDB
- Devops : AWS EC2, Docker
기여 사항
- 사용자 맞춤형 추천 코디 랭킹 및 광고 배너 API 개발
- Konva-vue 라이브러리를 이용한 코디보드 제작 기능 개발
- Openvidu를 이용한 실시간 음성 채팅이 가능한 코디보드 동기화 기능 개발
- Redis 기반 캐시 스토리지를 도입하여 API 응답 속도 개선 (60% 단축)
기술 중점 사항
1. 개인 맞춤형 컨텐츠 추천 알고리즘 개발
사용자가 등록한 착장 및 의류 아이템 이미지 데이터로부터 AI 모델을 통해 추출된 스타일 벡터 데이터를 기반으로 서비스 메인 화면에서 사용자의 취향에 맞는 컨텐츠를 제공하는 알고리즘 및 API를 개발하였습니다.
2. Redis 기반 캐싱 처리를 통한 추천 API 응답 속도 개선
추천 API의 내부 로직에 다른 사용자들의 컨텐츠들과의 유사도를 측정하여 높은 순으로 정렬하는 과정이 발생하는데 반복되는 연산을 수행하여 응답이 느리다는 문제가 있었습니다. 이를 해결하기 위해 Redis를 이용하여 캐싱 스토리지를 구축하였고 반영 결과 응답 속도가 60% 감소되는 성과를 도출했습니다.
3. Openvidu(WebRTC) 를 이용한 음성 채팅 및 코디보드 동기화 기능 구현
함께 코디하기 기능에서 방에 참여한 사용자들이 음성 채팅과 함께 실시간으로 코디 보드를 편집할 수 있어야하는 요구사항을 반영하기 위해 OpenVidu 기반의 WebRTC 방식을 도입하여 서비스를 개발하였습니다. OpenVidu의 공식 문서를 참고하여 음성 채팅 기능을 구현하였고, 연결된 WebSocket을 통해 코디 보드 위 마우스 이벤트가 발생할 때마다 코디 보드 위에 놓인 의류 이미지 정보를 주고 받도록 하였습니다.
프로젝트를 통해 성장한 부분
- Vue.js에서 컴포넌트 간 데이터를 전달하는 방식과 Vuex를 이용한 상태 관리 방법에 대해 인지
- OpenVidu WebRTC 통신 방식에 대해 학습하고 음성 채팅과 WebSocket 기반 개발 경험
- 코사인 유사도를 이용한 백터 간 거리 계산 방법에 대해 알게 되었고 이를 이용하여 추천 시스템을 구현
- 이슈 트래킹 및 스프린트 일정 관리 도구로 JIRA를 이용함으로써 스프린트 단위의 프로젝트 관리 경험