1 of 33

​

설계보고서

팀원 서예지 / 21800365

팀원 조영찬 / 21800816

팀원 김민수 / 21700094

식단관리 어플 Squid Note

2 of 33

문제 정의 및 프로젝트 소개

  • 문제 정의
  • 식단 관리에 대한 피드백을 받을 수 있는 수단의 부재
  • 지속적인 기록을 위한 동기부여 필요
  • 혼밥을 하며 이용할 수 있는 컨텐츠 필요
  • 식단 관리에 대한 정보 필요�
  • 프로젝트 소개
  • 저희는 식단을 지속적으로 기록하고 개선하는 것에 초점을 맞추어 매일의 식단을 기록하고 또 다른 유저들과 커뮤니케이션이 가능한 앱을 만들었습니다.

3 of 33

초기 화면 설계 1

​

4 of 33

초기 화면 설계 2

​

5 of 33

초기 화면 설계 3

​

6 of 33

초기 화면 설계 4

​

7 of 33

Database 설계 0

  • Authentication, Firestore를 사용하여 데이터베이스를 설계
  • add, set, update, delete 기능을 사용하여 CRUD
  • StreamBuilder를 통해 데이터 read

8 of 33

Database 설계 1

  • menu
  • 식단 정보를 모아놓은 컬렉션
  • maprecipe이라는 sub 컬렉션을 두어서 식당 정보와 영수증 정보를 포함하였음
  • document id를 uid + timestamp로 두어서 하루의 식단이 중복되는 것을 방지함

9 of 33

Database 설계 2

  • comment
  • 식단 페이지에 남긴 댓글을 모아놓은 컬렉션
  • 댓글을 남길 당시의 user 정보( 이름,사진,uid )를 document id와 함께 저장
  • 식단 정보를 포함하고 있는 menu의 sub 컬렉션이 아닌 main 컬렉션으로 두어서 관리를 용이하게 하였음

10 of 33

Database 설계 3

  • user
  • user 정보를 담은 컬렉션
  • Authentication에 저장되는 구글 로그인 정보를 바탕으로 저장
  • 친구추가 기능에서 친구의 uid가 array형태로 들어가도록 하였음

11 of 33

Database 설계 4

  • chatroom
  • 화상채팅방을 위한 컬렉션
  • 채팅방의 이름, 생성자, 토큰 값 등의 정보 포함

​

​

12 of 33

프로젝트 내 사용된 패키지 1

  • 이름 : Google_ml_kit 0.11.0(Text recognition)
  • pub.dev URL : google_ml_kit | Flutter Package (pub.dev)
  • 패키지 소개 : ML kits Text recognition 패키지는 이미지의 텍스트를 인식하고 String 형태로 리턴 받을 수 있는 패키지입니다.

​

  • 사용된 부분 스크린샷 + 설명

구글 맵 지도와 함께 사용하며 방문 음식점을 등록할때 �영수증을 인식 및 텍스트를 뽑아내 업로드가 가능하게끔 하였습니다. (이미지 picker와 연동)

스크린샷

13 of 33

프로젝트 내 사용된 패키지 2

  • 이름: Tflite package
  • pub.dev URL : tflite | Flutter Package (pub.dev)
  • 패키지 소개 : TensorFlow Lite API에 액세스하기 위한 Flutter 패키지입니다. iOS 및 Android 모두에서 이미지 분류, 객체 감지(SSD 및 YOLO), Pix2Pix, Deeplab 및 PoseNet을 지원합니다.
  • 사용된 부분 스크린샷 + 설명

식단을 작성하는 페이지에서 사진 아이콘을 누르면 음식을 인식해 인식률이 가장 높게 나온 텍스트를 식단에 업로드 할 수 있게끔 하였습니다. (이미지 picker와 연동)

스크린샷

14 of 33

