여러번의 아이디어 회의를 통해 브레인 스토밍.
최종적으로 올라간 2가지의 아이디어 (스포츠 오프라인 랭킹전 시스템 어플 vs 온오프라인 PT 플랫폼 서비스 ) 중
컨설턴트님과 2회간의 팀미팅, 여러 번의 내부회의를 거쳐 온/오프라인 PT 피트니스 매니징 플랫폼 서비스로 결정 (Online/Offline Personal Training Fitness Manageming Platform Service)
-
- 시대적 배경 (코로나의 높은 전염성 때문에 다중이용시설인 헬스장에 대한 기피현상)
- 재택근무 등이 도입되면서 운동량 부족으로 인한 사회적 현상(비만 증가 및 운동에 대한 필요성 대두)
- 코로나 시대의 '언택트 문화', 혼자서만 하는 운동이 아닌 전문 홈트레이닝 PT서비스에 대한 수요가 증가
- 온라인 문화에 익숙하고 자기 건강과 미용에 관심이 많은 밀레니얼 세대의 등장
-
- 코로나 시대에 오프라인 피트니스 사업장들이 영업정지 및 소비력 저하로 폐업하는 헬스장이 많음. 2020년 가장 많이 폐업하는 종목이 헬스장
- 기존 헬스 트레이너들의 오프라인 매장과 연계된 상품 판매를 통해 기존 시장에 활력을 불어넣고, 온라인 홈트레이닝 시장으로 대중의 요구에 맞춰 새로운 방식의 수익모델을 제시
- 기존 오프라인 피트니스 시장에 활력을 불어넣음과 동시에 온라인 홈트레이닝의 시장에 고급인력을 연착륙 시킬 수 있을 것으로 기대 됨
-
- 웹소켓, webRTC, NativeScript or PWA 기술 등 기존에 우리 프로젝트 팀이 가진 기술스택 (Backend : Django, Frontend : Vue, Vuetify 배포 : AWS) 외에도 새로 배워야 할 라이브러리 및 프레임워크가 많지만,기존 기술 스택에서 접근성이 높은 기술들로 구성하여 러닝커브를 최대한 단축시키고 짧은 기간내에 완성도와 확장성 높은 프로젝트를 완성하려 개발일정을 짬.
-
지금껏 아이디어 회의로 정리된 어플리케이션의 테마와 기능, 백엔드 모델링, 프론트 페이지별 기능을 정리함
-
회원 페르소나를 설정. (트레이너 - 트레이니) 2가지 사이드로 나누어, 카카오 로그인 시 두가지 회원 권한 별로 다른 페이지로 리다이렉트 되기로 결정
-
어플리케이션 형태로 만들어 주는 NativeScript와 웹앱의 형태로 나오는 PWA 기술 중에 여러가지를 타산해 보다가, Native Script 개발에 필요한 설정 프로그램인 안드로이드 에뮬레이터가 싸피 노트북에서 설정하고 세팅하는데에 치명적인 오류(재부팅시 블루스크린)이 발생하는 것을 발견하고, PWA 기술로 웹앱을 개발하는 것으로 개략적인 틀을 잡음
-
트레이너 페이지의 아래쪽 Navbar에 대한 기능들을 총 4가지 테마로 나누고, 각 페이지별 들어가야 할 기술을 정리함. 트레이니 쪽도 완성하여 총 8페이지의 개략적인 어플리케이션 기능 구성이 될 것으로 예상.
-
- PT 프로그램 CRUD, 내 회원관리 CRUD.
- 캘린더 기능을 통한 회원 식단관리 및 PT 일정 스케쥴링
- 트레이너 - 트레이니 채팅 기능 (+ 웹소켓 이용 화상채팅 기능)
- My Page (기본 프로필 CRUD) -> 후에 트레이니 검색 페이지(5page)로의 리다이렉트 될 섹션 추가 예정
-
PT 프로그램 지역별 검색기능 R, 이달의 우수 프로그램 R, 추천 트레이너 프로필 R,
-
캘린더 기능을 통한 식단 및 PT 스케쥴링 확인 (Read only)
-
트레이너 - 트레이니 채팅 기능 (+ 웹소켓 이용 화상채팅 기능)
-
My Page (내가 수강중인 프로그램, 앱 설정)
-
이번 주는 새로 써야할 프로그램에 관해 각자 학습하고, 프론트는 페이지의 기본 프레임 형식을 구현하기로 함. 그 후 각 페이지별로 프론트 3명이 나뉘어서 작업할 예정
-
Home Training 카메라 인식 AI API Teachable Machine 을 통해서 AI 홈트레이닝 서비스도 추가 구현 예정
-
DB 모델링 초안 작성 완료. ERD를 통해 완성해야 하는 기능을 특정하고, 각 DB간의 관계성에 대한 검토 작업을 실시함. 그 결과 식단컬럼, 출석관리, PT프로그램, 트레이너 평가, 코멘트 후기, 트레이너 - 고객 User 모델의 도입, 트레이너 페이지의 프로필 페이지에 대한 구성에 관한 회의가 오갔고, 페이지의 방향성에 대한 논의를 확정지음.
-
Android Emulator가 SSAFY 지급 노트북에 보안 Issue로 인해서 BlueScreen이 뜨는 문제를 계속 발생시킴. 박정우 코치와 김대들 코치가 각각 조언해준 두 가지 방향으로 문제 해결을 실행함. 싸피 노트북 보안문제로 hypervisorschedulertype 에서 에러가 발생해 Crash가 발생하는 것으로 문제를 파악함.
bcdedit /set hypervisorschedulertype core이라는 cmd 명령어로 문제를 해결할 수 있었으나, 결국 돌아간 Android Emulator가 느린 속도 및 저조한 성능으로 인해 개발로 부적합하다고 판단이 들어 FrontEnd를 Android App 개발보다는 PWA Web App 으로 개발하는 것으로 방향을 설정하고 그에 적합한 라이브러리를 사용하기로 판단함.
-
PWA는 2018년도부터 도입된 새로운 형태의 개념(Library나 Framework가 아님)으로 Android 및 iOS의 모바일에서 Web을 App의 형태로 볼 수 있는 하나의 큰 틀을 말한다. Web App의 형태로 개발했을 때의 장점은 웹과 앱의 장점을 두 가지 다 결합한 환경이라는 것이다. 웹과 같은 형식으로 개발 할 수 있어 DX 향상 및 유지 보수의 장점이 있고, App과 같이 설치가 필요 없고, Data Caching을 통해 느린 네트워크 또는 오프라인 환경에서도 로드 될 수 있다는 점. 관련된 푸시알림 기능 및 홈 화면 아이콘 생성 을 통해 사용자 유입을 더욱 도모 할 수 있고, 앱과 비슷한 UI 를 통해 UX를 향상 시킬 수 있다는 장점이 있다. 단점은 새로운 기술이라 한글 강의 및 자료가 많지 않고, 영어권 자료를 참고를 많이 해야 한다는 점과, 그에 따른 새로운 라이브러리 및 개발 환경에 대한 러닝 커브가 존재한다는 것이 단점으로 예측이 된다.
-
PWA 개발에 관련한 레퍼런스 및 동영상 강의를 찾던 중(교보재 신청을 했으나 아직 도착하지 않음. 언제부터 교보재 사용을 할 수 있을 지에 대한 확신이 없어 일단은 무료강의로 시작해보기로 함) 유투브에 Ionic 이라는 Mobile Web App 개발 Framework 에 대한 추천을 보게 되었고, Ionic 이 우리에게 익숙한 기술스택인 Vue-Ionic을 지난달 9월에 출시 했다는 소식을 듣게 되었음. 새로운 기술을 적용해 웹앱을 효율적이고 빠른 시간안에 개발하기 위해 Ionic이라는 Library를 좀 더 깊게 학습해보기로 결정하고 각자 Front Page를 Ionic을 통해 짜보는 시간을 갖음.
-
Ionic이라는 Framework를 통해 예상되는 장점은 Android 와 iOS 환경 두가지 모두 다 한가지 코드를 통해 실행이 된다라는 점이다. 또한 디자인 적인 것에 대한 베이직 가이드라인 및 컴포넌트 활용을 통해 DX를 향상 시키기에도 좋고, 모바일 웹앱을 처음 개발 해보는 입장에서 모든 반응형 컴포넌트를 만들기에 무리가 있다고 판단하여, Ionic 혹은 각자 써보고 싶은 Framework에 대한 학습을 시작하고, 세 명의 회의를 거쳐 최종적으로 사용할 프레임워크를 선택하기로 결정.
-
PWA의 디자인에 대한 영상 레퍼런스 및 Dribbble.com 의 예제들을 공유하고 학습함으로써, 개략적인 와이어프레임에 대한 기본 틀을 짜는 법을 익힘. 구체적으로 글자 폰트가 web에 비해 크게 잡아야 한다는 점, 2020 Mobile Design Trend Top10에 관련한 영상들을 보면서, Animation이나 Slide, 컴포넌트의 디자인등에 대한 영감을 얻기도 함.
-
각 기능별 REST API server의 URL 목록 Page를 작성함. 트레이너 평가 / 헬스장 / 태그 / 프로그램 크게 4가지 카테고리로 나누어 기능별로 HTTP 요청을 GET POST PUT DELETE 에 따라 CRUD로직을 완성할 예정.
- PT 온/오프라인 프로그램 생성 기능은, Backend에서 프로세싱하는 것보다 프론트에서 넘겨줘야 할 데이터 값들에 대한 확인이 필요해서, 창완이형은 예비 frontpage의 형태로 simulation 하며 Back 작업을 하기로 함. 특히나 같은 출석 시스템이더라도 트레이너 측에서 보는 화면과 트레이니 측에서 보는 화면이 비슷하면서도 다른 기능으로 이루어져야 하기 때문에 직접 log를 찍어보면서 개발하는 것이 기능개발에 수월할 것으로 판단
- Calendar 기능으로 기존에 full screen calendar 라는 Library를 사용하기로 했으나 (장점: 기능이 많고, 쉬우며, 예제 사이트가 많다), 이는 웹 버전 (특히 풀 스크린)의 캘린더에 최적화된 라이브러리여서 다른 라이브러리를 사용하기로 검토. Date pick(애니메이션이 부드럽고 디자인이 세련됨) 혹은 V-calendar(간단하고 심플함) 라는 모바일 최적화 Library를 찾았고, 여러가지 기능개발에 필요한 사항들을 검토하며 선정할 예정(요일 이슈)
- 특히 월별로 날짜가 무슨 요일에 해당하는지 알아내야 하는 이슈가 발생함 (ex) 월수금 프로그램이 21, 23, 25일? 다를 수도 있다) Back end 인 장고에서 Pythonic하게 Datetime field 객체를 전처리 해주는 과정으로 사용해도 좋으나, 몇몇 라이브러리에서는 일요일은 1 ~ 토요일은 7의 형태로 제공해주는 Library가 있어, 여러가지 사용해 보고 판단해 볼 듯
- Q) 프로그램 설명 디테일 썸네일로 어떤 사진을 넣을것인가? A1) 트레이너 프로필 사진 A2) 프로그램별 상징 아이콘
- Ionic - Vue가 2020년 10월 2일에 출시되어서, 최신 버전의 Ionic을 (강제로) 사용하게 되었음. 그에 따라 아직 정립되지 않은 공식문서와 Icon 오류 등 많은 잔버그와 싸우며 작업하게 될 것으로 사료됨. 하지만 Ionic 이라는 프레임워크가 Vanilla JS 문서가 정리가 잘 되어있고, Angular 와 React 사용자는 많기 때문에, 다른 개발 예제를 참고하며 개발할 시 높은 효율성을 가질 것으로 사료 됨. 특히나 본디 사용해왔던 Vuetify 와 같은 Design Framework 와 크게 DX가 다르지 않기 때문에, 짧은 시간에 많은 성과를 얻을 수 있는 것이 특징
- 프론트 페이지의 라우터링 버튼과 Modal , Card, Image, Icon 등의 컴포넌트들을 실험해보고 적용해 보는 것에 성공. 총 4가지의 라우팅 메뉴를 선정한 뒤 각 페이지 별로 디테일 있게 개발할 예정. 모바일 웹앱은 화면의 크기가 크지 않고, 디자인적 변경의 요소가 많지 않기 때문에 기본 프레이밍을 하는 것에는 짧은 시간이 소요될 것으로 보이지만 , 내부의 CS 디테일을 뜯어 고치기엔 높은 레벨의 CSS 개발이 필요할 것으로 예상됨.
- Back단에서는 REST API 에 대한 CRUD 기본 로직 개발 시작. views.py 에 각각의 클래스를 넣고, 내부 로직을 짜는 작업을 시작함. 다만 프론트단과 자료를 주고받으며 axios 요청을 통해 내부로직을 완성해야 하는 경우, vue test페이지를 임시로 만들어서 그곳에서 작업을 하기로 결정.
- 로고에 대해 여러가지 아이디어를 주고 받은 끝에 완성함. '모' 글자와 '의'글자를 역기를 들고 있는 사람, 벤치 프레스를 하는 사람을 형상화 하여 헬스 어플이라는 점을 내세움. 색감은 파란색, 초록색 등 여러가지 컨셉 컬러에 대한 회의가 오갔으나, 좀 더 모던하고 운동의 느낌을 내기위해 에메랄드 색으로 협의. 로고도 세로버전과 가로버전 두가지로 제작 후 가로버전을 나중에 아이콘 모양으로 활용하기로 합의. '모' 글자를 대각선으로 띄워 조금은 더 재밌어 보이게 제작
- 
- 교보재가 도착해서 각자 inflearn의 PWA 관련 강의, 도커(CI/CD) 강의, 모바일 웹디자인 강의, Vue의 vuex 심화 컴포넌트 관리 강의 등 각자 강의를 듣기 시작함.
- 금요일 중간 발표를 위해, 기획에 대한 부분을 한 번 더 되짚어 보고, ppt 파일을 만들어 중간 발표를 준비함.
- 중간 발표날. 발표는 몇가지 지적받은 점을 제외하곤 성공적으로 마침.
- 받은 피드백
- PT서비스가 대중에게 공개가 되지 않길 원하는 Trainer들도 있을 것 같다 -> 비밀 글 작성 기능을 넣기
- 트레이너의 인증 여부와 신용여부 판단, 신용 문제 -> 트레이너의 프로필에 자신의 약력과 인증서, 자격증 등을 올려두게 할 예정. 트레이너 신고 기능을 통해 비전문가 혹은 너무 수준이 떨어지는 트레이너는 신고하고, 환불 받을 수 있게하는 정책을 넣을까 고민중
- 트레이너 - 트레이니 라는 용어가 어려워서 일반대중들이 와닿지 않을 수가 있다. 고객님이라는 용어를 썼으면 좋겠다. (반영하기로)
- Back 단에서의
- Front단에서 Card의 크기 조절에 관한 이슈가 있었음. Ionic-Card Component에서 기본 제공하는 프로퍼티에는 크기 조절에 관한 클래스가 지정되어 있지 않아서, 문제를 겪은 팀원이 있었지만, CSS를 통해 크기를 %로 조절하는 방법으로 문제를 해결함.
- Ionic이 기본 typescript 의 형태로 제공되기 때문에 javascript 와의 차이점을 논의하고 배포함.
- Kakao Social Login 기능을 만들 때, 로그인 버튼과 회원가입 버튼이 따로 있는게 아니고, 카카오 로그인을 하고나서 처음 보는 회원이면 회원가입이 되도록, 기존 등록 유저이면 로그인이 되도록 하는 기능을 구현함에 Django User모델과 호환이 되지 않는 문제가 발생. 이를 위해, User Custom 정보에 is_first라는 칼럼을 추가하고, 이를 통해 Frontpage에서 분기가 생기도록 로직을 수정함. 생성될 때 user의 토큰을 받아오고, request.user로 정보를 알아낸 다음 is_first 값을 1로 바꿔주는 함수를 생성함.
- ionic 프레임워크는 새로고침 기능을 이용하면 여러 이미지가 실시간으로 반영이 되지 않는 등의 문제를 일으킴. 그래서 Android Studio를 통한 개발을 시도해보았으나, SSAFY 노트북의 성능 문제로 버츄얼 머신을 돌릴 때, 프로세스를 너무 많이 잡아 먹는 문제가 발생함. 나중에 확인해보니 이미지가 실시간 반영 되지 않는 auto refresher 기능을 넣으면 개발 과정에서 문제를 해결 할 수 있는 것으로 파악함.
- Front 기본 구성 로직과 탭 별 분기점을 완성함. 라우팅 및 경로 설정도 완료.
- 지금껏 각자 ionic을 사용해 학습하던 브런치들을 통합하고, 기본적인 라우터와 탭, 메인화면 구성과 인트로페이지 등을 만든 강동훈 팀장의 스켈레톤 코드를 develop 에 merge한 후, 각자 페이지를 맡아서(Mainpage 강동훈 Calendar 강병국 Chatting 노현석) 분업하기로 결정.
- Ionic의 기본적인 구성 및 이미지 파일 경로 문제(Ionic 자체적으로 img 폴더안에 이미지 파일 이름을 붙이는 문제), icon이 사라졌다 나타났다 하는 문제 등을 공유하고 서로의 코드 중 Best를 뽑아 적용함.
- Calendar Library가 원래 예정되었던 fullcalendar는 모바일 환경에 최적화 되지 않음을 발견하고, 다른 여러가지 라이브러리를 검증하는 시간을 보냄. Ionic-vue 가 나온지 1달도 채 되지않은 최신 버전이라 다른 사람들의 프로젝트를 참고할 여지가 적은 것이 단점
- 특히나 React와 angular 기반 Ionic 프로젝트가 많아, 강제로 React 와 Angular 혹은 Javascript 코드 기반으로 정적 페이지를 따오는 것부터 작업하는 중. 프론트 페이지에 대한 작업 요소가 많아 보인다.
- Backend 역시 Front와의 기본적인 통신 및 배포 테스트를 완료함. Vue-Ionic의 배포를 Netlify 라는 사이트를 통해 미리 dist 파일을 업로드 해봄. Router 경로 문제가 발생했지만 우리가 걱정했던 이미지 부분들은 다행히 잘 작동되는 것을 확인 할 수 있었음.
- 슬라이더 및 Navbar 컴포넌트들을 가져오는 것에 어려움을 겪음(노현석) 내일까지 해보고 안되면 포기할 예정
- 추 후 배포를 위한 .apk 파일을 생성하는 것 역시 연습해 보기로 함
- 결국 여러가지의 Calendar Library를 실험해봤으나 잘 되지 않아, Ionic React의 Calendar 앱을 가져와서 작업해 봄. 정적인 동작밖에 수행되지않고, 우리가 만드려고 했던 일정관리, 식단관리 기능 등을 추가 구현하려면 많은 소요시간이 필요할 것으로 보임.
- Vue.use 를 사용하는 Library들이 대체적으로 Ionic프로젝트에서는 오류가 많이 나고 작업이 잘 되지 않는 것으로 파악. CDN 방식으로 적용하는 참고 예제들을 가져오려고 하나 어려움이 많음.
- 도커와 CI/ CD에 관련한 학습을 진행중이라 도커를 도입할 예정.
- Alert 기능을 준비하기 위한 기본 세팅 페이지를 생성 완료
- 큰 소요가 있었다. 그것은 바로 Ionic Framework를 버리기로 결정한 것. 큰 이유는 다음과 같다.
- Ionic - Vue가 나온지 한달 밖에 되지 않은 최신 프레임워크라 아직까지 잔버그가 너무 많다. 예를 들어 npm run serve와 비슷한 기능을 하는 서버를 돌리는 명령어 ionic serve는 자동 reload 기능을 제공하지 않아서, 컴포넌트의 수정사항들이 바로바로 보여지지 않았기 때문에 수정사항이 한번 생길때마다 서버를 한번씩 껐다켜야하는 번거로움이 있었다. 새로운 프레임워크를 적용하는 단계인 우리 셋에겐 이것이 개발속도를 현저히 더디게 만드는 점이었다. 예를들어 똑같은 코드를 실행시켜도, 어떤 경우엔 아이콘이 로딩되고, 새로고침하면 보이지 않는 경우, 슬라이더가 넘어가기도, 안 넘어가기도 하는 등, 코드를 제외하고도 알 수 없는 부분에서 오류가 많이 일어났었다.
- =======
- 새로 모델링 적용한 Back API 모델 수정 및 로직 수정
- 페이지 작업
- 새로운 모델링에 맞게 frontpage와 axios, postman 을 활용해서 접속확인 및 기본 로그인 등 기능 개발.
- webRTC carousel 적용 slick-slider 컴포넌트와 동기화 작업
- fullcalendar 예약 기능 및 pt 프로그램 기능 추가
- Frontpage와 Backend 연결하면서 기능 추가
- 메인페이지에 Info Component 관련 하위 컴포넌트 생성