1. 개요
| 업종 | 미용실·레슨·클리닉·과외처럼 예약을 받는 가게를 위한 예약 관리 서비스 |
| 사이트 목적 | 손님이 보게 될 예약 화면을 사장님이 직접 써 보게 하고, 필요한 기능과 가게 규모에 맞는 요금제로 상담을 신청하게 하는 소개 사이트 |
| 제작 범위 | 한 페이지 13구역 · 창 1개(도움 채팅) · 주소가 있는 화면 1개(예약·상담 신청 확인, 탭 2개) · 예약 5단계 |
| 주요 흐름 | 서비스 → 담당자 → 날짜·빈 시간 → 정보 입력 → 예약 확정 / 예약 확인 → 취소하면 그 시간이 다시 열림 / 기능 고르기 → 가게 정보 → 추천 요금제 → 상담 신청 → 신청 확인 |
예약과 상담 신청은 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 확인 화면에 그대로 남고, 이미 예약된 시간은 같은 담당자로 다시 고를 수 없습니다.
범위 밖: 예약금 결제, 알림 문자·메일 발송, 가게 관리자 화면(일정표·손님 관리·통계), 회원 가입·로그인(휴대폰 번호·예약 번호로 조회).
2. 과제
1. 예약 서비스는 써 봐야 믿는다.
기능 목록보다 손님이 보게 될 예약 창을 그 자리에서 끝까지 눌러 보게 해야 합니다.
2. 같은 시간에 두 사람이 예약하면 가게가 곤란해진다.
이미 찬 시간은 막고, 취소하면 바로 다시 열려야 합니다. 손님은 예약 번호나 휴대폰으로 자기 예약을 찾아 취소할 수 있어야 합니다.
3. 사장님은 요금표를 봐도 무엇을 골라야 할지 모른다.
필요한 기능과 직원·지점 수를 고르면 맞는 요금제를 추천하고, 그 내용 그대로 상담을 신청하게 해야 합니다.
3. 화면 구조
예약 창과 상담 신청은 첫 화면 한 페이지 안에서 단계별로 진행됩니다. 도움 채팅은 페이지를 옮기지 않고 오른쪽 아래에 겹쳐 열립니다. 예약·상담 신청 확인은 주소(#/my)가 따로 있는 화면이라 뒤로 가기로 닫히고, 새로고침해도 그 자리에 머뭅니다.
4. 주요 기능
날짜·빈 시간 고르기
오늘부터 2주 안의 날짜를 달력으로 보여 주고, 지난 날짜와 휴무일(월요일)은 막습니다. 날짜를 고르면 그날의 빈 시간만 눌리고, 지난 시간과 이미 예약된 시간은 줄을 그어 막습니다. 아래 요약 줄에 고른 서비스·담당·일시·금액이 계속 따라옵니다.
예약 확정과 예약 번호
이름과 휴대폰 번호(형식 확인)를 넣고 요청 사항을 남기면 예약 번호(TF날짜-순번)가 나오고 저장됩니다. 확정 직전에 그 시간이 이미 찼는지 한 번 더 확인하고, 찼으면 시간 고르기로 돌려보냅니다. 같은 담당·같은 시간은 다시 고를 수 없습니다.
예약 확인과 취소
예약이 최근 순으로 쌓이고, 일시·서비스·담당·예약자·요청 사항·상태를 함께 보여 줍니다. 휴대폰 번호나 예약 번호로 찾고, 다가올 예약만 취소할 수 있습니다. 취소하면 그 시간이 예약 창에서 다시 열리고, "같은 서비스 다시 예약"은 이름·번호를 채운 채 돌아갑니다.
기능 고르기와 요금제 추천
주요 기능 8개 중 쓰고 싶은 것을 고르고 업종·지점 수·직원 수·한 달 예약 수를 넣으면 무료·베이직·프로 중 맞는 요금제를 추천하고 이유를 한 줄로 보여 줍니다. 요금표의 버튼을 누르면 그 요금제가 신청서에 채워지고, 옆 요약에 바로 반영됩니다.
- 상담 신청 저장과 신청 확인가게 이름·이름·휴대폰은 필수이고, 기능을 하나도 고르지 않으면 알려 줍니다. 보내면 신청 번호(CS-날짜-순번)가 나오고, "신청 확인"으로 상담 신청 탭이 열립니다. 신청 취소가 되고, 바뀐 상태는 새로고침 뒤에도 남습니다.
- 예약 페이지 디자인 미리보기대표 색 5가지·모양 3가지(카드·목록·사진)·모서리 둥글기를 바꾸면 가게 예약 페이지 미리보기가 즉시 바뀝니다. 예약 창은 라이트·다크 모드를 바로 바꿔 봅니다.
5. 기술
| 반응형 | 1000·700px 기준으로 배치가 바뀝니다. PC는 첫 화면 2단(문구+화면 미리보기), 기능 4칸, 상담 신청 2단(입력+요약 고정). 1000px 아래는 메뉴 접기·1단 배치, 700px 아래는 기능·요금·예약 선택지 1칸과 입력칸 1단. |
| 글꼴 | 본문 Pretendard, 영문·숫자 Plus Jakarta Sans(둘 다 무료 공개 글꼴). 사이트 안에 넣어 외부 요청 없이 불러옵니다. 본문 글꼴은 이 사이트에 쓰인 글자만 남겨 2,010KB → 104KB로 줄였습니다. |
| 이미지 | webp 8장, 모두 합쳐 약 288KB. 고객 지원 사진은 화면에 가까워질 때 받습니다. |
| 움직임 | 라이브러리 없이 CSS 전환으로 만들었습니다. 휴대폰 미리보기가 떠 있고, 예약 완료 표시가 튀어나오며, 숫자가 올라가고, 다크 모드로 전환됩니다. 기기에서 움직임 줄이기를 켜면 애니메이션이 멈춥니다. |
| 접근성 | 기능·요금제 선택 칸에 키보드 초점이 보이고, 요금제 묶음과 결제 주기 스위치에 이름을 붙였습니다. 결과 문장은 화면 읽기 프로그램이 읽어 주고, 보조 글자 색 대비를 높였습니다. Esc로 확인 화면을 닫습니다. 접근성 측정 100점. |
| 사용 기술 | HTML·CSS·JavaScript(외부 라이브러리 없음). 예약·상담 신청은 브라우저 저장소(localStorage)에 저장하고 다시 읽으며, 예약 가능한 시간 계산에 저장된 예약을 반영합니다. 확인 화면은 주소(#/my)로 나눠 뒤로 가기가 동작합니다. 입력한 내용은 글자로만 표시해 태그가 실행되지 않습니다. |
6. 검수
PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)
| 항목 | PC 1440 | 휴대폰 390 |
|---|
| 화면 오류 | 0 | 0 |
| 깨진 파일 | 0 | 0 |
| 가로 넘침·글자 잘림 | 0 | 0 |
| 동작 시험 | 19 / 19 통과 | 19 / 19 통과 |
동작 시험 19가지: 메뉴 "직접 해보기"로 예약 창 이동 · 1년 결제 요금 전환 · 서비스·담당 고르기 · 날짜·빈 시간 고르기 · 정보 빈 칸 안내 · 예약 확정과 예약 번호 · 같은 담당·시간 다시 예약 막힘 · 예약 확인 화면 · 새로고침 뒤 예약 유지 · 휴대폰·예약 번호로 조회 · 예약 취소하면 그 시간이 다시 열림 · 기능 고르면 요금제 추천 · 요금표 버튼으로 신청서 채움 · 상담 신청 빈 칸 안내 · 상담 신청 저장과 신청 번호 · 신청 확인 화면 · 새로고침 뒤 신청 유지와 취소 · 예약 창 다크 모드 · 디자인 미리보기 색·모양 바꾸기
속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 같은 값)
| 성능 | 접근성 | 권장사항 | 검색 최적화 |
|---|
| 휴대폰 | 94 | 100 | 100 | 100 |
| PC | 100 | 100 | 100 | 100 |
휴대폰: 첫 화면 표시 2.1초 · 가장 큰 요소 표시 2.8초 · 화면 흔들림 0.001 · 입력 막힘 0ms PC: 첫 화면 표시 0.4초 · 가장 큰 요소 표시 0.6초 · 화면 흔들림 0 · 입력 막힘 0ms
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr개인정보처리방침 
