데일리호텔 모바일 상품 상세 UX/UI 리뉴얼 살펴보기
지난 6월, 프로덕트 팀의 숙원과제 중 하나였던 데일리호텔 앱 업장 상세 화면의 리뉴얼된 버전이 공개되었습니다. 이번 글에서는 안드로이드 개발자로서 해당 프로젝트를 진행하면서 경험했던 이슈를 함께 공유해보려 합니다.
시작하기에 앞서 이 프로젝트에 힘을 써주신 많은 분들에게 감사의 말을 먼저 전하고 싶습니다.
Background
먼저 간단하게 프로젝트의 배경에 대해 소개드린다면, 여러 요인이 있었지만 가장 큰 이슈는 업장 상세와 객실 선택 화면에서의 이탈을 방지하는 것이었습니다. (하기 내용은 UX팀의 발표 자료를 참조하였습니다.)
AS-IS
크게 2가지로 Painpoint를 정리해볼 수 있었습니다.
- 객실 목록과 객실 설명, 사진이 분리되어 있어 객실에 대한 정보를 한번에 확인하기가 어려움
- 업장과 객실의 정보가 혼재되어 있어 정보 분리가 필요함
업장 상세 화면의 영역별 클릭율을 보았을때 가장 높게 측정된 영역이 객실선택하기 버튼(76%), 날짜 선택 영역(74%)이었습니다. 사용자들이 해당 날짜에 맞는 객실을 즉각 보고 싶어한다는 것을 확인할 수 있었는데, 기존 업장 상세 화면에서는 날짜 변경에 따른 객실 확인이 불가능했습니다. 객실 정보는 업장 상세와 객실 선택 화면에 혼재되어 있어 사용자가 해당 객실에 따른 사진 및 혜택 정보를 확인하려면 두 화면을 왔다갔다 이동하면서 봐야하는 사용성 이슈가 있었습니다. 또한, 전체적으로 정보의 그룹핑이 되지 않아 가독성이 떨어지고, 정보 제공 순서가 고객의 흐름과 맞지 않아 사용자의 피로도를 증가시킨다고 판단했습니다.
TO-BE
객실 상세 화면을 제공하여 업장 목록 -> 업장 상세 -> 객실 상세 화면의 흐름으로 사용자의 탐색을 유도했습니다. 기존에는 업장 상세 화면에 객실 정보를 나열하여 업장 정보인지 객실 정보인지 혼란스러울 수 있었는데, 객실 상세 화면을 제공하여 객실의 자세한 정보를 볼 수 있도록 했습니다.
업장 상세
- 객실 선택 영역에 체크인, 체크아웃, 필터의 정보를 두어서 날짜 및 필터 옵션에 따라 가능한 객실 목록을 바로 확인할 수 있도록 했습니다.
- 목록에는 객실 사진과 꼭 필요한 정보를 노출하여 사용자가 객실 상세 화면으로의 진입 없이도 객실 정보를 파악할 수 있도록 했습니다.
- 그리고 업장 기본 정보는 고객의 피드백을 바탕으로 중요도를 나누어서, 기존에 찾기 힘들었던 정보들을 시각화 하여 잘보이도록 하였습니다.
객실 상세
- 기존에는 객실 정보가 충분하지 않았기 때문에 적은 양의 정보로 객실을 선택해야 해서 불편하다는 피드백이 많이 있었습니다. 객실 상세 화면에서는 업장 상세에서 제공하지 못한 객실별 상세 정보를 추가하여 그런 부분을 해소하고자 했습니다.
- 그외에 부분들도 단순히 정보를 나열하기 보다는 중요한 정보들을 시각화하고 그룹핑 하여 조금 더 이해하기 쉽게 풀어나갔습니다.
- 또한, 좌우 플리킹하는 UX로 사용자가 각 객실 정보 하나하나에 집중할 수 있으면서도 다른 객실과의 비교를 손쉽게 할 수 있도록 했습니다.
Development Issues
1. 속도
다양한 정보 패턴과 많은 양의 데이터로 인해 UI 처리 시간이 기존보다 늘어났습니다. 고사양 단말에서는 차이가 거의 없었으나, 저사양 단말은 대기 시간이 필요했습니다. 속도 저하의 가장 큰 원인은 많은 View를 처리하게 됨으로써 발생한 것이었습니다. 기존의 NestedScrollView를 사용하다 보니 화면에 보이지 않는 곳까지 View로 처리하게 되어 시간이 많이 지연되었습니다.
방법 1. RecyclerView를 적용
가장 쉽게 생각할수 있는 방법은 RecyclerView를 통해서 화면에 보이지 않는 View를 처리하지 않도록 하는 방식이었습니다. View가 서로 달라 재활용이 거의 안될것 같아 View의 로딩 시간이 최소한으로 걸리도록 카드들의 View를 세분화하여 진행했습니다.
적용 결과, 진입시간은 많이 향상되었지만 빠른 스크롤 시 View 재활용이 안되어 버벅거림이 발생하였습니다. View 생성시간을 고려했지만 재활용이 되지 않아 효율적이라고 판단할 수 없었습니다. View의 생성조건을 다르게 하여 여러 형태로 조절해 테스트 해보았지만, 스크롤시에 버벅거림은 사라지지 않았습니다. 상세화면은 스크롤이 빈번히 일어나는 화면이다보니 사용자에게 안좋은 경험이 될 수 있었습니다.
방법 2. 다른 방법은?
기존의 NestedScrollView 사용 시 시간이 지체된 이유는 화면이 생성될때까지 대기하다가 완료 후에 화면이 보여 대기 시간 동안의 변화가 없었기 때문입니다. 그래서 이를 단계적으로 생성하는 방식으로 접근해봤습니다. (예를 들어 상세정보 상단부터 하단까지 카드 단위로 구분하여 첫번째 카드를 생성하고 화면에 노출, 두번째 카드를 생성하고 화면에 노출하는 방식) 첫 화면 진입 속도가 더 느려질 수 있다는 단점은 있었지만 한번 시도해봤습니다.
결과적으로는 좋았습니다. 일단 UI가 순차적으로 생성되는 모습이 눈에 보이니 사용자 입장에서는 로딩중이라고 인지되어 기존보다 덜 시간이 걸리는 것처럼 보였습니다. 이 방법은 엘리베이터의 올라가는 속도가 느려서 이용자의 불만이 많았는데, (속도를 높이기에는 비용이 많이 들기 때문에) 엘리베이터 안에 거울을 설치하여 해결한 방식과 비슷하다고 생각됩니다.
2. 인터랙션
객실 상세화면의 인터랙션은 전체 화면으로, 내부 View의 사이즈가 서로 다르게 움직여야 했습니다. (상단 GIF 이미지 참고) 페이스북의 유사한 인터랙션을 참고하여 디자인팀과 함께 분석하면서 몇가지 방식으로 접근해봤습니다.
방법 1. 각 View의 위치, 사이즈, 확대 비율을 가지고 View를 이동
각 View의 위치, 사이즈를 변경하고 확대시키는 것은 너무 느렸고, 원래 위치를 찾아가면서 UI 간격이 변경되어 맞추기가 어려웠습니다. 기존의 가로 스크롤 내부 View를 건드리는 것은 문제가 많았습니다.
방법 2. 확대되는 화면을 따로 두어 교차시킴
확대되는 화면을 따로 구현하고 알파값 조절로 교차시켜 노출하도록 했습니다. 이를 통해 인터랙션을 좀 더 부드럽게 할 수 있었습니다. 몇 가지 세부적인 이슈들이 있었는데, 인터랙션이 어색하지 않도록 세밀하게 수정했습니다.
- 객실 이름의 줄수가 인터랙션 전 후로 맞지 않는 경우
- 객실 인원, 베드, 크기의 아이콘 위치가 변경되어서 어색한 경우
- 화면이 커지고 작아질때 swipe 액션으로 인해서 어색한 경우
Outcome
배포 후 사용자의 반응을 보기 위해 데이터를 분석하였습니다.
업장 상세에서 객실 상세 화면으로 진입하는 비율은 낮아졌습니다. 기존에는 객실 정보를 보려면 객실 상세 화면으로 이동해야만 했지만, 리뉴얼 된 버전에서는 업장 상세 객실 목록 영역에서 가볍게 정보를 훑어볼 수 있기 때문이라고 생각합니다.
객실 상세 화면의 이탈율이 줄어들면서 결제 화면으로의 진입율은 이전보다 높아졌습니다. 객실에 대한 충분한 상세 정보를 제공하여 결제 진입을 높였을 거라 생각합니다.
구매 전환율은 소폭 상승했습니다. 업장 상세에서 객실 상세로의 진입율은 떨어졌지만, 실제 구매 가능성이 높은 유저가 객실 상세에 진입하여 상세 정보를 보고 결제하는 것으로 판단했습니다.
마치며..
오로지 사용자에 집중하여 행동 패턴에 맞게 사용성을 개선하였고, 작지만 긍정적인 성과를 얻을 수 있었던 프로젝트였습니다. 같은 정보도 어느 시점, 어느 장소에서 어떻게 제공하느냐에 따라 사용자에게 다른 의미로 전달될 수 있음을 느낄 수 있었습니다.
업장 상세화면은 구매 전환율에 크게 기여하는 페이지인 만큼 개편 작업은 굉장히 큰 프로젝트였는데, 프로덕트 팀 뿐만 아니라 파트너 팀의 노력이 없었다면 불가능했을지도 모른다고 생각합니다. 서로의 협력을 통해 탄생한 결과라서 더욱 뿌듯합니다.
앞으로도 저희 데일리는 고객의 피드백을 바탕으로 지속적으로 프로덕트를 개선하고 다양한 실험들을 해보려고 합니다. 언제나 좋은 경험을 제공할 수 있도록 더욱 노력하겠습니다.
저희와 함께 성장하며 멋진 프로덕트를 만들어 나갈 Android Developer, iOS Developer, UX/UI Designer를 모집하고 있습니다. 많은 관심 부탁드립니다!
