1. 개요
| 업종 | 여러 공급처에서 상품 목록을 받아 자사몰·마켓에 등록하는 온라인 판매 사업자 |
| 사이트 목적 | 상품 이름과 옵션을 한 줄씩 고쳐 등록 양식에 옮기던 일을 규칙 몇 개로 끝내는 업무 도구 |
| 제작 범위 | 화면 2개(정리하기 · 저장한 작업) · 정리 규칙 7가지 · 분류 규칙 5개 · 예시 목록 1개(26개 상품) |
| 주요 흐름 | 목록 올리기 → 규칙으로 정리 → 정리 전·후 확인 → 검사 → 칸 고치기 → 쇼핑몰 등록 CSV 받기 / 작업 저장 → 다시 열기 |
올린 목록과 열 맞춤, 고친 칸, 정리 규칙, 지울 말, 분류 규칙, 저장한 작업은 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다. 올린 파일은 이 브라우저 안에서만 읽고, 어디에도 전송하지 않습니다.
범위 밖: 쇼핑몰·마켓에 바로 등록하는 연결, 상품 사진 받기·다듬기, 엑셀(xlsx) 파일 직접 읽기, 여러 사람이 함께 쓰는 서버 저장.
2. 과제
1. 공급처마다 적는 방식이 다르다.
[무료배송]·★베스트★ 같은 광고 문구, 500ML·500 ㎖, 12,900원·₩8500처럼 같은 정보를 다르게 적어 보내 그대로 올릴 수 없습니다.
2. 같은 상품이 여러 줄로 흩어진다.
색상·사이즈만 다른 상품이 따로 들어와 있습니다. 옵션 상품으로 묶어야 상세페이지 하나로 팝니다.
3. 등록한 뒤에 틀린 곳이 드러난다.
바코드 한 자리, 빠진 이미지, 비어 있는 재고는 등록하고 나서야 보입니다. 내보내기 전에 걸러야 반려되지 않습니다.
3. 화면 구조

정리는 첫 화면 한 곳에서, 왼쪽 규칙을 바꾸면 오른쪽 표가 바로 다시 정리됩니다. 저장한 작업은 주소가 따로 있는 화면이라 뒤로 가기와 새로고침에도 그 자리에 머뭅니다.
4. 주요 기능

정리 전·후 한 표로
고친 칸은 원래 값을 줄 긋고 새 값을 칠해 나란히 보여 줍니다. 광고 문구 지우기 · 띄어쓰기 · 용량 단위(500ML → 500ml, 1000ml → 1L) · 옵션 ‘이름=값’ · 가격 숫자만 · 품절 맞추기를 한 번에 합니다.

같은 상품 묶기
정리한 이름이 같으면(호텔수건 / 호텔 수건) 첫 상품코드로 묶어 옵션 상품으로 내보냅니다. 등록 CSV의 대표상품코드 칸에 묶음이 들어갑니다.

검사 — 바코드·빈 칸·분류
바코드 13자리 검증 숫자, 같은 바코드 중복, 바코드·이미지·가격·재고 빈 칸, 분류 없음을 찾습니다. 칸을 누르면 바로 고치고, 고치면 다시 검사합니다.

규칙 바꾸기 — 지울 말·분류
지울 말과 분류 규칙(찾을 말 → 분류)을 더하거나 빼면 표 전체를 다시 정리합니다. 규칙은 저장되어 다음 목록에도 그대로 씁니다.
- 쇼핑몰 등록 CSV와 저장한 작업확인이 필요한 줄을 뺀 나머지를 대표상품코드·옵션·판매상태·분류까지 등록 형식으로 받습니다. 문제 목록은 따로 받고, 작업은 규칙·고친 칸째 저장해 다시 엽니다.
5. 기술
| 반응형 | 980·640px 기준으로 배치가 바뀝니다. PC는 왼쪽 규칙 칸과 오른쪽 표 2단(표는 칸 안에서 가로로 넘김), 980px 아래는 규칙을 접어 위에 두고, 640px 아래는 표를 상품마다 카드로 바꿉니다. |
| 글꼴 | 본문 Pretendard, 숫자·코드 Fira Code(둘 다 무료 공개 글꼴). 사이트 안에 넣어 외부 요청 없이 불러옵니다. 본문 글꼴은 이 화면에 쓰인 글자만 먼저 받고(65KB), 사용자가 올린 파일에만 나오는 한글은 나머지 2,350자 파일(373KB)에서 필요할 때만 받습니다. 숫자 글꼴 46KB. |
| 이미지 | 사진 없이 만들었습니다. 아이콘은 SVG로 그려 어느 화면에서도 선명합니다. |
| 움직임 | 라이브러리 없이 CSS 전환만 씁니다. 알림이 아래에서 올라오는 정도로 줄였고, 기기에서 움직임 줄이기를 켜면 전환이 멈춥니다. |
| 접근성 | 입력칸마다 이름을 붙였고, 주요 단추는 44px 높이로 눌리기 쉽게 했습니다. 상태는 색과 글자로 함께 알려 주고, 알림은 화면 읽기 프로그램이 읽도록 표시했습니다. 단추와 입력칸은 키보드로도 씁니다. 접근성 측정 휴대폰 100점 · PC 100점. |
| 사용 기술 | HTML·CSS·JavaScript(외부 라이브러리 없음). 화면과 스크립트 합쳐 51KB. 파일은 브라우저 파일 읽기로 열고, 엑셀에서 저장한 EUC-KR 파일은 글자 형식을 판별해 다시 읽습니다. 결과는 브라우저 저장소(localStorage)에 저장하고 다시 읽으며, 내려받는 CSV는 엑셀에서 바로 열리게 만듭니다. 화면은 주소(#/…)로 나눠 뒤로 가기가 동작합니다. |
6. 검수
PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)
| 항목 | PC 1440 | 휴대폰 390 |
|---|
| 화면 오류 | 0 | 0 |
| 깨진 파일 | 0 | 0 |
| 가로 넘침·글자 잘림 | 0 | 0 |
| 동작 시험 | 18 / 18 통과 | 18 / 18 통과 |
동작 시험 18가지: 예시 목록 26개 불러와 바로 정리 · 광고 문구·용량 단위·띄어쓰기 정리 · 옵션 ‘이름=값’·가격 숫자·품절 맞추기 · 같은 상품 옵션으로 묶기 · 검사: 바코드 검증·중복·빈 칸·분류 없음 · 규칙 끄고 켜기(옵션) · 지울 말 더하기(3P) · 분류 규칙 더하기(의자 → 아웃도어) · 칸 직접 고치기 → 다시 검사 · 새로고침 뒤 규칙·고친 칸 유지 · 쇼핑몰 등록 CSV 받기(확인 필요 줄 뺌) · 문제 목록 CSV 받기 · 작업 저장 → 새로고침 뒤 저장한 작업 · 저장한 작업 등록 CSV · 직접 올린 CSV(EUC-KR·다른 열 이름) · 열 이름이 다르면 직접 고르기 · 저장한 작업 다시 열기 → 뒤로 가기 · 저장한 작업 삭제
속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 가운데 값)
| 성능 | 접근성 | 권장사항 | 검색 최적화 |
|---|
| 휴대폰 | 100 | 100 | 100 | 100 |
| PC | 100 | 100 | 100 | 100 |
휴대폰: 첫 화면 표시 1.3초 · 가장 큰 요소 표시 1.7초 · 화면 흔들림 0 · 입력 막힘 0ms PC: 첫 화면 표시 0.4초 · 가장 큰 요소 표시 0.4초 · 화면 흔들림 0 · 입력 막힘 0ms
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr개인정보처리방침