여기어때 홈 카드 개선기 (2)

글. 안소진(Heidi) / UX Designer

지난 글에서는 여기어때 홈이 가진 문제를 짚고, 카드의 형태보다 각 모듈의 역할을 먼저 정의해야 한다는 방향을 세웠습니다. 이번 글에서는 그 방향을 실제 화면으로 옮긴 과정을 공유합니다.

각 모듈이 고객의 어떤 일을 대신 해줘야 하는지 정의하고, 그에 맞게 6가지의 셀러카드를 변형하고 확장해 나간 이야기예요.

진행하면서 정한 이번 프로젝트의 목표는 한 문장으로 이랬습니다.

셀러카드 모듈을 다양한 비즈니스 목적과 고객의 JTBD(Jobs To Be Done)에 부합하도록 변형하고 확장한다.

이 목표를 이루기 위해 저희는 모듈마다 JTBD를 세웠습니다. 어떤 JTBD를 세웠고 그것이 화면을 어떻게 바꿨는지, 사례 몇 가지를 공유할게요.

더 내려갈 이유가 없던 홈의 첫 화면

모듈 하나 하나를 손대기 전에 먼저 해결해야 할 게 있었습니다. 1편에서 살펴본 것처럼, 홈의 첫 화면에서 상품을 본격적으로 탐색하는 영역까지 시선이 자연스럽게 이어지지 않는다는 문제였어요. 아래에 아무리 좋은 모듈을 만들어도, 고객이 그 아래까지 내려오지 않으면 아무 소용이 없으니까요.

그래서 주목한 건 첫 화면 영역의**'최근 본 상품'** 이었습니다. 이 모듈은 첫 화면의 상당한 높이를 차지하면서, 정작 그 아래에 무엇이 있는지는 전혀 짐작할 수 없게 만들고 있었습니다. 기준 해상도 화면에서는 '최근 본 상품'에서 딱 끊겨 보였던 것이죠.

최근 본 상품 카드의 사이즈 자체를 줄였습니다. 카드가 작아지면서 두 가지가 동시에 해결됐어요.

• 1. 같은 가로 폭 안에 더 많은 상품이 한눈에 들어옵니다.
• 2. 그만큼 아래 영역이 위로 올라오면서, 다음에 있는 쿠폰 영역이 화면 하단에 걸쳐 보이게됐습니다.

두 번째가 특히 중요했습니다. 화면 끝에 다음 콘텐츠가 살짝 걸쳐 보이는 것만으로도 "여기서 끝이 아니구나, 더 내려볼 만하겠다"는 신호가 되니까요. BTF에 무엇이 준비되어 있는지를 알리는 가장 확실한 방법은, 그 일부를 미리 보여주는 것이었습니다.

배너에서 첫 화면이 끝나지만, TO BE에서는 카드가 작아지면서 다음 영역이 더 노출되고 하단에 다음 모듈이 걸쳐 보입니다.

있던 모듈에 '역할'을 부여하다

사례 1 --- 엘리트 회원을 위한 혜택 엘리트 모듈

엘리트 모듈의 문제는 '엘리트 회원을 위한 혜택'이라는 이름을 달고 있었지만, 정작 엘리트 회원이 어떤 혜택을 받고 있는지는 어디에도 드러나지 않았습니다. 그래서 아래와 같은 JTBD를 다시 세웠습니다.

멤버십 혜택을 놓치지 않고, 합리적인 가격으로 예약하고 싶다.

엘리트 혜택의 실체는 결국 더 높은 할인율이었습니다. 그렇다면 그 사실이 가장 먼저 보여야 했어요. 그래서 아래와 같이 개선 사항을 정리했어요.

• 할인율 UI를 단순 텍스트에서 filled 태그 형태로 바꿔 인지도를 높였습니다.
• 모듈 상단부터 엘리트 브랜딩 컬러의 그라디언트를 깔아, 이 영역이 멤버십 전용 혜택임을 시각적으로 구분했습니다.
• "엘리트 혜택으로 더 낮은 가격에 예약할 수 있어요"라는 문구를 더해, 혜택의 내용 자체를 말로도 알려주었습니다.

사례 2 --- 지금 여기

'지금 여기'의 문제는 도시 이름과 아주 작은 원형 썸네일로만 구성된 모듈이었습니다. 해당 모듈의 주요 타깃은 '어느 도시로 여행을 갈지 아직 정하지 못한 유저'였고, 탐험의 성격이 강한 모듈이었습니다.

