이음 프레임 — 호텔 IA를 커스텀 스틸 공방으로 옮긴 멀티페이지

문래동의 가상 커스텀 스틸 자전거 공방 이음 프레임을 위한 멀티페이지 포트폴리오 데모입니다. 풀스크린 히어로, 글래스 핏 상담 바, 핀 스크롤 확장 카드, 카테고리 탭, 비대칭 편집형 블록, 센터 캐러셀, 마퀴, 메가메뉴를 하나의 경험으로 구성했습니다. 실제 사업장이 아닙니다.

라이브: ononc-ieum-frame.pages.dev

경험 설계

고객 여정은 프레임 지오메트리 선택, 제작 과정 이해, 핏 상담 예약, 장기 관리로 자연스럽게 이어집니다. 처음 접하는 라이더도 부담 없이 맞춤 제작의 가치를 이해할 수 있도록 정보를 단계별로 구성했습니다.

모션 시스템

• 풀스크린 히어로 + 글래스 핏 상담 바 — 날짜, 라이더, 프레임, 시간 선택 항목을 첫 화면 위에 배치
• 핀 스크롤 프레임 리빌 — 지그 위의 스틸 프레임이 화면을 가득 채우며 확장
• 프레임 카테고리 탭 — CITY / TOUR / TRACK / MIXTE
• 공방 둘레 캐러셀 — 주변 장소, 필터, 5초 프로그레스 바
• 완성차 마퀴 — 완성된 자전거와 골목 장면을 40초 루프로 구성
• 메가메뉴 — 프레임 / 공방 / 핏 / 케어

페이지 구성

• / 홈
• /frames, /frames/city|tour|track|mixte
• /atelier 공방
• /fit 치수 측정
• /care 오버홀·재도색·얼라인먼트
• /about, /visit 데모 폼(전송 없음)

제작 방식

Next.js 16 static export, React 19. 이미지는 Grok Imagine(grok-imagine-image)만 사용했습니다. SVG 생성과 다른 이미지 툴은 쓰지 않았습니다. Cloudflare Pages 프로젝트 ononc-ieum-frame으로 배포했습니다.

표시된 가격, 주소, 연락처, 인물은 모두 가상 예시입니다.