동네에서 꽤 규모가 있는 카페를 운영하는 지인에게 다급한 연락이 왔습니다. “코드캠님, 어제 갑자기 배관이 터져서 임시 휴업을 했는데, 웹사이트에 안 적어놨더니 손님들이 헛걸음하고 별점 테러를 남겼어요.” 사장님은 매일 아침 네이버 지도, 인스타그램, 그리고 개인 웹사이트의 영업시간을 일일이 수동으로 고치는 것에 엄청난 피로를 느끼고 계셨습니다.
이런 상황, 비단 이 사장님만의 이야기는 아닐 겁니다. 오늘 이 글을 끝까지 읽고 나면, 여러분의 웹사이트에도 똑똑한 디지털 직원을 한 명 두게 될 겁니다. 요일과 시간을 스스로 파악해 손님에게 “지금 당장 방문하셔도 좋습니다(영업중)” 혹은 “아쉽지만 내일 뵙겠습니다(준비중)”를 자동으로 안내해 주는 완벽한 자동화 시스템을 구축할 수 있습니다.
1. 요일마다 다른 영업시간, if문 지옥에서 탈출하기
가장 먼저 부딪히는 난관은 ‘규칙적이지 않은 규칙’입니다. 평일은 오전 9시부터 오후 6시까지, 주말은 오전 10시부터 오후 8시까지, 매월 둘째 주 화요일은 정기 휴무… 이런 조건들을 날것 그대로 코드로 옮기다 보면 코드가 끝도 없이 길어집니다.
자바스크립트의 new Date() 객체를 사용해 현재 요일을 숫자로 받아오고, 각 요일에 해당하는 영업시간을 ‘배열(Array)’ 혹은 ‘객체(Object)’ 형태로 깔끔하게 정리해 두는 것이 핵심입니다. 코드가 간결해져야 나중에 시간이 바뀌어도 수정하기가 쉽습니다.
“솔직히 고백하자면, 저도 처음 이 기능을 구현할 때는 월요일부터 일요일까지 조건문(if-else)을 7개나 도배해 놨었습니다. 나중에 브레이크 타임까지 추가해달라는 요청을 받고 나서야, 데이터를 체계적으로 분리하지 않은 제 자신을 원망하며 밤을 새웠죠.”
데이터(영업시간)와 로직(상태 판별)을 철저히 분리하세요. 이것이 나중에 코드를 유지보수할 때 피눈물을 흘리지 않는 유일한 방법입니다.
2. 복사해서 바로 쓰는 ‘스마트 영업시간’ 핵심 로직 설계
자, 그렇다면 실제 코드는 어떤 흐름으로 작성되어야 할까요? 단순히 시간만 비교하는 것을 넘어, 돌발 상황까지 유연하게 대처할 수 있는 구조를 짜야 합니다.
- ✅ 요일/시간 매핑:
getDay()로 오늘이 무슨 요일인지 파악하고, 설정된 오픈 시간과 마감 시간 사이에 현재 시간이 존재하는지 확인합니다. - ✅ 공휴일 자동 반영: 매년 바뀌는 공휴일은 공공데이터포털의 특일 정보 API를 연동하거나, 하드코딩으로 특정 날짜 배열(예:
['12-25', '01-01'])을 만들어 예외 처리합니다. - ✅ 임시휴업 토글 버튼: 관리자 페이지나 스크립트 최상단에
const isEmergencyClosed = false;같은 변수를 하나 빼두세요. 이 값을 true로 바꾸는 순간, 무조건 ‘준비중(임시휴업)’이 뜨도록 우선순위를 가장 높게 설정합니다.
💡 코드캠의 실전 TIP
단순히 ‘준비중’이라고만 적어두면 손님은 답답합니다. 코드를 조금만 응용해서 “현재는 준비중입니다. (오픈 시간: 내일 오전 10시)”처럼 다음 오픈 시간을 함께 계산해서 띄워주세요. 이 작은 친절 하나가 이탈률을 절반으로 낮춥니다.
3. 주의! ‘사용자 기기 시간’을 맹신하지 마세요
프론트엔드(HTML/JS)로 영업시간 표시를 구현할 때 초보 개발자들이 가장 많이 하는 치명적인 실수가 있습니다. 바로 new Date()가 가져오는 시간의 기준점입니다. 이 함수는 서버의 시간이 아니라, 웹사이트에 접속한 사용자의 스마트폰이나 PC 시간을 기준으로 작동합니다.
만약 해외 여행 중인 고객이 사이트에 접속하거나, 기기 시간이 잘못 설정된 기기로 접속한다면? 한국 매장은 문을 열었는데, 사이트는 ‘영업 종료’를 띄우는 참사가 발생합니다. 완벽한 정확도를 원한다면 서버(Backend)에서 한국 표준시(KST)를 내려주거나, 최소한 외부 API를 통해 기준 시간을 한 번 맞춰주는 과정이 필요합니다.
사소한 디테일이 브랜드의 첫인상을 결정합니다
오늘 알려드린 ‘영업시간 자동 표시’ 기능은 단순히 사장님의 수고를 덜어주는 귀찮음 방지용 툴이 아닙니다. 고객이 우리 브랜드와 만나는 가장 첫 번째 디지털 접점(Touchpoint)에서 정확하고 배려 있는 정보를 제공하여 신뢰감을 쌓는 중요한 장치입니다.
지금 당장 메모장을 열어 가게의 일주일 영업시간표를 배열 형태로 정리해 보세요. 그리고 임시 휴업 변수 하나를 만들어 스크립트 최상단에 배치해 보시길 바랍니다.
