고객이 OTA 서비스가 아닌 호텔 홈페이지에 접속하는 이유는 무엇일까요? 호텔 정보를 얻기 위해서? 호텔 위치를 확인하기 위해서? 아마도 열에 아홉은 객실을 검색하고 예약을 하기 위해서일 것입니다. OTA 서비스에 대항하기 위해 공홈족의 중요성이 점점 커지고 있는 요즘,얼마나 빠르고 편리하게 고객이 원하는 객실 정보를 검색해서 예약을 이끌어낼 수 있느냐가 호텔 홈페이지의 핵심 경쟁력이 되어가고 있습니다.
이번 시간에는 국내외 주요 호텔들의 호텔 객실 검색시스템을 분석하여 각 호텔들은 얼마나 편리한 검색 시스템과 고객 친화적인 UI를 제공하고 있는지, 각 호텔의 객실 검색시스템의 UI/UX를 분석해볼까 합니다.
1) 신라호텔
위 이미지는 신라호텔의 메인 객실 검색 화면입니다. 뭔가 어디서 많이 본듯한 느낌이 든다면? 당신의 눈썰미를 칭찬합니다! 이건 롯데호텔의 객실 검색 기능을 베꼈습니다.(관계자분들에게는 죄송합니다) 제가 아무 근거 없이 말을 하는 건 아니고 (소송당할 수 있으니까...) 저도 나름대로 근거가 있습니다.
맨 위가 롯데호텔 가운데가 신라호텔의 객실 검색 기능입니다. 한눈에 보기에도 비슷해 보이죠? 여기서 특히 주의해서 봐야 될 부분이 체크인/체크아웃 영역입니다. 체크인과 체크아웃 사이에 박을 넣는 건 제가 알기로는 롯데호텔과 신라호텔밖에 없습니다. 굉장히 독특한 레이아웃이죠. 롯데호텔이 2018년 10월 홈페이지 리뉴얼을 해서 현재까지 저 UI를 사용하고 있습니다. 그런데 신라호텔의 2018년 9월 모습을 보면 현재와 전혀 다른 UI인 것을 알 수 있죠. 베낀 건 뭐 그럴 수 있습니다. 모방은 창조의 어머니라고 저도 많이 베낍니다. 아쉬운 건 베끼더라도 좀 제대로 했으면 좋겠는데... 사소한 디테일이 좀 아쉽습니다.
신라호텔의 객실 검색 기능은 전체적으로 평이한 UI이나 아쉬운 부분이 두 가지 있습니다.
바로 호텔 선택과 인원 선택 부분입니다.
신라호텔과 롯데호텔의 호텔 선택 부분을 비교해보면 신라호텔 UI에 어떤 문제가 있는지 알 수 있습니다. 권역별로 나누어 놓은 건 좋았는데 같은 권역 내에서 호텔끼리 구분이 직관적으로 되지 않죠. 예를 들어 '서울 신라호텔을 선택하고 싶다'라고 한다면 한 번에 딱 봤을 때 서울 신라호텔을 찾기 쉬운 구조는 아닙니다. 텍스트 나열형이기 때문이죠. 권역별은 최소한 아이콘을 붙인다거나 배경색으로라도 구분했다면 신라호텔과 신라스테이의 구분이 한눈에 가능했을 텐데 말이죠.
반대로 롯데호텔은 텍스트 나열형인데도 체인별 구분이 확실하게 됩니다. 체인별로 정렬을 해놓은 것도 있지만 체인을 수직으로 나열했기 때문에 위에서 아래로 쭉 훑어보는 것만으로 체인이나 지역 구분이 가능한 구조죠.
인원 선택 레이어에서 +- 를 사용하는 것은 동일한데 사소한 것에서 디테일의 차이가 있습니다. 롯데호텔은 인원을 더 줄이거나 늘릴 수 없는 경우 해당 버튼이 그레이톤으로 비활성화되는 것에 비해 신라호텔은 한계치까지 인원을 줄이거나 늘려도 버튼의 기능만 없앨 뿐 시각적으로 비활성화에 대해 표시하지 않습니다.
2) 롯데호텔
개인적인 첫인상을 먼저 말하자면 비주얼로 글로벌적인 이미지를 잘 표현하면서 딱 필요한 기능만 갖춘 군더더기 없이 깔끔한 메인 페이지라고 생각합니다. 이렇게 말하면 제가 롯데호텔 찬티같아 보이겠지만 롯데호텔도 엄연히 단점이 있습니다. 그것도 매우 크리티컬한 단점이요.
보편적으로 많이 사용하는 1920*1080 해상도에서 롯데호텔과 신라호텔의 비교입니다. 롯데호텔을 보면 검색 영역 하단이 살짝 잘린 것을 볼 수 있죠. 이건 원래 1080에 딱 맞춰서 객실 검색 영역을 만든 건데 상단에 코로나 관련 안내 팝업이 붙으면서 아래쪽으로 살짝 밀려서 저러한 형태가 된 겁니다. 롯데호텔이 상단 팝업을 적극적으로 사용한다는 걸 생각해보면 하단 부분에 살짝 여유공간을 줘야 저런 사태를 방지할 수 있는데 조금 안일했습니다.
반면 신라호텔은 동일한 해상도에서 검색 영역이 잘림 없이 모두 잘 보일뿐만 아니라 아래에 약간의 여백까지 있는 것을 알 수 있죠. 이건 의도적인 디자인입니다. 사용자의 브라우저 환경(툴바나 즐겨찾기 등)을 고려해 하단에 약간 여유공간을 줘서 어떠한 환경에서도 검색 영역이 잘림 없이 표시되도록 만든 거죠.
신라호텔에서 잠깐 설명했던 체크인/체크아웃 UI입니다. 롯데와 신라호텔에서만 볼 수 있는 독특한 UI인데 이 UI는 전형적으로 디자인의 아름다움을 위해 UI의 편의성을 일부 포기한 디자인입니다. 보통 체크인/체크아웃을 표시할 때는 체크인 - 체크아웃 (박수)와 같은 구조가 됩니다. 위 이미지의 워커힐과 메리어트 같은 구성처럼요. 이런 구성은 사용자의 시선 이동방향이 하단 또는 우측으로 일관성 있게 흐르는 구조가 됩니다. 그런데 롯데호텔처럼 박수를 체크인과 체크아웃 사이에 위치시키면 시선이 좌측에서 우측으로 갔다가 다시 좌측으로 돌아오는, 시선 흐름을 역행하는 구조가 되죠. (사용자가 체크인 날짜와 체크아웃 날짜를 선택해야 정확한 박수가 표시되니까) 왜 이런 구조가 됐냐? 간단합니다.
박수를 가운데에 뒀을 경우 체크인과 체크아웃 사이에 디자인 밸런스가 맞지만 박수를 뒤에 두면 뭔가 어색한 디자인이 됩니다. 체크인과 체크아웃 사이에 균형을 맞추기 위해 의도적으로 박수를 가운데에 배치한 거죠. 이게 뭐가 문제가 되냐고요? 한두 번은 괜찮지만 이런 문제가 중첩되면 우리가 모르는 사이에 눈과 뇌는 이렇게 생각할 겁니다. 아 피로하다...
3) 조선호텔
사람들은 가끔 다른 사이트와 달라야 되는 생각에, 디자인적으로 아름다워야 된다는 압박감에 혁신적이지만 때로는 무리한 UI를 선보이곤 합니다. 그리고 그 예에 가장 부합하는 것이 바로 조선호텔입니다. 이미 타이틀부터 그런 느낌이 팍팍 들죠. DIFFERENCE / 나는 달라
비주얼은 정말 기가 막히게 예쁘고 고급스러운 느낌이 들죠. 그런데 예약 기능이 비주얼에 묻히는 느낌이 듭니다. 비주얼과 기능은 항상 50:50을 유지해야 합니다. 적당히 보여주고 싶은 아이덴티티를 표현해야 하지만 기능을 묻어버릴 정도로 비주얼이 화려한 것은 곤란합니다. 원페이지 스크롤링이 비주얼이 강조될 수밖에 없는 레이아웃이긴 하지만 호텔 홈페이지의 핵심 기능이 객실 예약인 것을 생각하면 원페이지 스크롤링을 쓰더라도 객실 검색 기능은 어느 정도 부각해줘야 했습니다.
배경색에 묻혀서 폰트의 가독성이 떨어지는 것은 둘째치고 가장 최악은 고스트 버튼입니다. 고스트 버튼을 쓸 때는 정말 신중해야 됩니다. 저 위에 롯데호텔과 조선호텔을 비교해보면 검색 버튼은 포인트 컬러를 써서 어떻게든 강조하고 누르고 싶게 만들어 놨는데 조선호텔은 디자인을 살리자고 가장 중요한 검색 버튼을 고스트 버튼으로 처리했습니다. 누가 봐도 버튼이라고 인식하기 어렵게 누르고 싶지 않게 생겼죠? 사용자가 버튼이라고 인지하기 어려운 디자인입니다.
문제점은 이뿐만이 아닙니다. 조선호텔에는 다른 호텔에는 없는 특이한 기능이 하나 있는데요. 바로 검색 구분입니다. 호텔 이외에도 다이닝과 멤버십을 조회해서 예약 또는 가입 페이지로 이동할 수 있는 기능이죠. 객실 조회와 멤버십은 성격이 다른데도 억지로 강조하려고 기능에 욱여넣은 겁니다. (아마도 고객의 요청이겠지만...) 고객님들 멤버십 활성화는 기능을 막 욱여넣고 노출한다고 되는 것이 아닙니다.
다이닝도 마찬가지입니다. 우리는 여기서 의문을 하나 가져봐야죠. 다른 호텔은 홈페이지에서 다이닝 예약기능이 없어서 메인에 노출하지 않는 걸까? 놀랍게도 롯데호텔 홈페이지에는 라세느 예약기능이 있습니다. 롯데호텔은 다이닝 예약기능이 있는데도 메인 페이지에서 객실 예약에 집중하고자 다이닝 예약을 과감히 뺀 거죠.
호텔 선택에도 문제가 있습니다. 호텔을 누르면 레이어에 표시된 8개 호텔 중 여기서 실제로 선택 가능한 호텔은 몇 개일까요? 답은 그랜드 조선 부산과 제주 2개입니다. 5개 호텔은 클릭하면 새창으로 해당 호텔 홈페이지로 이동. 그래비티 판교는 클릭 시 오픈 예정이라는 알럿 메시지 출력... 계열사 호텔을 노출시켜야 되는 니즈는 알겠지만 여기서 예약도 할 수 없는 호텔을 노출해서 그걸 클릭했을 때 고객이 어떤 생각이 들지는 생각을 안 해본 걸까요? 백번 양보해서 최소한 그라피티 판교는 클릭을 못하게 투명 레이어로 덮고 오픈 예정이라는 문구라도 써줘서 클릭이 안되게 하는 성의 정도는 보여줘야 했습니다.
4) 워커힐호텔
잘 만들고 못 만들고를 떠나서 신선하고 화끈한 UI인 것은 분명합니다. 이런 도전정신 저는 높이 삽니다. ㅎ
신선하고 화끈하다고 해서 문제가 없는 것은 아닙니다. 워커힐도 역시 크리티컬 한 문제가 있죠. 호텔과 객실, 성인, 아이 클릭 시에는 레이어 팝업이 상단에 표시되는데 숙박 기간을 클릭했을 때는 레이어가 하단에 표시됩니다. 이게 왜 문제가 되냐? 사람들이 나열된 순서대로 기능을 클릭한다는 습성을 생각해볼 때 호텔 → 숙박 → 객실 → 성인 순으로 옵션을 선택하게 될 겁니다. 호텔을 선택했을 때는 레이어가 위쪽으로 표시되니 문제가 없지만 숙박 기간을 클릭하면 레이어가 아래로 표시되니 날짜를 선택하기 위해서는 스크롤을 아래로 내려줘야 합니다. 다시 객실이나 성인을 클릭했을 때는 레이어가 올라가니 스크롤을 올려줘야 하죠. 숙박 기간 레이어가 아래쪽으로 표시되는 문제 때문에 예약 옵션을 선택하기 위해서는 스크롤을 내렸다가 올리는 부자연스러운 행동을 해야 된다는 거죠.
5) 리츠칼튼
리츠칼튼은 홈페이지에 들어가면 객실 검색 기능이 하단에 표시됩니다. 최초에는 로케이션과 날짜 2개의 필수 정보만 표시되다가 클릭하면 객실 검색 영역이 올라오면서 세부 검색 옵션이 표시되는 방식이죠. 구조 자체를 필수 정보(상단 1행/호텔, 날짜)와 부가정보(하단 1행/룸, 인원, 프로모션 코드 등) 2가지 영역으로 분할해놓았는데 이런 구조는 해외호텔에서 일반적으로 사용되는 UI입니다. 최소한의 정보를 표시하면서 인터렉션을 이용해 사용성을 저해하지 않는 좋은 UI의 표본이라 불릴만한 사례입니다.
국내 호텔과 해외호텔 객실 검색 UI의 가장 큰 차이는 바로 '인원'에 대한 인식입니다. 국내 호텔은 인원을 호텔과 날짜의 동일 선상에 두고 중요도를 강조하는데 비해 해외호텔들은 호텔과 날짜는 상단의 호텔 검색 필수 값으로 인원과 객실은 하단에 선택 옵션으로 필수와 선택 값이라는 영역별로 구분해서 표시합니다. 우리나라가 해외 호텔에 비해 유독 인원을 강조하는 이유는 호캉스때문입니다. 해외에서는 부부 또는 커플 2인으로 호텔을 이용하는 것이 일반적인 형태이지만 국내에서는 1인 혹은 3인 이상 다중 형태로 호텔을 이용하는 비율이 높기 때문에 이용 방식에서 오는 우리나라 호텔의 특수성이 반영된 UI인 거죠.
6) 메리어트
메리어트는 언뜻 보기에는 평이하고 별것 없는 UI처럼 보입니다. 하지만 별거 없어 보이는 이 UI에도 사실은 중요한 기능이 하나 숨어있습니다.
메리어트는 날짜 클릭 시 다른 호텔과 다르게 일정 조정이 가능하신가요 라는 기능이 있습니다. 이 기능은 호캉스와 가격비교에 특화된 기능입니다. 일반 숙박이 숙박일을 특정하여 조회하는 것에 비해 이 기능은 박수와 월만 선택하고 호텔 찾기 기능을 누르면
위와 같이 해당 월의 전체 요금표가 표시되는 구조입니다. 원래 호텔은 성수기/비수기, 날짜, 요일별로 요금 차이가 심해 고객들이 최저가를 검색하기 어려운 구조입니다. 하지만 시대가 변하면서 호텔도 고위층이나 자산가의 전유물이 아닌 일반인들도 접근이 가능할 정도로 대중화되어 변화하는 트렌드에 맞춰 이런 기능을 제공하기 시작한 거죠. 이 기능은 전 세계 호텔 중 메리어트 계열 체인에서만 제공하는 특화 기능입니다. 트렌드에 맞춘 발 빠른 변신인지, 살기 위한 몸부림일지는 앞으로 두고 봐야겠죠?
7) W Hotel
W Hotel은 최초에 호텔 선택과 날짜 선택 2개의 필수 정보만 표시하고 영역을 클릭하면 레이어 팝업으로 객실 검색 세부 옵션이 표시되는 구조입니다. 이러한 구조는 객실 검색에 대한 사용자의 시선 집중 효과를 유발할 수 있지만 (레이어 팝업으로 정중앙에 객실 검색 정보가 표시되니까) 반대로 불필요한 클릭을 유발하기도 합니다. 예를 들어 내가 호텔과 날짜 정보만 입력해서 객실을 검색하고자 할 경우 레이어를 띄우지 않고도 현재 창에서 검색이 가능한데 W Hotel 은 무조건 레이어를 띄워버리니까요.
W Hotel은 타 호텔들과 비교해 봤을 때 날짜 선택 UI가 조금 독특한 편입니다. 타 호텔과 비교해보면 명확한 차이를 알 수 있는데요. 리츠칼튼의 경우 체크인과 체크아웃을 하나의 입력창에서 선택할 수 있는 구조로 처음 선택한 날짜가 체크인, 두 번째 선택한 날짜를 체크아웃 날짜로 인식하여 체크인과 체크아웃 날짜를 선택하면 선택한 날짜가 입력창에 적용되고 날짜 선택 레이어가 자동으로 닫히는 방식입니다. 롯데호텔이나 신라호텔 등 국내 호텔에서 많이 사용하는 보편적인 날짜 선택 UI 스타일이죠. 그런데 W Hotel은 체크인과 체크아웃 날짜 선택창이 각각 분리되어 있습니다. 체크인 날짜를 선택하면 자동으로 +1박으로 계산되어 체크아웃 날짜가 자동으로 선택되며 (예를 들어 체크인 날짜를 11일을 선택하면 다음날인 12일이 체크아웃 선택창에 자동 선택) 포커스가 체크아웃으로 이동됩니다. 글로만 보면 잘 이해가 안 가죠? 몇 가지 예를 들어 두 호텔의 날짜 선택 UI를 비교해보도록 하겠습니다.
예제 1) 현재 선택된 기간 12.08 ~ 12.09 / 선택하고 싶은 날짜 12.15 ~ 12.16
리츠칼튼
① 체크인/체크아웃 선택창을 클릭하여 날짜 선택 레이어를 염
② 체크인 날짜 선택
③ 체크아웃 날짜 선택 (체크아웃 날짜 선택과 동시에 선택한 날짜 적용, 레이어 닫힘)
W Hotel
① 체크인 선택창을 클릭하여 날짜 선택 레이어를 염
② 체크인 날짜 선택 (+1일이 자동으로 체크아웃 날짜로 선택, 포커스가 자동으로 체크아웃으로 이동)
③ 체크아웃 날짜 선택
④ 레이어를 수동으로 닫음
예제 2) 현재 선택된 기간 12.08 ~ 12.09 / 선택하고 싶은 날짜 12.15 ~ 12.16
체크인 날짜를 잘못 선택하여 다시 선택해야 하는 경우
리츠칼튼
① 체크인/체크아웃 선택창을 클릭하여 날짜 선택 레이어를 염
② 잘못된 체크인 날짜 선택
③ 날짜 선택 레이어를 닫거나 혹은 아무 체크아웃 날짜를 선택하여 레이어를 닫음
④ 체크인/체크아웃 선택창을 클릭하여 날짜 선택 레이어를 다시 염
⑤ 올바른 체크인 날짜 선택
⑥ 올바른 체크아웃 날짜 선택 (자동으로 레이어 닫힘)
W Hotel
① 체크인 선택창을 클릭하여 날짜 선택 레이어를 염
② 잘못된 체크인 날짜 선택 (포커스가 자동으로 체크아웃으로 이동)
③ 하단 Reset 버튼을 눌러 초기화하거나 체크인 선택창을 클릭하여 체크인 선택창으로 이동
④ 올바른 체크인 날짜 선택
⑤ 올바른 체크아웃 날짜 선택
⑥ 레이어를 수동으로 닫음
이제 좀 이해가 되시나요?
보편적으로 많은 호텔들이 체크인/체크아웃이 통합된 리츠칼튼의 날짜 선택 UI를 사용하기 때문에 W Hotel과 같은 날짜 선택 방식이 익숙하지 않은 사용자들은 큰 혼란을 느끼게 됩니다. 자칫하면 불편해 보일 수 있는 W Hotel의 날짜 선택 UI에도 사실 큰 장점이 하나 있습니다. 바로 클릭 미스에 의한 날짜 선택 오류에 대응이 용이하다는 점이죠.
리츠칼튼과 같은 날짜 선택 UI는 체크아웃 날짜를 선택하는 동시에 날짜가 적용되고 날짜 선택 레이어가 닫히는 방식이기 때문에 체크아웃 날짜를 잘못 선택했을 경우 체크인 날짜부터 다시 선택해야 하는 불편함이 있습니다. 체크인/체크아웃이 하나의 몸통처럼 움직이는 구조이기 때문에 체크아웃 날짜를 잘못 선택했다고 하더라도 체크아웃 날짜만 변경이 불가능하여 체크인 날짜부터 다시 선택해야 하는 구조인 거죠. 하지만 W Hotel은 체크인/체크아웃 선택창이 분리되어 있어 체크아웃 날짜를 잘못 선택했다면 체크아웃 날짜만 따로 변경이 가능합니다. 이런 구조는 2개월 이상 장기투숙 시 큰 장점을 발휘합니다. 리츠칼튼은 2달치 캘린더를 넘겨서 체크아웃 날짜를 선택했는데 잘못 선택했으면 다시 체크인부터 선택해야 하는데 W Hotel은 클릭 두세 번만으로 체크아웃 날짜를 쉽게 변경할 수 있거든요. 장기 투숙객이 많은 비즈니스호텔의 경우 고려해볼 만한 가치가 있는 구조입니다.
8) Conrad
다른 호텔들이 객실 검색 기능을 메인 페이지 하단이나 가운데에 배치하는데 비해 콘래드는 객실 검색 기능을 GNB 바로 아래인 상단에 배치하였습니다. 이 구조는 사실 굉장히 장점이 많은 구조입니다. 호텔, 일정 등의 옵션 클릭 시 레이어가 아래로 떨어지는 구조이기 때문에 워커힐 같은 부자연스러운 시선 이동이 발생하지 않고 사용자의 시선 흐름이 가장 먼저 도달하는 상단 영역에 기능을 배치해서 기능에 대한 주목도도 높일 수 있죠. 그런데 많은 호텔들이 객실 검색 기능을 상단에 배치하지 않는 이유는 간단합니다. 디자인적으로나 기능적으로 상단 GNB와 충돌이 발생하기 때문이죠. 콘레드 호텔만 봐도 GNB 메뉴와 객실 검색 기능의 폰트와 컬러가 동일하여 영역 구분이 명확하게 되지 않는다는 문제점이 있거든요. 디자인적으로 GNB는 흰색 배경 / 객실 검색은 그레이톤 같은 형식으로 시각적인 영역 구분이 가능하더라도 기능적인 문제점이 있습니다. 1 Depth 메뉴에 마우스를 오버하거나 클릭해서 2Depth 메뉴를 열 경우 내비게이션이 검색 기능을 가리거나 객실 검색을 클릭하다가 클릭 미스로 GNB 메뉴를 클릭할 수 있는 불편함이 생기거든요.
그런데 콘레드는 왜 상단에 검색 기능을 넣을 수 있느냐? 콘레드 GNB에는 2Depth 메뉴가 없기 때문에 저러한 구조가 가능한 겁니다. 1Depth를 클릭하면 표시되는 2Depth 메뉴가 없다 보니 메뉴를 잘못 클릭할 일도 2Depth 메뉴가 기능 영역을 덮어버릴 일이 없는 것이죠.
콘레드는 사소한 디테일에도 신경을 많이 쓴 모습입니다. 보통 날짜 표시창이 년/월/일 구조인 것에 비해 콘레드는 일/월/요일 형식으로 연도를 빼고 날짜를 강조했습니다. 포털 메일 시스템에서 잠깐 설명드린 적이 있는데 이건 중요도에 대비한 콘텐츠의 강약 조절입니다. 년도/월/일/요일 중 콘텐츠의 중요도를 판단해서 중요도가 낮은 콘텐츠인 연도는 과감히 삭제하고 가장 중요하다고 판단되는 날짜만 강조한 스타일이죠.
호텔과 날짜 선택에 비해 사용 빈도가 떨어지는 객실/인원 선택과 할인은 과감하게 박스 처리했습니다. 이것도 날짜와 비슷한 관점입니다. 호텔 선택/날짜 선택/인원 선택 중 중요도와 사용빈도가 높은 날짜 선택은 포인트 컬러를 사용해서 돋보이게 강조하고 사용빈도가 낮은 기능은 박스로 묶어서 처리하는 방식인 거죠.
