🔗 Link
- Service 주소 👉 https://kdt-ai4-team17.elicecoding.com/
- 자세한 프로젝트 소개는 해당 페이지를 확인해주세요 👉 프로젝트 기술 소개서
이름 | 담당 업무 |
---|---|
노송희 👑 | 백엔드(팀장) : 프로젝트 관리, API 구현, Web Push, 인공지능 학습 |
박정윤 | 백엔드 : API 구현, Flask 서버 구축, 배포, 인공지능 학습 |
석윤주 | 프론트엔드 : 메인 페이지, 소개 페이지, 마이 페이지, 디자인 |
이영우 | 프론트엔드 : 스케줄러 페이지, 검색 페이지, 디자인 |
-
코로나 이후로 영양제와 같은 건강 기능 식품에 대한 관심이 크게 높아짐.
📎관련 기사 -
긴 코로나 상황으로 인해 개인의 생체리듬이 무너진 사람들이 많음.
📎관련 기사 -
이제 코로나로 약해졌던 면역력과 같은 건강 부분과 생체 리듬에 대한 회복이 요구됨.
-
매년 국내 건강기능식품의 성장.
📎관련 기사 -
영양제를 먹으려고 해도, 뭐 부터 먹어야 좋을지에 대해 개인이 평가를 내리기 어려움.
🔎 기존에 있는 유사 서비스의 분석
- 건강 검진 이력이나 복용 중인 영양제를 바탕으로 영양제를 추천
- 맞춤 영양제를 위해 정보를 일일이 입력하고 선택지를 작성해야 해서 접근이 복잡함 (예시 : https://pilly.kr ⇒ 5분 이상 소요)
- 유료 구독 서비스는 영양제를 대신 구매해 배송해주는 서비스에 그침
✨ 기존 서비스와의 차별화
- 간단한 증상 검색을 통해 “현재” 본인의 건강 상태에 필요한 영양제를 추천
- 추천해 준 영양제들의 정보를 확인하고 그 중 본인이 원하는 영양제를 구매
- 구매 후 꾸준한 복용까지 챙겨주는 서비스
⚒️ 서비스명 확정
꾸준한 영양제 섭취와 함께, 건강한 나만의 생체 리듬을 만들어보자!
🎯 기대 효과
-
간단하게 내 증상을 입력하는 것 만으로도 AI 분석을 통해 나에게 적합한 영양제를 추천 받을 수 있음
➡️ 접근이 쉽고 섭취할 영양제를 파악하기도 편리함 -
너무 많은 영양제에 대한 정보로 구매를 고민하는 사용자의 경우
➡️ 선택지를 축소해줘서 구매로 이어질 수 있는 가능성을 높일 수 있음 -
구매한 영양제를 꾸준히 복용하는 데 어려움을 느끼는 사용자의 경우
➡️ 설정한 시간에 도착하는 푸시 알림을 통해 영양제 복용을 유도할 수 있음
🎇 활용 방안
- 증상에 대한 키워드 추출을 심화한다면, 이 증상이 심할 경우(혹은 지속되는 경우)
어떠한 질병의 초기 증세일 수 있으니 병원 내방을 권하는 등의 의료 제안 서비스로 확장 가능
-
AI 문장 분석 영양제 추천 서비스
-
나만을 위한 영양제를 추천해주세요.
- “눈이 뻑뻑해요.. 요새 자주 피곤해요” 와 같은 사용자의 상태를 입력 받으면 그 문장 안에서 AI가 키워드를 추출해서 사용자의 현재 상태를 기반하여 건강 개선에 도움이 되는 영양제를 추천
-
결과 페이지에서 구매까지 한 방에!
- 추천받은 영양제는 바로 구매로 이어질 수 있도록 제품 목록을 제공
-
섭취 전 확인해보세요!
- 추천 받은 영양제에 대해 의사나 약사가 설명하는 유튜브 동영상을 제공, 사용자는 전문가의 설명을 듣고 복용 의사를 결정할 수 있음
-
-
영양제 북마크 기능
- 증상 검색 결과로 나온 영양제 중 마음에 드는 영양제를 북마크
- 북마크 한 영양제들은 마이페이지에서 확인 및 북마크 취소 가능
-
영양제 복용 시간 및 건강 관리 스케줄 관리
-
한 번에 이해하는 스케줄러 사용법
- Onboarding Description으로 스케줄러 사용법을 기능별로 이해할 수 있도록 도와줌
- 사용자 편의를 위해 “오늘 하루 더이상 보이지 않기” 기능 추가
-
복용할 영양제 선택
- 아침 / 점심 / 저녁에 걸쳐 북마크 한 영양제를 분류
-
드래그앤드롭으로 일정 생성
- 영양제 복용 일정과 생체리듬 개선 관련 활동들을 스케줄러에 추가할 수 있음
-
스케줄 달성률 체크하기
- 매일 매일 체크리스트 작성을 통해 달성률에 따라 달라지는 배경색을 확인하며 건강한 하루를 보냈는지 회고할 수 있음
- 5개 이상 성공 : 초록불
- 3개 이상 성공 : 노란불
- 1개 이상 성공 : 빨간불
- 매일 매일 체크리스트 작성을 통해 달성률에 따라 달라지는 배경색을 확인하며 건강한 하루를 보냈는지 회고할 수 있음
-
-
구독 후 영양제 복용 시간 푸시 알림 서비스
- Web / Android
- 두 가지 환경 중 선택하거나 둘 다 구독 신청 가능
- Android의 경우 쉽게 구독할 수 있도록 QR 코드 제공
- 사용자가 설정한 영양제 일정에 따라 푸시 알림 전송
- 아침 / 점심 / 저녁에 분류한 영양제 정보와 함께 영양제 복용 시간이라는 알림을 확인하여 규칙적인 영양제 복용에 도움을 줌
- ex) {예진: user_name}님, {아침 / 점심 / 저녁: time} 영양제 드실 시간이에요! {루테인, 비타민B: supplements} 영양제를 복용해주세요.
- Web / Android
-
원하는 영양제를 검색할 수 있는 영양제 백과사전
- 영양제명으로 검색 / 원재료로 검색
- 두 가지 검색 옵션을 제공해 사용자 편의성과 검색 결과의 정확도를 높임
- 영양제명으로 검색 / 원재료로 검색
-
한눈에 보는 건강 신호등
- 마이페이지의 yearly heatmap
- 매일 매일 작성한 체크리스트의 결과 색깔들(빨강, 노랑, 초록)을 연단위로 보여줌
- 본인이 얼마나 건강한 하루 하루를 보내고 있는지 회고할 수 있음
- 마이페이지의 yearly heatmap
-
내 동년배들은 다 이거 먹더라
- 마이페이지의 추천 영양제
- 연령대, 성별에 따른 추천 영양제 목록을 제공
- 역시 클릭하면 바로 구매 가능하도록 연결
- 향후 직업에 따른 추천 영양제 서비스도 추가할 예정
- 마이페이지의 추천 영양제
-
모바일 홈 화면에 추가
- 서비스 접근성을 높이기 위해 PWA를 적용
- Android의 경우 chrome, ios의 경우 safari에서 홈 화면에 추가 시 아이콘을 통해 앱과 같이 접근 가능
- 서비스 접근성을 높이기 위해 PWA를 적용
-
모바일 환경 최적화를 위해 모든 페이지에 반응형 UI 적용
- 메인, 검색, 마이 페이지
- 스케줄러 페이지
- 스케줄러 형식을 weekly에서 daily로 변경해서 보여줌
- 스케줄러 형식을 weekly에서 daily로 변경해서 보여줌
AI
📦ai
┣ 📂__pycache__
┣ 📜Dockerfile
┣ 📜app.py
┣ 📜requirements.txt
┣ 📜stopwords.txt
┣ 📜test_model.py
┣ 📜textrule.txt
┣ 📜trained_mtx.pkl
┣ 📜trained_tf.pkl
┗ 📜verifyToken.py
Frontend
📦src
┣ 📂hooks
┃ ┣ 📜useLoginCheck.tsx
┃ ┗ 📜useResize.tsx
┣ 📂routes
┃ ┣ 📂Pmr
┃ ┃ ┣ 📜Pmrguide.tsx
┃ ┃ ┗ 📜index.tsx
┃ ┣ 📂Schedule
┃ ┃ ┣ 📂Mobile
┃ ┃ ┃ ┣ 📜PushCheckList.tsx
┃ ┃ ┃ ┗ 📜Subscribe.tsx
┃ ┃ ┣ 📜Calendar.css
┃ ┃ ┣ 📜Calendar.tsx
┃ ┃ ┣ 📜CheckList.tsx
┃ ┃ ┣ 📜Cookies.ts
┃ ┃ ┣ 📜DayItem.tsx
┃ ┃ ┣ 📜Onboarding.tsx
┃ ┃ ┣ 📜Subscribe.tsx
┃ ┃ ┣ 📜SupItem.tsx
┃ ┃ ┣ 📜Supplements.tsx
┃ ┃ ┣ 📜TaskItem.tsx
┃ ┃ ┗ 📜YearlyChecklist.tsx
┃ ┣ 📂Search
┃ ┃ ┣ 📂Main
┃ ┃ ┃ ┣ 📜Main.tsx
┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┗ 📂Result
┃ ┃ ┃ ┣ 📜Blankresult.tsx
┃ ┃ ┃ ┣ 📜PRList.tsx
┃ ┃ ┃ ┣ 📜Promotion.tsx
┃ ┃ ┃ ┣ 📜RecommendationArea.tsx
┃ ┃ ┃ ┣ 📜Result.tsx
┃ ┃ ┃ ┣ 📜VideoArea.tsx
┃ ┃ ┃ ┗ 📜index.tsx
┃ ┣ 📂SupSearch
┃ ┃ ┣ 📜Paging.css
┃ ┃ ┣ 📜SupCard.tsx
┃ ┃ ┣ 📜SupSearch.tsx
┃ ┃ ┣ 📜SupSearchResult.tsx
┃ ┃ ┗ 📜SupStyled.tsx
┃ ┣ 📂User
┃ ┃ ┣ 📜Login.tsx
┃ ┃ ┣ 📜MyPage.tsx
┃ ┃ ┣ 📜MyYearlyChecklist.tsx
┃ ┃ ┣ 📜Reigsterform.tsx
┃ ┃ ┣ 📜UserBookMarkPage.tsx
┃ ┃ ┣ 📜UserMyPage.tsx
┃ ┃ ┗ 📜UserRecommendPage.tsx
┃ ┗ 📂_shared
┃ ┃ ┣ 📂Footer
┃ ┃ ┃ ┣ 📜Aboutus.tsx
┃ ┃ ┃ ┣ 📜Footer.tsx
┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┣ 📂Header
┃ ┃ ┃ ┣ 📜Header.tsx
┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┣ 📜AnalysisCard.tsx
┃ ┃ ┣ 📜BookMark.tsx
┃ ┃ ┣ 📜Loading.tsx
┃ ┃ ┣ 📜PRCard.tsx
┃ ┃ ┣ 📜PRModal.tsx
┃ ┃ ┣ 📜ScrollTopButton.tsx
┃ ┃ ┗ 📜Searchbar.tsx
┣ 📜react-app-env.d.ts
┣ 📜index.css
┣ 📜Api.ts
┣ 📜App.tsx
┣ 📜Dispatcher.tsx
┣ 📜GlobalStyle.tsx
┣ 📜Router.tsx
┣ 📜atoms.tsx
┣ 📜index.tsx
┗ 📜reducer.ts
Backend
📦src
┣ 📂db
┃ ┣ 📂config
┃ ┃ ┗ 📜config.ts
┃ ┣ 📂models
┃ ┃ ┣ 📜analysis.ts
┃ ┃ ┣ 📜bookMark.ts
┃ ┃ ┣ 📜checklist.ts
┃ ┃ ┣ 📜dailySupplement.ts
┃ ┃ ┣ 📜index.ts
┃ ┃ ┣ 📜recommend.ts
┃ ┃ ┣ 📜schedule.ts
┃ ┃ ┣ 📜subscribe.ts
┃ ┃ ┣ 📜supplement.ts
┃ ┃ ┗ 📜user.ts
┃ ┣ 📂migrations
┃ ┃ ┣ 📜1.create-table-user.ts
┃ ┃ ┣ 📜2.create-table-schedule.ts
┃ ┃ ┣ 📜3.create-table-checklist.ts
┃ ┃ ┣ 📜4.create-table-supplement.ts
┃ ┃ ┣ 📜5.create-table-daily-supplement.ts
┃ ┃ ┣ 📜6.create-table-recommend.ts
┃ ┃ ┣ 📜7.create-table-bookmark.ts
┃ ┃ ┣ 📜8.create-table-subscribe.ts
┃ ┃ ┗ 📜9.create-table-analysis.ts
┃ ┣ 📜Analysis.ts
┃ ┣ 📜BookMark.ts
┃ ┣ 📜Checklist.ts
┃ ┣ 📜DailySupplement.ts
┃ ┣ 📜Schedule.ts
┃ ┣ 📜Subscribe.ts
┃ ┣ 📜Supplement.ts
┃ ┗ 📜User.ts
┣ 📂logs
┣ 📂controllers
┃ ┣ 📜bookMarkController.ts
┃ ┣ 📜checklistController.ts
┃ ┣ 📜scheduleController.ts
┃ ┣ 📜subscribeController.ts
┃ ┣ 📜supplementController.ts
┃ ┗ 📜userController.ts
┣ 📂customType
┃ ┗ 📂express
┃ ┃ ┗ 📜index.d.ts
┣ 📂interfaces
┃ ┣ 📜bookMarkInput.ts
┃ ┣ 📜checklistInput.ts
┃ ┣ 📜scheduleInput.ts
┃ ┣ 📜subscribeInput.ts
┃ ┗ 📜userInput.ts
┣ 📂middlewares
┃ ┣ 📜errorMiddleware.ts
┃ ┣ 📜loginRequired.ts
┃ ┣ 📜validator.ts
┃ ┣ 📜verifyRefreshToken.ts
┃ ┗ 📜verifyToken.ts
┣ 📂routes
┃ ┣ 📜bookMarkRouter.ts
┃ ┣ 📜checklistRouter.ts
┃ ┣ 📜scheduleRouter.ts
┃ ┣ 📜subscribeRouter.ts
┃ ┣ 📜supplementRouter.ts
┃ ┗ 📜userRouter.ts
┣ 📂services
┃ ┣ 📜bookMarkService.ts
┃ ┣ 📜checklistService.ts
┃ ┣ 📜scheduleService.ts
┃ ┣ 📜subscribeService.ts
┃ ┣ 📜supplementService.ts
┃ ┗ 📜userService.ts
┣ 📂swagger
┃ ┣ 📂paths
┃ ┃ ┣ 📜_index.yaml
┃ ┃ ┣ 📜bookmark.yaml
┃ ┃ ┣ 📜recommend.yaml
┃ ┃ ┣ 📜schedule.yaml
┃ ┃ ┣ 📜supplement.yaml
┃ ┃ ┗ 📜user.yaml
┃ ┗ 📜openapi.yaml
┣ 📂utils
┃ ┣ 📜emailUtil.ts
┃ ┣ 📜error-util.ts
┃ ┣ 📜jwt-util.ts
┃ ┣ 📜redis.ts
┃ ┣ 📜webPush.ts
┃ ┗ 📜winston.ts
┣ 📜app.ts
┗ 📜swagger.yaml
Push
📦src
┣ 📂controllers
┃ ┗ 📜subscribeController.ts
┣ 📂db
┃ ┣ 📂config
┃ ┃ ┗ 📜config.ts
┃ ┣ 📂models
┃ ┃ ┣ 📜dailySupplement.ts
┃ ┃ ┣ 📜index.ts
┃ ┃ ┣ 📜schedule.ts
┃ ┃ ┣ 📜subscribe.ts
┃ ┃ ┣ 📜supplement.ts
┃ ┃ ┗ 📜user.ts
┃ ┣ 📜Schedule.ts
┃ ┗ 📜Subscribe.ts
┣ 📂interfaces
┃ ┣ 📜subscribeInput.ts
┃ ┗ 📜userInput.ts
┣ 📂middlewares
┃ ┗ 📜errorMiddleware.ts
┣ 📂routes
┃ ┗ 📜subscribeRouter.ts
┣ 📂services
┃ ┗ 📜subscribeService.ts
┣ 📂utils
┃ ┣ 📜emailUtil.ts
┃ ┣ 📜error-util.ts
┃ ┣ 📜jwt-util.ts
┃ ┣ 📜webPush.ts
┃ ┗ 📜winston.ts
┗ 📜app.ts
🔔 Database
- Redis : Refresh Token을 저장하기 위해 사용
- MySQL : Cloud 서버에서 이용하기 위해 Oracle 인스턴스를 DB 전용 서버로 구축
🔔 AI
- Sklearn : 요청시 학습한 결괏값을 flask 웹 서비스에 반환
- Flask : 결괏값을 WSGI 서버인 gunicorn에 전달
- gunicorn : front에 응답
🔔 Push 서버 분리
- 서비스 간의 의존도를 낮추기 위해 기존의 Node 서버와 Push 전송 서버를 분리
- ERD Cloud
-
데이터셋 수집
-
식품의약품안전처에서 제공하는 OpenAPI로 데이터셋을 수집
📎공공데이터 활용 -
단종, 개편된 영양제 데이터셋들을 방지하기 위해 “최종수정일시” 컬럼이 2년 이내(2021년부터)인 데이터만 사용
-
네이버 검색 쇼핑 API를 사용해 영양제 구매 링크, 이미지 썸네일 컬럼 추가
📎네이버 search API
-
-
데이터셋 전처리
-
하나의 컬럼이라도 null인 값 제거
-
특수문자 제거 (한글, 숫자, 영어 빼고 모두 삭제)
-
OKT를 사용하여 “주된기능성” 컬럼의 형태소 분석 수행, 의미 없는 한국어 불용어 제거
📎open-korean-text
-
-
인공지능 모델 학습 및 테스트
-
Sklearn의 tfidfvectorizer를 사용해 전처리 한 데이터들의 가중치(tf)를 부여
📎sklearn.feature_extraction.text.TfidfVectorizer -
사용자에게 문장을 입력 받으면 전처리 단계의 2, 3번을 진행 후 저장된 가중치를 이용해서 “주된기능성” 컬럼과의 유사도 산정
-
유사도가 가장 높은 순으로 3개의 영양제 index 응답
- 만약 같은 유사도를 가진 영양제들이 3개 이상이면 그 중에 랜덤하게 응답
-
-
응답 정확도 개선
- 인공지능 모델 학습만으로 모든 단어를 포괄할 수 없어 QA를 수행하며 부족한 부분은 룰을 추가
🪄 여자 → 여성, 생리 → 월경, 변비 → 배변 등
-
Front-end
React
,TypeScript
,axios
Recoil
,daisyUI
,Styled components
-
Back-end
Node.js
,TypeScript
Flask
,Python
Redis
,MySQL - Sequelize
-
AI
Sklearn - tfidfvectorizer
-
Deployment
-
Docker
,Docker-compose
,Nginx
,gunicorn
,Certbot - LetsEncrypt
1. 첫 번째 시연 영상 1분 30초에 나오는 큐알 코드로 모바일에서 구독 2. 스케줄에 등록한 시간에 웹, 앱 모두 푸시 알람