파리에서 한인민박을 운영하는 분의 사이트를 만들었습니다. 기획을 정리하고, 화면을 짜고, 구글 블로그(Blogger)에 커스텀 테마로 올리기까지 하루가 걸렸습니다. 어떻게 그 시간에 가능했는지, 그리고 가장 애먹은 지점이 어디였는지 남겨둡니다.
1. 처음부터 만들지 않았습니다
가장 크게 시간을 아낀 결정입니다. 얼마 전에 만든 파리 전동스쿠터샵 사이트가 결과물이 좋았습니다. 그래서 그 사이트의 구조와 컴포넌트, 다국어 전환 엔진을 통째로 가져왔습니다.
다만 색과 서체는 전부 갈아끼웠습니다. 스쿠터샵의 인더스트리얼한 톤을 민박에 그대로 쓰면 이질적입니다. 따뜻한 크림빛 배경에 벽돌빛 포인트, 대문자 압축 서체 대신 부드러운 세리프로 바꿨습니다. 뼈대는 재사용하고 피부만 바꾼 셈입니다.
재사용의 기준
레이아웃·모달·다국어 엔진처럼 손이 많이 가지만 사업이 달라도 같은 것은 가져오고, 색·서체·문구처럼 브랜드를 만드는 것은 새로 잡습니다. 이 선만 지키면 재사용은 베끼기가 아니라 자산이 됩니다.
2. 코드보다 먼저 정한 것들
화면을 그리기 전에 정해야 나중에 갈아엎지 않습니다. 이번에 먼저 합의한 항목입니다.
- 언어 — 한국어 기본에 영어 보조. 토글 하나로 전환되고 선택은 기억됩니다.
- 다크모드 — 방문자 기기 설정을 따라 자동으로 바뀝니다.
- 객실 과금 — 도미토리는 침대당, 독실은 방당. 이 구분을 안 하면 4인 예약이 1인 요금으로 계산됩니다.
- 예약 정책 — 최소 2박, 예약금 50% 선결제, 잔금은 체크인 때 현금.
- 환불 규정 — 소비자분쟁해결기준을 따라 취소 시점별 환불 비율을 표로.
특히 세 번째가 중요했습니다. 도미토리 침대 단위 계산은 나중에 붙이면 화면과 데이터를 같이 뜯어야 합니다. 요금 표시 한 줄이 아니라 구조의 문제입니다.
3. 무엇을 담았나
숙소 소개만 있는 사이트는 한 번 보고 끝입니다. 다시 찾아올 이유를 함께 넣었습니다.
- 객실·시설 8종, 성별 도미토리와 독실 탭 필터
- 파리 여행 정보 — 명소 동선, 쇼핑·면세, 티켓·패스, 교통
- 제휴업체 7곳 할인 쿠폰 (분야별 필터 + 쿠폰 코드 복사)
- 프랑스 숨은 마을 TOP 10 팝업
- 액티비티·티켓 28종
- 투숙 후기 섹션과 방명록 (Padlet 임베드)
- 자동응답 봇, 카카오톡 QR·ID 연결
4. 진짜 어려운 건 배포였습니다
구글 블로그(Blogger)는 테마를 XML로 받습니다. HTML을 그대로 넣을 수 없어서 변환이 필요한데, 여기에 함정이 둘 있었습니다.
둘 다 XML 검사는 통과합니다
파일은 정상으로 보이고 업로드도 됩니다. 그런데 화면이 죽습니다. 이런 종류가 제일 찾기 어렵습니다.
함정 ① 본문이 통째로 사라졌습니다
변환 도구가 <header>와 <section>을 모르는
구형 파서였습니다. 문서가 <meta>로 시작하니 "아직 머리말 안"이라고
판단해서, 페이지 본문 전체를 <head> 안에 넣어버렸습니다.
객실도 후기도 푸터도 전부 없어졌는데 파일 크기는 멀쩡했습니다. 머리말과 본문의 경계를 코드에서 직접 지정해 해결했습니다.
함정 ② <div/> 하나가 자바스크립트를 죽였습니다
내용이 빈 태그는 XML로 바꾸면 <div/>처럼 슬래시로 닫힙니다.
XML 문법으로는 옳습니다. 그런데 브라우저는 HTML로 읽을 때 이 슬래시를 무시하고
"열린 태그"로 처리합니다.
그래서 뒤따르는 내용이 전부 그 안으로 빨려 들어갔고,
마지막에 있던 <script>까지 삼켜졌습니다.
페이지의 자바스크립트가 통째로 죽어서 언어 전환도, 탭 필터도, 예약 계산도
전부 먹통이 됐습니다. 빈 <div> 하나 때문에요.
비어 있는 태그를 전부 <div></div> 형태로 펼치도록
바꿔서 해결했습니다. 이렇게 쓰면 XML로도 HTML로도 같은 의미가 됩니다.
5. 그래서 검증을 자동화했습니다
한 번 겪고 나니 사람 눈으로 잡을 수 있는 종류가 아니라는 게 분명했습니다. 변환기에 두 겹의 자동 검사를 넣었습니다.
- 개수 검증 — 객실 8개, 후기 5개, 모달 8개처럼 있어야 할 요소의 수를 세서 하나라도 어긋나면 경고합니다. 본문이 통째로 빠지는 사고를 여기서 잡습니다.
- 왕복 검증 — 만들어진 XML에서 스타일·본문·스크립트를 도로 꺼내 HTML로 재조립합니다. 그걸 브라우저에 띄워 원본과 똑같이 동작하는지 확인합니다.
XML이 열린다고 페이지가 도는 건 아닙니다
문법 검사만으로는 부족합니다. 실제로 띄워서 눌러보는 것까지가 검증입니다. 이 과정을 명령어 한 줄로 만들어 두면 수정할 때마다 반복할 수 있습니다.
6. 결과
의존성이 없다는 게 작은 사업장에는 꽤 중요합니다. 몇 달 뒤에 열어도 그대로 돌아가고, 다른 사람에게 넘겨도 파일 하나만 주면 됩니다.
7. 다음은 예약 시스템입니다
지금 사이트의 예약 화면은 요금과 예약금을 계산하고 정책을 안내하는 데까지입니다. 실제 예약을 받는 부분은 다음 단계로 잡았습니다.
- 침대 단위 실시간 재고 — 데이터베이스가 중복예약을 원천 차단하는 구조
- 간편결제 연동 후 자동 확정, 계좌이체는 대기 상태로 침대 선점
- 예약·입금·체크인 안내 자동 발송
- 오늘 체크인·체크아웃·입금 대기를 한 화면에 보는 운영 대시보드
부킹닷컴이나 에어비앤비 같은 채널에 의존하지 않고 직접 손님을 받는 방향이라, 기성 예약 솔루션 대신 필요한 것만 만드는 쪽으로 정했습니다.
이런 분께 맞습니다
- 숙박·공방·학원처럼 손님이 직접 찾아오는 작은 사업장
- 매달 나가는 유지비 없이 내 사이트를 갖고 싶은 경우
- 한국어와 외국어를 한 페이지에서 함께 보여줘야 하는 경우
- 예약·문의 흐름을 실제 운영 방식에 맞춰 짜야 하는 경우
