게스트하우스·작은 호텔 홈페이지, 객실 고르는 화면은 어떻게 다르게 만들까

숙소 홈페이지에서 손님이 가장 오래 머무는 화면은 객실 고르기입니다. 그런데 대부분의 숙소 홈페이지는 객실을 똑같은 크기의 사진 카드로 늘어놓습니다. 방이 세 개뿐인 게스트하우스도, 열여덟 개인 호텔도 같은 모양입니다. 숙소 콘셉트 시안 두 개를 놓고, 방 수와 운영 방식에 따라 객실 화면이 어떻게 달라져야 하는지 열 장의 화면으로 비교했습니다.

두 시안은 직접 눌러볼 수 있습니다. 층 메뉴를 눌러 방을 바꿔 보고, 상세 페이지 끝의 양식까지 내려가 보세요.

ATELIER STAY 시안 직접 눌러보기 → · LOOM STAY 시안 →

1ATELIER STAY: 건물 단면이 곧 메뉴

3층짜리 게스트하우스 시안입니다. 첫 화면에 지붕 모양의 건물 단면이 있고, 왼쪽에 '3F 다락의 방 · 2F 정원의 방 · 1F 서가의 방 · G 함께 쓰는 공간' 네 칸이 세로로 쌓여 있습니다. 층을 누르면 오른쪽 큰 사진과 방 이름이 바뀌고, '방 둘러보기' 버튼으로 상세로 들어갑니다.

방이 세 개뿐이라 가능한 구성입니다. 손님은 몇 층에 어떤 방이 있는지를 한 번에 이해하고, 집 전체의 생김새까지 같이 봅니다. 사진 카드 세 장을 나란히 놓는 것보다 기억에 오래 남습니다.

휴대폰에서도 단면 메뉴는 유지됩니다. 왼쪽 층 번호 열이 좁아지고 사진이 오른쪽을 채웁니다. 메뉴를 햄버거 버튼 뒤로 숨기지 않아도 되는 건, 메뉴 항목이 네 개뿐이기 때문입니다.

2공용 공간은 객실과 같은 무게로

게스트하우스는 공용 공간이 상품의 절반입니다. 이 시안은 'G 함께 쓰는 공간'을 층 메뉴의 한 칸으로 넣고, 본문에서도 '혼자여도 좋고, 함께여도 좋은'이라는 제목과 긴 식탁 사진으로 객실만큼 크게 다룹니다. 아침 식탁, 정원, 서가, 동네 산책 같은 이야기가 그 아래로 한 문단씩 이어집니다.

3객실 상세: 사진 한 장, 이야기 여섯 개, 양식 하나

'3F / ATTIC ROOM 다락의 방, 낮은 천장 아래, 나만의 작은 은신처'. 상세 페이지는 층 표시와 한 줄 소개, 큰 사진 한 장으로 시작합니다. 그 아래로 '천천히 살아보는 연습 · 서두르지 않는 첫 번째 끼니 · 이름 모를 잎을 오래 바라보는 일' 같은 소제목 여섯 개가 왼쪽에, 설명이 오른쪽에 놓입니다. 면적과 침대 종류 같은 숫자는 없습니다. 방이 세 개뿐인 집에서는 숫자보다 이 방에서 어떤 하루를 보내는지가 선택 기준이 되기 때문입니다.

상세 페이지 끝은 '예약하기'가 아니라 '이 방에서 보내고 싶은 하루'입니다. 이름과 이메일만 받고 버튼은 '관심 내용 확인'. 실시간 예약 시스템이 없는 작은 숙소라면 이렇게 가볍게 받는 편이 문의 수가 늘어납니다. 날짜·인원·결제까지 한 번에 요구하는 양식은 방이 세 개인 집에는 과합니다.

4LOOM STAY: 열여덟 개 방을 격자로

