1. 개요

업종기업 행사·갈라·프라이빗 연회를 기획하고 전용 고택 연회장을 운영하는 행사 기획사
사이트 목적분위기와 사례로 믿음을 주고, 행사 종류·날짜·시간·인원·장소를 받아 상담 신청을 남기게 하는 홈페이지
제작 범위한 페이지 · 화면 4개 · 서비스 4가지 · 전용 연회장 1곳
주요 흐름행사 종류·장소·날짜·시간·인원 → 상담 신청 저장 → 신청번호 / 연락처(+신청번호)로 조회 → 신청 취소 / 고택 연회장 소개 → 공간 예약 문의(장소 선택됨)

상담 신청은 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 신청 조회에 남고, 같은 날 고택 연회장이 겹치면 미리 알려 줍니다.

범위 밖: 견적 계산·계약서, 결제, 문자·메일 발송, 관리자 화면(신청 확인·담당자 배정·연회장 일정 관리), 여러 기기에서 같은 신청을 보는 서버 저장.

2. 과제

1. 행사 상담은 날짜·인원·장소가 먼저다.

"상담 원해요"만 받으면 다시 전화해서 기본 정보를 물어야 합니다. 신청 단계에서 행사 종류·날짜·시작 시간·인원·장소·예산을 한 번에 받아야 첫 통화가 제안으로 시작됩니다.

2. 준비 기간과 수용 인원을 넘는 요청이 많다.

2주 안의 급한 날짜, 연회장 최대 인원을 넘는 요청은 신청 단계에서 이유와 함께 걸러야 서로 시간을 아낍니다.

3. 전용 연회장은 하루 한 행사다.

같은 날 이미 준비 중인 행사가 있으면 신청 전에 알려 주고, 다른 날짜나 원하는 장소를 고르게 해야 합니다.

3. 화면 구조

소개부터 상담 신청까지 한 페이지에 이어집니다. 입력 확인과 연회장 겹침 안내는 신청 칸 안에서 바로 뜨고, 신청 조회는 페이지를 옮기지 않고 위에 겹쳐 열립니다. 주소 끝에 `#applications`를 붙이면 신청 조회가 바로 열립니다.

4. 주요 기능

인원·일정 상담 신청과 신청번호 화면

인원·일정 상담 신청과 신청번호

행사 종류 4가지, 장소(고택 연회장·원하는 장소), 날짜·시작 시간·인원·예산·원하는 분위기를 받습니다. 날짜는 2주 뒤부터 고를 수 있습니다. 빈칸·연락처 형식·2주날짜·시작 시간·인원은 각각 다른 문장으로 막고, 고택 연회장에 100명을 넘기면 "원하는 장소로 바꿔 주세요"로 안내합니다. 저장하면 신청번호(BN-순번)와 신청 내용이 나오고 입력 칸은 비워집니다.

같은 날 고택 연회장 겹침 안내 화면

같은 날 고택 연회장 겹침 안내

고택 연회장을 고른 상태에서 이미 신청이 들어간 날짜를 고르면 "그날 고택 연회장은 이미 준비 중인 행사가 있어요"가 뜨고 신청이 막힙니다. 장소를 "원하는 장소"로 바꾸면 안내가 사라지고, 취소된 신청은 겹침 계산에서 빠집니다.

신청 조회·취소 화면

신청 조회·취소

머리글 "신청 조회"에서 신청을 최근 순으로 보여 주고, 연락처로 조회하거나 신청번호까지 넣어 한 건만 찾을 수 있습니다. 행사 종류·날짜·시간·인원·장소·예산·분위기·상태가 함께 남고, 취소하면 상태가 '취소'로 바뀌며 그날 고택 연회장이 다시 열립니다.

끌어서 보는 사진 줄 화면

끌어서 보는 사진 줄

프라이빗 연회 사진 줄은 마우스나 손가락으로 끌어 넘기고, 아래 막대가 얼마나 봤는지 보여 줍니다.

  • 공간 예약 문의고택 연회장 소개의 "공간 예약 문의"를 누르면 상담 신청으로 내려가며 장소가 골라져 있습니다.
  • 흩어진 첫 화면 사진첫 화면 사진들은 마우스를 따라 서로 다른 깊이로 움직입니다.

5. 기술

반응형900·520px 기준으로 배치가 바뀝니다. PC는 대표 기획자·연회장·상담 2단, 서비스 4칸, 날짜·시간·인원 3칸. 휴대폰은 서비스와 입력 칸이 1칸으로 접히고, 첫 화면 사진은 가장자리로 작게 물러납니다.
글꼴본문 Pretendard, 영문 제목 Italiana·Marcellus, 한글 제목 고운바탕(모두 무료 공개 글꼴). 사이트 안에 넣어 외부 요청 없이 불러오고, 글꼴 선언을 페이지 안에 넣어 별도 파일을 기다리지 않습니다. 한글 글꼴은 이 사이트에 쓰인 글자만 남겨 본문 2,000KB대 → 79KB, 한글 제목 1,800KB(95개 조각) → 42KB 한 파일로 줄였습니다.
이미지webp 11장, 모두 합쳐 576KB. 첫 화면 조각 사진 600px, 행사·연회장 1024px, 인물 832px로 쓰임새에 맞춰 폭을 나눴습니다. 첫 화면 밖 사진은 화면에 들어올 때 받습니다.
움직임라이브러리 없이 CSS 전환과 포인터 이벤트로 만들었습니다. 마우스를 따라 움직이는 사진, 글자 간격이 모이며 나타나는 제목, 끌어서 넘기는 사진 줄과 진행 막대, 흐르는 협업 분야 띠, 올라가는 경력 숫자. 기기에서 움직임 줄이기를 켜면 애니메이션이 멈춥니다.
접근성날짜·시간·인원 칸에 이름표를 붙였고, 가운데서 열리는 조회 창은 Esc로 닫습니다. 신청 내용은 글자로만 표시해 태그가 실행되지 않습니다. 접근성 측정 100점.
사용 기술HTML·CSS·JavaScript(외부 라이브러리 없음). 상담 신청은 브라우저 저장소(localStorage)에 저장하고 다시 읽습니다.

6. 검수

PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)

항목PC 1440휴대폰 390
화면 오류00
깨진 파일00
가로 넘침·글자 잘림00
동작 시험10 / 10 통과10 / 10 통과

동작 시험 10가지: 사진 줄 끌어 넘기기 · 공간 예약 문의로 고택 선택 · 신청 빈칸 검사 · 2주 안 날짜 막기 · 고택 인원 초과 막기 · 인원·일정 상담 신청 저장 · 같은 날 고택 겹침 안내 · 새로고침 뒤 연락처로 신청 조회 · 신청번호까지 넣어 조회 · 신청 취소와 날짜 다시 열림

속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준)

성능접근성권장사항검색 최적화
휴대폰93100100100
PC100100100100

휴대폰: 첫 화면 표시 1.4초 · 가장 큰 요소 표시 3.2초 · 화면 흔들림 0 · 입력 막힘 0ms PC: 첫 화면 표시 0.4초 · 가장 큰 요소 표시 0.7초 · 화면 흔들림 0.002 · 입력 막힘 0ms

7. 결과

직접 눌러보기 ↗
PC 완성 화면휴대폰 완성 화면
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr
개인정보처리방침