1.타이머 앱을 만든 이유

기본 타이머 앱으로도 충분한데 타이머 앱이 또 필요할까?

저는 평소에 실제 타이머를 사용해서 시간 관리하는 것을 좋아합니다. 그래서 제 방과 주방에 타이머를 한개씩 비치해놨습니다.

물론 스마트폰에 타이머 앱이 있기 때문에 실제 타이머가 없어도 시간 관리하는 것이 가능합니다. 하지만 타이머 앱이 실물 타이머 보다 편하다고 말하긴 어렵습니다. 앱은 기능이 많지만 여러 단계를 거쳐야 합니다. 반면 실물 타이머는 다이얼만 돌리면 시간 설정과 타이머 시작이 진행되기 때문에 훨씬 직관적이고 간편합니다.

간편한 타이머 앱이 이미 출시되어 있지 않을까 싶어서 스토어를 뒤져봤는데 다양한 기능을 탑재한 앱들은 있었지만 제가 원하는 '간단한 타이머 앱' 은 찾기 힘들었습니다.
그래서 저는 직접 타이머 앱을 만들기로 결심했고, 10주간 공부(노마드코더 플러터 챌린지), 한달간 개발을 통해 Jin Timer를 개발했습니다.
현재 안드로이드 플레이스토어에는 배포가 됐고, ios 앱스토어에는 심사 대기중입니다.

2.개발 과정

1. 타이트한 마감기한을 정한다 2. 할일을 정리한다 3. 내 한계를 인정하고 마감까지 할 수 있는 것들에 집중한다

주요 단계

사실 저는 비전공 출신이고, 개발자로 회사에 다녀본 적도 없어서(현재는 건설 분야에서 일하는 중) 현업에서 어떤 과정으로 개발을 진행하는 전~혀 모릅니다. 그래서 제 나름의 계획대로 앱 개발했습니다.

구상하기

저는 노션을 활용해서 타이머 앱을 구상하고 계획을 관리했습니다. 처음에는 아이폰 미리알림 앱을 사용하다가 옵시디언으로 넘어갔다가 최종적으로 노션으로 갈아탔습니다.

(기록하는 습관을 만들기 위해 회고록도 작성했습니다)

마감일 정하기

저는 해야할 일을 정리하기 전에 마감일부터 정했습니다. 말도 안되는 순서 같긴한데 저는 너무 시간을 길게 가져가면 흐지부지 해지는 성격이기 때문에 마감일을 타이트하게 정했습니다.
2023년 11월 1일부터 개발을 시작했고 11월 말일까지 배포를 끝내는 것을 목표로 세웠습니다.

워낙 간단한 앱이기 때문에 충분히 가능할 것이라고 생각했는데 그것은 저의 큰 착각이였습니다.

할일 정리하기

노션 템플릿 중 가장 적합할 것 같은 놈을 골라서 바로 생성했습니다. 그리고 구현해야 할 기능들, 그리고 공부해야할 내용들, 배포를 위해 알아야할 것들 등등 생각나는 대로 마구 적었습니다. 개발하는 중에 추가하고 싶은 내용이 있으면 계속 추가해 가며 작업을 진행했습니다.
아래 사진은 제가 Jin Timer 앱을 만들기 위해 작성한 Todo List의 일부입니다.

일정 관리하기

할일을 정했으니 목표일까지 시간을 어떻게 사용할지 계획을 세웠습니다. 퇴근 후 잠자기 직전까지 시간 동안만 개발을 할 수 있었기 때문에 철저한 시간 관리가 필수였습니다.

노션 기능 중에 타임라인 기능이 있는데 이걸 이용해서 개발 일정을 짰습니다. 어떤 액티비티는 너무 짧게 잡아서 기한 내에 못한 것도 있습니다. 그럴땐 과감하게 드래그해서 기간을 늘려줬습니다😅

포기할 거 포기하기

앞서 언급한 것 처럼 저는 노가다를 다니며 개발을 하고 있기 때문에 예상치 못한 야근, 회식이 생길 때가 있습니다. 이럴 때마다 절망적인 심정이었습니다. 왜냐하면 퇴근 후 그날 구현해야 하는 기능들이 있는데 그걸 못하게 될 것이고, 그럼 다음 날이 더 빡쎄지기 때문이죠.

