1. 개요
| 업종 | 게시판·메일·채팅으로 문의를 받는 온라인 판매·서비스 업체 |
| 사이트 목적 | 문의마다 유형·우선도·근거 정책과 답변 초안을 붙여 보여 주고, 사람이 고쳐 점검을 통과한 답변만 검토 완료로 모아 내보내는 화면 |
| 제작 범위 | 문의 목록과 문의 상세(#/q/번호) · 직접 넣기 창 1개 · 문의 10건 · 운영 정책 7개 · 유형 6가지 |
| 주요 흐름 | 우선도 순 목록 → 문의 열기 → 유형·우선도·근거 정책 확인 → 답변 고치기 → 규칙 점검 → 검토 완료 → 완료 답변 CSV |
바꾼 유형·우선도, 고른 정책, 고친 답변, 검토 상태, 직접 넣은 문의, 거르기 조건은 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다.
범위 밖: 실제 AI 연결 — 준비된 문의 10건의 분류·답변 초안은 미리 넣어 둔 결과이고, 직접 넣은 문의는 낱말 규칙으로 분류합니다. 실제 AI 연결은 도입할 때 연결합니다. 주문 조회 연동, 고객에게 답변 보내기, 여러 기기에서 같은 기록을 함께 쓰는 서버 저장도 범위 밖입니다.
2. 과제
1. 급한 문의가 순서에 밀린다.
파손·두 번 결제 같은 문의가 "사이즈 문의"와 같은 줄에 섞이면 늦게 봅니다. 우선도가 높은 문의가 위로 올라와야 합니다.
2. 초안이 정책과 다른 약속을 한다.
"14일 이내 반품 가능"처럼 실제 정책(7일)과 다른 숫자가 답변에 들어가면 그대로 나갔을 때 문제가 됩니다. 근거 정책에 없는 숫자와 약속 표현을 짚어야 합니다.
3. 사람이 확인하지 않은 답변은 나가면 안 된다.
채워야 할 빈 칸({입고일} 같은)이 남은 답변, 점검을 통과하지 못한 답변은 검토 완료가 되지 않아야 하고, 완료된 답변만 내보내야 합니다.
3. 화면 구조

왼쪽 거르기, 가운데 문의 목록, 오른쪽 문의 상세가 한 화면에 나란히 있습니다. 문의를 열면 주소가 #/q/번호로 바뀌어 뒤로 가기로 목록에 돌아옵니다. 휴대폰에서는 목록과 상세가 한 화면씩 넘어갑니다.
4. 주요 기능

문의 상세 — 분류·확인할 사항·근거 정책
문의마다 유형·우선도, 사람이 확인할 사항("받은 지 약 14일 — 신청 기간 7일이 지났는지"), 근거 정책 목록이 함께 열립니다. 분류가 미리 넣어 둔 결과인지, 낱말 규칙으로 정한 결과인지 표시합니다.

답변 규칙 점검
답변을 고치는 동안 채워야 할 빈 칸, "무조건·100%·반드시 환불" 같은 약속하기 어려운 표현, 근거 정책·문의에 없는 숫자(14일, 3~5영업일 등)를 바로 짚습니다. 오류가 남아 있으면 검토 완료 버튼이 잠깁니다.

근거 정책 고르기
교환·반품 기간, 반품 배송비, 환불 처리 등 운영 정책 7개 중 답변의 근거를 고릅니다. 고른 정책에 있는 숫자는 답변에 써도 경고가 풀립니다.

상태·유형으로 거르기
검토 전·수정함·검토 완료, 배송·교환·반품·환불·주문 변경·상품 문의·기타로 거르고, 내용·고객·번호로 찾습니다. 목록은 우선도 높은 문의부터 놓입니다.
- 문의 직접 넣기문의 문장을 붙여 넣으면 "깨져서·교환" 같은 낱말 규칙으로 유형과 우선도를 정하고, 유형별 답변 틀과 근거 정책을 붙입니다. 어떤 낱말에 걸렸는지 확인할 사항에 적힙니다.
5. 기술
| 반응형 | 1180·900px 기준으로 배치가 바뀝니다. PC는 거르기·목록·상세 세 칸, 1180px 아래는 세 칸 폭을 줄이고, 900px 아래는 거르기가 위쪽 버튼 줄로 바뀌고 목록과 상세가 한 화면씩 넘어갑니다. |
| 글꼴 | 본문 Pretendard, 번호·시각 Instrument Sans(둘 다 무료 공개 글꼴). 이 화면에 쓰인 글자만 남겨 두 파일 합쳐 123KB로 줄였습니다. |
| 이미지 | 사진이 없는 업무 화면입니다. 상태 점과 우선도 표시는 CSS로 그렸습니다. |
| 움직임 | 알림 문구가 잠깐 나타났다 사라지는 것 외에는 움직임을 넣지 않았습니다. |
| 접근성 | 거르기 버튼은 눌린 상태를 알려 주고, 모든 입력 칸에 이름표가 있습니다. 점검 결과는 색과 문장으로 함께 알려 줍니다. 접근성 측정 100점. |
| 사용 기술 | HTML·CSS·JavaScript(외부 라이브러리 없음). 분류 규칙과 답변 점검은 브라우저 안에서 동작합니다. 검토 결과는 브라우저 저장소(localStorage)에 저장하고, 완료 답변은 CSV로, 답변 한 건은 TXT로 내려받습니다. 입력한 글자는 화면에 그릴 때 글자로만 표시합니다. |
6. 검수
PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)
| 항목 | PC 1440 | 휴대폰 390 |
|---|
| 화면 오류 | 0 | 0 |
| 깨진 파일 | 0 | 0 |
| 가로 넘침·글자 잘림 | 0 | 0 |
| 동작 시험 | 15 / 15 통과 | 15 / 15 통과 |
동작 시험 15가지: 첫 화면 표시 · 우선도 높은 문의가 위로 · 문의 열기 — 분류·확인할 사항·정책·초안 · 답변 고치고 검토 완료 · 빈 칸이 남으면 완료 잠김 · 정책을 더 골라 숫자 경고 풀기 · 유형·우선도 바꾸기 · 상태·유형으로 거르기 · 문의 찾기 · 새로고침 뒤 검토 결과 유지 · 문의 직접 넣기 — 낱말 규칙 분류 · 검토 완료 답변 CSV · 이 답변 TXT · 처음 초안으로 되돌리기 · 뒤로 가기
속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 같은 값)
| 성능 | 접근성 | 권장사항 | 검색 최적화 |
|---|
| 휴대폰 | 100 | 100 | 100 | 100 |
| PC | 100 | 100 | 100 | 100 |
휴대폰: 첫 화면 표시 1.1초 · 가장 큰 요소 표시 1.7초 · 화면 흔들림 0.000 · 입력 막힘 0ms PC: 첫 화면 표시 0.4초 · 가장 큰 요소 표시 0.5초 · 화면 흔들림 0.010 · 입력 막힘 0ms
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr개인정보처리방침