Engineering
작은 카드에 담긴 큰 문제를 풀다
여기어때 UX Center여기어때
2024년 10월 11일
원문에서 보기 ↗글. 최지윤(Yun) / UX Designer
부제. 여기어때 객실 카드 개선기
여행을 떠나기 전, 우리가 제일 먼저 하는 일은 아마도 숙소 예약일 겁니다. 가고 싶은 숙소를 살펴보고, 마음에 든 숙소의 객실을 찾아볼 때 여러분은 어떤 정보를 가장 중요하게 보시나요? 대부분 객실 이미지, 가격 그리고 무료 취소나 환불이 가능한지 등 부가 정보를 찾으실 거예요.
이렇듯 그간 객실에 대한 중요 정보를 효율적으로 탐색하고자 하는 여기어때 사용자들의 painpoint를 발굴해 PO 카야와 함께 해결했었는데요.
사용자가 객실을 더 잘 볼 수 있도록 이미지를 개선하고, 안쪽에 배치되어 있던 시설 정보를 앞으로 끌어오고, 취소/환불 정보를 인지하게 쉽게 문구를 변경하는 등 여러 실험들을 진행했어요.
이렇게 나열해서 보면 3가지 실험들의 솔루션이 쉽게 뚝딱하고 나올 것 같았지만, 사실 지난한 과정이 있었죠. 카드 내 여러 정보들을 잘 배치하는 일이 생각보다 그리 간단치만은 않았거든요.
그래서 이번 글에서는 각 실험별로 솔루션을 설계할 때 어떤 어려움이 있었고, 그 어려움을 동기삼아 어떻게 해결했는지 아이템 카드 Behind the UX를 이야기해보려 합니다.
* 각 실험의 문제 정의와 결과가 궁금하시다면 이 글(‘최적의 UX를 찾아서, 여기어때 객실 카드 개선기’)을 읽어보세요.
① 숙소와 객실을 탐색할 때 우선 시 여기는 정보는 어떻게 다를까?
여기어때 아이템 카드
먼저 아이템 카드는 객실 이미지, 가격, 시설 정보 등 객실에 초점을 둔 상품 카드예요. 아이템 카드 개선 작업을 시작하기 앞서 ‘사용자들은 실제로 객실을 어떻게 탐색하고 있는지’ 파악하는 것이 제일 중요하다고 생각했어요. UX 리서치팀에서 과거에 진행한 자료들을 참고했었는데요. 대부분 고객의 숙소 탐색 경험에 관련된 내용이다 보니 고객이 객실을 탐색할 때 어떤 정보를 우선적으로 생각하는지를 명확히 알기 어려웠어요.
그래서 리서치팀에 객실 탐색에 초점을 맞춘 새로운 서베이를 제안드렸어요. 리서치팀과 함께 현재 RDP(객실 상세 페이지)에서 제공하는 정보들을 기반으로 서베이 항목을 정리했는데요. 서베이 진행 결과, 숙소와 객실 탐색 시 사용자들이 중요하게 여기는 정보가 서로 다르다는 점을 확인할 수 있었어요. 예를 들어, 숙소 탐색 시에는 숙소 이미지, 편의 시설, 숙소 위치가 중요 정보였지만 객실 탐색 시에는 객실 이미지, 가격, 그리고 객실 내 시설 정보가 더 중요한 정보로 나타났어요. 또, 호텔과 모텔 등 카테고리에 따라 중요하게 여기는 정보에도 차이가 있었는데요, 호텔에서는 객실 뷰와 베드 타입이, 모텔에서는 체크인/체크아웃 시간이 중요한 정보로 본다는 점이에요. 이 결과는 상당히 흥미로웠어요.
또, 서베이를 통해 빠른 개선이 필요한 부분도 발견할 수 있었어요. 이를테면, 이미 아이템 카드에 인원 정보가 있음에도 하단 추가 정보 영역에도 동일한 정보가 반복되어 노출되고 있었어요. 게다가 영역에 맞지 않는 정보가 노출되는 문제도 있었죠.
서베이 결과
UI 디자인 측면에서도 여러 문제가 발견되었는데요. 텍스트에 사용되는 폰트의 종류, 사이즈, 색상이 너무 다양하다 보니 일관성이 떨어지고, 정보 전달이 잘 안 되고 있었어요. 기존 모텔 아이템 카드의 경우, 대실 상품과 숙박 상품이 하나의 카드에 나뉘어 있어 다른 카테고리보다 복잡도가 더 높았어요. 이유는 대실과 숙박 상품의 체크인/체크아웃 시간 차이와 시간에 관련된 부가적인 정보들이 있다 보니 카드의 복잡성이 높아진 거죠.
이러한 문제점들을 바탕으로 고객이 중요시 여기는 객실 정보 외에 타사 대비 우리의 모텔 아이템 카드에서 덜어낼 수 있는 정보들을 찾아내는 것이 필요했어요.
끝으로 정보가 다양해짐에 따라 카드 내 텍스트 양이 자연스럽게 늘어나면서 가독성 문제가 부각되었는데요. 단순히 텍스트를 나열하는 방식은 사용자에게 혼란을 줄 수 있기 때문에, 정보를 더 쉽게 이해할 수 있도록 가독성 높은 솔루션이 필요하다는 걸 힌트를 얻게 되었어요.
② 제한된 영역에서 객실을 어떻게 더 잘 보여줄 수 있을까?
아이템 카드 개선 시 가장 큰 고민이 객실 정보가 더 많이 노출되면서 텍스트 양이 늘어나고 카드의 높이에도 영향을 줄 수 있다는 점이었어요. 정보가 많아지면 카드 높이가 자연스럽게 커질 수밖에 없지만, 해상도 범위 안에 필요한 정보를 제공하고 탐색의 불편을 최소화하는 방법을 찾는 것이 중요한 과제였죠.
특히 텍스트와 이미지 간의 균형을 맞추는 것이 중요했기 때문에 이미지 영역에 대한 실험을 우선적으로 진행했어요. 이 과정에서는 RDP(객실 상세 페이지)에서 제공되는 객실 이미지 사이즈를 고려해 크롭을 최소화하고, 셀러카드(상품 카드)에서 보이는 이미지 사이즈와도 일관성을 유지해 카드 내 이미지 영역 UI가 통일되도록 했습니다. 이를 통해 고객이 이미지만으로도 객실 정보를 쉽게 파악할 수 있게 했죠.
사실 객실 이미지를 더 잘 보여주기 위해 단순히 크기를 키우는 것만이 답은 아니었어요. 객실 이미지뿐만 아니라 가격, 혜택, 시설 정보 등도 중요한 요소이므로, 이러한 정보들을 균형감 있게 배치하려 했어요.
③ 아이템 카드의 일관성과 확장성을 어떻게 동시에 가져갈 수 있을까?
여기어때가 서비스를 운영한 지 10년이 넘었는데요. 그 사이 해외 숙소와 항공 등 다양한 서비스들이 추가되었어요. 이 과정에서 서비스별, 도메인별로 아이템 카드의 노출 정보와 UI가 다르게 적용되어 사용자 경험에 일관성이 떨어지는 문제도 자연스럽게 생겼어요. 같은 정보를 다루더라도 문구나 UI가 다르게 표현되면서 혼란을 주게 되었죠. 이를 해결하기 위해 우리는 통일성과 일관성을 갖춘 아이템카드를 만들어야 했고, 여기어때 UX 원칙과도 부합하는 과제였어요.
최근 앱에서 해외 숙소 아이템카드와 국내 숙소 셀러카드가 각각 리뉴얼되었는데요. 국내 숙소 PDP(상품 상세 페이지)의 아이템카드는 여전히 레거시였고, 이를 어떻게 개선해야 할지 고민이 많았어요.
아이템 카드의 일관성을 확보하는 방법으로는, 첫째로 정보를 표현하는 방식의 통일이 필요했어요. 이는 각기 다른 서비스에서 동일한 정보를 어떻게 노출할지를 명확하게 정의하는 작업이었습니다. 예를 들어, 가격, 할인율, 특가 문구 등의 표현 방식을 통일해야 사용자들이 어떤 서비스에서든 익숙한 형태의 정보를 볼 수 있게 됩니다.
둘째로, UI의 일관성을 통해 각 도메인이나 카테고리에서도 같은 시각적 경험을 제공해야 했어요. 이를 통해 사용자가 어떤 서비스나 화면에 있든지 동일한 인터페이스 경험을 할 수 있도록 했죠.
확장성을 고려하는 방법으로는, 다양한 서비스와 도메인에서 유연하게 적용될 수 있는 모듈형 구조를 채택하는 것이었어요. 이는 아이템카드의 구조를 고정된 형태가 아닌 유연하게 확장할 수 있도록 만들어, 새로운 서비스가 추가되더라도 기존 카드 디자인을 쉽게 적용하거나 수정할 수 있는 시스템을 갖추는 것이었어요.
그래서 아이데이션 단계에서는 두 가지 실험군을 설정했었어요, 첫 번째 실험군은 국내숙소 셀러카드에서 개선된 내용을 바탕으로 아이템카드를 만든 것이고, 두 번째 실험군은 해외숙소 아이템카드를 기반으로 작업했죠. 이때, 각각의 실험군에서는 비즈니스적으로 중요한 요소와 사용자 경험에서 긍정적인 피드백을 받은 요소들을 결합해 최적의 형태를 만들려고 했어요. 가령, 특가 문구와 컬러, 가격 표시 방식 등을 동일하게 맞추고, 할인율을 제거하는 등 주요 변경 사항도 동일하게 적용했죠.
TO BE 국내 숙소 아이템 카드, AS IS 국내 숙소 아이템 카드, 해외숙소 아이템 카드
이후, 실험을 통해 국내 숙소 셀러 카드의 형태를 모방한 아이템카드가 더 나은 성과를 보였고, 이 형태를 런칭하게 되었어요.
결론적으로, 아이템카드의 일관성과 확장성을 동시에 확보하기 위해서는
1. 정보 표현 방식의 통일을 통해 모든 서비스에서 동일한 경험을 제공해야 하고
2. UI의 일관성을 유지하면서도
3. 모듈형 구조를 통해 다양한 도메인에서도 유연하게 적용될 수 있도록 해야 해요.
이러한 방식으로 우리는 일관성과 확장성을 모두 충족하는 아이템카드를 구현할 수 있었어요.
실험을 끝나고 난 뒤
이 프로젝트를 진행하면서 객실 단위의 서베이를 진행해 고객의 구체적인 니즈를 파악할 수 있었던 점이 매우 유의미했어요. 특히, 숙소 단위와 객실 단위의 사용자의 니즈가 다르다는 점을 서베이를 통해 확실하게 검증할 수 있었고, 이를 기반으로 사용자 경험을 보다 세밀하게 맞출 수 있었죠.
또한, 부분별 실험과 이터레이션을 통해 최적의 솔루션을 찾아가는 과정은 매우 인상적이었는데요. RDP(객실 상세 페이지)에서 제공하던 객실 주요 시설 정보를 PDP(상품 상세 페이지)로 끌어와 제공한 실험은 예상대로 긍정적인 임팩트를 가져왔고, 초기 가설이 실제 고객에게 유효했던 점에서 큰 흥미를 느낄 수 있었어요**. 정성적, 정량적 데이터 기반의 접근이 고객 경험 향상에 큰 기여를 하기에 메이커의 관점이 아닌 고객 중심의 접근을 항상 되새기는 것이 중요하다는 것을 다시 한번 깨닫게 된 실험이었어요.**
✔️글쓴이를 더 알고 싶다면? 링크드인
✔️편집: 이소연(Jetty) UX Writer
✔️그래픽: 김제린(Riny) Visual Interaction Designer
*해당 글과 이미지를 인용 또는 재가공 시 출처를 꼭 밝혀주세요.
관련 글