1. 개요

장바구니와 주문은 브라우저에 저장됩니다. 새로고침하거나 창을 닫았다 열어도 그대로 남아 있습니다.

범위 밖: 결제창 연결(주문은 '결제 대기'로 저장), 회원 계정·로그인, 배송 추적, 재고 연동, 관리자 화면, 여러 기기에서 같은 주문을 보는 서버 저장.

2. 과제

1. 러닝화는 사이즈가 전부다.

사이즈를 고르지 않고는 담을 수 없어야 하고, 품절 사이즈는 처음부터 막혀 있어야 합니다. 잘못 담긴 주문이 곧 교환·반품 비용입니다.

2. 여러 켤레를 비교하다 나간다.

담아 둔 상품이 다음 방문에도 남아 있어야 주문으로 이어집니다. 무료 배송까지 얼마 남았는지도 바로 보여야 한 켤레 더 담습니다.

3. 주문 뒤 "내 주문 어디 있지?"가 가장 많은 문의다.

주문번호나 연락처만으로 주문을 찾고, 결제 전이면 직접 취소할 수 있어야 매장 전화가 줄어듭니다.

3. 화면 구조

쇼핑은 첫 화면 한 페이지에서 이어집니다. 전체 메뉴·검색·상품 상세·장바구니는 페이지를 옮기지 않고 위에 겹쳐 열리고, 주문서에서 저장한 주문은 주문 내역에서 다시 찾습니다. 주소 끝에 `#orders`를 붙이면 주문 내역이 바로 열립니다.

4. 주요 기능

사이즈 선택 — 품절 사이즈 막기

상품을 누르면 상세가 열리고 240~280(의류는 S~XXL) 사이즈 버튼이 나옵니다. 품절 사이즈는 줄이 그어지고 눌리지 않습니다. 사이즈를 고르지 않고 담기를 누르면 "사이즈를 골라 주세요"로 막습니다.

장바구니 — 수량·삭제·무료 배송까지 남은 금액

같은 상품·같은 사이즈를 다시 담으면 줄이 늘지 않고 수량이 올라갑니다. 줄마다 −/+로 수량을 바꾸고 삭제할 수 있고, 합계에 따라 막대가 차오르며 무료 배송까지 남은 금액을 알려 줍니다. 담은 상품은 저장되어 새로고침 뒤에도 그대로입니다.

주문서와 주문번호

장바구니의 "주문하기"에서 주문서로 넘어가고, 담은 상품·사이즈·수량과 상품 금액·배송비·결제 예정 금액이 함께 보입니다. 이름 빈칸·연락처 형식·짧은 주소·동의 누락은 각각 다른 문장으로 막습니다. 저장하면 주문번호(PR-날짜-순번)가 나오고 장바구니가 비워지며, 다음 주문 때는 받는 분과 연락처가 먼저 채워집니다.

주문 내역 — 주문번호·연락처로 조회, 주문 취소

머리글 "주문조회"나 메뉴의 "주문 내역"에서 열립니다. 주문이 최근 순으로 쌓이고, 주문번호나 연락처를 넣으면 해당 주문만 찾아 줍니다. 결제 대기 주문은 직접 취소할 수 있고, 바뀐 상태는 새로고침 뒤에도 유지됩니다.

• 브랜드로 찾기·검색브랜드 목록에서 이름을 누르면 검색창이 열리며 그 브랜드 상품만 보여 줍니다. 검색창에 직접 쓰면 글자를 칠 때마다 결과가 바뀝니다.
• 남성·여성, 신상품·추천 탭남성·여성 타일을 누르면 위 상품 줄이 해당 상품으로 바뀌고, 신상품·추천 탭으로 목록을 전환합니다.
• 러너 클럽 가입·소식 받기가입 창과 소식 받기는 이메일 형식을 확인한 뒤 결과 문장을 돌려줍니다.

5. 기술

6. 검수

PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)

동작 시험 13가지: 전체 메뉴 열기 · 신상품·추천 탭 전환 · 브랜드 눌러 검색 · 사이즈 안 고르면 안내 · 사이즈 골라 담기와 무료 배송 안내 · 수량 늘리기와 삭제 · 새로고침 뒤 장바구니 유지 · 주문서 빈칸 검사 · 주문서 작성과 주문 저장 · 새로고침 뒤 주문 내역 조회 · 연락처로 주문 조회 · 주문 취소와 상태 유지 · 소식 구독

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

휴대폰: 첫 화면 표시 0.9초 · 가장 큰 요소 표시 2.9초 · 화면 흔들림 0.027~0.028 · 입력 막힘 0ms PC: 첫 화면 표시 0.2초 · 가장 큰 요소 표시 0.6초 · 화면 흔들림 0.026 · 입력 막힘 0ms

7. 결과