Design

검증을 거쳐 완성한 여기어때 홈 아이콘 리스킨

여기어때 UX Center여기어때

2025년 5월 23일

원문에서 보기 ↗

글. 한동현(Noah) / Product Brand Designer

작년 말, 여기어때는 YDS 6.0 프로젝트를 통해 홈 리스킨을 진행했어요. 그 중에서도, 앱 메인 상단의 카테고리 아이콘 개선이 큰 변화였는데요. 이번 글에서는 그 과정과 아이콘 개선에 대해 소개할게요.

아이콘 개선 방향

이번 홈 카테고리 아이콘 개선 작업은 두 가지 핵심 방향을 중심으로 진행되었어요.

누구나 직관적으로 이해할 수 있는 메타포

아이콘은 짧은 시간 안에 의미를 전달해야 하는 UI 요소예요. 따라서, 누구나 처음 봐도 이해할 수 있는 보편적인 메타포를 기준으로 아이디어를 구성했어요. 복잡한 형태보다는 단순하고 명확한 상징을 통해, 사용자가 고민 없이 빠르게 선택할 수 있도록 했어요.

익숙함은 유지하되, ‘Lively’ 더하기

기존 아이콘의 사용자의 경험을 해치지 않으면서도, 이번 YDS 6.0 리디자인의 핵심 가치 중 하나인 ‘Lively(Spark Joy with Design)’한 감성을 담아내고자 했어요. 생동감 있고 유쾌한 분위기를 더해, 아이콘만 봐도 ‘여기어때’스러움이 느껴질 수 있도록 디자인했어요.

Lively란?

Lively는 여기어때 비주얼 리디자인 과정에서 정의한 코어 밸류 중 하나로 여행의 설렘처럼 생동감 있는 감성을 전하는 디자인 원칙이에요.

Casual UT에서 찾은 리디자인의 힌트

처음에는 기존 아이콘이 사용하는 가구 중심 메타포(침대, 쇼파 등)를 그대로 유지하면서 스타일만 리뉴얼하는 방향으로 접근했어요. 이미 사용자들에게 익숙한 메타포였기 때문에, 그 틀을 굳이 바꿀 필요는 없다고 생각했어요.

그래서 리뉴얼 스타일만 적용한 상태에서 Casual UT를 진행했는데요, 예상과는 다르게 ‘가구’로 표현된 아이콘들이 실제 카테고리와 잘 연결되지 않는다는 피드백을 받았어요. 예를 들어, ‘침대’ 아이콘만 봐서는 모텔인지 호텔인지 구분하기 어렵다는 의견이 있었어요.

Casual UT 결과를 분석하면서, ‘해외 숙소’, ‘모텔’, ‘호텔’처럼 클릭률이 높은 카테고리는 기존의 가구 중심 아이콘보다는 건물 형태로 표현하는 것이 더 명확할 수 있겠다는 생각이 들었어요. 건물 형태를 사용하면 카테고리 간 시각적 구분이 더 뚜렷해지고, 아이콘이 의미하는 바도 더 직관적으로 전달될 수 있을 것 같았어요.

특히, 가구처럼 상황에 따라 해석이 달라질 수 있는 메타포보다는, 공간의 특성을 직접적으로 드러내는 방식이 인지 측면에서 더 효과적일 거라는 가설을 세웠어요. 클릭률이 높은 카테고리일수록 유저가 혼동 없이 빠르게 이해할 수 있도록 시각적 오해를 줄이는 것이 중요하다고 판단했기 때문이에요.

하지만 여기서부터 새로운 고민이 시작됐어요. ‘건물’이라는 단어 자체는 분명하고 직관적인데, 실제 아이콘으로 표현하려고 하다 보니 어떤 기준으로 어디까지 다르게 그려야 할지가 애매했어요. 현실 속 건물 형태는 너무 다양해서, 자칫하면 호텔이 모텔처럼 보이거나, 그 반대로 보일 수도 있었거든요.

그래서 각 카테고리 메타포의 시각적 특징을 좀 더 명확히 정의하기 위해, 실제 건물 이미지를 수집하고 분석하는 작업을 먼저 진행했어요. 여러 번의 리파인 과정을 거친 끝에, 아래와 같이 카테고리별 주요 특징을 정리했고, 이를 디자인에 반영하게 됐어요.

① 모텔

모텔은 이미지 분석 결과, 대체로 단일 건물 구조가 많았고, 건물의 높이도 호텔보다 낮은 경우가 일반적이었어요. 그래서 모텔은 하나의 독립된 건물 구조에 간판이라는 요소를 포인트로 삼는 방향이 효과적이라고 판단했어요. 이를 바탕으로,컬러는 보색 대비를 활용해 시선을 끌 수 있도록 했어요.

② 호텔

호텔은 모텔에 비해 건물 형태가 더 획일적이고, 높은 층수와 긴 창문, 그리고 여러 편의시설이 함께 있는 경우가 많았어요. 그래서 디자인에서는 고층의 균형 잡힌 구조를 사용했고, 큰 건물이라는 인상을 줄 수 있도록 넓고 안정적인 비율을 적용했어요. 시각적 포인트로는 호텔의 등급을 연상시키는 ‘별’ 아이콘을 활용했고, 고급스러운 느낌을 주기 위해 검정 계열 컬러를 선택했어요.

