BuildingHub

BuildingHub 바로가기 ↗

요약

• 복합 업무용 빌딩의 공식 사이트와 회의실 예약 시스템을 하나로 묶은 웹 애플리케이션
• 공개 사이트 여섯 개 섹션(빌딩 소개·오피스·클리닉·식당가·회의실·공지)과 운영자용 관리 콘솔
• 30분 단위 시간대 예약, 중복은 데이터베이스 제약으로 차단
• 문구·사진을 관리자가 직접 고치고 저장 → 미리보기 → 배포 세 단계로 반영
• 로그스톤 빌딩은 가상 브랜드다. 실제 건물이나 기업과 관계없고 입주사·매장·연락처도 전부 지어낸 것

---

제작 동기

• 어느 빌딩에서 회의실을 운영하는 실무자에게 이야기를 들었다. 사이트에 고칠 게 생기면 제작 업체에 요청하고 기다려야 하는데 회신이 느리다고 했다
• 무엇이 불편한지 물어 목록을 받았고, 그게 그대로 만들 것의 목록이 됐다. 매일 그 일을 하는 사람이 겪는 문제라 기능을 상상해서 채울 필요가 없었다

---

목표 설정

• 작업 기간: 2026.08.28. ~ 2026.09.06.
• 받은 불편 다섯 가지를 그대로 목표로
  • 시간대별 예약이 안 돼 회의실 하나에 하루 한 건만 잡힌다. 나머지는 엑셀로 따로 관리하는데 두 장부가 어긋나면 같은 시간에 두 팀이 들어온다
  • 관리자가 예약을 고칠 수 없어 취소하고 다시 잡아야 한다
  • 회의실 다섯 곳의 예약 현황이 한눈에 안 보인다
  • 요금표·이용안내 문구를 고치려면 업체에 요청해야 한다
  • 입점업체 이미지와 로고도 업체를 거쳐야 한다
• 스스로 건 조건
  • 원본을 그대로 베끼면 저작권 문제가 되고 너무 다르면 개선안으로 안 읽힌다. 정보구조만 남기고 코드와 문구는 새로 쓴다
  • 사진은 CC0(퍼블릭 도메인)만 쓰고 출처를 전부 기록한다

---

주요 작업

1. 30분 단위 시간대 예약 — 점유 슬롯을 별도 테이블에 한 행씩 넣고 회의실·날짜·슬롯에 복합 기본키를 걸어, 중복을 애플리케이션 검사가 아니라 데이터베이스가 거절하게 함 ✅
2. 예약 행과 슬롯을 한 트랜잭션으로 — 두 사람이 같은 순간에 같은 시간대를 신청하면 뒤에 온 요청이 통째로 롤백 ✅
3. 취소 없이 예약 수정 — 슬롯 해제와 재점유가 한 트랜잭션이라 옮기려는 자리가 차 있으면 이동만 실패하고 원래 예약과 예약번호가 그대로 남음 ✅
4. 하루치 타임라인 — 회의실 다섯 곳의 하루를 한 화면에, 승인 대기와 승인 완료가 색으로 갈리고 빈 칸을 눌러 전화 접수를 바로 등록 ✅
5. 콘텐츠 저장 → 미리보기 → 배포 — 초안과 발행본을 나눠, 저장은 초안만 바꾸고 미리보기는 로그인한 관리자만 보고 배포를 눌러야 공개 반영. 외부 빌드를 안 불러 1초 안에 나감 ✅
6. 스키마 기반 관리자 폼 — 필드 정의 하나로 편집 화면이 생성돼 페이지를 늘려도 관리자 화면이 따라옴 ✅
7. 이미지 직접 교체 — 캐러셀·갤러리·회의실 사진·매장 로고를 관리자가 올리고 바꿈. 업로드 전에 브라우저에서 줄여 보내고, 파일 이름을 내용의 SHA-256 해시로 지어 중복 저장과 캐시 무효화 문제를 없앰 ✅
8. 회의실 좌석 배치도 — 극장식·강의식 등 배치 형태를 개념도로. 좌석을 다 그리지 않은 경우 캡션에 그 사실을 밝힘 ✅
9. 관리자 조작 이력 — 사람이 한 행위만 남기고 조회는 남기지 않음. 기록 실패가 본 작업을 되돌리지 않게 분리 ✅
10. 사업자등록증 첨부 — 담당자이거나 예약번호와 연락처가 함께 맞아야 열람. 공개 이미지와 저장 접두사를 나누고 캐시를 걸지 않음 ✅
11. 검색·공유 카드 — SPA라 초기 HTML이 비어 있어서, Worker가 경로별 제목·설명·OG 태그를 HTMLRewriter로 주입 ✅
12. 폰트 자체 호스팅 — 관리자가 문구를 고치는 제품이라 쓰는 글자를 셀 수 없어, 글자 목록이 아니라 KS X 1001(한글 완성형 표준 2350자) 범위로 서브셋. 2009KB → 436KB ✅
13. 예약 안내 메일 — mailto:로 담당자의 기본 메일 앱을 받는 사람·제목·본문이 채워진 채로 연다 ✅
14. 매장 사진 — 로고가 없는 입점 매장 열여섯 곳에 CC0 사진을 업종에 맞춰 채우고, 사진이 없으면 같은 크기 자리에 업종 마크가 들어가게 함 ✅
15. 공개 배포 — Cloudflare Workers + D1 + R2. 구경 전용 읽기 계정을 만들고 검색 색인은 robots.txt와 noindex로 이중 차단 ✅
16. 납품 절차 문서화 — 계정·도메인 명의, 넘길 것, 계약에서 다툴 지점을 HANDOVER.md로 정리 ✅
17. 검증 세 겹 — 타입 검사, API 전 구간 점검 92개, 실제 브라우저로 전 화면을 여는 검사 217개 ✅
18. 안내 메일 자동 발송 전환 ⏳ — 건물 운영사 도메인을 발신 등록해야 해서, 실제로 쓰기로 정해진 뒤에 할 일로 남김

---

결과

• 받은 불편 다섯 가지를 전부 구현하고 2026년 9월에 공개 주소로 배포했다
• 링크로 들어가면 공개 사이트를 둘러볼 수 있고, 푸터의 “관리자 콘솔 둘러보기” → “구경용으로 둘러보기” 두 번을 누르면 운영자 화면까지 들어간다. 구경용 계정은 화면을 다 보되 바꾸는 요청을 서버가 거절한다
• 가상 브랜드라 검색 색인은 막아 뒀다. 코드 저장소는 비공개이고, 화면과 동작은 위 링크에서 그대로 볼 수 있다
• 실제 제안으로 갈지는 미정이라 여기서 일단 마무리했다. 기능이 남아서 멈춘 것이 아니라 쓰일 자리가 정해지지 않아 멈춘 것이다

---

Series: BuildingHub

---

Suggested Posts