프로젝트 내 사용된 패키지 3

  • 이름 agora_rtc_engine
  • pub.dev URL https://pub.dev/packages/agora_rtc_engine/versions/4.0.2
  • 패키지 소개
    • 채팅방 생성을 위한 토큰 생성 및 화상 통화
    • video의 몇가지 함수를 바꾸면 voice call 도 가능
  • 사용된 부분 스크린샷 + 설명
    • 채팅방 생성 및 참여 기능과 함께 구현해서 여러 명의 사람들과 화상 채팅이 가능하도록 하였습니다
    • agora 공식 페이지에서 지원하는 heroku 서버에서 uid를 channel name으로 보내서 채팅방 채널 생성과 연결에 필요한 token을 자동 생성하도록 하였습니다

스크린샷

15 of 33

프로젝트 내 사용된 패키지 4

  • 이름 google_maps_flutter
  • pub.dev URL https://pub.dev/packages/google_maps_flutter/versions/2.1.5
  • 패키지 소개
    • 구글 지도를 사용할 수 있게 해줌
  • 사용된 부분 스크린샷 + 설명
    • geolocator와 geocoding 패키지를 함께 써서 마커의 위치 정보를 받아와서 저장할 수 있게 하였습니다

스크린샷

16 of 33

프로젝트 내 사용된 패키지 5

  • youtube_player_flutter
  • https://pub.dev/packages/youtube_player_flutter
  • 패키지 소개: 유튜브 플레이어를 구현하는 패키지
  • 사용된 부분 스크린샷 + 설명: �식단과 관련된 유튜브 영상을 시청할 수 있다. �우측 상단 아이콘을 통하여 여러가지 식단 관련된 영상을 시청할 수 있다.�

스크린샷

17 of 33

프로젝트 내 사용된 패키지 6

  • 이름: table_calendar
  • pub.dev URL: https://pub.dev/packages/table_calendar
  • 패키지 소개: 달력 또는 일정표를 구현해주는 패키지
  • 사용된 부분 스크린샷 + 설명:�스크린샷 상단 부분 주간 달력부분을 구현하였다. �날짜를 누르면 해당하는 날의 식단이 출력되게 코드를 구현했다.� 좌우 화살표를 클릭하거나 스와이핑을 하면 주차를 이동할 수 있다. �캘린더 아이콘을 누르면 월간 달력이 나온다.

스크린샷

18 of 33

프로젝트 내 사용된 패키지 7

  • 이름: animated_splash_screen
  • URL: https://pub.dev/packages/animated_splash_screen
  • 패키지 소개: 화면 전환 시 로딩되는 시간동안 짧게 보여지는 화면 구현

이미지, 텍스트 등을 rotate, fade 등의 방법으로 animated 하게 보여지게 하였다

  • 사용된 부분 스크린샷 + 설명 :�로그인 화면에서 홈(캘린더) 화면으로 전환될 때 짧게 보여지도록 하였다�이미지가 rotate되면서 screen이 fade 되게 하였다.

스크린샷

19 of 33

최종 결과물

주요 페이지 1 - 로그인/splash screen

​

  • 로그인 페이지로 구글 로그인을 사용하여 로그인

할 수 있도록 하였고, 로그인 후 날짜별 식단 페이지

로 이동합니다.

  • 화면 전환을 할 때 splash screen을 사용하여서

로딩 시간을 주었고, splash screen에 image

rotation 후 screen이 fade하면서 사라지는

효과를 주었습니다.

​

  • Routed 된 Page: 메인페이지

20 of 33

최종 결과물

주요 페이지 2- 날짜별 식단

​

  • 로그인 후 처음 가게되는 페이지로 날짜별로 등록한 식단을 볼 수 있습니다.
  • 식단을 등록하기 위한 Add diet page와도 루트가 되어있어 날짜별로 이동해 식단을 등록 및 확인이 가능합니다.
  • 작성한 식단을 클릭하면 해당 식단의 디테일 페이지로 이동하여 댓글 작성 및 디테일한 정보 업데이트가 가능합니다.
  • Routed 된 Page: 식단 등록/ 디테일 및 댓글 페이지/Month 캘린더 (Popup)

스크린샷

21 of 33

최종 결과물

주요 페이지 3 - 식단 코멘트

