parkjungyoon / pill-my-rhythm

💊 영양제 추천 웹 서비스입니다.

Pill my rhythm

PMR은 인공지능을 기반으로 사용자의 건강 상태에 맞춘 영양제 추천, 영양제 복용 스케줄 관리 서비스입니다.

🔗 Link

• Service 주소 👉 https://kdt-ai4-team17.elicecoding.com/
• 자세한 프로젝트 소개는 해당 페이지를 확인해주세요 👉 프로젝트 기술 소개서

TEAM

이름	담당 업무
노송희 👑	백엔드(팀장) : 프로젝트 관리, API 구현, Web Push, 인공지능 학습
박정윤	백엔드 : API 구현, Flask 서버 구축, 배포, 인공지능 학습
석윤주	프론트엔드 : 메인 페이지, 소개 페이지, 마이 페이지, 디자인
이영우	프론트엔드 : 스케줄러 페이지, 검색 페이지, 디자인

1. 서비스 소개

💡 기획 배경

• 코로나 이후로 영양제와 같은 건강 기능 식품에 대한 관심이 크게 높아짐.
  📎관련 기사

• 긴 코로나 상황으로 인해 개인의 생체리듬이 무너진 사람들이 많음.
  📎관련 기사

• 이제 코로나로 약해졌던 면역력과 같은 건강 부분과 생체 리듬에 대한 회복이 요구됨.

• 매년 국내 건강기능식품의 성장.
  📎관련 기사

• 영양제를 먹으려고 해도, 뭐 부터 먹어야 좋을지에 대해 개인이 평가를 내리기 어려움.

🚩 목적 및 필요성

🔎 기존에 있는 유사 서비스의 분석

• 건강 검진 이력이나 복용 중인 영양제를 바탕으로 영양제를 추천
• 맞춤 영양제를 위해 정보를 일일이 입력하고 선택지를 작성해야 해서 접근이 복잡함 (예시 : https://pilly.kr ⇒ 5분 이상 소요)
• 유료 구독 서비스는 영양제를 대신 구매해 배송해주는 서비스에 그침

✨ 기존 서비스와의 차별화

• 간단한 증상 검색을 통해 “현재” 본인의 건강 상태에 필요한 영양제를 추천
• 추천해 준 영양제들의 정보를 확인하고 그 중 본인이 원하는 영양제를 구매
• 구매 후 꾸준한 복용까지 챙겨주는 서비스

⚒️ 서비스명 확정

꾸준한 영양제 섭취와 함께, 건강한 나만의 생체 리듬을 만들어보자!

📝 기대 효과와 활용 방안

🎯 기대 효과

• 간단하게 내 증상을 입력하는 것 만으로도 AI 분석을 통해 나에게 적합한 영양제를 추천 받을 수 있음
  ➡️ 접근이 쉽고 섭취할 영양제를 파악하기도 편리함

• 너무 많은 영양제에 대한 정보로 구매를 고민하는 사용자의 경우
  ➡️ 선택지를 축소해줘서 구매로 이어질 수 있는 가능성을 높일 수 있음

• 구매한 영양제를 꾸준히 복용하는 데 어려움을 느끼는 사용자의 경우
  ➡️ 설정한 시간에 도착하는 푸시 알림을 통해 영양제 복용을 유도할 수 있음

  
  

🎇 활용 방안

• 증상에 대한 키워드 추출을 심화한다면, 이 증상이 심할 경우(혹은 지속되는 경우)
  어떠한 질병의 초기 증세일 수 있으니 병원 내방을 권하는 등의 의료 제안 서비스로 확장 가능

🔩 서비스 기능

1. 메인 기능

• AI 문장 분석 영양제 추천 서비스
  

  • 나만을 위한 영양제를 추천해주세요.

    • “눈이 뻑뻑해요.. 요새 자주 피곤해요” 와 같은 사용자의 상태를 입력 받으면 그 문장 안에서 AI가 키워드를 추출해서 사용자의 현재 상태를 기반하여 건강 개선에 도움이 되는 영양제를 추천

  • 결과 페이지에서 구매까지 한 방에!

    • 추천받은 영양제는 바로 구매로 이어질 수 있도록 제품 목록을 제공

  • 섭취 전 확인해보세요!

    • 추천 받은 영양제에 대해 의사나 약사가 설명하는 유튜브 동영상을 제공, 사용자는 전문가의 설명을 듣고 복용 의사를 결정할 수 있음

2. 서브 기능

• 영양제 북마크 기능

  • 증상 검색 결과로 나온 영양제 중 마음에 드는 영양제를 북마크
  • 북마크 한 영양제들은 마이페이지에서 확인 및 북마크 취소 가능

• 영양제 복용 시간 및 건강 관리 스케줄 관리

  • 한 번에 이해하는 스케줄러 사용법

    • Onboarding Description으로 스케줄러 사용법을 기능별로 이해할 수 있도록 도와줌
    • 사용자 편의를 위해 “오늘 하루 더이상 보이지 않기” 기능 추가

  • 복용할 영양제 선택

    • 아침 / 점심 / 저녁에 걸쳐 북마크 한 영양제를 분류

  • 드래그앤드롭으로 일정 생성

    • 영양제 복용 일정과 생체리듬 개선 관련 활동들을 스케줄러에 추가할 수 있음

  • 스케줄 달성률 체크하기

    • 매일 매일 체크리스트 작성을 통해 달성률에 따라 달라지는 배경색을 확인하며 건강한 하루를 보냈는지 회고할 수 있음
      • 5개 이상 성공 : 초록불
      • 3개 이상 성공 : 노란불
      • 1개 이상 성공 : 빨간불

• 구독 후 영양제 복용 시간 푸시 알림 서비스

  • Web / Android
    • 두 가지 환경 중 선택하거나 둘 다 구독 신청 가능
    • Android의 경우 쉽게 구독할 수 있도록 QR 코드 제공
  • 사용자가 설정한 영양제 일정에 따라 푸시 알림 전송
    • 아침 / 점심 / 저녁에 분류한 영양제 정보와 함께 영양제 복용 시간이라는 알림을 확인하여 규칙적인 영양제 복용에 도움을 줌
    • ex) {예진: user_name}님, {아침 / 점심 / 저녁: time} 영양제 드실 시간이에요! {루테인, 비타민B: supplements} 영양제를 복용해주세요.

