[부산대학교 K-Digital Trainig] AI활용 빅데이터분석 풀스택웹서비스 SW 개발자 양성과정
수강중 진행한 프로젝트 #2
- 프로젝트 이름 : AI기반 의류 추천 웹서비스
- 개발기간 : 2024.07.01 ~ 2024.07.25
- 개발목적 :
AI기반 의류 추천 서비스를 제공함으로써 사용자들이 원하는 스타일의 의류를 쉽게 찾을 수 있도록 도와줍니다.
기업고객과 일반고객을 대상으로 하는 2가지 서비스를 제공합니다.- Business Service : 이 서비스는 단순히 상품을 추천하는 것에 그치지 않고, 기업 고객이 최신 트렌드와 소비자 선호도를 분석할 수 있도록 지원합니다. 추천 시스템을 통해 소비자들이 어떤 스타일을 선호하는지, 어떤 상품이 트렌드에 부합하는지에 대한 유용한 인사이트를 제공합니다. 이를 통해 기업은 신속하게 적합한 상품을 발굴하고, 마케팅 전략을 최적화할 수 있습니다.
- Customer Service : 또한, 이 모델은 일반 소비자들도 사용할 수 있도록 하여, 자신의 의류 이미지와 유사한 상품을 쉽게 찾아낼 수 있는 개인화된 쇼핑 경험을 제공합니다. 이로써 소비자들이 시간과 노력을 절약하면서도 자신에게 가장 잘 맞는 패션 아이템을 발견할 수 있도록 돕습니다.
- 프로젝트 주제 제공 기업 : 부산대학교 K-Digital Training 과정과 연계된 기업(Nine Ounce)의 데이터를 받고 요구사항을 반영하여 개발진행
- 활용 데이터 : K-Fashion Dataset, Nine Ounce Product Dataset, 인터넷 쇼핑몰 크롤링 Dataset
- 핵심 아이디어 : 인지도 높은 인터넷 의류 쇼핑몰을 크롤링한 데이터셋을 딥러닝을 활용해 학습시키고 고객이 의류 이미지를 입력하면 학습된 모델에서 분석하여 가장 유사한 벡터값을 가지는 상품을 추천해주는 서비스
장민우(본인)
역할 : UX/UI 디자인, 화면 레이아웃 설계, 페이지별 컴포넌트 제작
기술스택
채수철, 김보성(GITHUB Link)
역할 : 데이터베이스 설계, REST API 구축, 비즈니스 로직 구현
기술스택
신건영(GITHUB Link)
역할 : 데이터 수집 및 전처리, 모델 개발, 프로젝트 일정관리
기술스택
- root.js 생성 후 RouterProvider, CreateBrowserRouter (React Router v.6.4 이상)를 사용하여 직관적이고 계층적인 라우팅 관리 구현
- Suspense fallback, Lazy()를 사용하여 페이지 로딩시간 단축 및 로딩상태 표현
- MainLayout.js 생성 후 Header, Footer를 넣고 Main이 들어갈 자리에 children(props)을 삽입하는 Layout Component Pattern을 사용하여 유지보수 용이 및 코드 재사용성 증가
- 기능별, 페이지별 컴포넌트를 계층적으로 구조화하여 코드 가독성 향상
- 컴포넌트 간 반복되는 로직이나 상태관리를 커스텀 훅으로 추출하여 사용하여 코드 재사용성 증가 및 컴포넌트 간결화 유지
- Redux를 활용하여 로그인 정보를 전역 상태로 관리
- React-Cookie를 활용하여 사용자 로그인 시 Access Token과 Refresh Token을 cookie에 저장
- Axios interceptor로 만료된 access token으로 API 요청 시 자동갱신 하도록 구현
- Framer Motion : 웹페이지에서 텍스트 및 태그요소에 애니메이션 효과 구현
- Tailwind.config.js 커스터마이징으로 웹페이지 상호작용시 애니메이션 효과 구현
- Swiper : 이미지 카드를 grid 대신 carousel로 표현하여 UX 향상
- Nivo-pie Chart : 출력 데이터를 원형차트로 시각화하여 UX 향상
- Dropzone : 파일을 브라우저에 Drag&Drop 할 수 있도록 구현
| Main Page Animation |
|---|
 |
| Customer Service Page(Drag&Drop) Animation |
|---|
 |
| Customer Service Page(Select Sample) Animation |
|---|
 |
| Login Page Button Animation |
|---|
 |
| Signup Page Button Animation |
|---|
 |
-
배운점
- 디자인 패턴 Layout Component Pattern을 사용하면서 컴포넌트를 개별적으로 관리하고 구성할 수 있었으며, 컴포넌트들이 독립적으로 작동하여 재사용성과 유지보수성이 향상 되는 것을 알게 되었다.
- 라우틸 RouterProvider를 알게 되었고 App.js 에서 라우팅을 나열하는 것이 아닌, 따로 컴포넌트를 만들어서 계층적으로 라우트를 관리할 수 있어서 프로젝트 도중 수정작업을 수월하게 할 수 있었다.
- 애니메이션 화면을 꾸미는데 있어서 공을 좀 많이 들였고, 그만큼 시간도 많이 소요되었던 작업이다. Framer Motion 같은 라이브러리도 사용할 수 있었고, tailwind.config.js 를 커스터마이징 하는 방법도 익힐 수 있었다.
-
아쉬운점
- 시간 분배 첫 번째 프로젝트와 달리 이번 프로젝트에서는 Front-end를 맡게 되었는데 2개월전 배웠던 React를 다시 기억해내느라 많은 시간이 소요되었다. 게다가 작은 컴포넌트 들을 꾸미는 작업에 많은 시간을 소요하면서(그만큼 재미가 있어서..) 정작 계획했었던 페이지들(About Page, My Page 등)을 완벽하게 구현하지 못했다. 페이지 구성의 큰 틀을 먼저 잡고 기능들을 먼저 구현한 다음 꾸미는 것은 마지막에 하는 것으로 우선순위를 잡아야 겠다고 생각했다.
- 튜토리얼 기능 위 시간 분배와 맞물리는 이유 때문에 원래 계획했었던 튜토리얼 기능을 구현하지 못했다. 처음 서비스를 시작하는 유저에게 첫 화면에서 각 서비스 들에 대한 설명을 모달창으로 구현할 계획이었는데 하지 못해서 아쉬웠다. 추후 다른 프로젝트 진행시 구현해 볼 계획이다.
-
총평
첫 번째 프로젝트에서는 Back-end, 이번 프로젝트에서는 Front-end 역할을 맡았다. 교육과정 중 배운것들을 다 구현해보겠다는 마음가짐으로 프로젝트를 진행했고, 교육과정의 제목 처럼 풀스택 웹개발에 대해서 얕게 찍먹해본 느낌이다. 프로젝트 진행하기 전과 후의 내가 가지고 있는 풀스택 웹개발에 대한 이해도는 많이 달라졌겠지만 이제 출발선상에 올라간 느낌이다.(아직 아닐지도..) 계속해서 정진하자.