보름달 🌝 #3.1 개발 - 어플리케이션 (한글)

1. 역할분담

이름	역할
김정인	애플리케이션 백엔드, NUGU 백엔드 프록시 개발
김진아	애플리케이션 프론트엔드, NUGU 플레이빌더 개발
정시현	애플리케이션 백엔드, NUGU 백엔드 프록시 개발
Theophile	애플리케이션 백엔드 머신러닝

2. 개발환경

[백엔드]

- 노드JS

    노드JS는 싱글스레드 논블로킹 모델의 자바스크립트 런타임으로, 서버 프로그래밍에 익숙하지 않은 사람도 상대적으로 배우기 쉽다. Json 형식과도 호환이 가능하다. 그러나 이미지나 비디오 처리 등 CPU를 많이 사용하는 프로그램에는 적합하지 않다는 단점이 있다.

    보름달 서비스는 CPU를 많이 사용하지 않는다. 때문에 백엔드와 프론트엔드를 자바스크립트로 함께 개발 할 수 있다는 장점이 더 큰 것으로 판단해 노드JS를 선택했다.

- MySQL

    SQL은 Structured Query Language의 약자로, 관계형 데이터베이스 시스템(RDBMS)의 데이터를 관리한다. MySQL은 가장 유명한 RDBMS 중 하나이다.

    보름달 서비스는 사용자, 날짜, 주기 등 정해진 구조와 관계를 가진 테이블들을 사용하기 때문에 NoSQL이 아니라 SQL을 선택했다.

머신러닝

- 주피터 노트북

    주피터 노트북은 코드, 코드의 실행 결과, 코드에 대한 설명을 한 번에 작성할 수 있게 돕는다.

    머신러닝에서 cleaned datasets를 만들기 위해 주피터 노트북과 파이썬을 사용했다.

- 텐서플로우JS

    텐서플로우는 머신러닝을 위한 API를 제공하는 라이브러리이다.

    백엔드와 프론트엔드 모두 자바스크립트를 사용하기에 텐서플로우JS를 선택했다.

[프론트엔드]

리액트

    리액트는 MVC(Model, view, Controller) 모델 중 View만을 신경쓰는 라이브러리로, 자바스크립트를 사용한다. 리액트는 DOM에서 컴포넌트 변화를 감지함으로써 코드가 변경되었을 때 전체를 리렌더링 하는 것이 아니라, 필요한 부분만 렌더링한다.

    성능을 아끼면서 최적의 사용자 경험을 제공하는 동시에 백엔드와 같은 자바스크립트를 사용하기 위해서 리액트를 사용했다.

[배포]

아마존 EC2

    아마존 EC2(Elastic Compute Cloud)는 AWS(Amazon Web Services) 클라우드에서 확장 가능 컴퓨팅 용량을 제공한다. Amazon EC2를 사용하면 하드웨어에 선투자할 필요가 없어 더 빠르게 애플리케이션을 개발하고 배포할 수 있다.

아마존 RDS

    아마존 RDS(Relational Database Service)는 AWS 클라우드에서 관계형 데이터베이스를 더 쉽게 설치, 운영 및 확장할 수 있는 웹 서비스이다.

    그 중에서 MySQL을 사용하였다.

3. 개발도구

• 윈도우 10

      개발에는 마이크로소프트 윈도우 10을 사용했다. 윈도우는 세상에서 가장 널리 쓰이는 운영체제로 2020년 기준 모든 컴퓨터의 77.74%가 사용한다.

• 리눅스

      AWS 배포에는 리눅스 우분투를 사용했다.

• 비쥬얼 스튜디오

      비쥬얼 스튜디오는 마이크로소프트의 소스코드 에디터이다. 프론트엔드 개발에 사용했다.

• 웹스톰

      웹스톰은 인텔리제이의 자바스크립트 IDE로 백엔드 개발에 사용했다.

• 깃 & 깃허브

      깃과 깃허브는 크게 3가지의 기능을 제공한다.
  
     첫번째는 버젼관리이다. 깃은 파일에 언제, 어떤 변화가 있었는지 기록한다. 두번째는 백업이다. 데이터가 로컬에만 저장되어있다면 언젠가는 사라질 것이다. 깃허브는 깃의 원격 저장소로, 온라인 백업 기능을 제공한다. 마지막은 협업이다. 깃허브를 통해 소스코드를 풀, 푸쉬하며 협업을 할 수 있다.
  
     우리는 깃허브의 브랜치 관리를 위해 깃 플로우를 사용하였다. 마스터 브랜치에는 완벽한 버전만 올리고, 개발 중에는 디벨롭 브랜치를, 기능 개발에는 피쳐 브랜치를 사용했다.

• 어도비 XD

      어도비 XD는 웹사이트나 모바일 앱을 디자인 하기 위한 올인원 UX/UI 도구이다.
  
     개발 과정에서 참고할 프로토타입 제작을 위해 어도비 XD를 사용했다.

• 슬랙

      슬랙은 채널 형식의 메세징 플랫폼인 동시에 클라우드 형식의 협업의 웹 애플리케이션이다.
  
     소통을 쉽게 하고 깃허브, 트렐로, 구글 스프레드 등을 쉽게 사용하기 위해 슬랙을 사용했다.

• 비쥬얼 패러다임

      비쥬얼 패러다임은 UML 다이어그램 도구이다.
  
     도큐먼트 작성을 위해 사용했다.

4. 구조

• 폴더구조

  
     위 사진은 AWS에 올라간 폴더의 구조이다. 백엔드 코드에 머신러닝 코드를 병합하였으며, 프론트엔드 코드는 build 파일로 합쳐 하나의 디렉토리로 만들었다.

