[헬스 다이어리 앱 개발] 13편 - 테스팅 + 회고

2주 동안 사용해봤다

 

 

앱을 직접 2주 동안 사용해봤다.

실제로 사용해보니, 개발할 때 미쳐 생각하지 못한 불편함 점, 아쉬운 점들이 보였다.

더 나은 앱을 만들기 위해 2주 동안 테스팅한 하며 느꼈던 것들을 정리하고, 개발 과정을 회고해봤다

 

 

 

 

테스팅 #1 - 런치 스크린 중복

 

런치(스플래시)스크린은 앱을 처음 실행했을 때 2초 정도 보이는 화면이다.

많은 앱들은 런치 스크린이 렌더링되는 동안 필요한 데이터를 로딩하고 로고 등을 이용해 유저에게 앱에 대해 소개한다.

런치 스크린은 유저가 처음 앱과 만나는 인터페이스여서 앱의 브랜딩에 많은 영향을 끼치고, 그만큼 중요한 스크린이다.

 

 

런치 스크린

그래서 앱의 아이덴티티를 표현하는 목적으로 배경색과 로고, 문구를 넣어서 런치 스크린을 디자인했다.

하지만 앱을 실행하면 만든 런치 스크린이 렌더링되는 것이 아니라 하얀 빈 화면이 나타났다.

빈 화면이 2초 정도 보이고 나서야 런치 스크린이 렌더링되었다.

 

 

웬 흰화면

 

 

찾아보니 expo에서 런치 스크린을 수정하는 방법이 따로 있는 것 같다.

Create a Splash Screen - Expo Documentation

따로 설정하지 않았으니 기본 런치 스크린(빈 화면)이 보이고, 만든 런치 스크린이 렌더링되었다.

앱을 처음 열었을 때 빈 화면이 보인다면, 유저 입장에서 앱의 완성도가 떨어진다고 느낄 수 밖에 없어서 이 이슈는 꼭 해결해야 한다.

 

 

 

 

테스팅 #2 - 자동 저장되지 않는 기록

 

운동 기록을 추가하거나 수정한 것을 저장하려면 상단바 우측의 저장 버튼을 눌러야 한다.

반대로 말하면 버튼을 누르기 전까지는 기록이 저장되지 않는다.

실수로 기록을 저장하지 않고 운동 일지 스크린을 나가서 기록이 사라진 적이 몇 번 있었다.

그럴 때마다 다시 기록을 추가했고, 앱을 사용하면서 가장 불편했던 경험이었다.

 

 

모달을 끄는 방법이 없다

특히 운동 추가 버튼을 실수로 눌러, 위의 사진처럼 모달이 떴을 때 이런 일이 많이 생겼다.

모달을 끄기 위해 뒤로가기 버튼을 누르면 모달이 꺼지는 것이 아니라 운동 일지 스크린에서 나가지기 때문이다.

스크린에서 벗어나지 않기 위해 운동을 추가해서 모달을 끈 다음에, 다시 해당 운동을 삭제해야 했다.

 

 

실수로 기록을 저장하지 않고 나가는 문제를 해결하는 방법은 두가지가 있다.

첫번째는 운동 일지 스크린에서 나가려 할때, 안내 메시지를 띄우는 것이다.

 

티스토리의 안내 메시지

티스토리도 글 쓰기 페이지에서 나간다면 이런 안내 메시지를 띄운다.

덕분에 유저는 실수로 페이지를 나가 글이 날라가는 불상사를 겪지 않는다.

 

두번째는 수정이 일어날 때마다 자동 저장을 하는 것이다.

원래는 막연히 자동 저장이 편해보였지만, 고민해보니 UX를 해칠 수도 있겠다 싶었다.

만약 운동 기록을 실수로 삭제했다면, 이 경우에는 자동 저장되는 것이 오히려 더 불필요한 기능이 되버린다.

 

 

그리고 모달을 끄는 기능도 추가해야 한다.

모달이 아닌 부분을 눌렀을 때 꺼지도록 하는 방법도 있지만, 이 경우에는 모달창이 화면의 많은 부분을 차지해서 불편해 보인다.

상단에 X 버튼을 추가하거나 뒤로가기 버튼을 눌렀을 때 모달창이 꺼지도록 만드는 것이 괜찮아 보인다.

 

 

 

 

테스팅 #3 - 한눈에 들어오지 않는 운동 기록

 

운동 기록이 잘려서 보인다

또 아쉬운 점은 운동 기록이 한눈에 안들어오는 점이다.

나는 보통 헬스할 때, 5가지 운동을 4세트씩 진행한다.

하지만 위의 사진처럼 이 앱에선 세트를 조금만 추가해도 화면이 꽉차서 답답해 보인다.

거기다 운동 추가 버튼의 위치도 묘하게 어색하다.

 

 

글씨나 버튼 크기를 줄여서 화면에 기록이 더 많이 보이게 하는 것은 한계가 있을 것 같고 보기에도 좋지 않을 것 같다.

그래서 모든 세트 정보를 다 보여주기보다 세트 횟수만 표시하고, 운동을 눌렀을 때 해당하는 세트들을 모달에 띄어주는 방식으로 수정해야 겠다.

 

 

 

 

테스팅 #4 - 투박한 UI

 

그래도 나름 예쁘게 만들려고 노력했는데 써보니 UI가 너무 투박했다 ㅋㅋㅋ....

내 UI 감각과 지식이 부족한 거기 때문에 이거는 지금 당장 해결할 수 있는 문제는 아니다.

현재도 투박하다는 느낌만 있을 뿐이지 어디가 왜 투박하다고 느껴지는지 모르니 말이다.

 

 

그래서 UI 보는 눈을 기르기로 마음 먹었다.

