1. 개요
| 업종 | 아이 옷·신발·소품을 파는 유아동 의류 브랜드 |
| 사이트 목적 | 아이 키에 맞는 옷을 빨리 찾고, 코디 단위로 담아 주문까지 끝내게 하는 쇼핑몰 |
| 제작 범위 | 한 페이지 · 창 1개(빠른 담기) · 주소가 있는 화면 4개(장바구니·주문서·주문 완료·주문 조회) · 상품 10종 |
| 주요 흐름 | 상품 고르기 → 색상·사이즈 → 장바구니 / 코디 한 번에 담기 → 수량 조절 → 주문서 → 주문 완료 / 주문 조회 → 취소·다시 담기 |
찜, 장바구니, 주문, 지난 배송지, 소식 받기는 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다.
범위 밖: 결제창 연결(결제 수단 선택과 주문 저장까지), 회원 가입·로그인(주문번호·휴대폰으로 조회), 배송 추적, 관리자 화면, 메일 발송.
2. 과제
1. 아이 옷은 사이즈가 전부다.
나이가 아니라 키(cm)로 고르게 하고, 품절 사이즈는 담기 전에 막아야 반품이 줄어듭니다.
2. 부모는 한 벌이 아니라 한 세트를 산다.
우비·모자·신발을 코디로 보여 주고 한 번에 담게 해야 주문 금액이 커집니다.
3. 휴대폰으로 틈틈이 고르다 나중에 주문한다.
담아 둔 것이 사라지면 다시 찾지 않습니다. 장바구니와 주문 내역이 다음 방문에도 남아 있어야 합니다.
3. 화면 구조
쇼핑은 첫 화면 한 페이지에서 고릅니다. 빠른 담기와 휴대폰 필터는 페이지를 옮기지 않고 위에 겹쳐 열립니다. 장바구니·주문서·주문 완료·주문 조회는 주소가 따로 있는 화면이라 뒤로 가기와 새로고침에도 그 자리에 머물고, 위쪽 단계 표시(장바구니 → 주문서 → 주문 완료)가 지금 위치를 알려 줍니다.
4. 주요 기능
코디 한 번에 담기
코디 사진의 점을 누르면 해당 상품 줄이 강조되고, 코디 전체 금액이 아래에 나옵니다. 사이즈를 하나 고르면 코디 상품 전부가 그 사이즈로 장바구니에 담깁니다. 사이즈 없이 누르면 먼저 고르라고 알려 줍니다.
빠른 담기 — 색상·사이즈 고르기
상품 카드에서 창을 열어 색상과 키(cm) 사이즈를 고릅니다. 사이즈를 안 고르면 담기 전에 알려 주고, 품절 사이즈는 눌리지 않습니다. 같은 상품·색상·사이즈를 다시 담으면 줄이 늘지 않고 수량이 올라갑니다.
분류·필터로 좁혀 보기
상단 분류를 누르면 목록이 그 조건으로 다시 그려지고, 고른 조건은 칩으로 남아 하나씩 지웁니다. 성별·종류·사이즈·색상·세일·가격 필터와 추천·신상품·가격순 정렬이 함께 동작합니다. 휴대폰에서는 필터가 왼쪽에서 열리는 창이 됩니다.
장바구니 — 수량·삭제·무료 배송 안내
수량은 1~9개 사이에서 바꾸고, 줄마다 삭제합니다. 금액이 바뀔 때마다 상품 금액·배송비·결제 예정 금액이 다시 계산되고, 5만 원 무료 배송까지 남은 금액을 막대와 문장으로 알려 줍니다.
- 주문서받는 분·휴대폰·주소는 필수이고, 휴대폰은 형식까지 확인합니다. 배송 메모와 결제 수단(신용카드·계좌이체·휴대폰)을 고르고 주문 동의에 체크해야 넘어갑니다. 다음 주문 때는 지난 배송지가 미리 채워집니다.
- 주문 완료와 주문번호주문번호(BS-날짜-순번)가 나오고 주문이 저장되며 장바구니가 비워집니다. 결제 수단에 따라 안내 문장이 달라집니다(계좌이체는 "입금이 확인되면").
- 주문 조회 — 취소·다시 담기주문이 최근 순으로 쌓이고, 상품 사진·옵션·수량·결제 수단·금액·상태를 함께 보여 줍니다. 주문번호나 휴대폰 번호로 찾을 수 있고, 접수 상태의 주문은 취소, 지난 주문은 같은 옵션으로 다시 담기가 됩니다.
- 찜과 소식 받기찜한 상품은 머리글 숫자와 함께 저장되어 다시 들어와도 남습니다. 소식 받기는 이메일 형식을 확인하고, 이미 등록한 주소면 따로 알려 줍니다.
5. 기술
| 반응형 | 1000·800px 기준으로 배치가 바뀝니다. PC는 상품 4칸·왼쪽 필터 고정·장바구니 2단(목록+요약), 1000px 아래는 상품 3칸, 800px 아래는 상품 2칸·필터는 여는 창·장바구니와 주문서 1단. |
| 글꼴 | 본문 Pretendard, 제목 Jua, 로고 Bricolage Grotesque(모두 무료 공개 글꼴). 사이트 안에 넣어 외부 요청 없이 불러옵니다. 본문 글꼴은 이 사이트에 쓰인 글자만 남겨 2,010KB → 92KB로, 제목 글꼴은 여러 조각을 한 파일(53KB)로 합쳤습니다. |
| 이미지 | webp 12장, 모두 합쳐 약 464KB. 상품 700~800px, 첫 화면·공원 사진 1,344px로 쓰임새에 맞춰 폭을 나눴습니다. 첫 화면 사진은 먼저 받고, 나머지는 화면에 가까워질 때 받습니다. |
| 움직임 | 라이브러리 없이 CSS로 만들었습니다. 띠 배너 사진 흔들림, 코디 점 퍼지는 표시, 상품 카드 나타나기, 담기 알림 띠. 기기에서 움직임 줄이기를 켜면 애니메이션이 멈춥니다. |
| 접근성 | 할인 가격·주요 버튼의 색 대비를 높였고, 색상 점은 누르기 쉬운 크기와 간격으로 키웠습니다. 결제 수단·필터에 키보드 초점이 보이고, 알림과 오류는 화면 읽기 프로그램이 읽어 줍니다. Esc로 창을 닫습니다. 접근성 측정 100점. |
| 사용 기술 | HTML·CSS·JavaScript(외부 라이브러리 없음). 찜·장바구니·주문·소식 받기는 브라우저 저장소(localStorage)에 저장하고 다시 읽습니다. 장바구니·주문서·주문 조회는 주소(#/cart 등)로 나눠 뒤로 가기가 동작합니다. 입력한 내용은 글자로만 표시해 태그가 실행되지 않습니다. |
6. 검수
PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)
| 항목 | PC 1440 | 휴대폰 390 |
|---|
| 화면 오류 | 0 | 0 |
| 깨진 파일 | 0 | 0 |
| 가로 넘침·글자 잘림 | 0 | 0 |
| 동작 시험 | 18 / 18 통과 | 18 / 18 통과 |
동작 시험 18가지: 상단 분류로 여아만 보기 · 필터 칩 지우기 · 낮은 가격순 정렬 · 찜하기 · 빠른 담기 사이즈 안내 · 색상·사이즈 골라 담기 · 코디 한 번에 담기 · 장바구니 화면 · 수량 늘리기와 한 줄 삭제 · 새로고침 뒤 장바구니 유지 · 주문서 빈 칸 안내 · 주문서 작성과 주문 저장 · 주문 내역에서 확인 · 새로고침 뒤 주문·찜 유지 · 주문번호·휴대폰으로 조회 · 주문 취소 · 다시 담기 · 소식 받기 저장과 중복 안내
속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 같은 점수)
| 성능 | 접근성 | 권장사항 | 검색 최적화 |
|---|
| 휴대폰 | 91 | 100 | 100 | 100 |
| PC | 100 | 100 | 100 | 100 |
휴대폰: 첫 화면 표시 2.1초 · 가장 큰 요소 표시 3.2초 · 화면 흔들림 0.001 · 입력 막힘 0ms PC: 첫 화면 표시 0.5초 · 가장 큰 요소 표시 0.7초 · 화면 흔들림 0 · 입력 막힘 0ms
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr개인정보처리방침 
