1. 개요
| 업종 | 나라별 담당 상담사가 방문·화상으로 상담하는 유학 상담 |
| 사이트 목적 | 고객은 상담 종류·상담사·시간을 골라 예약하고 직접 바꾸거나 취소하며, 운영자는 상담사별 일정표에서 상담 진행과 기록을 관리하는 예약 시스템 |
| 제작 범위 | 주소가 있는 화면 4개 · 겹쳐 열리는 곳 2종(예약 완료·예약 상세) · 상담 종류 3종 · 상담사 3명 · 예시 예약 11건 |
| 주요 흐름 | 상담 종류·방식 → 상담사 → 날짜 → 시간 → 연락처 → 예약번호 / 예약 확인 → 시간 바꾸기·취소 / 운영: 일정표 → 상담 시작 → 완료·노쇼 → 상담 기록 |
예약과 상태, 변경·취소 기록, 상담 기록, 운영자가 막은 시간은 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다.
범위 밖: 결제, 문자·메일 알림과 화상 회의 주소 발송, 상담사별 로그인과 권한 나누기, 외부 달력(구글 등)과 일정 맞추기, 여러 기기에서 함께 쓰는 서버 저장.
2. 과제
1. 겹치는 예약을 사람이 막지 않게 한다.
전화·메신저로 예약을 받으면 같은 시간에 두 사람이 잡히거나, 쉬는 날·점심시간에 예약이 들어옵니다. 고객이 고를 수 있는 시간 자체가 처음부터 비어 있는 시간이어야 합니다.
2. 예약 변경·취소 문의를 줄인다.
"시간 좀 바꿀 수 있을까요" 연락이 하루에도 여러 번 옵니다. 고객이 예약번호로 직접 찾아 바꾸고 취소하되, 상담 직전에는 막아야 빈 시간이 생기지 않습니다.
3. 상담 내용이 다음 상담으로 이어져야 한다.
첫 상담에서 들은 전공·희망 나라·준비 서류가 흩어지면 다음 상담에서 처음부터 다시 묻습니다. 예약마다 상태와 상담 기록이 남고, 노쇼도 따로 셀 수 있어야 합니다.
3. 화면 구조
고객 화면(상담 예약·예약 확인)과 운영 화면(일정표·예약 목록)을 주소로 나눴습니다. 예약 목록에서 예약을 누르면 그날 일정표로 가서 예약 상세가 바로 열립니다. 뒤로 가기와 새로고침에도 보던 화면에 머뭅니다.
4. 주요 기능
비어 있는 시간만 보이는 예약
상담 종류·상담사·날짜를 고르면 30분 단위 시간이 나오고, 이미 예약된 시간·운영자가 막은 시간·점심시간·지난 시간은 줄이 그어져 고를 수 없습니다. 일요일과 상담사가 쉬는 요일은 달력에서부터 막히고, 60분 상담은 이어진 두 칸이 모두 비어야 고를 수 있습니다. "누구든 괜찮아요"를 고르면 그 시간에 비어 있는 상담사로 배정됩니다.
예약 확인·시간 바꾸기·취소
예약번호와 휴대폰 뒤 네 자리가 둘 다 맞아야 예약이 보입니다. 같은 상담사의 비어 있는 날짜·시간으로 바꾸면 원래 시간은 다른 사람이 예약할 수 있게 다시 열립니다. 상담까지 24시간이 남지 않은 예약은 온라인으로 바꾸거나 취소할 수 없고 전화 안내가 나옵니다.
상담사별 일정표
상담사를 열로, 30분을 줄로 둔 하루 시간표에 예약과 막은 시간이 길이만큼 놓입니다. 쉬는 날과 점심시간은 빗금으로 표시합니다. 날짜를 앞뒤로 넘기고, 빈 칸을 누르면 사유와 길이(30분·1시간)를 골라 그 시간을 막습니다. 막은 시간은 고객 화면에서 바로 사라집니다.
상담 진행과 상담 기록
예약을 누르면 연락처·희망 나라·미리 온 내용이 옆에 열리고, 상담 시작 → 상담 완료, 또는 노쇼·운영 취소로 상태를 바꿉니다. 상담 기록을 저장하면 예약에 붙어 남고, 모든 처리는 시각과 함께 기록됩니다.
- 예약하기 — 입력 확인과 겹침 막기이름·휴대폰·이메일 형식과 개인정보 동의를 확인하고, 틀린 칸으로 바로 이동합니다. 같은 휴대폰 번호로 겹치는 시간에 예약이 있으면 막고, 그사이 다른 사람이 같은 시간을 잡았으면 다시 고르게 합니다. 확정되면 예약번호(GN-날짜-순번)와 방문 주소 또는 화상 상담 안내가 나옵니다.
- 예약 목록과 CSV상태·상담사·기간(오늘부터 7일·14일·지난 7일·전체)으로 거르고 이름·예약번호·연락처로 찾습니다. 보고 있는 목록을 상담 기록까지 들어간 CSV로 내려받습니다. CSV는 엑셀에서 한글이 깨지지 않게 저장합니다.
5. 기술
| 반응형 | 1000·760px 기준으로 배치가 바뀝니다. PC는 예약 단계와 예약 내용 상자, 일정표와 예약 상세가 나란히, 1000px 아래는 한 줄로 쌓입니다. 760px 아래는 메뉴가 로고 아래로 내려오고, 선택지가 한 줄씩, 시간 칸은 네 칸씩, 일정표는 상담사 한 명씩 봅니다. |
| 글꼴 | 제목 나눔명조, 본문 Gothic A1(둘 다 무료 공개 글꼴). 쓰인 글자만 남겨 세 파일 합쳐 147KB로 줄였습니다. |
| 이미지 | 사진·그림 파일 없이 글자와 선으로 구성했습니다. 쉬는 시간 빗금도 CSS로 그렸습니다. |
| 움직임 | 알림 문구가 나타났다 사라지는 것 외에는 움직임을 넣지 않았습니다. 기기에서 움직임 줄이기를 켜면 멈춥니다. |
| 접근성 | 날짜·시간 칸은 모두 버튼이라 키보드로 고르고, 고른 칸은 눌린 상태로 읽힙니다. 막힌 날짜·시간에는 "예약 불가"와 이유를 붙였습니다. 모든 입력 칸에 이름표를 붙였고 틀린 칸은 테두리와 문장으로 함께 알려 줍니다. |
| 사용 기술 | HTML·CSS·JavaScript(외부 라이브러리 없음). 예약·기록은 브라우저 저장소(localStorage)에 저장하고 다시 읽습니다. 시간이 비어 있는지는 영업시간·점심시간·상담사 쉬는 날·다른 예약·막은 시간을 한 함수에서 함께 따져, 예약·변경·일정표가 같은 규칙을 씁니다. 화면은 주소(#/check 등)로 나눠 뒤로 가기가 동작하고, 입력한 글자는 글자로만 표시해 태그가 실행되지 않습니다. |
6. 검수
PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)
| 항목 | PC 1440 | 휴대폰 390 |
|---|
| 화면 오류 | 0 | 0 |
| 깨진 파일 | 0 | 0 |
| 가로 넘침·글자 잘림 | 0 | 0 |
| 동작 시험 | 16 / 16 통과 | 16 / 16 통과 |
동작 시험 16가지: 일요일·상담사 쉬는 날 막기 · 예약·막은 시간·점심시간 막기 · 60분 상담은 두 칸이 비어야 · 빈칸·휴대폰 형식 확인 · 예약 확정과 예약번호 발급 · 같은 번호 겹치는 예약 막기 · 새로고침 뒤 예약 찾기(틀린 번호 막기) · 시간 바꾸고 원래 시간 다시 열림 · 24시간 안 예약 온라인 변경·취소 막기 · 예약 취소 · 일정표 날짜 이동과 예약·막은 시간 표시 · 상담 시작 → 완료와 상담 기록 새로고침 뒤 유지 · 목록에서 찾아 노쇼 처리 · 빈 시간 막으면 고객 화면에서 막힘 · 목록 거르기·검색·CSV · 뒤로 가기
속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 같은 값)
| 성능 | 접근성 | 권장사항 | 검색 최적화 |
|---|
| 휴대폰 | 99 | 100 | 100 | 100 |
| PC | 100 | 100 | 100 | 100 |
휴대폰: 첫 화면 표시 1.7초 · 가장 큰 요소 표시 2.0초 · 화면 흔들림 0 · 입력 막힘 0ms PC: 첫 화면 표시 0.4초 · 가장 큰 요소 표시 0.4초 · 화면 흔들림 0 · 입력 막힘 0ms
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr개인정보처리방침 