실제로 모듈을 클릭하면 클릭한 도시의 영상이 인스타그램 스토리처럼 크게 재생되고, 계속 눌러 다른 영상으로 도시를 탐험할 수 있는 구조였죠. 문제는 도시의 매력을 가장 잘 전달하는 그 영상이 2-depth에 숨어 있었다는 점이었습니다.

이 모듈의 JTBD는 아래처럼 정리했습니다.

여행 목적지에 대한 영감을 얻고, 마음에 드는 지역이 생기면 바로 탐색으로 이어지고 싶다.

이 모듈이 해야 할 일은 명확했습니다. 도시의 매력을 최대한 전달해 "여기로 떠나고 싶다"는 마음을 만들고, 그 마음이 예약까지 이어지게 하는 것. 그래서 2-depth에 있던 영상을 1-depth로 꺼냈습니다. 작은 원형 썸네일 대신, 큰 사각형 카드 안에서 각 도시의 영상이 바로 재생되도록 설계했어요.

저희는 이렇게 모듈마다 JTBD를 세우고 → AS-IS의 문제를 짚고 → 더 나아갈 지점을 찾는 방식으로 개선을 이어갔습니다.

'변형'에서 멈추지 않고, 시스템 구조 위에 확장하기

여기까지가 각 모듈의 JTBD에 맞게 셀러카드를**'변형'** 하는단계였습니다. 그런데 그 변형이 여기어때의 셀러카드 디자인 시스템, YDS SellerCard의 구조 안에서 '확장'으로 성립하는지는 또 다른 문제였어요.

그래서 필요할 때마다 UI를 자유롭게 바꾸는 대신, 최대한 YDS SellerCard의 구조 안에서 정의할 수 있는 형태로 규칙을 잡고 진행했습니다. 어떤 element를 그대로 쓰고, 어디까지를 교체 가능한 영역으로 열어두며, 무엇은 카드의 뼈대로 반드시 남아야 하는지를 먼저 정리한 것이죠.

이렇게 접근한 이유는 분명했습니다. 이 셀러카드는 결국 홈에서만 쓰이는 카드가 아니기 때문입니다. 앞으로 상품 리스트 페이지, 상품 상세 페이지, 상품 검색 페이지 등 다른 페이지에서도 활용될 가능성을 염두에 두어야 했고, 그렇다면 홈의 사정만 보고 만든 예외는 언젠가 시스템 전체의 부채로 돌아올 수밖에 없었어요.

결국 이 지점이 1편에서 세운 세 번째 목표, Scalable과 맞닿아 있었습니다. 홈의 오늘을 해결하면서도, 그 결과물이 여기어때 전체가 내일 다시 꺼내 쓸 수 있는 자산으로 남는 것. '변형'을 '확장'으로 만든다는 건, 결국 이 카드를 홈 밖에서도 쓸 수 있게 만드는 일이었습니다.

아래는 저희가 당시에 현재 YDS SellerCard의 구조게 맞게 러프하게 가이드를 짜 본 이미지입니다.

그래서, 결과는...삐뚤어진 승리

A안은 기존 홈 그대로, B안은 저희가 개선한 홈이었습니다. 9일간(2026년 3월 16일~24일), 약 100만 명의 고객을 대상으로 A/B 테스트를 진행했어요.

결과는 B안의 승리 였습니다. 서비스 전체에서 유저 당 총 거래액이 소폭 올랐고**,** 구매 전환율도소폭개선됐고, 가드레일 지표에도 부정적인 영향은 없었습니다. 결론은 Group B 런칭이었어요.

그런데, win에는 몇 가지 이슈가 있었습니다

⒈ '최근 본 상품'의 사용성이 소폭 떨어졌습니다 카드를 줄인 그 선택은 양날의 검이었어요. 클릭률이 소폭 감소했습니다. 유저 리서치를 보면 고객은 최근 본 상품을 쓸 때 숙소 사진을 중요하게 보고, 제휴점명을 외워뒀다가 찾는 경우가 있었는데, 이미지가 작아지고 노출되는 상품명이 줄면서 활용도가 낮아진 것이죠. 한 화면에 카드가 많아지면서 오히려 고민이 늘었을 가능성도 있었습니다.

⒉ 엘리트 혜택은 들어오게 만들었지만, 남게 하지는 못했습니다 그라디언트 배경과 할인율 강조로 클릭률은 올랐지만, 구매전환율이 소폭 감소하였습니다. 모듈에 들어온 뒤 실제 상품에서 멤버십 혜택을 체감하지 못해 이탈했을 가능성이 있었어요. 입구는 개선했지만 그 다음까지는 이어지지 않았던 겁니다.

