# AQUA — 매일의 작은 돌봄을 위한 스킨케어 브랜드몰

AQUA는 랭크빌더가 기획·디자인·개발한 가상 스킨케어 브랜드입니다. 실제 고객 납품이나 제품 판매 사례가 아닌 자체 제작 포트폴리오입니다. 한 장의 디자인 목업을 넘어, 제품 탐색과 주문 내용 확인까지 연결되는 10개의 독립 페이지로 구성했습니다.

## 제작 방향

제품 사진과 여백이 브랜드 인상을 만들고, 제품별 상세 정보와 자연스러운 페이지 연결이 탐색을 이어갑니다. 하늘색·크림색·오렌지를 중심으로 같은 브랜드 안에서 메인, 카탈로그, 제품 상세, 브랜드 콘텐츠, 주문 흐름을 일관되게 디자인했습니다. 본문마다 샘플 문구를 반복하지 않으며 공통 상단 안내와 푸터, 성분 구성 안내와 주문 확인 단계에서 가상 사이트의 성격을 정확하게 알립니다.

## 페이지 구성

| 페이지 | 경로 | 구성 |
| --- | --- | --- |
| 메인 | index.html | 제품 사진 히어로, 컬렉션, 브랜드 스토리, 루틴, FAQ |
| 전체 제품 | catalog.html | 제품 종류 필터, 이름 검색, 가격순 정렬, 검색 결과·빈 상태 |
| 데일리 클렌저 | products/cleanser.html | 제품 사진, 수량 선택, 가격, 사용법, 성분 구성, 제품 안내, 연관 제품 |
| 밸런싱 토너 | products/toner.html | 제품별 카피·사용 흐름·성분 구성이 적용된 독립 상세 |
| 데일리 크림 | products/cream.html | 제품별 카피·사용 흐름·성분 구성이 적용된 독립 상세 |
| 브랜드 이야기 | about.html | 브랜드 스토리, 세 가지 가치, 색상 이야기 |
| 데일리 루틴 | routine.html | 아침·저녁 탭, 단계별 사용법, 제품 상세 링크, 사용 팁 |
| 장바구니 | cart.html | 저장된 제품, 수량 변경·삭제·전체 비우기, 배송비·합계 |
| 주문 내용 확인 | order-review.html | 상품 확인, 기본·선물 포장 선택, 금액 반영, 체험 범위 안내 |
| 배송과 이용 안내 | shipping.html | 배송비·포장·보관·사이트 이용 방식 |

## 실제로 작동하는 기능

- 페이지별 탐색, 모바일 메뉴 열기·닫기와 Escape 지원
- 제품 분류, 이름 검색, 낮은·높은 가격순 정렬, 검색 결과 없음과 초기화
- 제품 상세의 수량 선택과 금액 계산, 장바구니 담기, 주문 확인 바로 이동
- 제품별 수량 1~20개 범위 검증
- 브라우저 localStorage를 이용한 장바구니 유지 및 같은 출처 탭 간 반영
- 장바구니 수량 변경, 개별 삭제, 전체 비우기, 빈 장바구니 안내
- 상품 금액 40,000원 미만일 때 배송비 3,000원, 이상일 때 배송비 0원 계산
- 주문 확인에서 기본 포장 0원·선물 포장 3,000원 선택에 따른 합계 반영
- 아침·저녁 루틴 탭, 홈의 제품 루틴 탭, FAQ와 상세 안내 펼치기
- 제품 상세 목차 앵커, 연관 제품 탐색, 포트폴리오 복귀와 제작 문의 연결

## 디자인 시스템

- 하늘색 #D9EDF7 / 오렌지 #F77235 / 크림 #FBF8EF / 잉크 #153747
- Pretendard 본문과 간결한 AQUA 워드마크
- 실제 화면 텍스트 18px 이상
- PC·모바일 반응형 구성
- 모션 축소 설정, 명확한 키보드 초점, 적절한 입력 레이블

## 이미지와 제작 자료

내장 image_gen으로 생성한 자체 제품 사진 3종을 사용합니다. 타사 제품 사진이나 사이트 화면은 사용하지 않았습니다.

- assets/hero.webp: 물결과 햇살 위 제품 히어로
- assets/products.webp: 세 제품 카탈로그 사진, CSS 배경 위치로 각 제품 표시
- assets/lifestyle.webp: 자연광이 들어오는 욕실의 제품 라이프스타일 사진
- 원본 PNG 보관, WebP 경량화
- ASSET-PROVENANCE.txt: 최종 생성 프롬프트 기록

## 구현 파일

- build.mjs: 10개 페이지와 공통 셸을 생성하는 정적 빌드
- style.css: 기본 브랜드 디자인
- commerce.css: 다중 페이지·상품·주문 흐름 디자인
- product-data.js: 제품명·가격·용량·사용 흐름 데이터
- app.js: 탐색·장바구니·주문 내용 계산·탭 상호작용
- validate.mjs: 정적 파일·앵커·구조·폰트 기준 검사

## 검증

정적 검사에서 HTML 10개, 로컬 링크·자산 242개, 앵커 27개, 고유 ID, 페이지별 H1·main·header·footer, noindex, CSS 괄호, 명시된 최소 글자 크기 18px 기준을 통과했습니다. JavaScript 구문 검사도 통과했습니다.

390px 모바일 실제 화면에서 메뉴 → 제품 검색 → 토너 상세 → 2개 담기 → 장바구니 56,000원·무료 배송 → 1개로 변경 후 배송비 포함 31,000원 → 주문 확인 선물 포장 선택 후 34,000원 흐름을 확인했습니다.

## 서비스 범위

실제 주문 접수, 결제, 배송, 회원가입과 개인정보 수집은 없습니다. 주문 확인까지는 브라우저 안에서 동작하며 결제나 주문 성공을 가장하지 않습니다. 성분 정보는 제품 구성 콘셉트로 표기합니다. 실서비스 전환 시 실제 제품의 표시 정보와 전성분, 운영 정책, 결제·주문·회원 시스템을 별도 확정해야 합니다. 모든 페이지에 noindex,nofollow를 적용했습니다.