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
화면 오류00
깨진 파일00
가로 넘침·글자 잘림00
동작 시험18 / 18 통과18 / 18 통과

동작 시험 18가지: 예시 목록 26개 불러와 바로 정리 · 광고 문구·용량 단위·띄어쓰기 정리 · 옵션 ‘이름=값’·가격 숫자·품절 맞추기 · 같은 상품 옵션으로 묶기 · 검사: 바코드 검증·중복·빈 칸·분류 없음 · 규칙 끄고 켜기(옵션) · 지울 말 더하기(3P) · 분류 규칙 더하기(의자 → 아웃도어) · 칸 직접 고치기 → 다시 검사 · 새로고침 뒤 규칙·고친 칸 유지 · 쇼핑몰 등록 CSV 받기(확인 필요 줄 뺌) · 문제 목록 CSV 받기 · 작업 저장 → 새로고침 뒤 저장한 작업 · 저장한 작업 등록 CSV · 직접 올린 CSV(EUC-KR·다른 열 이름) · 열 이름이 다르면 직접 고르기 · 저장한 작업 다시 열기 → 뒤로 가기 · 저장한 작업 삭제

속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 가운데 값)

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

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

7. 결과

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