책도 읽고 UI 관련 사이트들도 챙겨 봐야겠다.

 

그리고 가장 중요한 건 일상생활에서 꾸준히 관심갖는 것이다.

꼭 앱과 웹을 이용할 때 뿐만 아니라, 카페를 갈 때나 거리를 거닐 때도 일상을 주의깊게 관찰하고 구체적으로 생각하는 것이다.

여기서 '구체적'이라는 것이 중요하다.

좋다 나쁘다 정도에서 멈추지 말고 어떤 느낌이 왜 들었는지 그리고 어떻게 개선하고 나의 것으로 만들지를 생각해야 한다.

마지막으로 노션에 기록하고 정리하는 것까지가 내 목표다.

 

 

 

 

이 밖에도 개선해야 할 것들이 많이 있다.

- 앱 화면에서 핸드폰의 상태표시줄이 보이지 않음

- 달력에 요일은 '월 화 ... 일'로 되어 있는데 날짜는 '일 월 ... 토'로 되어 있음

- 무게나 횟수를 입력할 때 문자를 입력하면 NaN(not a number)가 렌더링됨

- 버튼의 가장자리는 눌리지 않음

- 러닝과 같이 무게와 횟수가 아닌 속력이나 시간이 중요한 운동을 구분

 

 

그리고 추가하고 싶은 기능들도 생겼다.

- 달력에서 공휴일을 빨갛게 표시

- 운동 종류를 추가하고 수정하는 기능

- 커스텀 루틴을 만들어 자동으로 오늘 할 운동이 추가되는 기능

 

위의 기능들을 개선하고 추가한다면 휠씬 사용성이 좋은 앱이 될 것 같다.

 

 

 

 

회고 #1 - 기획의 중요성

 

중간점검할 때도 다뤘지만 간단한 서비스라도 기획은 정말 중요한 것 같다.

[헬스 다이어리 앱 개발] 7편 - 중간점검

 

무언가 없을 때 비로소 중요함을 느끼는 것처럼,

기획 없이 개발을 해보니 기획의 중요성을 깨달았다.

 

 

기획을 하지 않고 개발하니, 방향을 잃고 방황하기 일쑤였다.

개발하는 순간에도 추가하고 수정할 점들이 생겨서 코드를 여러번 갈아엎었다.

명확한 목표가 없으니 진척이 있을 리 없었고 자연스럽게 늘어졌다.

7월 초에 시작해서 초기 버전을 만들기까지 세달 동안 실제 개발한 시간은 며칠 뿐일 정도로 많이 늘어졌다.

 

 

 

 

회고 #2 - 기술부채

 

기술부채는 필요하다.

기술을 처음부터 완전히 이해하고 사용하는 것은 어려울 뿐만 아니라 비효율적이라고 생각한다.

우선 기술을 써보는 것이 중요하다.

그리고 기술부채가 계속 늘어나지 않도록 일정하게 유지하는 것도 필요하다.

기술을 써보며 궁금하고 불편한 점이 생기면 공부해서 채워나가야 한다.

 

 

react-native와 앱 개발이 모두 처음이여서 expo를 선택했다.

expo 덕분에 편하게 시뮬레이터를 사용하거나 빌드할 수 있었고, 앱 개발에 잘 입문했다.

이제는 앱의 배포 시스템과 android와 ios의 차이점, react-native의 구동 윈리, 최적화 방법이 궁금하다.

그래서 expo에서 react-native-cli로 바꿀 예정이다.

expo를 사용하며 생긴 기술부채를 갚는 동시에 react-native-cli를 사용하며 또 기술부채가 생길 것이다.

이 과정을 반복한다면 앱 개발에 많이 능숙해질 것 같다.

 

 

 

 

회고 #3 - 부족한 도메인 지식

 

나는 헬스 초보다.

지금 한 4달 정도 했고, 관련 지식도 많이 없다.

그만큼 앱의 기능들이 단조로울 수 밖에 없다.

 

 

헬스를 기록할 때 전날보다 운동량이 적다면 유저에게 알려주는 기능을 넣고 싶었는데 그러지 못했다.

운동을 많이 하는 것과 적게 하는 것을 어떻게 판단할지 모르기 때문이다.

전보다 개수는 늘었지만 무게가 줄었다면? 잘 모르겠다.

칼로리 계산하는 법도 모르고, 아직은 그리 궁금하지도 않다.

 

 

그래서 단순히 기록하는 기능 밖에 없다.

이 앱은 내가 사용하려고 만든 거여서 단순해도 상관은 없지만,

만약 창업을 한다면 부족한 도메인 지식 때문에 다른 앱에 비해 경쟁력이 많이 떨어질 것이다.

 

 

 

 

회고 #4 - 런치 스크린 애니메이션

 

원래는 런치 스크린에 애니메이션을 넣을 계획이었다.

앱 컨셉이 포카리스웨트니까 차오르는 물결을 통해 포카리스웨트를 마시는 느낌을 주고 싶었다.

애니메이션은 react-native-svg를 이용해 구현하려 했다.

하지만 react-native-svg로는 한계가 있어 보였고, 애니메이션이 이 앱의 컨셉과도 그다지 어울리지 않아서 뺐다.

그래도 열심히 만들던 것이 아쉬워서 회고에라도 넣어 봤다.

 

물결 애니미에션 초안

 

 

 

 

회고할 겸 앱을 보니 요즘 참 운동을 게을리했다.

어플이 없을 때는 애써 모른척해왔지만, 이제는 나태함을 직시할 수 밖에 없다.

한편으론 그만큼 동기부여가 되는 것 같아 만족이다.

 

그러고 보니 앱에 접속한 것도 며칠 만이더라.

한 이틀 정도 운동 기록이 없으면 운동 좀 하라는 알림 메시지를 추가해야 겠다.