이 글은 BuildingHub 시리즈의 5번째 기록입니다. (총 6개)

오늘 한 일

로컬에서만 돌던 것을 공개 주소에 올렸다. 데이터베이스와 이미지 저장소를 원격에 만들고, 시드를 넣고, 라이브에서 공개 페이지 15개가 200으로 응답하는지, 경로별 메타 태그가 실제로 박혀 나가는지, 이미지가 서빙되는지를 확인했다.

구경용 계정과 색인 차단

배포하면서 두 가지가 걸렸다. 관리자 자격은 받아 본 사람이 바로 돌려 보라고 정한 데모용이라 짐작하기 쉬운데, 배포하는 순간 로그인 화면이 누구에게나 열린다. 그리고 가상 브랜드라 검색에 잡히면 곤란하다.

계정을 둘로 갈랐다. admin과 구경용 demo다. 구경용은 화면을 다 보되 바꾸는 요청을 서버가 403으로 거절한다. 버튼을 흐리게 하는 건 거들 뿐이고, 공개 데모라 API를 직접 부르는 것도 막혀야 한다. 색인은 robots.txt 전체 차단과 noindex 메타로 이중으로 막았다. 링크를 아는 사람은 그대로 본다.

링크만 받은 사람이 관리자 화면까지 가는 길

배포하고 나서 빠진 걸 알았다. 이 데모의 핵심은 운영자 화면인데, 공개 사이트에서 거기까지 닿는 길이 없었다. 링크만 받은 사람은 관리자 화면이 있다는 것조차 모른다.

푸터에 “관리자 콘솔 둘러보기”를 넣고, 로그인 화면에 원클릭 진입 버튼을 뒀다. 두 번 누르면 읽기 전용 배너가 달린 콘솔에 들어간다. 승인·반려 버튼은 잠기고 상세 보기는 열린다.

업종 마크

입점 매장에 로고 자리가 비어 있었다. 세상에 없는 가게라 로고 파일도 없다. 업종 열세 가지에 각각 그림 마크를 그리고 색을 지정했다. 로고 이미지가 있으면 그것을, 없으면 업종 마크를, 업종도 모르면 이니셜을 쓴다.

예약 안내 메일

승인·반려 상태만 바뀌고 신청자는 아무것도 못 받고 있었다. 자동 발송은 발신 도메인 인증이 있어야 해서 배포 전에는 완결할 수 없다.

대신 mailto:로 담당자의 기본 메일 앱을 여는 방식으로 붙였다. 받는 사람·제목·본문이 채워진 채 열리고 담당자가 확인하고 보낸다. 도메인 인증 없이 오늘 쓸 수 있고, 나가기 전에 사람이 한 번 본다는 이점도 있다. 본문 생성부는 나중에 서버 발송으로 옮길 때 그대로 재사용한다.

납품 절차 문서

수주했을 때 이걸 어떻게 넘기는지를 HANDOVER.md로 정리했다. 요금을 누가 내느냐로 모델이 갈리고, 회의실 예약은 고객 계정에 구축하는 쪽이 기본이다. 예약 기록이 그쪽 자산이고 우리가 손을 떼도 운영이 이어져야 한다. 계정·도메인은 처음부터 고객 명의로 만들고, 지금 데모를 그대로 넘기는 게 아니라 새로 구축하므로 그 시간이 견적에 들어간다.


막힌 부분

이미지 저장소가 계정에 꺼져 있었다

배포 도중 저장소 생성이 거절됐다. 대시보드에서 사람이 한 번 켜야 쓸 수 있는 항목이라 명령줄로는 방법이 없다.

  • 해결: 켜 달라고 요청하고 기다렸다. 계정 단위로 한 번 켜면 그다음부터는 명령줄로 다 된다
  • 남은 교훈: 원격 자원에는 코드가 못 넘는 관문이 있다. 배포 일정을 잡을 때 이런 항목을 먼저 확인한다

원격 DB를 만들었더니 로컬이 비었다

원격 데이터베이스를 만들고 설정에 그 id를 적었더니 로컬 서버가 500을 냈다. no such table: rooms였다.

  • 원인: 설정의 database_id를 바꾸면 로컬 개발용 D1도 그 id로 된 다른 파일을 가리킨다. 빈 데이터베이스가 새로 생긴 셈이다
  • 해결: 로컬 마이그레이션과 시드를 다시 넣었다. id를 바꿨으면 로컬도 다시 채워야 한다는 걸 작업 지침에 적었다

