한동샘 요구 기능


유산균 판매 회사인 한동샘과 함께 프로젝트를 진행하였다. 유산균은 꾸준하게 섭취하는게 중요하기 때문에 한동샘은 사용자가 유산균을 섭취하는 것을 돕고 복용 결과를 시각화해주어 성취감을 주는 어플을 만들기를 원했다.

  1. 맛알람 : 사용자가 유산균을 복용해야 할 시간마다 알람.
  2. 장일기 : 매일 사용자의 하루 장건강과 생활습관을 기록하는 설문조사.
  3. 최종 그래프 시각화 : 유산균 복용이 일정시간 지난 후(14일) 장일기를 기반으로 장건강의 추이를 시각화하여 보여주는 최종 그래프 생성.
  4. 직관적인 앱 : 탭(Tap) 수를 최대한 줄인 직관적인 어플.

어플의 컨셉(Concept)


전문적이고 직관적인 UI/UX
위에 한동샘의 요구사항에 맞추어 UI/UX에 중점을 두어 사용자의 편리성을 극대화 시킬 수 있는 직관적인 어플을 만들었다.
또한 한동샘의 제품은 타 유산균 제품보다 높은 가격대에 형성되어 제품 구매 후 사후 서비스라는 컨셉으로 어플의 전문성을 강조하였다.

로드맵(Road Map)


  • version 1.0
    • 맛알람 및 장일기 기능
    • 종합 및 세부 그래프 구현
    • 14일 이후 제품 구매 링크
    • 생활 습관 추천 기능
  • version 1.5
    • 제품 인식 기능 추가 : 제품 사진을 찍으면 flutter에서 제공하는 머신 러닝 툴을 이용하여 어느 회사의 제품인지 인식하고, 한동샘 제품임을 인증한 뒤에 어플을 사용할 수 있다.
  • vresion 2.0
    • 카카오톡 질문하기 기능 추가
    • 14일 이후 재도전 기능
  • version 3.0
    • 앱 내 커뮤니티 생성

프로젝트 진행


  • 프로젝트 진행 기간 (19.11.11~ 19.12.6 - 6주) : 프로젝트 기간 중 version 1.0까지 구현을 완료하였다.

    • 기업이 원하는 어플의 주요 기능 컨셉 파악 19.11.11~19.11.15
      • 한동샘과 어플의 기능, 컨셉에 대해 회의
      • 비슷한 기능을 가진 다른 어플들의 Design, 기능 조사 및 대략적인 어플 Flow
      • 한동샘의 피드백 및 어플 Flow 재수정
    • 어플 초안 19.11.18~19.11.22
      • 어플의 사용 Flow 확정
      • 어플 구현에 필요한 화면 확정
      • Figma를 이용한 어플 Prototyping
    • 어플 개발 19.11.20~19.12.2.1
      • Flutter를 통해 화면 구성 구현
      • 사용자 설문조사를 Fire Base 연결하여 생활습관 추천 및 데이터 시각화
    • 어플 최종 피드백 및 수정 19.12.2~19.12.7
      • 한동샘에게 최종 어플 피드백 받음
      • 피트백 받은 내용 어플에 적용
  • 사용한 Tool

    • Database: Firebase
    • IDE : android studio
    • Language : Dart
    • Framework : Flutter
    • 기타 : Figma, Git

프로젝트 결과


  • 주요 코드

    • 홈화면 : 홈화면에서 물방울 표시를 통하여서 사용자의 설문조사 여부를 시각화하였다. 이때, 사용자가 설문조사를 한 직후 바로 물방울이 채워져야 하므로 Stream Builder를 통하여 실시간으로 Firebase의 Data를 확인하여 홈화면의 물방울을 변경하였다.

      Widget _buildBottles(BuildContext context) {
      return StreamBuilder<QuerySnapshot>(
      stream: Firestore.instance.collection('User').document(CurrentUid).collection('survey').snapshots(),
      builder: (context, snapshot) {
      
        if (!snapshot.hasData) return LinearProgressIndicator();
        else{
          int countSurvey = 0;
          final documentList =  snapshot.data.documents;
          for(var document in documentList){
            final record = SurveyRecord.fromSnapshot(document);
            if(record.complete==true){
              countSurvey = countSurvey+1;
            }
          }
          return continueDay < 7? _buildList(context, documentList.sublist(0,7)) :_buildList(context, documentList.sublist(7,14)) ;
        }
      },
      );
      }

      image.png

  • Firebase 구현 방법
    • 한 User가 어플 사용 시에 다른 User의 Data에 접근할 필요가 없으므로, 각 User별로 나눠서 User와 관련된 정보들을 저장하였다.
    • 구현 방법 : User가 Sign Up시 생성되는 고유한 User UID를 이용하여 Document 이름으로 사용하여, User 별로 User Information과 Survey정보를 저장하였다.

image

image

어플 초안 - Figma
어플 완성 결과 - YouTube
어플 전체 코드 - Git