두 번째는 18실 부티크 호텔 시안입니다. 첫 화면은 큰 객실 사진 위에 '하루의 결이 달라지는 곳, Loom.'이라는 제목, 오른쪽 위에 보라색 '머무를 방 고르기' 버튼이 있습니다. 메뉴는 '객실과 머무름 · 우리의 이야기 · 도착 안내' 세 개뿐이고, 작은 글씨로 '18 ROOMS / A TABLE / A NEIGHBOURHOOD'가 적혀 있습니다.

방이 열여덟 개면 건물 단면 메뉴는 쓸 수 없습니다. 대신 첫 화면의 할 일이 하나로 좁혀집니다. 손님을 객실 목록으로 보내는 것입니다. 그래서 버튼이 하나이고, 메뉴도 세 개로 줄였습니다.

객실 섹션은 사진 격자입니다. 사진 위에 '02 / OUR SIGNATURE STAY' 같은 번호 라벨, 아래에 '32㎡ · 킹 침대 · 최대 2인', 방 이름 'The Loom Room', 두 줄 설명, '1박 240,000원부터', '방 자세히 보기'. 세 방 모두 같은 자리에 같은 항목이 있습니다.

방이 많을수록 손님은 비교를 합니다. 비교하려면 면적·침대·인원·요금 네 가지가 모든 카드에서 같은 위치에 있어야 합니다. 한 방은 요금을 적고 한 방은 안 적는 순간 비교가 멈추고, 손님은 다른 예약 사이트로 갑니다.

5객실 상세: 숫자가 먼저, 이야기는 뒤에

LOOM STAY의 객실 상세는 ATELIER STAY와 반대입니다. 사진 오른쪽 보라색 상자에 'COSY & CONSIDERED / 22㎡ · 퀸 침대 · 최대 2인', 방 이름, 두 줄 설명, '1박 180,000원부터', '머무름 계획' 버튼이 모여 있습니다. 숫자가 먼저입니다. 그 아래 '방을 예약하기 전에, 머무름을 상상해 보세요'부터 '01 잠들기 전, 깨어난 다음까지 · 02 머무는 동안의 작은 선택들 · 03 문밖에는 또 하나의 거실이 있습니다 · 04 날짜와 조건을 먼저 확인해 주세요' 네 단락이 이어집니다.

같은 객실 상세인데 순서가 다른 이유는 손님이 다르기 때문입니다. 방이 세 개인 집은 분위기로 고르고, 방이 열여덟 개인 호텔은 조건으로 고른 뒤 분위기를 확인합니다.

상세 페이지 끝의 양식은 '관심 옵션(객실만 · 조식 포함 등) · 체크인 희망일 · 투숙 예정 인원 · 미리 알려주세요' 네 칸입니다. 입력하면 바로 아래 '선택한 내용' 상자에 'The Quiet Room · 객실만 · 2026-11-07 · 1명'처럼 정리되어 보이고, 그다음 이름과 이메일을 받습니다.

날짜와 인원을 받되 결제는 받지 않습니다. 실시간 예약 시스템을 붙이기 전 단계의 호텔, 또는 플랫폼 예약과 직접 문의를 같이 받는 숙소에 맞는 구성입니다. 입력한 내용을 손님 눈앞에서 정리해 보여주는 '선택한 내용' 상자가 이 양식의 핵심입니다. 손님이 보낸 뒤 "내가 뭘 적었더라"를 다시 묻지 않게 됩니다.

6휴대폰에서는

LOOM STAY는 휴대폰에서 메뉴가 접히고 '머무를 방 고르기' 버튼이 제목 아래로 내려옵니다. 객실 격자는 한 열로 바뀌며 사진 → 조건 한 줄 → 방 이름 → 요금 순서가 유지됩니다. ATELIER STAY는 앞서 본 것처럼 층 메뉴를 그대로 둡니다. 두 시안 모두 휴대폰에서 객실 상세까지 두 번 안에 닿습니다.

7우리 숙소는 어느 쪽일까

심플웹 견적 계산기에서 이런 구성은 예약·상담형 유형에 예약 기능을 더한 조합입니다. 실시간 재고 연동이나 결제까지 붙이는 범위는 상담에서 정합니다.