라이브에 상태를 바꾸는 검사를 돌렸다

브라우저 검사를 라이브에 그대로 돌렸다. 이 검사는 예약을 실제로 만들고 승인·반려한다. 데모 데이터에 검사용 예약과 취소 이력이 그대로 남았다.

  • 해결: 원격 시드를 다시 넣어 되돌렸다
  • 남은 조치: 라이브는 페이지 응답·읽기 API·권한처럼 읽기만 하는 것으로 확인한다는 규칙을 지침에 박았다. 검사가 무엇을 바꾸는지는 검사를 쓸 때가 아니라 돌릴 곳을 정할 때 따져야 한다

시드가 조작 이력을 안 지웠다

데모 화면에 검사가 남긴 조작 이력이 쌓여 있었다. 앞서 문의 표에서 똑같은 일이 있었는데 같은 부류가 또 나왔다.

  • 원인: 데모 데이터를 되돌리는 스크립트가 “이 표들을 비운다”는 목록을 손으로 들고 있었고, 표가 늘 때 목록이 안 따라왔다
  • 해결: 비우는 목록에 넣고, 실제 표 목록과 대조해 빠진 게 있으면 스크립트가 멈추도록 했다. 목록에서 표 하나를 지워 실제로 멈추는지 확인했다

메일 본문이 매번 길이 경고에 걸렸다

메일 초안이 2575자로 나왔다. 윈도우가 mailto:를 넘길 때 2048자 안팎에서 잘린다.

한글은 URL 인코딩에서 한 글자가 9자로 늘어난다. 안내 문구를 줄여 2100자까지 내렸는데도 경고가 계속 떴다.

  • 원인: 본문 장식으로 넣은 괘선 줄이었다. 한 글자가 인코딩되면 9자라 21자짜리 줄 둘이 380자를 먹고 있었다
  • 해결: 괘선을 뺐다. 1700자대로 내려가 경고가 사라졌다. 승인 5건과 반려 1건에서 다시 확인했다

자동 발송의 발신 주소를 잘못 잡을 뻔했다

자동 발송으로 넘어가려면 도메인 인증이 필요한데, 그 도메인을 만든 쪽 것으로 잡고 있었다.

  • 정정: 발신 주소는 건물 운영사 것이어야 한다. 신청자에게는 그 건물에서 온 메일로 보여야 맞다
  • 남은 조치: 발신 주소를 코드에 박지 않고 설정 항목으로 둔다. 지금 쓰는 메일 앱 초안 방식은 애초에 발신자 칸이 없어서, 그 PC에 로그인된 담당자 본인이 보내는 게 된다

업종 마크가 24px에서 안 읽혔다

면류·일식·분식 마크가 작은 크기에서 뭉쳐 보였고, 색이 업종과 어긋났다. 커피가 분홍으로 나왔다.

  • 원인: 형태가 복잡했고, 색을 이름 해시에서 뽑아 업종과 상관없는 값이 나왔다
  • 해결: 세 글리프를 단순하게 다시 그리고, 색은 업종마다 직접 지정했다. 배경과 글자 대비도 올렸다

배포 바가 마지막 내용을 가렸다

콘텐츠 화면 아래 고정된 배포 바가, 끝까지 스크롤해도 마지막 패널을 42px 덮고 있었다.

  • 원인: 바의 아래쪽 여백을 음수로 줘서 본문이 확보해 둔 아래 여백을 상쇄했다. 좌우로 화면 폭을 채우려고 넣은 값이 아래에도 같이 들어가 있었다
  • 해결: 좌우만 당기고 아래는 당기지 않게 했다. 데스크톱과 모바일 폭에서 모두 0px을 확인했다
  • 남은 조치: 끝까지 스크롤한 뒤 마지막 패널이 바에 덮이지 않는지 보는 검사를 넣었다. 브라우저 검사가 213개가 됐다

다음에 할 일

  • 안내 메일 자동 발송 전환 — 운영사 도메인을 발신 등록해야 한다. 발신 주소는 코드가 아니라 설정 항목으로
  • 제안 절차를 어떻게 잡을지 정하기

Series: BuildingHub


Suggested Posts