③ 해외 숙소

해외 숙소는 가장 표현이 어려웠어요. 다양한 나라의 문화와 건축 스타일이 반영되어 있어서, 특징을 하나로 묶기 어려웠기 때문이에요. 그래서 ‘역동성’이라는 키워드를 중심으로, 건물 외형에 각도를 주어 입체적이고 활기 있는 느낌을 표현했어요. 또한, 해외 숙소임을 명확하게 인지할 수 있도록 ‘비행기’가 들어갈 수있는 공간이 필요했는데요. 마침 건물에 각도를 준 영역에 비행기가 쏙 들어갈 수 있었어요. 마지막으로, 메인 컬러는 신뢰감과 안정감을 주는 블루 계열로 선택했어요.

UT로 다시 검증하기

YDS 6.0 리스킨을 진행하면서, 홈 화면부터 예약 플로우 전반에 걸쳐 사용성 테스트(UT)를 함께 진행했어요. 이 과정에서 새롭게 제작한 아이콘들도 함께 검토했는데요, 특히 마지막까지 형태에 대한 고민이 많았던 ‘호텔’ 아이콘도 UT에 포함시켜 테스트를 진행했어요.

그 결과, 많은 유저들이 좌우로 넓은 형태의 B타입을 호텔 건물로 인지하고 선택했어요. 이 피드백을 바탕으로 호텔 아이콘은 B타입을 중심으로 최종 리파인을 완성하게 되었어요. 이 과정에서, 마지막까지 고민이 많았던 ‘호텔 아이콘’에 대한 인지도와 이해도를 함께 검증하면서, 디자인 방향에 확신을 얻고, 사용자 관점에서 더욱 명확한 표현이 무엇인지 고민할 수 있는 계기가 되었어요. 아이콘 리뉴얼은 전체 UT 흐름에 자연스럽게 녹아든 형태로 확인되었고, 이로써 사용자 관점에서의 직관성과 메타포 전달력이 어느 정도 유효한지 확인할 수 있었어요.

A/B 테스트와 최종 결정

이후 YDS 6.0 프로젝트에 맞춰 아이콘도 함께 A/B 테스트를 진행하게 되었어요. 테스트 결과, 2D와 3D 아이콘 모두 인지 측면에서는 큰 차이가 없었어요. 이 실험을 통해 우리가 얻은 중요한 인사이트는, 사용자에게 중요한 건 아이콘이 2D인지 3D인지가 아니라, 얼마나 적절하고 직관적인 메타포를 사용했느냐는 점이었어요. 다시 말해, 디자인 스타일보다는 의미 전달의 정확성이 훨씬 더 큰 영향을 준다는 결론에 도달하게 되었어요.

추가로 얻은 인사이트는, 아이콘에 ‘현실성’을 반영하는 것이 인지에 긍정적인 영향을 준다는 점이에요. 현실의 비율, 색상, 형태를 잘 담아낸 아이콘일수록 사용자가 더 쉽게 이해할 수 있었고, 실제로 클릭률도 높게 나타났어요. 예를 들어, ‘펜션·풀빌라’와 ‘캠핑·글램핑’ 아이콘은 실제 모습을 잘 반영한 덕분에 명확성이 높았고, 클릭률 또한 유의미하게 증가했어요. 이처럼 현실적인 묘사가 사용자 인지에 중요한 역할을 한다는 사실을 확인할 수 있었어요.

최종적으로는, 2D와 3D 모두 목표한 수준의 인지 성과를 보여줬어요. 다만, OTA 서비스의 특성상 주요 상품이 ‘숙소’와 ‘경험’이라는 점을 고려했을 때, 입체적인 표현이 가능한 3D 아이콘이 더 풍성한 경험을 전달할 수 있다고 판단했어요. 그래서 최종적으로 3D 아이콘을 선택하게 되었어요.

마무리

이번 6.0 리스킨 프로젝트를 통해 처음으로 그래픽 디자인에서 UT와 A/B 테스트를 직접 경험해봤어요. 그 과정에서 그래픽 분야에서도 다양한 검증 프로세스를 통해 정성적인 데이터를 얻고, 이를 바탕으로 유의미한 인사이트를 도출할 수 있다는 걸 배웠어요. 또한 아이콘 디자인 하나만으로도 사용자 인지에 영향을 줄 수 있다는 점도 새롭게 느꼈고요. 디자인은 결국 보기 좋게 만드는 걸 넘어서, 사용자가 직관적으로 이해하고 사용할 수 있어야 한다는 걸 다시 한번 실감할 수 있었어요.

앞으로는 더 철저하게 사용자를 이해하고 분석하면서, 작은 디테일까지 신경 쓰는 디자인을 해나가야겠다는 생각이 들었어요. 홈 아이콘 작업은 브랜드 아이덴티티를 확장하는 첫 시도였어요. 앞으로도 다양한 디자인을 통해 브랜드의 방향성과 시각적 경험을 자연스럽게 연결해 나가려고해요.

✔️ 글쓴이를 더 알고 싶다면? 링크드인

편집: 이소연(Jetty) UX Writer

도움: 김지영(Terna) Platform Design Team Lead

*해당 글과 이미지를 인용 또는 재가공 시 출처를 꼭 밝혀주세요.