1. 개요
| 업종 | 상세페이지·상품 설명을 자주 쓰는 온라인 판매자 |
| 사이트 목적 | 상품 사실표와 설명 초안을 나란히 놓고, 과장·효능·없는 숫자·확인 안 된 사실을 규칙으로 걸러 낸 뒤, 상세 화면으로 미리 보며 검토본을 저장하는 화면 |
| 제작 범위 | 첫 화면 1개 · 상품 4개 · 상품 사실·문구 검토·미리 보기 세 구역 · 점검 규칙 7가지 |
| 주요 흐름 | 상품 고르기 → 규칙 점검 확인 → 문장별 근거 보기 → 문구 고치기 → 미리 보기 → 검토 완료 → 원본·수정본 TXT · 검토 완료 CSV |
사실표 값과 확인 여부, 고친 문구, 검토 상태, 보던 상품은 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다.
범위 밖: 새 문구를 만드는 기능 — 상품 4개의 처음 문구는 미리 넣어 둔 설명 초안이며, 실제 AI 연결은 도입할 때 연결합니다. 쇼핑몰 상품 등록, 이미지 편집, 여러 기기에서 같은 기록을 함께 쓰는 서버 저장도 범위 밖입니다.
2. 과제
1. 초안은 그럴듯하게 과장한다.
"최고급", "항균 효과", "보온 24시간 무조건" 같은 문구는 쓰기 쉽지만 근거가 없으면 표시·광고 문제가 됩니다. 걸리는 표현을 먼저 짚어야 합니다.
2. 문구의 숫자가 상품 정보와 다르다.
용량·크기·보온 시간이 사실표와 다르게 적히면 교환·반품 사유가 됩니다. 문구 안 숫자가 사실표에 있는지 하나하나 대조해야 합니다.
3. 확인 안 된 사실은 말하지 않아야 한다.
원산지·인증처럼 아직 확인 안 된 사실을 문구가 먼저 말하면 안 됩니다. 사실표가 바뀌면 이미 검토한 문구도 다시 점검돼야 합니다.
3. 화면 구조

한 화면에 상품 사실 · 문구 검토 · 미리 보기 세 구역이 나란히 있습니다. 맨 위에서 상품을 고르면 세 구역이 함께 바뀌고, 휴대폰에서는 세 버튼으로 한 구역씩 봅니다.
4. 주요 기능

규칙 점검
제목 50자, 근거 없는 최상급·단정 표현(최고·완벽·무조건 등), 사실표에 근거 없는 효능 표현(항균·살균 등), 사실표에 없는 숫자, 확인 안 된 사실, 빈 요약, 핵심 정보 줄 수를 점검합니다. 오류가 남으면 검토 완료가 잠깁니다.

문장별 근거
상세 설명을 문장마다 나눠, 어느 사실(소재·크기·관리 등)에 근거했는지 붙입니다. 근거를 찾지 못한 문장은 따로 표시합니다.

상세 화면 미리 보기
고친 제목·가격·요약·핵심 정보·설명이 휴대폰 상세 화면 모양으로 바로 보입니다. 검토 완료하면 처음 문구와 고친 문구가 함께 남고, 원본·수정본을 TXT로 받습니다.

상품 사실표
소재·크기·무게·원산지 같은 사실 값과 "확인됨" 표시를 고칩니다. 값을 바꾸면 점검에 바로 반영되고, 검토 완료한 상품도 사실이 바뀌면 다시 검토 상태로 돌아갑니다. 검토 완료한 상품만 모아 CSV로 내려받습니다.
5. 기술
| 반응형 | 1240·820px 기준으로 배치가 바뀝니다. PC는 세 구역이 나란히, 1240px 아래는 사실표·문구 두 칸 아래로 미리 보기가 내려가고, 820px 아래는 상품 사실/문구 검토/미리 보기 버튼으로 한 구역씩 봅니다. |
| 글꼴 | 본문 Pretendard, 제목·숫자 Archivo(둘 다 무료 공개 글꼴). 이 화면에 쓰인 글자만 남겨 두 파일 합쳐 175KB로 줄였습니다. |
| 이미지 | 상품 사진 자리는 분류 글자로 채운 CSS 상자입니다. 실제 사진은 도입할 때 넣습니다. |
| 움직임 | 알림 문구가 잠깐 나타났다 사라지는 것 외에는 움직임을 넣지 않았습니다. 기기에서 움직임 줄이기를 켜면 그마저 멈춥니다. |
| 접근성 | 모든 문구 칸과 사실 칸에 이름표를 붙였고, 상품 버튼은 고른 상태와 검토 상태를 읽어 줍니다. 점검 결과는 색과 문장으로 함께 알려 줍니다. 접근성 측정 100점. |
| 사용 기술 | HTML·CSS·JavaScript(외부 라이브러리 없음). 점검 규칙은 브라우저 안에서 동작합니다. 검토 결과는 브라우저 저장소(localStorage)에 저장하고, 원본·수정본 TXT와 검토 완료 CSV로 내려받습니다. |
6. 검수
PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)
| 항목 | PC 1440 | 휴대폰 390 |
|---|
| 화면 오류 | 0 | 0 |
| 깨진 파일 | 0 | 0 |
| 가로 넘침·글자 잘림 | 0 | 0 |
| 동작 시험 | 15 / 15 통과 | 15 / 15 통과 |
동작 시험 15가지: 첫 화면 표시 · 과장·효능 표현 찾기 · 문장별 근거 표시 · 문구 고치고 검토 완료 · 상세 화면 미리 보기 반영 · 확인 안 된 사실을 말하면 막기 · 사실표를 바꾸면 점검에 반영 · 사실표에 없는 숫자 막기 · 제목 50자 넘으면 막기 · 핵심 정보 줄 추가·삭제 · 검토 완료 뒤 사실이 바뀌면 다시 검토 · 새로고침 뒤 유지 · 원본·수정본 TXT · 검토 완료 상품 CSV · 처음 문구로 되돌리기
속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 같은 값)
| 성능 | 접근성 | 권장사항 | 검색 최적화 |
|---|
| 휴대폰 | 100 | 100 | 100 | 100 |
| PC | 100 | 100 | 100 | 100 |
휴대폰: 첫 화면 표시 0.9초 · 가장 큰 요소 표시 1.2초 · 화면 흔들림 0.000 · 입력 막힘 0ms PC: 첫 화면 표시 0.3초 · 가장 큰 요소 표시 0.5초 · 화면 흔들림 0.000 · 입력 막힘 0ms
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr개인정보처리방침