​

  • 날짜별 식단 페이지에서 입력한 식단을 디테일하게 볼 수 있음
  • appbar의 지도 아이콘을 클릭해서 지도 / 영수증 정보를 추가하면 관련 정보가 식단 정보 아래에 보여지도록 하였음
  • 아래에 댓글 기능을 추가해서 나를 친구추가 한 사람들이 코멘트를 달 수 있도록 함
  • Appbar의 오른쪽 아이콘은 차례로

지도,영수증 입력 / 식단 수정 / 식단 삭제 기능을 포함

​

  • Routed된 page : 지도/영수증 페이지, 메인페이지

스크린샷

22 of 33

최종 결과물

주요 페이지 4 - 식단 등록(+음식 이미지인식)

​

​

  • Text field에 작성한 식단을 적고 완료 버튼을 누르면

데이터베이스와 연동되어 식단 업로드가 가능합니다.

  • 우측 카메라 아이콘은 음식인식 페이지와 연결되어 있어있습니다.
  • 음식이미지 인식을 할때 여러 요소들을 인식하더라도 인식률이 가장 높은 텍스트만 뽑아내어 현재 페이지 해당 텍스트 필드에 리턴이 가능합니다.

​

  • Routed된 page : Food Recognition Page, 메인페이지

​

​

스크린샷

23 of 33

최종 결과물

주요 페이지 5 - 친구관리 및 친구식단 확인

​

​

  • 친구목록 페이지로 상단에 친구추가 버튼을 누르면 이 어플유저의 구글 이름으로 검색 및 친구추가가 가능합니다. (Database 연동)
  • 추가된 친구들은 현재 페이지에 리스트로 나타나고 친구들의 식단을 확인 할 수 있게 Diet 버튼을 누르면 해당 친구의 식단 들을 확인할 수 있게 하였습니다.

​

​

  • Routed 된 페이지 : 친구 검색 페이지 , 해당 친구의 식단.

​

​

스크린샷

24 of 33

최종 결과물

주요 페이지 6 - 화상 채팅

​

  • 랜덤한 사람들과 화상채팅을 할 수 있도록 하는 페이지
  • 오른쪽 하단의 floating button을 통해서 채팅방을 생성할 수 있고, 생성된 채팅방은 오른쪽의 페이지에 뜨게 됩니다.
  • agora rtc로 구현하였고 채팅방 생성, 참가 시에 카메라와 마이크에 대한 permission을 받습니다.
  • 음소거, 카메라의 전/후면 화면 전환이 가능합니다.
  • 현재 말하는 사람의 화면 주변에 bold 표시

​

  • Routed된 page: 채팅방 생성 페이지, 화상 채팅 페이지

스크린샷

25 of 33

최종 결과물

주요 페이지 7 - 유튜브 플레이어

​

  • 식단에 관한 유튜브 컨텐츠를 보여주는 페이지
  • 볼륨, 확대, 전후 컨텐츠로 이동할 수 있는 기능이 있습니다
  • appBar의 아이콘을 누르면 관련 유튜브 컨텐츠의 재생목록이 있습니다

​

  • Routed 된 페이지 : 재생목록 페이지

스크린샷

26 of 33

최종 결과물

주요 페이지 8- 구글맵

​

  • 구글맵의 mark 아이콘을 draw하며 식당의 위치에 놓으면 지도상의 longitude latitude 정보를 통해 위치가 지번 주소로 인식됩니다
  • 식당의 이름과 간단한 코멘트를 입력할 수 있습니다

​

  • Routed된 page: 영수증 페이지, 식단 코멘트 페이지

스크린샷

27 of 33

최종 결과물

주요 페이지 9 - 영수증 등록Page

​

  • 영수증을 등록하는 페이지로 MLKit text recognition pagkage를 사용하였습니다.
  • 영수증을 사진찍거나 갤러리에서 업로드하면 영수증 사진 중 텍스트만을 인식하여 String으로 반환합니다.
  • 확인버튼을 누르면 식당의 지도와 리뷰를 쓰는 페이지에 이 영수증이 등록이 됩니다.

​

​

  • Routed된 페이지 : 이미지 피커, 카메라/ 식당지도 등록페이지

스크린샷

28 of 33

최종 결과물

영상 링크, 썸네일

