1. 개요
| 업종 | 한 동네에서 오래 진료해 온 치과 |
| 사이트 목적 | 병원과 진료 방식을 믿을 수 있게 보여 주고, 진료 시간에 맞는 예약 요청을 받아 환자가 직접 확인·취소하게 하는 홈페이지 |
| 제작 범위 | 한 페이지(구역 9개) · 진료과 메뉴 · 예약 칸(방문 진료·화상 상담) · 예약 확인·취소 |
| 주요 흐름 | 진료 과목 누르기 → 예약 칸(과목 채워짐) → 날짜·시간대·이름·연락처·동의 → 예약번호 발급 → 연락처로 예약 확인·취소 |
예약과 예약 상태, 마지막으로 쓴 연락처는 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다.
범위 밖: 확정 문자 발송, 화상 상담 연결(링크 발송), 병원 예약 관리 화면·진료 시간표 연동, 회원 가입·로그인(연락처로 조회), 여러 기기에서 같은 예약을 보는 서버 저장.
2. 과제
1. 어떤 진료를 받아야 할지 몰라 전화를 망설인다.
진료 과목과 의료진을 먼저 보여 주고, 궁금한 과목에서 바로 예약으로 넘어갈 수 있어야 합니다.
2. 진료 요일과 시간을 모르고 예약한다.
일요일 휴진, 수요일 저녁 진료, 토요일 오전 진료 같은 규칙에 맞지 않는 요청은 보내기 전에 이유와 함께 막아야 합니다.
3. 예약 요청이 들어갔는지 알 수 없다.
확정 연락을 기다리는 동안에도 환자가 자기 예약을 찾아보고 취소할 수 있어야 합니다.
3. 화면 구조

병원 소개부터 예약 확인까지 한 페이지를 내려 보며 읽습니다. 머리글의 화상 상담·방문 예약 버튼과 진료 과목을 누르면 그 종류와 과목이 채워진 채 같은 페이지의 예약 칸으로 이동합니다. 휴대폰에서는 진료과 메뉴가 머리글 아래로 펼쳐집니다.
4. 주요 기능

방문 진료·화상 상담 예약
방문 진료와 화상 상담 중에 고르고, 과목·날짜·시간대·이름·연락처·동의를 확인합니다. 통과하면 예약번호(ND날짜-순번)를 발급하고 "확정 문자 대기" 상태로 저장합니다.

진료 시간 규칙 안내
일요일, 수요일이 아닌 날의 저녁, 토요일 오후를 고르면 예약 버튼 아래에 왜 안 되는지 문장으로 알려 주고 저장하지 않습니다.

예약 확인·취소
연락처로 저장된 예약을 찾아 종류·과목·날짜(요일)·시간대와 상태를 보여 줍니다. 취소하면 "취소됨"으로 바뀌고, 새로고침 뒤에도 그 상태가 남습니다.

진료 과목에서 바로 예약
진료 과목이나 머리글의 진료과 메뉴를 누르면 예약 칸으로 내려가며 그 과목이 이미 골라져 있습니다.
- 연혁1996·2008·2017·2026 중 연도를 누르면 원이 다시 그려지며 그해의 내용으로 바뀝니다.
- 진료과 메뉴휴대폰에서는 메뉴 버튼으로 진료과 목록을 펼쳐 병원 소개·진료 과목·오시는 길·예약 확인으로 바로 갑니다.
5. 기술
| 반응형 | 1100·900·520px 기준으로 배치가 바뀝니다. PC는 머리글 아래에 진료과 메뉴를 늘 펼쳐 두고, 1100px 아래는 SNS 버튼을 숨기며, 900px 아래는 진료과 메뉴를 버튼으로 접고 한 줄 배치로, 520px 아래는 글자 크기와 간격을 휴대폰에 맞춰 다시 잡습니다. |
| 글꼴 | 본문 Pretendard, 영문 Instrument Sans, 영문 제목 Newsreader(모두 무료 공개 글꼴). 사이트 안에 넣어 외부 요청 없이 불러옵니다. 모두 이 사이트에 쓰인 글자만 남겼고, 본문 글꼴은 2,010KB → 90KB로 줄였습니다. |
| 이미지 | webp 9장, 모두 합쳐 226KB. 폭은 600~1,344px로 쓰임새에 맞춰 나눴습니다. 첫 화면 사진은 먼저 받고, 나머지는 화면에 들어올 때 받습니다. |
| 움직임 | 라이브러리 없이 CSS 애니메이션과 스크롤 감지로 만들었습니다. 숫자가 화면에 들어오면 0부터 세어 올라가고, 사진 구역은 스크롤에 따라 사진이 서로 다른 속도로 움직이며, 연혁은 원을 그리며 바뀝니다. 기기에서 움직임 줄이기를 켜면 애니메이션이 멈춥니다. |
| 접근성 | 아이콘 버튼마다 이름을 붙였고, 입력 칸마다 이름표를 달았습니다. 틀린 입력은 예약 버튼 아래에 문장으로 알려 줍니다. 접근성 측정 PC 92점 · 휴대폰 90점. |
| 사용 기술 | HTML·CSS·JavaScript(외부 라이브러리 없음). 예약·예약 상태·마지막 연락처는 브라우저 저장소(localStorage)에 저장하고 다시 읽습니다. 저장이 막힌 브라우저에서는 저장할 수 없다고 알려 줍니다. |
6. 검수
PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 예약을 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)
| 항목 | PC 1440 | 휴대폰 390 |
|---|
| 화면 오류 | 0 | 0 |
| 깨진 파일 | 0 | 0 |
| 가로 넘침·글자 잘림 | 0 | 0 |
| 동작 시험 | 10 / 10 통과 | 10 / 10 통과 |
동작 시험 10가지: 연혁 연도 바꾸기 · 후기 칸 넘기기 · 진료 과목에서 예약으로 이동 · 일요일 예약 막기 · 저녁은 수요일만 · 방문 진료 예약 저장 · 화상 상담 예약 저장 · 새로고침 뒤 예약 확인 · 예약 취소와 상태 유지 · 없는 연락처 조회 안내
속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준 · PC는 PC 기준으로 각각 세 번 측정해 같은 값)
| 성능 | 접근성 | 권장사항 | 검색 최적화 |
|---|
| 휴대폰 | 94 | 90 | 100 | 91 |
| PC | 100 | 92 | 100 | 91 |
휴대폰: 첫 화면 표시 1.2초 · 가장 큰 요소 표시 3.0초 · 화면 흔들림 0 · 입력 막힘 0ms PC: 첫 화면 표시 0.3초 · 가장 큰 요소 표시 0.6초 · 화면 흔들림 0 · 입력 막힘 0ms
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr개인정보처리방침