⒊ 한 번에 너무 많이 바꿔서, 무엇이 효과였는지 알기 어려웠습니다. 홈에서 6개 모듈을 동시에 변경했기 때문에 정확한 인과관계를 해석하기 어려웠습니다. 그리고 이 아쉬움은 곧 현실이 됐어요.

그리고, 해석이 뒤집혔습니다

실험 종료 후 후속 분석에서 '지금 여기' 모듈의 데이터가 과잉 집계된 것이 확인됐습니다. 데이터 개선의 실제 원인은 다른 곳에 있었어요.

홈의 셀러카드를 바꾼 것보다, '최근 본 상품' 모듈을 축소한 것이 홈 첫화면의 다른 모듈(카테고리, 배너, 검색)에 대한 주목도를 높였고, 그쪽으로 탐색 유입이 늘어난 것이 GMV 개선의 원인이었습니다. 실제로 아래 화면에 진입하지 않은 그룹이 아래 화면에 진입한 그룹보다 더 큰 총 거래액의 데이터를 보였습니다.

정리하면, 이번 실험에서 성과를 만든 건 홈의 카드가 예뻐져서가 아니라, 첫 화면에서 고객의 시선이 다시 흐르기 시작했기 때문이었습니다. 프로젝트를 시작할 때 회의적인 시선이 있었던 그 지점 --- "여기어때 고객은 이미 목적지를 정하고 온다" --- 을 데이터가 어느 정도 지지한 셈이기도 했고요.

그래서 무엇이 남았나

1편에서 세운 세 가지 목표로 돌아가 볼게요.

• Seamless --- 서로 다른 역할과 형태의 모듈이 공존하더라도, 하나의 홈처럼 자연스럽게 탐색이 이어져야 합니다.

가장 예상 밖의 방식으로 증명됐습니다. 서로 다른 형태의 모듈이 공존해도 하나의 홈처럼 탐색이 이어져야 한다는 목표였는데, 정작 성과를 만든 건 화려해진 카드가 아니라 '최근 본 상품'을 줄여 만든 흐름이었습니다. 시선이 끊기던 자리를 풀어주자 고객은 알아서 다음으로 움직였어요.

• Discovery --- 각 모듈의 목적에 맞게 정보와 콘텐츠를 표현해, 고객이 새로운 상품과 여행의 선택지를 발견할 수 있어야 합니다.

부분적으로 확인됐습니다. 모듈의 목적에 맞게 표현을 바꾼 곳들은 반응했습니다. 영상을 앞으로 꺼낸 '지금 여기', 이미지를 키운 '요즘 많이 찾는 펜션', 클릭 전 참고 정보를 늘린 '해외 인기 도시'까지요. 다만 모든 모듈이 그렇지는 않았고, 그 차이가 왜 생겼는지는 이번 실험만으로 답할 수 없었습니다.

• Scalable --- 다양한 상품과 목적을 유연하게 담으면서도, 하나의 시스템 안에서 일관적인 구조로 확장할 수 있어야 합니다.

결과와 무관하게 남았습니다. YDS SellerCard 구조 안에서 정리한 확장 규칙은 실험의 승패와 상관없이 자산으로 남았어요. 성과가 좋았던 모듈을 카홈 등 다른 화면에도 쓸 수 있을지 검토하고 있는데, '변형이 아닌 확장'으로 만들어둔 덕분에 가능한 이야기입니다.

그리고 배운 것

홈은 모듈의 합이 아니라 하나의 흐름이었습니다. 저희는 '각 모듈을 어떻게 잘 보여줄까'에서 출발했는데, 데이터가 알려준 건 고객의 시선이 어디서 끊기는가가 더 큰 레버였다는 사실이었어요. 모듈 하나를 잘 만드는 일과 홈 전체의 동선을 설계하는 일은 다른 문제였습니다.

클릭을 늘리는 일과 전환을 잇는 일도 달랐습니다. 엘리트 혜택 모듈이 그랬듯, 입구를 넓히는 데 성공해도 들어온 고객이 기대한 것을 그 안에서 만나지 못하면 소용이 없었어요. 모듈이 약속한 가치는 상품 단까지 이어져야 했습니다.

그리고 한 번에 다 바꾸면, 이겨도 배우지 못합니다. 6개 모듈을 동시에 바꾼 탓에 무엇이 효과였는지 끝내 분리해내지 못했고, 그 상태에서 한 모듈의 데이터에 문제가 생기자 결론 자체가 흔들렸습니다. 디자이너도 '무엇을 만들까'만이 아니라 '무엇을 검증할 수 있게 만들까' 를 함께 설계해야 한다는 걸, 이번에 가장 크게 배웠어요.