# MONO Mobility 제작 브리프

MONO는 랭크빌더가 자체 기획·제작한 가상 전기자전거 브랜드 사이트입니다. 실납품, 실제 판매 제품, 인증 사양, 주행 시험, 실고객 성과를 주장하지 않습니다.

## 목표와 구성

제품의 형태를 온전히 보여주는 대형 사진과 선명한 타이포그래피로 시작합니다. 사용자는 전체 모델에서 용도를 좁히고, 독립 상세에서 구성과 철학을 이해한 뒤, 비교와 질문 기반 추천으로 선택을 구체화합니다.

9개 독립 페이지: 홈, 모델 목록, CITY 01 상세, SPORT 02 상세, FOLD 03 상세, 모델 비교, 모델 추천, 설계 이야기, 이용 안내.

## 시각 설계

실버 바탕 #F2F2EF, 차콜 #16191B, 시그널 레드 #CB3227. Pretendard의 강한 대문자와 큰 제품 사진, 각진 제품 정보 패널을 사용했습니다. 모든 실시간 HTML 텍스트는 18px 이상입니다. 모바일에서는 비교 카드를 세로로 읽을 수 있으며 자전거 바퀴를 자르지 않습니다.

## 기능

- 모델 목록: 전체·출퇴근·스포츠·보관 용도 필터, 결과 수 안내.
- 모델 상세: 프레임·바퀴·배터리 구성·주행 자세·기본 구성·보관 방식 비교 정보와 모델 저장.
- 비교: 최대 세 가지 모델을 나란히 표시, 개별 삭제와 전체 비우기, 브라우저 재방문 복원. `mono-compare-v1`만 사용합니다.
- 모델 추천: 목적·보관 공간·우선순위의 세 질문에 답하면 추천 모델과 선택 이유를 표시합니다. 작은 보관 공간은 FOLD를 우선 추천하고, 다른 선택은 사용 목적과 구성 선호를 함께 반영합니다.
- 저장이 차단된 브라우저에서도 현재 화면에서는 비교가 작동하며 제한 사실을 알립니다.
- 모바일 메뉴, 키보드 포커스, 선택 상태, 결과 안내와 reduced-motion 대응.

## 자산과 제한

제품 사진 세 장은 이 가상 프로젝트를 위해 built-in image_gen으로 생성했습니다. 원본 PNG, 배포 WebP 및 전체 프롬프트는 `assets/PROVENANCE.json`과 자산 폴더에 보관했습니다. 제품 사양·가격은 기획 예시이고 실제 인증·성능 데이터가 아닙니다. 실제 구매·결제·시승 신청·외부 데이터 전송은 없습니다.

`build.mjs`가 공통 헤더·푸터를 포함한 HTML과 showcase.json을 생성합니다. 외부 폰트는 고정 버전 Pretendard CDN을 사용하며 시스템 폰트 대체 경로가 있습니다. 모든 페이지는 noindex,nofollow를 명시합니다.

## 검수

Node 문법 검사, 고유 페이지 제목/H1/ID, 로컬 참조, 9개 URL의 HTTP 응답 및 앱 코드 내 네트워크 전송 부재를 정적으로 점검합니다. 실제 브라우저 레이아웃·상호작용 최종 검수는 통합 담당자가 수행합니다.