383
안녕하세요 ZOOC팀의 iOS개발자 장석우입니다 :)
이번 글에서는 1분 넘게 걸리는 서버통신의 시간을 단축하고,
UX를 개선하여 유저 이탈률을 낮춘 경험을 소개해드릴까해요.
⚠️ 반려동물 등록 중 이탈하는 유저가 78%나?
(⬆️ 기존 반려동물 등록 플로우)
fitapat에서 반려동물 굿즈 제품을 구매하기 위해선 위와 같이 반려동물을 등록해야해요.
이미지를 업로드하는 서버통신은 시간이 오래걸리며 끊어지지 안되는 작업이라,
서버에서 등록완료 응답이 오기 전까지 로딩뷰를 띄우기로 결정했어요.
그런데,,
서버통신 시간은 생각보다 오래걸렸어요.
짧게는 20초, 길게는 1분 30초까지 걸렸답니다.
즉, 유저는 1분 동안 한없이 굴러가는 로딩화면만 봐야한다는 것이에요…😳
이러한 반려동물 등록이 시간이 오래걸려 유저 이탈률이 높아,
반려동물 등록 실패가 잦게 발생하더라구요
유저는 왜 반려동물 등록 도중 이탈하는가?
4가지 정도의 가설이 있었어요.
1️⃣ 마음에 드는 반려동물 이미지가 없어, 갤러리로 넘어간다.
2️⃣ 로딩 시간이 너무 오래 걸려 지쳐서 나간다.
3️⃣ 로딩이 오래 걸려 렉이 걸린 줄 알고 나간다.
4️⃣ 앱을 나가도 업로드가 계속 진행되는 줄 알고 나간다.
1️⃣은 유저의 변심? 이기에 기술적으로 해결할 수 없었어요.
다만 2️⃣, 3️⃣, 4️⃣는 개발자로서 충분히 해결할 수 있는 문제라 판단했어요.
따라서 아래와 같이 문제를 정의하고 해결했습니다.
문제 정의 및 해결 방안
⚠️ [문제 1] 서버 통신 시간이 너무 오래걸린다.
💁🏻♂️ [해결 1] 이미지 사이즈를 줄여 서버 통신 시간을 단축시킨다.
⚠️ [문제 2] 유저는 업로드 진행도를 모르기에 앱을 나갈 것이다.
💁🏻♂️ [해결 2] 업로드의 진행도를 유저에게 알려주어 앱을 나가지 않도록 권장한다.
⚠️ [문제 3] 유저가 앱을 나가면 네트워크 요청이 끊기게 된다.
💁🏻♂️ [해결 3] 백그라운드 환경에서도 돌아가는 업로드 환경을 구축해야한다.
⚠️ [문제 1] 서버 통신 시간이 너무 오래걸린다
서버 통신 시간이 오래 걸리는 가장 큰 원인은 이미지의 사이즈였어요.
유저는 반려동물 사진을 아이폰으로 찍을수도, 카메라로 찍을 수 있기 때문에
3000 pixel 혹은 그 이상의 고화질 이미지를 업로드 할 수 있는 상황이었죠.
AI 모델 학습에 필요한 이미지는 1024 x 1024 pixel 사이즈면 충분했기에
이미지를 리사이징 후에 서버 통신을 진행했습니다.
💁🏻♂️ 그 결과, 1분이 넘던 서버통신 시간이 약 30초 가량으로 단축되었어요!
⚠️ [문제 2] 업로드 진행도를 모르기에 앱을 나갈 것이다
1분 가량이 넘는 로딩을 한없이 기다리는 유저는 드물 거라고 생각해요.
저 역시도 로딩이 10초만 되도 나가기 때문에…😂
저희 팀은 타서비스의 로딩 UX를 찾아보았습니다.
이때 클로바노트가 저희 상황이랑 비슷하더라구요!
클로바노트: 음성 업로드 ▶️ AI ▶️ AI 노트 생성 완료
fitapat: 이미지 업로드 ▶️ AI ▶️ 반려동물 AI 모델 생성 완료
(⬆️ 클로바 노트의 로딩 토스트 UI)
클로바 노트는 위처럼 진행도를 알려주면서,
유저가 다른 화면을 구경할 수 있도록 로딩 토스트로 문제를 해결했더라구요.
따라서 저희도 위와 동일한 기능을 구현했습니다.
구현 아이디어는 아래와 같아요.
HTTP 통신의 총 bytes를 계산한다.
통신 중 현재까지 몇 bytes 보냈는지 계산한다.
보낸 bytes / 총 bytes 를 통해 진행도를 백분율로 나타낸다.
생각보다 단순하죠?!
자세한 내용은 아래 포스트에서 확인하실 수 있습니다 :)
💁🏻♂️ 그 결과, 화면을 막지 않으며 진행도를 보여줌으로써 사용자경험을 개선했어요.
⚠️ [문제 3] 유저가 앱을 나가면 네트워크 요청이 끊긴다.
대부분의 서비스는 앱을 나가더라도 업로드 통신은 계속 진행됩니다.
인스타그램의 사진 업로드나 영상 업로드가 그런 것 처럼요!
fitapat도 유저가 앱을 나가더라도 반려동물 등록은 계속 진행되도록 개발해야 했어요.
구현 아이디어는 아래와 같아요.
유저가 앱을 나가는 것을 감지한다.
유저가 반려동물 등록 중에 앱을 나가면 서버통신을 백그라운드로 전환한다.
자세한 내용은 아래 포스트에서 확인하실 수 있습니다 :)
💁🏻♂️ 그 결과, 유저가 앱을 나가도 서버통신이 끊기지 않아요!
최종 결과물
(⬆️ 저희 집 강아지 포미에요 귀엽죠😝!?)
💁🏻♂️ 1. 이미지 사이즈를 줄여 서버 통신 시간을 단축시킨다.
💁🏻♂️ 2. 업로드의 진행도를 유저에게 알려주어 앱을 나가지 않도록 권장한다.
💁🏻♂️ 3. 백그라운드 환경에서도 돌아가는 업로드 환경을 구축해야한다.
💁🏻♂️ 1. 이미지 사이즈를 줄여 서버 통신 시간을 단축시킨다.
💁🏻♂️ 2. 업로드의 진행도를 유저에게 알려주어 앱을 나가지 않도록 권장한다.
💁🏻♂️ 3. 백그라운드 환경에서도 돌아가는 업로드 환경을 구축해야한다.
유저가 이탈률을 낮추기 위해 위의 3가지의 문제를 해결했어요.
사용자 경험을 기술로서 개선해보니 꽤나 보람찼던 것 같습니다.
추가로, 저희 서비스에 개선하고 싶은 부분이 있다면 언제든 말씀해주세요!
저희 앱을 사용해보시고 피드백 해주시면 너무 감사할거 같습니다! :)
앱 다운로드 링크 : bit.ly/49K1TZg
웹 링크 : fitapat.com
ZOOC은 궁극적인 목표, 'Customer, custom - all - 커스텀의 일상화' 라고 하는
모두가 자기 제품을 만들어 사는 세상을 꿈꾸고 있습니다.
재밌으셨다면! 자주 fitapat 이야기 올리도록 하겠습니다.
감사합니다 :)
1
0