유튜브 영상 링크 :(2) [한동대학교] 2022-1 모바일 앱 개발 01분반 식단관리 어플 11조(김민수, 조영찬, 서예지) - YouTube

영상 썸네일

29 of 33

로드맵 설계 (프로젝트 향후 계획)

  • 여러분이 만든 프로젝트가 실제 서비스를 한다고 가정하고, 수업 과제 프로젝트의 결과로 제출한 파일이 버전 1.0이라고 했을 때, 향후 개발 로드맵을 작성하세요.

​

  • 1.5 version :
    • 마이페이지와 로그아웃 기능 추가
    • ux/ui수정
    • 유튜브 플레이어의 활성화
    • 화상채팅방의 자동 비활성화 기능 추가
  • 2.0 version :
    • 공유지도와 개인 지도의 구분
    • 영수증 정보를 통해서 지도 로드 기능 추가
    • 유저테스트를 통한 피드백 반영
  • 3.0 version :
    • 식사 중에 소비 할 컨텐츠 다양화

​

30 of 33

의무적으로 고지할 내용

  • ui에 대한 콘디 학생의 짧은 코멘트를 받았습니다.
  • pub.dev, google, naver 등 에서 코드 예제 참고를 하였습니다
  • href="https://www.flaticon.com/kr/free-icons/" title="오징어 아이콘">오징어 아이콘 제작자: Freepik - Flaticon 에서 무료 로고 이미지를 가져왔습니다.
  • Table calendar 패키지는 기존 토이프로젝트에서 사용해본 적 있습니다.
  • https://icons8.com/icons 에서 아침, 저녁, 야식 아이콘 다운받아 사용했습니다.

31 of 33

팀원별 분업 내용 및 소감

팀원 서예지

​

서예지:

google map, agora rtc ( 화상 채팅 ), 기본적인 CRUD

​

소감 : 주제에 대한 회의와 어플 구상을 오래 했는데도 프로젝트를 진행하면서 수정할 부분도 많았고, 신경써야 할 부분도 많았어서 모든 일이 이상적으로만 흘러가지 않는다는 걸 느꼈습니다. 이 역시 실전이 아닌 맛보기지만 재미있고 즐거웠습니다. 그리고 좋으신 교수님과 좋은 팀원들과 함께 좋은 경험을 할 수 있어서 감사한 학기였습니다.

​

32 of 33

팀원별 분업 내용 및 소감

팀원 김민수

​

김민수:

MLkit (text recognition) , TfLite( food recognition), 기본적인 CRUD

​

소감 : 직접 제 손으로 뚜렷한 결과물을 만들어내니 더욱 흥미가 생기고 앱개발에 대한 욕심이나 의지가 생기기도 했습니다. 한편으로는 Flutter라는 프레임워크를 사용하면서 한편으로 놀라울때가 많았습니다. 이렇게 개발자 친화적인 프레임워크가 고퀄리티 작업을 할 수 있다는 것에 플러터의 앞으로 전망이 기대가 되는 것 같습니다. 마지막으로 열정적인 팀원들 덕분에 좋은 협업을 마친 것 같아 감사인사를 하고싶습니다.

33 of 33

팀원별 분업 내용 및 소감

팀원 조영찬

​

조영찬:

table_calendar, youtube_player_flutter, 기본적인 CRUD

​

소감 : 마음이 맞는 팀원들과 함께 결과물을 만드는 과정이 즐겁고 의미있었습니다. 각자 너무 부족한 상태로 만났지만 서로의 부족한 점을 채워주면서 협업하는 법을 배우고 점점 어플다워지는 프로젝트 결과물을 보면서 뿌듯함도 많이 느낀 것 같습니다. 아쉬움도 많이 느꼈습니다. 처음부터 잘 정리를 하며 시작했다면, 다른 일들이 적어서 앱 개발에 집중을 더 할 수 있었다면 어땠을까라는 생각이 들지만 앱개발 공부를 하며 생긴 관심과 흥미를 잘 이어나가 앞으로 공프기 프로젝트에서 더 멋진 결과물을 만들어봐야겠다는 생각이 들었습니다.