저희 서비스는 사람들의 MBTI, 퍼스널 컬러, 나이, 성별 등을 고려하여 개인화된 상품을 추천하는 의류 쇼핑몰입니다.
사용자들은 일반적인 무작위 추천보다 개인화된 추천을 원하는 요구가 많다는 통계를 바탕으로 개발되었습니다.
저희 서비스는 소비자들이 의류를 구매할 때 개인의 취향과 스타일을 반영한 상품을 더욱 쉽게 찾을 수 있도록 돕기 위해 기획되었습니다. 많은 사람들은 유니크한 스타일과 개성을 추구하며, 대중적인 상품보다 자신을 표현할 수 있는 제품을 선호합니다. 또한, 개인화된 추천은 구매 결정을 도와주고, 더 나은 구매 경험을 제공하여 고객 충성도를 높이는 데에도 기여할 수 있습니다.
MBTI, 퍼스널 컬러, 나이, 성별 등의 정보는 개인의 취향과 스타일을 파악하는 데 도움을 주는 요소들입니다. MBTI는 성격 유형을 분석하여 각 유형에 어울리는 스타일과 디자인을 추천하는 데 활용될 수 있습니다. 퍼스널 컬러는 개인의 피부톤, 머리색, 눈색 등을 고려하여 어울리는 색상을 추천하는 데 사용됩니다. 이러한 정보들을 종합하여 개인의 특성에 맞는 상품을 제안하고, 개인화된 추천을 통해 사용자의 만족도를 높이고 더 나은 쇼핑 경험을 제공하는 것이 우리 서비스의 목표입니다.
개인화 추천은 사용자들에게 필요한 정보와 맞춤형 상품을 제공함으로써 구매 결정을 돕고, 쇼핑의 편리성과 만족도를 증진시킵니다. 이를 통해 우리 서비스는 고객들에게 더 나은 쇼핑 경험을 제공하고 의류 쇼핑몰의 경쟁력을 강화하는 것을 목표로 하고 있습니다.
※ 비회원
개인정보가 없는 비회원 상태에서는 판매량에 따른 상품 추천을 제공받을 수 있습니다.
※ 회원
자신이 설정한 정보에 따라 개인화 추천 상품 및 광고를 제공받을 수 있습니다.
※ 구매자
구매자는 카카오톡을 이용한 간편로그인을 할 수 있습니다.
※ 판매자
판매자는 매장 관리, 광고 등 소비자와 다른 서비스를 제공받기 위해
서비스 자체 로그인을 할 수 있습니다.
※ 카테고리 검색
원하는 품목을 선택하여 해당하는 카테고리의 상품들을 둘러볼 수 있습니다
※ 키워드 검색
키워드를 입력하는 도중 검색어를 추천받고
검색어에 해당하는 물건들을 찾아 볼 수 있습니다.
※ 최근 본 상품
유저가 최근에 어떤 상품들을 살펴보았는지 확인할 수 있습니다.
※ 스토어별 상품
스토어 별로 등록되어있는 상품들을 카테고리를 선택하여 확인할 수 있습니다.
※ 광고 클릭
광고를 클릭하여 물품의 상세페이지로 이동하여 바로 해당 물품을 살펴볼 수 있습니다.
※ 상품 상세정보 조회
상품의 상세정보에서 어떤 특징을 가진 소비자들이 이 상품을 구매하였는지
또, 관련된 상품의 리스트를 확인할 수 있습니다.
※ 결제
선택한 상품을 구매합니다.
주소입력창에서 kakaoAPI를 사용하여 자신의 주소지를 검색할 수 있고,
카카오페이와 연동되어 있어 결제를 편리하게 진행할 수 있습니다.
※ 구매 목록
내가 구매한 상품들을 확인할 수 있습니다.
※ 리뷰
구매자는 자신이 구매한 상품에 한하여 하나의 리뷰를 남길 수 있습니다.
리뷰는 별점 개수와 댓글 내용으로 구성되어 있습니다.
※ 장바구니
구매자는 상품을 장바구니에 담아두고 한 번에 결제할 수 있습니다.
수량, 사이즈를 선택할 수 있습니다.
※ 상품 상세정보에서 찜꽁
상품 상세정보를 확인하는 도중에 찜을 할 수 있습니다.
※ 상품 리스트에서 찜꽁
상품 목록을 구경하는 도중에 찜을 할 수 있습니다.
※ 스냅샷 목록
자신 및 다른 사람들이 등록한 코디 스냅샷을 확인할 수 있습니다.
마음에 드는 스냅샷에 좋아요를 표시할 수 있고,
스냅샷 주인이 착용한 옷의 정보를 확인할 수 있습니다.
※ 스냅샷 등록
자신의 코디를 게시할 수 있습니다.
자신이 스냅샷을 찍기 위해 입었던 코디 중 AVOCADO에서 구매한 물품이 있다면
물품 정보를 같이 첨부할 수 있습니다.
※ 판매 통계
판매자는 자신이 판매하고 있는 상품들의 통계를 확인할 수 있습니다.
확인 가능한 통계는 다음과 같습니다.
1. 판매하는 상품의 개수, 조회수 및 판매수
2. 스토어의 매출
3. 상품을 구매한 사람들의 퍼스널컬러 분포
4. 상품을 구매한 사람들의 연령대 분포
5. 상품을 구매한 사람들의 MBTI 분포
6. 상품을 구매한 사람들의 성별 분포
※ 상품 관리
자신이 판매하고 있는 상품 목록을 확인할 수 있으며,
각 상품에 대해 하나의 광고를 게시할 수 있습니다.
※ 광고 등록
상품에 맞는 광고 이미지를 등록하고
타겟으로 하는 소비자의 특징을 선택하여 광고를 등록할 수 있습니다.
광고는 해당 소비자들에게 더 자주 등장하게됩니다.
※ 광고 통계
광고 통계를 확인하여 등록한 광고가 얼마나 효과적이었는 지 확인합니다.
노출, 클릭, 광고로 이어진 판매 량이 어떻게 되는 지 보고 자신만의 광고 전략을 세울 수 있습니다.
- 모든 서버의 테이블을 합한 경우의 ERD
- MSA 구조로 각 서버마다 필요한 테이블의 컬럼만 갖고 있는 스키마를 따로 바라봤음
- Kafka를 통해 서버간 통신을 하여 DB 데이터 동기화
※ Frontend
node.js v18.16.0 LTS
npm v9.5.1
Next.js v13.3.1
Redux Toolkit v1.9.5
Next Redux Wrapper v8.1.0
MUI v5.12.2
ESLint v2.4.0
Prettier v9.12.0
React Material UI Carousel
React-chart-2
notistack
react-cookie
josnwebtoken v8.5.1
react-intersection-observer
※ Backend - User server
Java 17
Spring Boot (3.0.6, Kotlin)
Spring Boot Webflux
Kotlin Coroutine
R2dbc MySQL
DB
- MySQL
※ Backend - Search server
Java 11
Spring Boot (2.7.11, Java)
Spring Data Elasticsearch 8.7.0
DB
- Elasticsearch 7.17.1
※ Backend - Product server
Java 11
Spring Boot (2.7.9, Java)
JPA
QueryDSL 5.0.0
DB
- MySQL
- Redis
※ Backend - Statistics server
Java 11
Spring Boot (2.7.11, Java)
JPA
MyBatis 2.1.3
QueryDSL 5.0.0
DB
- MySQL
- Redis
※ Backend - Payment server
Java 11
Spring Boot (2.7.9, Java)
JPA
Redisson 3.17.0
DB
- MySQL
- Redis
※ Backend - Community server
Java 11
Spring Boot (2.7.11, Java)
MyBatis 2.1.3
DB
- MySQL
※ Backend - Streaming server
Java 11
Spring Boot (2.7.11, Java)
Kafka Streams 3.1.2
※ Backend - Commercial server
Java 11
Spring Boot (2.7.11, Java)
JPA
DB
- MySQL
※ Infra, etc
AWS EKS
Jenkins
Argocd
Helm
Kustomize
Strimzi Kafka Operator
- Next.js를 이용한 서버사이드 렌더링(SSR)으로 로딩 시간 단축, 검색엔진 최적화(SEO), 웹 성능 최적화(코드 스플리팅, 레이지 로딩)
- Next-Redux-Wrapper 와 RTK, RTK Query를 이용하여 Next.js에서 서버와 브라우저의 상태를 일치시켜 상태 관리를 용이성 제고
- TypeScript를 활용하여 타입 안정성을 제고하고, 디버깅 및 팀 작업에서의 편의성을 향상시킴
- Next.js의 서버와 브라우저의 상태를 고려하여 Access Token 및 Refresh Token을 활용한 로그인 상태 관리 구현
- 토큰을 쿠키에 보관하고, RTK 쿼리의 fetchBaseQuery를 커스텀하여 브라우저 단에서 토큰 상태 검증 및 최신화를 구현
- 브라우저에서 api 요청을 보낼 때는 물론 Next.js의 특징인 서버사이드렌더링 과정에서도 페이지 생성 시 토큰의 유효성을 검증하고 최신화할 수 있도록 구현
-
일반적으로 페이징 구현 시 사용하는 offset 키워드는 성능적 단점이 존재
→ [offset, offset + limit) 범위의 데이터만 가져오는 것이 아니라 [1, offset + limit)을 모두 가져온 뒤 [1, offset) 만큼 제거하는 것이므로 페이지가 커질수록 비효율적
-
offset 위치의 데이터를 찾은 뒤 해당 데이터부터 limit 개의 데이터를 가져와 성능 개선
- 판매자 관리 페이지에 진입할 때마다 매번 다음과 같은 데이터를 조회해야 함
- 매출액
- 판매한 상품의 개수
- 판매중인 상품 종류의 개수
- 판매중인 상품의 조회수 총합
- 구매자 분포 (퍼스널컬러, MBTI, 연령대, 성별)
- Redis를 캐시로 사용하여 불필요한 계산 최적화
- 결제 승인 시 재고에 대한 동시성 문제를 Redisson의 Distributed Lock을 사용해 제어
- 역색인 개념이 활용된 Elasticsearch를 사용하여 검색 성능 향상
- Reactive Stack은 event loop, non-blocking 모델을 기반으로 하여, 더 적은 하드웨어 리소스로 높은 동시성을 처리할 수 있음
- 이는 Spring MVC에서는 지원하지 않으므로, Spring Web Flux를 이용해야 함
-
광고 노출 스트림(KTable)과 클릭 스트림(KStream)의 조인을 통한 click-through-rate 계산
-
프로젝트 정보에 적었던 것
"- MSA 환경에서 Kubernetes 도입으로 어플리케이션 별 auto scailing 및 클러스터화 가능 - Jenkins, Kustomize, Helm, ArgoCD로 k8s 리소스 관리 및 상태 모니터링 - Redis의 Master / Slave 구성으로 R/W 성능 향상 - Elasticsearch의 클러스터화를 통한 검색 성능 향상 - Kafka Streams를 통한 스트리밍 데이터 실시간 처리 - Apache avro와 Confluent Schema Registry로 스키마 변경에 대한 대응 - Atomic Design Pattern과 Flux Pattern을 도입하여 프론트엔드 구조 설계 - Next.js를 이용한 서버사이드 렌더링(SSR)으로 로딩 시간 단축, 검색엔진 최적화(SEO), 웹 성능 최적화(코드 스플리팅, 레이지 로딩) - Next-Redux-Wrapper 와 RTK, RTK Query를 이용하여 Next.js에서 서버와 브라우저의 상태를 일치시켜 상태 관리를 용이성 제고 - TypeScript를 활용하여 타입 안정성을 제고하고, 디버깅 및 팀 작업에서의 편의성을 향상시킴 - Next.js의 서버와 브라우저의 상태를 고려하여 Access Token 및 Refresh Token을 활용한 로그인 상태 관리 구현 - 토큰을 쿠키에 보관하고, RTK 쿼리의 fetchBaseQuery를 커스텀하여 브라우저 단에서 토큰 상태 검증 및 최신화를 구현 - Next.js의 특징인 서버사이드렌더링 과정에서도 페이지 생성 시 토큰의 유효성을 검증하고 최신화할 수 있도록 구현"
git checkout -b S08P31A506-92-install-jenkins- Jira에서 생성한 에픽이나 작업의 번호를 말머리로 사용하여 브랜치 생성
- Jira 작업 번호 뒤에 작업 설명을 간결히 기술
git commit -m "S08P31A506-92 [feat | fix | docs | refactor | test | chore | style] install jenkins"-
Jira 컨벤션
- 기본 단위를 Epic으로 잡고 Task 및 Story로 나누어 작성하였습니다.
- 경우에 따라 Task를 sub-task로 나누어 작업했습니다.
-
협업사항 및 결과
- 월요일 아침마다 회의를 통해 금주에 해야 할 작업을 논의해 분배하였고, 금요일 오후마다 완료된 작업사항을 공유하며 차주의 작업 분배를 개선했습니다.
- Story Point는 세분화된 관리를 위해 2, 3을 위주로 할당했습니다.
- 번다운 차트를 통해 개발이 유난히 더뎠던 부분이 있다면 그 이유와 개선사항을 분석하기도 했습니다.
-
금주 공지사항 또는 이슈 공유
-
팀원 간 유용한 팁 공유
| 이름 | 역할 |
|---|---|
| 전인덕 | Infra |
| 김범식 | Frontend, UX / UI |
| 오현규 | Frontend, UX / UI |
| 김도원 | Backend |
| 윤재휘 | Backend |
| 임혜진 | Backend, 캐글 데이터 전처리 |