🎉 항해99 실전 프로젝트
기간 : 07월 23일 - 8월 31일
팀 구성 : 백엔드 3명, 프론트엔드 3명, 디자이너 2명

🛠 프로젝트 기술 상세 내역

** 해당 velog는 프로젝트를 진행하며 느낀 점이나 생각을 회고하기 위해 기술 상세 내역은 깃허브에서!

Calog_FE 깃허브 주소

🖥 서비스 관련 영상

프로젝트 발표 및 시연 영상

Calog

☝🏻오늘 내가 먹은 음식의 칼로리가 궁금하다면?
☝🏻회사-집-집-집-집 루틴으로 식단 관리는 하고싶은데 “내가 하루에 얼마나 먹고있지?“라고 생각한다면?

: 내가 먹은 모든 음식의 칼로리가 궁금할 때 검색하고 내 식단을 기록하며 식습관을 체크할 수 있는 서비스

기획

사실, 시중에는 칼로리를 확인할 수 있는 어플이 많다.
명칭을 다 밝힐 순 없지만, 나도 최소 3가지 이상의 어플들을 떠돌았고, 해당 서비스를 지금까지 유지하지 않는 이유는 첫째로, 기록하는 것이 귀찮았고 둘째로, 다이어트며 식단관리를 이유로 기록을 한다고 해서 별로 흥미를 이끌지 않았다.

그래서 처음 항해99 실전프로젝트가 시작하기 전 팀장들이 낸 기획안을 보았을 때 칼로리 계산 서비스가 눈에 띄었다. 나도 실제 유저였으니 더 많은 의견을 낼 수 있을 것이라 생각했고, 관심있는 분야라 내 스스도로 흥미를 느끼며 프로젝트를 진행할 수 있을 것이라 생각했다.

진행

회의를 진행하며 가장 많이 얘기를 나눈 것은 이미 시중에 있는 앱들과의 차별성이었다.
식단을 신경을 쓸 것 같은 사람들은 다이어터들일거고 그 중 여성 유저를 타켓팅하여 손이 많이 갈 수 있도록 귀엽고 시각적인 요소를 많이 추가하여 직관적으로 UI를 구성하였다.
또한, 최소한의 클릭으로 식단을 기록할 수 있게 만들어 덜 귀차니즘(?)에 빠지게 하고 싶었다.

나는 Calog 중 대시보드와 캘린더에 관련한 view, func를 담당하게 되었다.

대시보드

칼로리를 기록했을 경우 '오늘의 칼로리 기록'에 대한 내용을 확인할 수 있는 페이지

components

• Dashboard_Chart : 오늘 섭취한 칼로리를 조금 더 시각적으로 보여주기 위해 각 끼니별로 도넛 그래프(nivo)를 활용하여 전달한다.

  ☝🏻nivo를 사용한 이유 : chartjs나 다른 그래프 라이브러리도 확인하였으나 nivo의 경우 사이트에서 그래프를 커스터마이징 하기에 변경해가며 실시간으로 확인할 수 있어 직관적이였고, label이나 color의 테마도 설정하기가 편리하여 사용하게 되었다.

• Dashboard_Bodyspec : 유저가 기록한 바디스펙(키, 몸무게, 이에 해당하는 기초대사량) 확인이 가능하며 이를 아이콘을 클릭해 숨기거나 표출할 수 있다.)

  ✅중복 이벤트 발생을 방지하기 위해 lodash를 활용하여 버튼 클릭후 300ms 후 api요청이 들어갈 수 있도록 적용하였으나, 타이핑같은 이벤트가 아니라 마우스 클릭으로 더 빠르게 진행되는 이벤트라 그런지 적은 시간이었지만 시간이 적용되어 있어 버벅거리는듯한 느낌을 받아 코드를 짜놓긴 했지만 실제로 적용하지는 않았다. 조금 더 적재적소에 활용하는 법을 공부해봐야겠다.

캘린더

한 달 동안의 기록을 확인할 수 있는 캘린더 페이지

components

