몇 주 전에 운동을 시작했는데 운동을 하다 보니 반복 동작 운동(e.g. 스쿼트, 런지)을 할 때 일정한 간격으로 동작할 수 있다면 좋겠다는 생각이 들었다. 앱 스토어에서 관련 앱을 찾아 봤는데 대부분 시간에 기반한 타이머고 내가 원하는 기능은 없었다. 그래서 만들어 보기로 했다.
MVP(버전 1.0.0)에 들어갈 기능은 다음과 같다.
- prepare > round(s) > cool down 의 구조, round는 work + rest
- 운동 시작 전 3, 2, 1 카운트 다운 음성 포함
- 1회 동작할 때마다 sound effect + count 음성
- 사용자는 루틴(round의 구성 / prepare 및 cool down 길이)을 커스터마이징해서 저장할 수 있다. (Core Data - 임시)
고도화 시 추가될 기능은 다음과 같다.
- Core Data를 Firebase로 대체
- 캘린더를 추가하여 매일 운동 기록 저장(Firebase)
- 애플 워치 앱 개발
- 심박수 관련 기능 추가
우선 아이패드 굿노트 앱으로 간단하게 디자인을 그렸다. 나름 UX를 고려하면서 UI를 디자인하려고 노력했는데 쉽지 않다. 나의 의도를 줄글의 설명 혹은 온보딩 없이 형태만으로 명확히 나타내는 게 정말 고민이 많이 필요한 작업이라는 걸 다시 한 번 깨달았다.
그 다음 Figma로 디자인을 옮겼다.
우선 앱에 들어가면 가장 먼저 보이는 홈 화면이다. 사용자화된 운동 스케줄과 루틴 별 운동 시간을 확인할 수 있으며 하단의 horizontal scrollview에서 원하는 루틴을 선택 및 수정, 새로운 루틴을 추가할 수 있다. 두 가지 형태의 디자인을 해 봤는데, 디자이너에게 자문을 구한 결과 오른쪽이 더 가독성이 좋다고 해서 우측 디자인으로 갈 예정이다.
다음은 새로운 루틴을 추가하거나 수정하는 뷰인데, 이도 마찬가지로 두 가지 디자인을 했다. 홈 화면과 마찬가지로 우측 디자인으로 개발할 것이다. 수정 가능한 속성은 루틴 이름, Prepare, Cool Down, Rest의 지속 시간, 그리고 운동 종류 및 순서이다. Duration을 조정할 때는 time picker가 뜨고, 운동을 추가할 때는 새로운 뷰가 뜬다. 동일한 화면에서는 운동의 순서를 조정하거나 삭제할 수 있다.
추가) 다시 고민해 본 결과 원래는 운동 삭제를 슬라이드 모션으로 처리하려고 했는데 해당 기능이 순서를 조정하는 액션과 겹치게 되면 직관적이지 않았다. 그래서 그냥 다음과 같이 삭제 버튼을 추가하는 디자인을 사용하기로 했다.
다음은 위의 루틴 추가 및 수정 뷰에서 루틴에 운동을 추가하거나, 새로운 운동을 생성할 때 뜨는 뷰이다. 운동을 추가하는 뷰에서는 기존 사용자가 등록해 놓은 운동 리스트가 뜨며 동작 반복 횟수 및 round 횟수를 지정할 수 있다. 반복 횟수와 round 횟수는 Picker를 통해 지정하며, Picker 영역 이외의 영역을 터치하면 해당 운동의 속성(운동 이름, 동작 시간)을 수정하는 뷰로 넘어간다. (하지만 디자인은 하지 않았다. 새로운 운동을 생성하는 뷰와 비슷하게 개발하면 된다.) 새로운 운동을 생성하는 뷰에서는 운동 이름과 동작 시간을 지정할 수 있으며 동작 시간을 설정한 후 재생 버튼을 눌러 어느 정도 간격인지 들어볼 수도 있다.
마지막으로 가장 핵심 기능인 타이머이다. 가장 상단에는 루틴의 이름이 뜨고, 그 밑에 현재 진행 중인 round 및 반복 횟수가 실시간으로 반영된다. 파이와 남은 시간이 함께 표시되며 파이의 색깔은 지금 진행 중인 과정에 따라 달라지는데, 현재 기준으로는 Prepare 시 노란색, 운동 시 주황색, Rest 시 초록색, Cool Down 시 하늘색으로 설정되어 있다. 파이의 하단에는 다음 과정이 대표 색깔과 함께 나타난다. 화면의 최하단에는 일시정지 버튼 및 현재 과정 건너뛰기 버튼이 위치한다.
이렇게 하루에 걸쳐 앱 고안 및 디자인을 마쳤다. 다음으로는 실제로 개발에 들어간다.
