||
글. 안소진(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로 꺼냈습니다.
작은 원형 썸
여기어때 홈 카드 개선기 (2)
생성 일시
2026/09/02 01:06
최종 편집 일시
2026/09/02 01:06
태그
여기어때
파일과 미디어