• DB구조

  
     DB에는 Dates, Users, Cycles, Controls, Predicts 총 5개의 테이블이 있다. Users 테이블은 Dates, Cycles, Controls, Predicts 테이블과 모두 1:N으로 연결되어있다.

5. 사용방법

• 초기 페이지

  
     앱 아이콘을 클릭하면 1초 동안 진입 화면이 실행된 후 로그인 화면으로 이동한다.
  
     이미 계정이 있는 사람은 로그인 해서 서비스를 이용할 수 있고, 계정이 없는 사람은 회원가입 버튼을 통해 회원가입 페이지로 이동할 수 있다.
  
     아이디나 비밀번호를 잊은 사람은 하단의 '계정을 잊어버리셨나요?' 버튼을 눌러, 계정을 찾을 수 있다.

• 회원가입 페이지

  
     계정이 없는 사람이 새로 계정을 생성할 수 있는 회원가입 화면이다. 이름, 이메일, 비밀번호, 비밀번호 확인, 평균 주기가 필수 입력 요소이다. 생년월일은 달력 포맷에서 선택할 수 있으며, 키와 몸무게는 숫자만 입력할 수 있다. 사용자의 증상과 상태를 고려한 진통제 추천을 위해서 술을 즐기는지, 위장장애가 있는지도 확인한다.
  
     오류 없이 모든 필수 입력 요소를 채우고 회원가입 버튼을 누르면 알림과 함께 회원가입이 완료된다.
  

• 메인 페이지 및 날짜 디테일 기록 페이지

  
     로그인이 완료되면 생리 주기를 확인할 수 있는 메인 페이지로 이동한다. 큰 원에서 사용자는 다가오는 생리 주기, 진행중인 생리 주기, 다가오는 배란일 등을 확인할 수 있고, 큰 원을 클릭하면 날짜에 대한 자세한 기록을 할 수 있는 날짜 디테일 화면으로 이동한다.
  
     날짜 디테일 화면에서는 생리 여부, 피임약 복용 여부, 관계 여부, 몸 상태, 기분 등을 기록할 수 있고 메모란을 활용해 간단히 일기를 쓰는 등 기록을 남길 수 있다.
  
     원 밑에서는 사용자에게 도움이 되는 말 한 마디와, 누구스피커를 사용할 때 필요한 누구 스피커 아이디를 확인할 수 있다.
  
     상단에서 로그인된 계정의 정보를 확인하거나, 우측의 버튼을 눌러 로그아웃 할 수 있다. 하단의 '홈' '달력' '건강' '쇼핑' 버튼을 클릭해 각각의 페이지로 이동할 수 있다.

• 달력 페이지

  
     사용자가 자신의 전체적인 생리 주기를 확인할 수 있는 달력 페이지이다. 이번달의 생리일은 빨간색으로, 배란일은 파란색으로 보여준다. 인공지능이 예상한 다음 생리 예정일은 핑크색으로 나타난다.
  
     날짜를 선택해 해당 날짜의 디테일 페이지로 이동할 수 있다. 오늘 이후의 날은 디테일을 기록할 수 없다. 사용자가 날짜 디테일 페이지에서 기록한 '몸 상태'는 인공지능이 사용자에게 진통제를 추천해 주는 데 사용된다. 회원가입 시 입력한 음주 여부, 위장 장애 여부와 증상을 고려하여 가장 빨리 효과가 나타나고, 가장 부작용이 적은 진통제를 추천해준다.
  
     달력의 '월'이나 '년' 부분을 클릭하면 다른 월이나 연도로 편하게 이동할 수 있다. 달력은 1901년 부터 볼 수 있다.

• 건강 페이지 중 약 페이지

  
     다음은 건강 페이지이다. 건강 페이지는 약, 자가진단 두 탭으로 이루어져 있는데 각 탭에서 사용자는 복용 중인 피임약을 설정하거나, 몇 가지 질병에 대한 간단한 자가진단을 실시할 수 있다.
  
     약 탭에서 사용자는 피임약 알람을 설정할 수 있다. 복용을 시작할 날짜, 종료할 날짜, 복용 시간을 설정하면 매일 설정한 시간에 약을 복용해야 한다고 알려준다. 복용 시작 날짜와 복용 시간은 필수 입력 요소이며, 복용 종료 날짜는 설정하지 않을 시 자동으로 180일 뒤로 설정된다.
  
     달력 디테일 페이지에서 입력한 복용 여부를 확인하여 오늘 피임약을 복용 했는지 여부도 확인할 수 있다. 복용 설정한 약이 없다면 '복용 중인 피임약이 없습니다' 라고만 알려준다.

• 건강 페이지 중 자가 진단 페이지

  
     자가 진단 탭에서 사용자는 질염, 자궁근종, 생리혈에 대한 자가진단을 할 수 있다.
  
     질염 자가진단은 총 8개의 질문으로 이루어져있는데, 각각의 질문은 1점부터 5점까지의 점수를 가지고, 점수의 총합으로 사용자의 질염 여부를 판단한다.
  
     자궁근종은 16개의 질문을 통해 사용자의 자궁근종 의심 여부를 검사한다.
  
     생리혈 자가진단은 식품의약품안전처의 기준에 따라 생리혈의 색이나 상태로 사용자의 건강상태를 확인한다.
  
     사용자가 의심 질병이 있다면, 병원에 내원하는 것이 가장 이상적이나 자가진단을 통해 사용자는 미리 자신의 상태를 알고 예방할 수 있다.

• 11번가 쇼핑 페이지

  
     사용자는 보름달 어플리케이션에서 11번가에 접속해 쇼핑할 수 있다. 물론 생리대 등 생리 기간에 필요한 용품도 쇼핑할 수 있고, 모든 기능을 11번가 어플과 동일하게 사용 가능하다.