• 원하는 영양제를 검색할 수 있는 영양제 백과사전

  • 영양제명으로 검색 / 원재료로 검색
    • 두 가지 검색 옵션을 제공해 사용자 편의성과 검색 결과의 정확도를 높임

• 한눈에 보는 건강 신호등

  • 마이페이지의 yearly heatmap
    • 매일 매일 작성한 체크리스트의 결과 색깔들(빨강, 노랑, 초록)을 연단위로 보여줌
    • 본인이 얼마나 건강한 하루 하루를 보내고 있는지 회고할 수 있음

• 내 동년배들은 다 이거 먹더라

  • 마이페이지의 추천 영양제
    • 연령대, 성별에 따른 추천 영양제 목록을 제공
    • 역시 클릭하면 바로 구매 가능하도록 연결
    • 향후 직업에 따른 추천 영양제 서비스도 추가할 예정

3. 부가 기능

• 모바일 홈 화면에 추가

  1. 서비스 접근성을 높이기 위해 PWA를 적용
     
  2. Android의 경우 chrome, ios의 경우 safari에서 홈 화면에 추가 시 아이콘을 통해 앱과 같이 접근 가능
     
     

• 모바일 환경 최적화를 위해 모든 페이지에 반응형 UI 적용
  

  1. 메인, 검색, 마이 페이지
  2. 스케줄러 페이지
     
     • 스케줄러 형식을 weekly에서 daily로 변경해서 보여줌
       

2. 프로젝트 설계

🗂 파일 구조도

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

📑 와이어 프레임

1. 메인 MVP
   📎링크
2. 서브 MVP
   📎링크

⚙️ 아키텍쳐

1. 전체적인 구조도

🔔 Database

• Redis : Refresh Token을 저장하기 위해 사용
• MySQL : Cloud 서버에서 이용하기 위해 Oracle 인스턴스를 DB 전용 서버로 구축

🔔 AI

• Sklearn : 요청시 학습한 결괏값을 flask 웹 서비스에 반환
• Flask : 결괏값을 WSGI 서버인 gunicorn에 전달
• gunicorn : front에 응답

2. Docker-Compose 구조

🔔 Push 서버 분리

• 서비스 간의 의존도를 낮추기 위해 기존의 Node 서버와 Push 전송 서버를 분리

☁️ ER Diagram

• ERD Cloud

📎ERD 보러가기

📜 API Docs

📎Swagger API 보러가기

🤖 인공지능 모델

• 데이터셋 수집

  1. 식품의약품안전처에서 제공하는 OpenAPI로 데이터셋을 수집
     📎공공데이터 활용

  2. 단종, 개편된 영양제 데이터셋들을 방지하기 위해 “최종수정일시” 컬럼이 2년 이내(2021년부터)인 데이터만 사용

  3. 네이버 검색 쇼핑 API를 사용해 영양제 구매 링크, 이미지 썸네일 컬럼 추가
     📎네이버 search API

• 데이터셋 전처리

  1. 하나의 컬럼이라도 null인 값 제거

  2. 특수문자 제거 (한글, 숫자, 영어 빼고 모두 삭제)

  3. OKT를 사용하여 “주된기능성” 컬럼의 형태소 분석 수행, 의미 없는 한국어 불용어 제거
     📎open-korean-text

• 인공지능 모델 학습 및 테스트

  1. Sklearn의 tfidfvectorizer를 사용해 전처리 한 데이터들의 가중치(tf)를 부여
     📎sklearn.feature_extraction.text.TfidfVectorizer

  2. 사용자에게 문장을 입력 받으면 전처리 단계의 2, 3번을 진행 후 저장된 가중치를 이용해서 “주된기능성” 컬럼과의 유사도 산정

  3. 유사도가 가장 높은 순으로 3개의 영양제 index 응답

  • 만약 같은 유사도를 가진 영양제들이 3개 이상이면 그 중에 랜덤하게 응답

• 응답 정확도 개선

  1. 인공지능 모델 학습만으로 모든 단어를 포괄할 수 없어 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

3. 시연 영상

1. 첫 번째 시연 영상 1분 30초에 나오는 큐알 코드로 모바일에서 구독 2. 스케줄에 등록한 시간에 웹, 앱 모두 푸시 알람