📂 프로젝트
janyang.png

미션 참여형 알람앱 - 자냥

#삼성청년SW아카데미, #Flutter, #Lottie,2024-07-31

미션 참여 기능을 제공하는 알람앱, '자냥'의 개발 과정을 소개하려고해요. 왜 이 프로젝트를 시작했고, 어떤 기능을 개발했는지 소개할게요.

목차

  • 프로젝트를 진행하게 된 이유
  • 담당한 기능
  • 트러블슈팅
  • 성과 & 결론
  • 프로젝트 시연 이미지

1. 프로젝트를 진행하게 된 이유

일어나기 힘든 아침시간, 즐겁게 일어나는 방법 있으면 참 좋겠다는 단순한 생각에서 시작한 프로젝트에요.

만약, 기상시간에 친한 친구 4명이 모두 양치하는 것을 인증해야한다면? 또, 그 장면을 서로 보고 있다면? 비록 별거아닌 게임이지만, 하루 아침을 즐겁게 시작할 수 있지 않을까요?

2. 담당한 기능

제가 구현한 기능 중 핵심기능을 중심적으로 소개할게요.

    1. 다크/라이트모드, Animated Logo
    1. 튜토리얼
    1. 로그인 이후 회원 등록 과정
    1. 미션 수행 결과

첫번째, 다크/라이트모드, Animated Logo

dark-light.gif

다크모드와 라이트모드에 따라 로고가 변화하도록 했어요. 실제 고양이 동공 크기가 낮과 밤에 변화하는 것을 참고하여 다크모드에서는 큰 동공, 라이트모드에선 작은 동공으로 변화하도록 기능을 구현했어요.

Lottie를 활용하여 주기적으로 동공이 움직일 수 있도록 하였고, 무작위 난수 연산을 통해 매번 동일한 움직임이 아닐 수 있도록 기능을 개발했어요.

두번째, 하이라이트기능

tutorial.gif

Tutorial Coach Mark라는 이름의 라이브러리를 커스텀하여 튜토리얼을 구현했어요.

튜토리얼에서 강조할 좌표와 사이즈를 미리 지정하고 정해진 순서에 맞게 표시할 수 있도록 개발했어요.

세번째, 로그인 이후 회원 등록 과정

set_nickname.gif

회원가입 이후 닉네임 설정 로직을 구현했어요.

DB에 저장될 회원 레코드의 제약조건을 사전에 검증하여 데이터 무결성을 프론트엔드에서도 준수할 수 있도록 했어요.

또, 닉네임 변경 도중에 애플리케이션을 종료하는 경우 등을 고려하여 랜덤한 닉네임으로 가입한 이후, 닉네임을 변경하는 형식의 로직으로 구현했어요.

네번째, 미션 수행 결과

mission-report.gif

최근 7일 / 30일에 해당하는 미션 수행 결과를 제공하고, 캘린더를 통해 언제 어떤 미션을 수행했는지 확인할 수 있는 기능을 개발했습니다.

Bubble 그래프의 경우 FL Chart라이브러리를 커스텀하여 개발했고, 캘린더는 TableCalendar라이브러리를 커스텀하여 개발했습니다.

보여줄 화면을 토글하는 기능은 ToggleSwitch와 애니메이션을 활용한 커스텀 바를 개발하여 활용하였고, 보여줄 컴포넌트를 결정하는 전역변수를 GetX로 관리하였습니다.

트러블슈팅

개발 초기에는 React Native를 사용해 앱 개발을 진행했어요. 그러나 알람앱 특성상 FCM 디바이스 토큰을 수시로 확인하며 푸시 알람 테스트를 해야 했는데, Expo 환경의 React Native에서는 .apk 빌드 이전에 이를 확인할 수 없는 문제가 발생했어요.

이는 개발 생산성과 유지보수성을 크게 저해할 수 있는 이슈였고, 장기적인 관점에서 개발자 경험을 고려했을 때 반드시 해결이 필요했어요.

이에 대해 고민한 끝에 해당 이슈로부터 자유로운 Flutter로 프레임워크 전환을 제안했어요. 개발 초기이기에 충분히 가능한 선택지라고 생각했어요.

비록 Dart라는 새로운 언어를 학습해야 했지만 Dart가 타입스크립트와 유사한 구조를 갖고 있어 학습 장벽이 높지 않다는 점, 실제로 많은 기업들이 Flutter를 도입하여 앱 개발을 진행하고 있다는 점을 근거로 팀 내 설득을 진행했고 최종적으로 Flutter로 전환하여 개발을 진행했어요.

특히 JavaScript로 잘 구현되어 있던 OpenVidu와 같은 기능은 Flutter에서 React WebView 형태로 구현하면서 개발을 진행했어요.

성과 & 결론

  • Flutter라는 크로스플랫폼 프레임워크를 활용한 모바일 앱 경험을 쌓았어요.
  • UI/UX 개선을 중심으로 사용자 경험을 높이는 역량을 키웠어요.
  • 1인 미션 판별에 AI를 적용해 프로젝트 완성도를 높일 수 있었어요.
  • 새로운 기술을 도입하는 과정에서도 기존 기술을 유연하게 병행 활용하는 방법을 경험했어요.

그 외의 프로젝트 이미지

AI 감독 (1인모드)solo-mission.png

서비스의 미션 성공여부는 함께 미션을 수행한 인원들의 투표로 결정되는 방식이에요. 하지만 이와 같은 경우 혼자서 미션방을 만들거나, 혼자만 미션에 참여하면 무조건 실패한다는 치명적 오류가 발생해요.

이와 같은 경우 ChatGPT를 활용하여 미션 성공여부를 판별할 수 있도록 했어요.

미션 진입enter_mission.png

미션 시간이 5분 전부터 미션방에 입장 가능해요. 입장한 이후엔 참여 인원들이 지정한 미션 중 하나를 선택해서 입장해야해요.

미션 수행mission.png

미션을 수행하고 팀원들끼리 투표를 통해 성공여부를 판별해요. 얼굴을 노출하는것이 부담스러우면 필터링 기능을 활용할 수 있어요.

이 부분은 React의 웹뷰를 활용하여 개발했어요.

미션 수행 이후after_mission.png

미션을 완료하고 퇴장하게되면 기존에 내가 추가한 미션을 수정할 수 있어요.