• Calendar_Calendar : 한 달의 캘린더를 아이콘을 통해 표시한다.

  ☝🏻 캘린더 상세 페이지에서는 date picker 라이브러리를 사용하였으나 캘린더 페이지에서는 아이콘을 사용하여 코드를 커스터마이징 하기 위해서는 라이브러리가 아닌 직접 만들어서 사용하는 것이 더 효율적이고 편할 것이라 생각하여 직접 구현하였다.

캘린더 상세

캘린더에서 확인을 원하는 날짜를 클릭했을 때 해당 일자의 기록을 확인할 수 있다.

• 기존 ver1에서는 <기록하기>라는 페이지가 있었고 기록 단계를 최소화하면서 이미지와 메모를 기록하는 부분이 캘린더 상세로 넘어오게 되었다.
  관련한 이미지 업로드 부분은 아래 링크에 정리해두었다.
  이미지 리사이징
  이미지 업로드

피드백 및 개선

• Calog 1차 런칭 후 100개 정도의 피드백을 받을 수 있었다.
  UX적으로 많이 고려하여 디자인하고 기획하였다고 생각하였는데 개발자의 입장에서는 매일 테스트를 동일하게 진행하다보니 무뎌졌는지 미처 생각하지 못한 부분을 피드백을 통해서 다시 한 번 많이 생각할 수 있게 된 것 같다.

• 가장 크게 변화가 이루어진 부분은 [기록 단계가 너무 많아 번거롭다, 데이터를 직접 추가할 수 있으면 좋겠다.]의 피드백이였다.

• 유저가 직접 등록하는게 번거로울 것 같아 운영진에게 요청할 수 있도록 1차 버전의 기능을 만들었으나 생각보다 유저는 직접 참여하는 것 또한 선호하는 것 같다. 물론, 이도 사람의 성향에 따라 다를 수 있을 것이라 생각하여 프로젝트를 진행할 때 다양한 성향의 케이스를 생각해보고 이에 맞는 여러 장치를 심플하게 마련해두는 것도 좋을 것 같다는 생각을 하였다.

• 이를 개선하기 위해 유저가 직접 참여도 할 수 있도록 크게 아래 부분처럼 개선하였다.

1. 기록 단계 클릭 수 최소 8번에서 최소 3번으로 단축
2. 칼로리 직접 등록 기능 구현
3. 매일 동일한 끼니에 식단을 먹는 경우(ex.다이어트를 위해 매일 아침엔 계란 2알과 사과 반쪽을 먹는다) 단 2번의 클릭만으로 기록이 가능하도록 나만의 식단 커스텀 기능 구현

느낀 점

아쉬운 점

• 기술적으로는 ts를 적용해보고 싶었으나 시간이 부족하여 공부를 시작하고 적용해보지 못했다.
• pwa를 적용하여 웹 앱으로 구현하였으나 ios 기기에서는 제약이 많았다. 앱 기술을 배워보고자 다짐하였다.
• 대시보드나 캘린더의 경우 기초대사량과 기록 유무에 따라 나뉘어진 case가 너무 많아서 헷갈려 다시 엎고 짜게 되었다. 처음부터 case를 나눠서 생각해서 코드를 써내려갔다면 조금 더 시간을 효율적으로 쓸 수 있지 않았을까?

잘한 점

• 완성도 높은 프로젝트가 나온 것 같다.
• 버그,,정말 많았지만 끝까지 포기하지않고 다 해결하였다. 완성도에 진짜 욕심을 많이 부렸다. 과정은 힘들었지만 결과는 너무 만족스럽고 뿌듯하다.
• 이번 프로젝트에 배포나 과정에서 많이 참여하였고 내가 낸 의견도 많이 수용된 것 같아 뿌듯하다.
• 프로젝트가 거의 마무리되고 코드리뷰를 진행하며 느낀 점인데 사람마다 정말 코드를 구성하는 스타일이 다른 것 같고 이를 이해하는 시간이 될 수 있었다. 물론 코드가 통일되면 너무 좋겠지만, 성향이 다를 수 있는 부분이라 생각하여 혹시나 나와 성향이 다른 사람이 내 코드를 보았을 때 조금이나마 이해하기에 어려움이 없도록 주석을 달아두었다.
• 끝까지 분위기 좋은 팀원으로 프로젝트를 마무리 할 수 있어서 좋았다❣️