그래서 저는 "포기할 건 포기하고 가자!" 라고 생각했습니다. 마감일을 미룰 순 없으니 타이머 앱으로써 필수 기능이라도 구현해서 1차 출시를 하기로 했습니다. 당연히 시간 설정, 알림음, 백그라운드 실행 등 기능을 우선적으로 개발했습니다. 이외의 기능은 12월에 보완해서 업데이트 하기로 정했습니다.
노션에서 작업별 우선순위를 정해서 1차 출시전에 구현해야 할 기능들을 분류했습니다.

개발하기

제가 Jin Timer 앱을 만들면서 사용한 플러터 기능들을 간략히 소개해보겠습니다.

CustomPaint

저는 시계 디자인이 어떤 기기를 사용하든 깨끗한 화질로 렌더링 되길 원했습니다. 그래서 시계의 모든 요소를 CustomPaint를 사용해서 그렸습니다. 유저의 스크린 해상도에 따라 알맞은 크기의 시계가 그려지게 만들었습니다. 그래서 어떠한 기기로 앱을 실행시켜도 선명한 시계 화면을 볼 수 있습니다

AnimatedBuilder

타이머 앱 특성상 1초 마다 UI에 변화가 생깁니다. setState를 사용할 경우 모든 UI가 다시 렌더링 되는데 이렇게 되면 메모리 관리에 불리합니다. 그래서 AnimatedBuilder를 사용해서 시침과 텍스트만 렌더링 되게끔 만들었습니다.

반응형? 적응형?

타이머 앱은 가로로 놓고 사용하는 경우가 많습니다. 예를들면 공부나 요리할 때 가로로 놓고 사용하는 경우가 많죠. 처음에는 이를 고려하지 않고 개발했다가 가로로 돌려보니 UI가 깨지는 문제가 생겼습니다. 그래서 사용자의 기기가 landscape 상태일 때를 감지해서 UI를 다시 그리도록 코드를 수정했습니다.

자동 다크모드

타이머가 시작 된 후 10초가 지나면 자동으로 다크모드로 전환되게 만들었습니다. 그리고 타이머가 작동하는 동안은 자동으로 화면이 꺼지지 않게 만들어줬습니다. 공부, 요리, 운동할 때 사용할 목적으로 만들어진 타이머이기 때문에 화면이 항상 켜져있는게 좋다고 판단했습니다. 다만 흰 화면으로 60분 동안 켜져있으면 배터리 소모가 크기 때문에 자동으로 다크모드로 진입하게 했습니다.

시간 종료 알림

유저가 타이머를 실행시키고 다른 앱을 사용하거나 기기를 잠금 상태로 만드는 경우가 있습니다. 이 문제를 해결하기 위해 타이머가 시간이 종료 됐을 때 알림이 오게 만들었습니다. 이 부분은 플러터 기본 기능만으로 해결하기 어려웠고 네이티브 코드를 수정해야 했기 때문에 해결하기 어려웠습니다. 하지만 선생님(?)의 도움을 받아 기능을 구현했습니다. 자세한 내용은 뒤에서 알아보겠습니다.

사용한 패키지

• google_fonts 폰트 변경을 위해 설치
• audioplayers 벨소리 울리게 하기 위해 설치
• permission_handler 알림 권한을 얻기 위해 설치
• vibration 벨소리와 진동이 같이 울리게 하기 위해 설치
• wakelock 화면이 항상 켜져있게 하기 위해 설치

배포하기

아이러니하게도 개발보다 어려웠던게 배포하기 단계였던 것 같습니다. 노마드코더 강의에서 안배운 부분이기도 하고 배포용 파일을 만들 때 예상치 못한 문제들이 발생하기 때문입니다. 특히 ios로 배포할 때 문제가 많았습니다. xcode 정말 헬입니다 🤣
여기에 어떤 문제가 있었고 어떻게 해결했는지 적을 수 조차 없을 정도.
그냥 닥치는대로 구글링 해서 다시 시도하고, 또 문제 생기면 구글링, 무한반복을 한 결과 배포에 성공했습니다.
어쩌다보니 성공?😅(ios는 아직도 진행중🥲)

