잠결 테마 (숙박 예약 플랫폼)

숙박 중개 플랫폼을 위한 Zittme 공식 테마 잠결(jamgyeol)의 상세 매뉴얼입니다. 숙박(lodging) 모듈과 짝을 이루어 설계되었으며, 지역 · 날짜 · 인원으로 숙소를 찾는 검색이 대문의 중심입니다. 요금 · 잔여 달력, 숙박 · 대실 전환, 쿠폰, 후기, 비회원 예약 조회까지 예약 흐름 전체를 앱처럼 담았고, 커머스 모듈을 함께 쓰면 숙박권 · 굿즈를 파는 상점도 같은 디자인으로 열립니다. 다크 모드와 반응형을 기본 지원하고, 기본 서체는 Pretendard입니다.

이 문서의 화면은 실제 데모 사이트를 그대로 캡처한 것입니다. 데모는 jamgyeol-demo.zitt.me 에서 직접 볼 수 있습니다.

구성

모든 구성요소가 같은 디자인 토큰(보라 포인트 색 · 서체 · 라운드 · 간격)을 공유합니다. 포인트 색상은 레이아웃 설정 한 곳에서 바꾸면 전 화면에 함께 적용되고, 다크 모드에서는 글씨 대비가 유지되도록 전용 토큰이 자동으로 계산됩니다.

설치와 적용

1. 테마 파일을 themes/jamgyeol 에 둡니다. (스토어 설치 또는 압축 해제)
2. 관리자 > 디자인 설정에서 잠결 테마를 고르고 적용합니다. 레이아웃과 모듈 스킨이 한 번에 적용됩니다.
3. 숙박 모듈로 숙박 mid(예: stay)를 만들고 사이트 대문으로 지정하면 대문에 검색 · 인기 숙소 · 지역 · 최저가 · 대실 · 이벤트 · 공지가 한 화면에 나옵니다.
4. 이벤트 게시판(event)과 공지사항(notice)을 만들면 대문 하단에 자동으로 연결됩니다.
5. 커머스 모듈이 설치되어 있으면 상점 메뉴와 장바구니 버튼이 헤더에 함께 나옵니다.

권장 환경: Zittme 1.0.2 이상, 숙박 1.0.0 이상, 커머스 1.1.1 이상. 선결제를 쓰려면 짓미페이가 필요하고, 짓미페이가 없으면 현장 결제만 표시됩니다.

함께 권장하는 사이트 설정

• 반응형 전환: 이 테마는 반응형이므로 모바일 전용 뷰를 끄는 것을 권장합니다. 켜져 있으면 모바일에서 별도 모바일 레이아웃이 대신 표시됩니다.
• XE 호환 버튼 스타일 끄기: 코어 공통 CSS의 XE 시절 .btn 스타일이 스킨 버튼을 덮어쓸 수 있습니다. config/config.user.inc.php 에 아래 한 줄을 넣고 files/cache/assets 안의 파일을 비우면 제거됩니다.

define('DISABLE_XE_BTN_STYLES', true);

헤더

헤더는 위에서부터 유틸 바(로그인 · 회원가입 · 언어 · 다크 모드) → 로고 · 통합 검색 · 비회원 예약조회 · 찜 · 최근 본 숙소 → 메뉴 바 3단입니다.

• 통합 검색: 지역이나 숙소 이름으로 바로 숙소 목록을 엽니다.
• 찜 · 최근 본 숙소: 방문자의 브라우저에 저장되어 로그인 없이도 동작하며, 숫자 배지로 개수를 보여 줍니다.
• 메뉴 바: 사이트맵의 상단 메뉴가 표시되고, 오른쪽에는 이벤트 · 공지사항 같은 보조 메뉴가 붙습니다.

숙소 찾기



• 검색 상자에서 숙박 / 대실을 바꾸고 지역 · 체크인 · 체크아웃 · 인원을 고릅니다. 대실은 이용일 하루만 고릅니다.
• 유형 칩(호텔 · 모텔 · 펜션 · 게스트하우스 · 리조트)과 인기 지역 칩으로 좁히고, 추천순 · 낮은 가격순 · 높은 가격순 · 평점순 · 후기 많은 순으로 정렬합니다.
• 날짜를 고르면 그 날짜에 남은 객실이 있는 숙소만, 1박 최저가 기준으로 보여 줍니다.

숙소 상세



• 사진은 장수에 맞춰 배치가 바뀝니다(1장 · 2~3장 · 4장 이상). 누르면 크게 넘겨 볼 수 있습니다.
• 객실마다 기준 · 최대 인원, 남은 객실 수, 1박 요금이 나오고 예약하기로 바로 이어집니다.
• 오른쪽 달력에서 객실을 고르면 날짜별 요금과 잔여 · 마감이 표시됩니다. 한 번 누르면 체크인, 다시 누르면 체크아웃이 정해집니다. 달력의 월 표기와 요일은 사이트 언어를 따릅니다.
• 이 숙소에서 쓸 수 있는 쿠폰 코드, 취소 규정, 후기와 업소 답글, 위치가 이어집니다.



예약과 결과



