1. 개요
| 업종 | 항공·의료·반도체 부품을 도면대로 깎는 정밀 CNC 가공 회사 |
| 사이트 목적 | 가공 수준을 숫자로 보여 주고, 발주 담당자가 도면을 붙여 바로 상담을 요청하게 하는 회사 홈페이지 |
| 제작 범위 | 한 페이지 9구역 · 창 2개(부품 상세·상담 요청) · 주소가 있는 화면 1개(문의 내역) · 대표 부품 4종 |
| 주요 흐름 | 부품 보기 → 이 부품으로 상담 요청 / 도면 첨부·수량 입력 → 접수번호 발급 / 문의 내역에서 접수번호·연락처로 조회 → 취소·다시 문의 |
보낸 문의는 브라우저에 저장됩니다. 새로고침하거나 창을 닫았다 열어도 문의 내역에 그대로 남아 있습니다.
범위 밖: 도면 파일 원본의 전송·보관(파일 이름과 크기만 기록), 메일·문자 발송, 담당자용 관리 화면(문의 상태 변경·회신), 이력 번호 조회의 실제 생산 기록 연결.
2. 과제
1. 발주 담당자는 "이 공차를 맞출 수 있나"부터 확인한다.
소재·공차·설비가 첫 화면 가까이에 숫자로 있어야 다음 단계로 넘어갑니다.
2. 견적은 도면이 있어야 시작된다.
전화로 설명하게 만들면 이탈합니다. 도면 파일, 수량, 소재, 납기를 한 번에 받아야 회신이 빨라집니다.
3. 보낸 문의가 어떻게 됐는지 모르면 같은 문의를 여러 번 보낸다.
접수번호를 바로 주고, 나중에 번호나 연락처로 다시 찾아볼 수 있어야 합니다.
3. 화면 구조
회사 소개는 첫 화면 한 페이지에 모았습니다. 부품 상세와 상담 요청은 페이지를 옮기지 않고 위에 겹쳐 열립니다. 문의 내역은 주소(#/inquiries)가 따로 있는 화면이라 뒤로 가기로 닫히고, 새로고침해도 그 자리에 머뭅니다.
4. 주요 기능
부품 상세에서 바로 상담 요청
대표 부품 4개를 누르면 소재·공차·가공 방식이 창으로 열립니다. "이 부품으로 상담 요청"을 누르면 상담 요청 창이 열리면서 부품명·소재·공차가 미리 채워집니다.
도면 첨부 상담 요청
이름·연락처·수량은 필수이고, 연락처와 이메일은 형식까지 확인해 틀린 칸을 붉게 표시합니다. 도면 파일(PDF·DWG·STEP 등)은 여러 개를 고를 수 있고, 고른 파일 이름과 크기가 목록으로 바로 보입니다.
문의 내역 — 조회·취소·다시 문의
보낸 문의가 최근 순으로 쌓이고, 부품·수량·납기·도면 파일·요청자·상태를 한 줄에 정리합니다. 접수번호나 연락처(하이픈 없이도)로 찾을 수 있고, 문의 취소·기록 지우기·같은 조건으로 다시 문의가 됩니다. 바뀐 상태는 새로고침 뒤에도 남습니다.
이력 번호 조회
부품에 새긴 이력 번호를 넣으면 형식을 확인하고 소재 입고일·가공 설비·측정 결과를 표로 보여 줍니다. 형식이 틀리면 예시와 함께 다시 안내합니다.
- 접수번호 발급보내기를 누르면 날짜가 들어간 접수번호(YW-날짜-순번)가 발급되고 문의가 저장됩니다. 안내 문구 옆 "문의 내역 보기"로 바로 이동하고, 위쪽 메뉴의 숫자가 진행 중인 문의 수로 바뀝니다.
- 설비 목록 필터와 산업 분야 탭밀링·선반·측정/각인으로 설비 표를 좁혀 봅니다. 산업 분야 탭(항공·의료·반도체·자동차/로봇)을 누르면 사진과 설명이 함께 바뀝니다.
5. 기술
| 반응형 | 900·700·600px 기준으로 배치가 바뀝니다. PC는 부품 4칸·품질 5단계 한 줄, 900px 아래는 부품 2칸·메뉴 접기, 700px 아래는 문의 내역 1단, 600px 아래는 상담 요청 입력칸 1단·설비 표 설명 열 숨김. |
| 글꼴 | 본문 Pretendard, 영문 큰 제목 DM Serif Display(둘 다 무료 공개 글꼴). 사이트 안에 넣어 외부 요청 없이 불러옵니다. 본문 글꼴은 이 사이트에 쓰인 글자만 남겨 2,010KB → 98KB로 줄였습니다. |
| 이미지 | webp 11장, 모두 합쳐 약 496KB. 쓰임새에 맞춰 폭을 832~1,344px로 나눴습니다. 첫 화면 사진은 먼저 받고, 나머지는 화면에 가까워질 때 받습니다. 흑백으로 사진 톤을 맞췄습니다. |
| 움직임 | 라이브러리 없이 CSS 전환으로 만들었습니다. 첫 화면 슬라이드와 진행 막대, 숫자 세기, 질문 접기·펼치기. 기기에서 움직임 줄이기를 켜면 애니메이션이 멈춥니다. |
| 접근성 | 닫기·메뉴 버튼마다 이름을 붙였고, 질문 버튼은 펼침 상태를 알려 줍니다. 접수 결과는 화면 읽기 프로그램이 읽어 주고, Esc로 창을 닫습니다. 파일 선택 버튼에 키보드 초점이 보입니다. 접근성 측정 100점. |
| 사용 기술 | HTML·CSS·JavaScript(외부 라이브러리 없음). 문의는 브라우저 저장소(localStorage)에 저장하고 다시 읽습니다. 문의 내역은 주소(#/inquiries)로 나눠 뒤로 가기가 동작합니다. 입력한 내용은 글자로만 표시해 태그가 실행되지 않습니다. |
6. 검수
PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)
| 항목 | PC 1440 | 휴대폰 390 |
|---|
| 화면 오류 | 0 | 0 |
| 깨진 파일 | 0 | 0 |
| 가로 넘침·글자 잘림 | 0 | 0 |
| 동작 시험 | 13 / 13 통과 | 13 / 13 통과 |
동작 시험 13가지: 상담 요청 창 열기 · 빈 칸 안내 · 부품 상세에서 바로 상담 요청 · 정보 입력과 도면 2개 첨부 · 문의 저장과 접수번호 발급 · 문의 내역에서 확인 · 새로고침 뒤 문의 내역 유지 · 접수번호·연락처로 조회 · 문의 취소와 상태 유지 · 문의 내역 닫기 · 이력 번호 조회 · 설비 필터 · 영어 메뉴 전환
속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 가장 낮은 값, 세 번은 92·94·93)
| 성능 | 접근성 | 권장사항 | 검색 최적화 |
|---|
| 휴대폰 | 92 | 100 | 100 | 100 |
| PC | 100 | 100 | 100 | 100 |
휴대폰: 첫 화면 표시 1.8초 · 가장 큰 요소 표시 3.2초 · 화면 흔들림 0.001 · 입력 막힘 0ms PC: 첫 화면 표시 0.4초 · 가장 큰 요소 표시 0.6초 · 화면 흔들림 0.001 · 입력 막힘 0ms
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr개인정보처리방침 
