루틴 헬퍼 앱 개발 및 실제 사용기

소개

Flutter로 할 일 클리어 게임을 디자인한 것을 실제 구현했습니다.

일일 임무, 주간 임무, 연속 임무를 구현했고, 프로필 페이지를 만들었어요.

보상 시스템으로 퀘스트를 클리어하면 꾸미기 아이템을 받도록 했고,

받은 꾸미기 아이템에 해당하는 스티커를 게임 화면에 자유롭게 붙일 수 있게 했습니다.

레벨 시스템하고, 배지 시스템, 배경 음악도 구현했어요.

apk로 빌드해서 제 폰에 설치해서 앱 테스트도 할 겸 즐겁게 잡일을 클리어하고 있어요.

원래는 게임 UI 디자인에 나노바나나로 생성한 이미지를 썼었는데,

너무 API 비용이 많이 들어가더라구요.

그래서 나노바나나로 디자인만 하고, 그 그림을 첨부해서 Flutter로 똑같이 그려달라고 했습니다.

나노바나나의 디자인을 그대로 재현은 안되고, 좀 한계는 있지만, 그럭저럭 만족하고 있어요.

이렇게 나노바나나에서 디자인한 다음에

Flutter로 그대로 그렸습니다. 그런 식으로 화면을 하나 하나 만들었어요.

메인 화면입니다. 일일 퀘스트와 주간 퀘스트, 연속 퀘스트는 모두 등록/수정/삭제가 가능하도록 했어요.

Favicon과 앱 네임도 수정했습니다.

일일 퀘스트 등록 화면입니다.

등록하면 SQLite를 써서 데이터베이스에 저장합니다.

할 일을 완료하고 보상 버튼을 누르면 꾸미기 아이템이 랜덤으로 지급되요.

획득한 꾸미기 아이템은 이 스티커 패널에서 게임 화면에 자유롭게 붙일 수 있게 했습니다.

모든 화면 좌측 상단에 스티커 패널을 넣었습니다.

스티커의 외곽선이 갈색 바탕과 비슷해서 잘 안보이는 스티커의 경우에는

외곽선 주변에 흰색으로 처리를 하는 작업을 좀 했어요.

스티커는 이렇게 모든 화면에 자유롭게 붙일 수 있습니다.

길게 누르면 삭제되고 다시 스티커 패널로 복귀되요.

프로필 페이지에요. 레벨과 획득한 배지가 있습니다. 여기도 배지 옆에 제가 스티커를 붙여 두었네요. 스티커를 붙인 위치도 모두 데이터베이스에 저장되어서 다음 번 실행에서 유지된답니다.

프로필 페이지 오른쪽 하단에는 배경음악 Mute 버튼이 있는데요.

Suno로 배경음악을 만들어서 넣었어요. 이 음악입니다.

연속 반복 재생되도록 했어요. 오디오 재생 모듈을 구현했습니다.

곰돌이 캐릭터 옆에 Lv.4 라고 되어 있는데 레벨 시스템도 구현했습니다. 경험치하구요.

일일 임무, 주간 임무, 연속 임무 화면에 노출되요.

flutter build apk

로 안드로이드 앱을 빌드해서 제 폰에 넣었습니다.

실제 사용하고 있는데, 그 귀찮은 잡일을 열심히 하게 되는 순기능(?)이 있네요.. ㅎㅎㅎ

Flutter로 개발하다 보니, 다양한 화면 사이즈를 지원해야 할 필요가 있네요.

지금도 화면 너비를 좀 줄이면 에러가 납니다. bottom overflowed가 나요.

이게 제 폰에 설치하면 괜찮은데, 다른 사람 폰에서는 에러가 나길래 발견했습니다.

이 부분을 좀 수정해야겠습니다.