예약 화면은 예약자 정보 → 쿠폰 · 포인트 → 결제 방법 → 취소 규정 동의 순서이고, 오른쪽 요약에서 결제 금액이 바로 다시 계산됩니다. 비회원은 조회용 비밀번호를 정해 두면 비회원 예약조회에서 예약번호와 함께 다시 찾을 수 있습니다.



결과 화면은 예약 상태에 따라 모양이 바뀝니다.

상태	표시
예약 확정	체크 표시, 프런트에 보여 줄 예약번호, 취소 버튼과 지금 취소 시 환불액
결제 대기	시계 표시, 결제 기한 안내, 짓미페이 주문이 살아 있으면 결제 이어하기 버튼
결제 기한 만료 · 취소 · 노쇼	X 표시와 안내 문구
이용 완료	후기 쓰기 양식

쿠폰 · 포인트 · 내 예약

• 쿠폰 · 혜택: 진행 중인 쿠폰을 티켓 모양으로 보여 주고, 회원은 받아서 내 쿠폰함에 담을 수 있습니다.
• 내 예약: 회원은 다가오는 예약과 지난 예약을 나눠 보고, 비회원은 예약번호 + 조회용 비밀번호로 조회합니다.
• 마이페이지: 회원 스킨의 마이페이지에 다가오는 예약 세 건과 쿠폰 · 포인트 요약이 함께 나옵니다.

게시판 스킨

게시판 스킨 설정의 목록 형태에서 게시판마다 모양을 고릅니다.

형태	용도
목록형	공지사항 등 일반 게시판
웹진형	썸네일 + 요약이 있는 커뮤니티
카드형	썸네일 중심 갤러리
FAQ형	질문을 누르면 답변이 펼쳐지는 아코디언
이벤트형	기간 · 진행 중 · 예정 · 종료 배지와 D-day 가 붙는 이벤트 카드



이벤트형은 게시판 확장 변수 중 입력 이름이 event_start · event_end 인 날짜 칸(시작일 · 종료일)으로 상태를 계산합니다. 웹진형 · 카드형 · FAQ형은 게시판 목록 설정에 요약 컬럼이 있어야 요약과 답변이 나옵니다.

모바일



• 하단에 홈 · 검색 · 내 예약 · 마이페이지 탭 바가 고정됩니다.
• 헤더는 로고 · 비회원 예약조회 · 찜 · 최근 본 숙소 · 메뉴 버튼 한 줄과 검색 상자로 줄어듭니다.
• 메뉴 서랍에는 계정 버튼 · 메뉴 목록 · 다크 모드 · 언어 도구가 들어갑니다.

다국어

• 테마 문구는 한국어 · 영어 · 일본어를 포함한 12개 언어 파일을 갖고 있습니다.
• 숙소 이름 · 객실 이름 · 메뉴 이름 · 레이아웃 설정의 로고 텍스트 · 푸터 문구에는 관리자 > 다국어에서 만든 $user_lang->코드 를 넣을 수 있고, 방문자 언어에 맞게 바뀌어 나옵니다.
• 날짜 · 금액 표기는 숙박 모듈의 언어 파일(lodging_date_fmt, lodging_money)을 따릅니다.

푸터

레이아웃 설정 > 푸터 탭에서 구성합니다. 항목을 비우면 해당 블록은 표시되지 않습니다.

항목	설명
사이트 소개 문구	로고 아래 짧은 소개
고객센터 전화번호 / 운영시간	고객센터 블록. 운영시간은 줄마다 한 줄로 표시
문의 이메일	이메일 문의 링크
사업자 · 연락처 정보	줄바꿈한 각 줄이 한 항목으로 표시
인스타그램 · 페이스북 · 유튜브 · 블로그 주소	입력한 것만 아이콘으로 표시
하단 안내 문구	통신판매중개자 고지 같은 면책 · 안내 문구
저작권 표기	맨 아래 표기

레이아웃 설정 전체 항목

기본

항목	기본값	설명
로고 이미지 / 다크모드 로고	없음	비우면 로고 텍스트 사용
로고 텍스트	없음	비우면 사이트 제목
포인트 색상	보라	버튼 · 링크 · 활성 표시 · 스킨 강조색을 함께 결정
본문 최대 너비	1180px	1060 / 1180 / 1320
메뉴 바 너비 · 색상	본문 폭 · 어둡게	전체 폭 채우기, 포인트색 · 밝게 선택 가능
모바일 다크모드 · 언어 버튼 위치	메뉴 서랍 안	헤더 · 푸터로 이동 가능
색상 모드	기기 설정에 맞춤	자동 / 항상 밝게 / 항상 어둡게

첫 화면

비주얼 슬라이더 표시 조건 · 자동 넘김 간격 · 슬라이드 목록(반복 필드). 숙박 모듈이 대문일 때는 숙박 스킨이 숙소 사진으로 첫 화면을 직접 그립니다.

메인 구성

상점 모듈 주소(mid) · 카테고리 아이콘 · 메인페이지 섹션(반복 필드). 대문을 숙박이 아닌 상점으로 쓸 때 사용합니다.

본문 · 사이드

통합 검색 사용 여부 · (구형 호환) 사이드 로그인 상자.

푸터

위 "푸터" 표 참고.