1. 개요

취향, 장바구니, 할인 코드, 주문과 주문 상태, 받는 분 정보는 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다.

범위 밖: 결제와 정기 배송 결제, 재고 관리, 관리자 화면, 회원 가입·로그인(받는 분 정보 기억으로 대신함), 여러 기기에서 같은 주문을 보는 서버 저장.

2. 과제

1. 원두 이름만 보고는 입맛에 맞는지 모른다.

처음 온 손님에게는 어려운 말 대신 "어떤 맛이 좋은지"를 묻고, 그 답으로 원두를 골라 줘야 합니다.

2. 할인과 배송비를 계산하다 나간다.

코드가 얼마나 빠지는지, 얼마부터 배송비가 없는지가 주문 전에 숫자로 보여야 합니다.

3. 다시 온 손님에게 같은 걸 또 묻는다.

한 번 고른 취향, 담아 둔 원두, 받는 분 정보는 다음 방문에도 남아 있어야 두 번째 주문이 쉬워집니다.

3. 화면 구조

원두 소개부터 정기 배송 안내까지 한 페이지를 내려 보며 읽습니다. 처음 들어오면 취향 질문이 먼저 열리고, 답에 맞춰 원두 목록의 필터가 정해집니다. 원두 상세·장바구니·주문서·주문 내역은 페이지를 옮기지 않고 위에 겹쳐 열립니다.

4. 주요 기능

첫 방문 취향 추천

처음 들어오면 "어떤 원두를 찾으세요?"를 묻고 가볍고 산뜻하게·균형 있게·진하고 쌉쌀하게·잘 모르겠어요 중에서 고르게 합니다. 고른 답에 맞는 원두와 첫 주문 할인 코드를 보여 주고, 코드는 눌러서 복사합니다.

취향 기억

고른 취향은 저장되어 다음 방문부터 질문을 다시 띄우지 않습니다. 원두 목록은 그 취향의 필터로 열리고, "내 취향" 표시와 다시 고르기를 둡니다.

장바구니와 할인 코드

용량별로 담은 원두의 수량을 바꾸거나 뺍니다. 할인 코드를 넣으면 10%가 빠진 금액이 바로 보이고, 담은 원두와 코드는 새로고침해도 남아 있습니다.

주문서와 주문번호

받는 분·연락처·주소·배송 요청을 받고, 상품·할인·배송비·결제 금액을 나눠 보여 줍니다. 3만 원 이상이면 배송비가 빠집니다. 저장하면 주문번호(YG날짜-순번)가 나오고, 다음 주문 때 받는 분 정보가 채워집니다.

• 주문 내역과 주문 취소주문번호·날짜·원두·금액·배송지를 최근 순으로 보여 줍니다. 취소하면 "취소됨"으로 바뀌고, 새로고침 뒤에도 그 상태가 남습니다.
• 원두 상세 — 용량·분쇄 고르기원두를 누르면 상세가 열려 맛 설명과 로스팅 정도를 보여 줍니다. 200g·500g·1kg 용량과 원두 그대로·핸드드립용·에스프레소용 분쇄를 고르면 가격이 바뀌고 그대로 담깁니다.
• 베스트셀러 슬라이드와 로스팅 필터베스트셀러 원두를 PC에서는 화살표로, 휴대폰에서는 밀어서 넘깁니다. 아래 목록은 전체·라이트·미디엄·다크 필터로 로스팅 정도에 맞는 원두만 남깁니다.
• 메뉴 서랍옆에서 열리는 메뉴에서 원두 구매·우리가 다른 점·이야기·정기 배송 구역과 주문 내역으로 바로 갑니다.

5. 기술

6. 검수

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

동작 시험 12가지: 첫 방문 질문 열림 · 진한 맛 추천 · 할인 코드 복사 · 새로고침 뒤 질문 안 뜸과 취향 기억 · 슬라이드 넘기기(PC 화살표·휴대폰 밀기) · 상세에서 500g 담기 · 새로고침 뒤 장바구니·코드 유지 · 정보 없이 주문 막기 · 주문 저장 · 새로고침 뒤 주문 내역 조회 · 주문 취소와 상태 유지 · 라이트 필터

속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준 · PC는 PC 기준으로 각각 세 번 측정해 같은 값, 첫 방문 질문 창은 닫은 상태)

휴대폰: 첫 화면 표시 1.2초 · 가장 큰 요소 표시 2.5초 · 화면 흔들림 0.003 · 입력 막힘 0ms PC: 첫 화면 표시 0.3초 · 가장 큰 요소 표시 0.6초 · 화면 흔들림 0.003 · 입력 막힘 0ms

7. 결과