마지막으로 앱을 배포할 때 신경쓴 부분은 제품 스크린샷과 설명입니다. 타이머 앱에는 텍스트가 거의 없기 때문에 기획 단계 때부터 글로벌 출시를 목표로 했습니다. 그래서 제품 설명과 사진을 영어로 작성했습니다.
전문 기업의 스크린샷에 비하면 많이 떨어지지만 Figma라는 무료 사진편집 사이트에서 모든 이미지를 제작했습니다

도전과 문제해결

앱을 개발하면서 다양한 에러를 마주하게 됐는데 생각보다 쉽게 해결할 수 있었습니다. 저에게는 스승님이 두 분 계시기 때문이죠
첫번째 스승님은 노마드코더 니코쌤
두번째 스승님은 GPT 쌤
Dart와 flutter를 이해하는데 노마드코더 강의가 큰 도움이 됐습니다. 중간에 생긴 문제도 강의를 다시 보면서 해결하기도 했습니다. 확실히 챌린지를 통해서 끝까지 작품을 만들어본 경험이 도움이 많이 됐습니다.
중간에 예상치 못한 에러가 발생했을 땐 GPT를 적극 활용했습니다. 에러 메세지를 복사해서 붙여넣기만 해도 대부분의 정답을 구할 수 있었습니다. 그걸로도 해결이 안될 땐 추가로 제 코드를 알려주면 원만한 합의(?)를 볼 수 있었습니다 😁

가장 어려웠던 알림 기능, GPT 선생님이 해결

유저들은 제 의도대로 행동하지 않기 마련이죠. 저는 유저들이 타이머를 항상 켜놓고 사용하길 원하지만 실제 유저들은 그렇게 절대!!! 사용하지 않을 것입니다. 중간에 앱을 나가고 유튜브를 본다든가 쇼핑을 한다든가 그러겠죠.
우선 타이머를 시작한 이후에 다른 앱을 사용해도 벨소리가 울리는지 테스트 해봤습니다. ios는 30초, 안드로이드는 20분이 지나면 앱이 수면 상태로 들어가서 벨소리가 울리지 않았습니다. 과연 이 문제를 어떻게 해결할 수 있을까 고민하다가 타이머가 종료되면 알림이 오게 하면 되겠다고 생각했습니다.
알림 패키지를 설치하고 실행해보니 잘 작동하는 것처럼 보였습니다. 하지만 패키지는 앱이 깨어있는 동안만 작동하는 것이였고, 앱이 잠드는 순간 알림도 오지 않았습니다.
그래서 chatGPT에게 해결 방법을 물어보니 세가지 정도를 알려줬습니다. 그 중 하나가 네이티브 파일을 수정하는 것이였는데 저는 이 방법으로 해결하고 싶지 않았습니다. 왜냐하면 kotlin, java, swift는 전혀 모르는 언어였기 때문이었습니다.
그런데 나머지 두 방법으로 문제를 해결하려고 했으나 결국 실패했고, 마지막 방법인 네이티브 코드를 수정하는 방법만 남았습니다. 어쩔수 없이 chatGPT 선생님께 계속 물어보면서 네이티브 코드를 수정했고, 예약 알림 기능을 구현했습니다.
전혀 모르는 언어도 GPT 선생님과 같이 구현할 수 있다는 점이 놀라운 경험이였습니다. 물론 해당 언어를 모르다보니 정확히 이해는 못했지만 기능이 작동을 하니 만족스러웠습니다.'

아래는 선생님과 대화한 내용 예시

3.앱의 미래

마감일에 앱을 배포하기 위해 미뤄놓은 기능들이 많이 있습니다. 그 중에서 가장 큰 기능은 멀티 타이머 기능입니다.
현재는 앱을 실행시키면 한개의 타이머만 설정할 수 있지만 향후 업데이트에서는 다중 타이머가 가능하게 만들 것입니다. 현재 화면에 있는 시계를 좌우로 스와이프 해서 새로운 시계를 생성하고, 이동할 수 있게 만들 계획입니다.
추가로 광고 기능을 넣을 것입니다. 나아가 인앱 결제를 하면 광고가 사라지는 결제 모델도 구현해볼 생각입니다. 저도 광고가 붙은 앱은 거의 사용하지 않지만!! 광고를 붙이는 경험을 해보는 것이 중요하다고 생각되기 때문입니다.