1. 개요
| 업종 | 가구와 생활 소품을 직접 만들어 파는 리빙 브랜드 |
| 사이트 목적 | 브랜드 분위기를 보여 주면서, 상품을 골라 주문까지 마치게 하는 쇼핑몰 |
| 제작 범위 | 페이지 5개 · 화면 11개 · 상품 8종(카테고리 5개) |
| 주요 흐름 | 고르기 → 담기 → 주문 / 가입 → 로그인 → 내 주문 조회·취소 / 비회원 주문 조회 / 문의 남기기 → 남긴 문의 확인 |
장바구니, 최근 본 상품, 회원, 주문, 문의는 브라우저에 저장됩니다. 새로고침하거나 다시 들어와도 그대로 남아 있습니다.
범위 밖: 결제창 연결, 배송 추적, 관리자 화면, 메일·문자 발송, 여러 기기에서 같은 계정을 쓰는 서버 저장.
2. 과제
1. 분위기와 구매 사이의 거리를 줄인다.
리빙 브랜드는 분위기가 곧 설득입니다. 하지만 사진만 넘기다 나가면 팔리지 않습니다. 첫 화면에서 브랜드를 보여 주고, 한 번 누르면 상품 목록으로 가야 합니다.
2. 가구는 한 번에 사지 않는다.
둘러보다 나갔다가 며칠 뒤 다시 들어옵니다. 담아 둔 상품과 보던 상품이 다음 방문에도 남아 있어야 주문으로 이어집니다.
3. 금액이 큰 주문 앞에서 망설인다.
배송비, 무료 배송 기준, 제작·배송 일정이 담기 전에 보여야 합니다. 주문한 뒤에도 조회·취소·문의가 쉬워야 안심하고 주문합니다.
3. 화면 구조
쇼핑은 첫 화면 한 페이지에서 끝납니다. 상품 상세·장바구니·전체 메뉴·룩북은 페이지를 옮기지 않고 위에 겹쳐 열립니다. 계정·주문서·주문 내역·문의는 주소가 따로 있는 화면이라 뒤로 가기와 새로고침에도 그 자리에 머뭅니다.
4. 주요 기능
카테고리와 가격 정렬
체어·테이블·조명·소파·벤치·소품 다섯 갈래로 상품을 나눴습니다. 카테고리 블록이나 목록 위 탭을 누르면 그 상품만 남고, 정렬을 바꾸면 낮은 가격순·높은 가격순으로 다시 놓입니다.
상품 상세 — 색상·수량 고르기
상품을 누르면 옆에서 상세가 열립니다. 색상과 수량을 고르면 담기 버튼의 금액이 바로 바뀝니다. 주문 후 제작·배송 일정과 무료 배송 기준을 같은 자리에 적었습니다.
장바구니 — 수량·삭제·무료 배송 안내
같은 상품도 색상이 다르면 줄이 나뉘고, 줄마다 수량을 바꾸거나 삭제합니다. 합계에 따라 막대가 차오르며 무료 배송까지 남은 금액을 알려 줍니다. 담은 상품은 저장되어 다시 들어와도 남아 있습니다.
최근 본 상품
상세를 연 상품이 최근 순으로 최대 6개까지 저장됩니다. 다음에 들어오면 전체 상품 아래에서 바로 다시 열 수 있습니다.
- 회원 가입·로그인이름·이메일·휴대폰·비밀번호로 계정을 만들고, 로그인하면 헤더에 이름이 뜹니다. 이미 가입된 이메일, 형식이 틀린 번호, 6자 미만 비밀번호, 약관 미동의는 각각 다른 문장으로 알려 줍니다. 비밀번호는 입력한 글자 그대로 저장하지 않습니다.
- 주문서와 주문번호장바구니의 "주문하기"에서 주문서로 넘어가고, 로그인 상태면 이름·연락처가 채워져 있습니다. 배송 요청은 고르거나 직접 적을 수 있고, 상품 금액·배송비·결제 예정 금액이 옆에 붙어 있습니다. 저장하면 주문번호(MU-날짜-순번)가 나오고 장바구니가 비워집니다.
- 주문 내역과 주문 취소로그인한 계정의 주문이 최근 순으로 쌓입니다. 주문마다 상품·수량·금액, 받는 분·주소·요청 사항, 상태가 함께 남습니다. 결제 대기 주문은 바로 취소할 수 있고, 바뀐 상태는 새로고침 뒤에도 유지됩니다.
- 비회원 주문 조회가입하지 않고 주문한 경우 주문번호와 주문한 연락처를 함께 넣어야 주문이 보입니다. 둘 중 하나라도 맞지 않으면 찾지 못했다고 알려 줍니다.
- 문의 남기기와 남긴 문의유형·이메일·제목·내용을 받아 저장하고 접수번호(Q-순번)를 돌려줍니다. 남긴 문의는 옆 목록에 바로 쌓이고, 다시 들어와도 남아 있습니다. 입력한 내용은 화면에 그릴 때 글자로만 표시해 태그가 실행되지 않습니다.
- 룩북 크게 보기공간 사진을 전체 화면으로 키워 좌우 버튼이나 키보드 화살표로 넘깁니다. 몇 번째 사진인지와 설명이 아래에 붙습니다.
- 전체 메뉴전체 화면 메뉴에서 쇼핑 구역과 내 계정·주문 내역·문의하기로 바로 갑니다.
5. 기술
| 반응형 | 900·820·600px 기준으로 배치가 바뀝니다. PC는 상품 4칸·카테고리 3단·주문서 2단, 900px 아래는 상품 2칸·카테고리 2단, 820px 아래는 주문서·문의 1단, 600px 아래는 머리글을 다시 놓고 상품 이름과 가격을 두 줄로 나눕니다. |
| 글꼴 | 본문 Pretendard, 영문 제목 Urbanist(둘 다 무료 공개 글꼴). 사이트 안에 넣어 외부 요청 없이 불러옵니다. 본문 글꼴은 이 사이트에 쓰인 글자만 남겨 2,010KB → 87KB로 줄였습니다. |
| 이미지 | webp 13장, 모두 합쳐 293KB. 상품 800px, 공간 사진 832~1,344px로 쓰임새에 맞춰 폭을 나눴습니다. 첫 화면 사진은 먼저 받고, 나머지는 화면에 들어올 때 받습니다. |
| 움직임 | 라이브러리 없이 CSS 전환과 스크롤 위치 계산으로 만들었습니다. 첫 화면 사진이 천천히 당겨지고, 오늘의 상품 카드가 스크롤을 따라오며, 상품 줄은 끌어서 넘깁니다. 기기에서 움직임 줄이기를 켜면 애니메이션이 멈춥니다. |
| 접근성 | 아이콘 버튼마다 이름을 붙였고, Esc로 창을 닫고 화살표로 사진을 넘깁니다. 입력이 틀리면 칸 테두리와 문장으로 함께 알려 줍니다. 접근성 측정 100점. |
| 사용 기술 | HTML·CSS·JavaScript(외부 라이브러리 없음). 장바구니·최근 본 상품·회원·주문·문의는 브라우저 저장소(localStorage)에 저장하고 다시 읽습니다. 계정·주문서·주문 내역·문의는 주소(#/account 등)로 나눠 뒤로 가기가 동작합니다. |
6. 검수
PC 1440·휴대폰 390 화면에서 실제로 띄워, 사람이 쓰는 순서대로 눌러 본 결과입니다. 저장한 뒤 새로고침하고 다시 조회되는지까지 확인했습니다. (2026-09-23)
| 항목 | PC 1440 | 휴대폰 390 |
|---|
| 화면 오류 | 0 | 0 |
| 깨진 파일 | 0 | 0 |
| 가로 넘침·글자 잘림 | 0 | 0 |
| 동작 시험 | 18 / 18 통과 | 18 / 18 통과 |
동작 시험 18가지: 전체 메뉴 열기 · 추천 상품 넘기기 · 카테고리 고르기 · 가격순 정렬 · 색상·수량 고르기 · 장바구니 담기와 무료 배송 안내 · 수량 늘리기와 삭제 · 새로고침 뒤 장바구니·최근 본 상품 유지 · 회원 가입과 중복 이메일 차단 · 틀린 비밀번호 차단과 다시 로그인 · 주문서 작성과 주문 저장 · 새로고침 뒤 주문 내역 조회 · 비회원 주문 조회 · 주문 취소와 상태 유지 · 문의 저장과 목록 확인 · 뒤로 가기 · 룩북 넘기기 · 소식 구독
속도·품질 점수 (100점 만점, 휴대폰은 느린 통신 기준으로 세 번 측정해 같은 값)
| 성능 | 접근성 | 권장사항 | 검색 최적화 |
|---|
| 휴대폰 | 92 | 100 | 100 | 100 |
| PC | 100 | 100 | 100 | 100 |
휴대폰: 첫 화면 표시 1.4초 · 가장 큰 요소 표시 3.4초 · 화면 흔들림 0.001 · 입력 막힘 0ms PC: 첫 화면 표시 0.4초 · 가장 큰 요소 표시 0.7초 · 화면 흔들림 0.001 · 입력 막힘 0ms
오토건웍스(AutoGun Works) · 대표 박건우 · 사업자등록번호 342-27-02011 · 경기도 용인시 처인구 남사읍 어진로102번길 92-16 · contact@autogun.co.kr개인정보처리방침 
