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

크라운 파크 호텔 서울의 멀티페이지 IA와 모션 문법(풀스크린 히어로, 글래스 예약 바, 핀 스크롤 확장, 카테고리 탭, 비대칭 오퍼, 센터 캐러셀, 마퀴, 메가메뉴)을 숙박이 아닌 문래동 커스텀 스틸 자전거 공방으로 옮긴 포트폴리오 데모입니다. 실제 사업장이 아닙니다.

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

왜 이 업종이었나

기존 쇼케이스(살롱, 학원, 공장, 숙박, 도자, 세차, 아파트, 조향, 다이닝)와 겹치지 않는 수제작 공방이 필요했습니다. 호텔의 “객실을 고르고 예약하는 흐름”은 프레임 지오메트리를 고르고 핏 상담을 남기는 흐름으로 바꿨습니다.

옮긴 모션

• 풀스크린 히어로 + 글래스 예약 바 → 핏 상담 바(날짜, 라이더, 프레임, 타임)
• Our Rooms 핀 스크롤(아치 카드가 화면을 채움) → 지그 위 프레임이 펼쳐지는 구간
• 객실 등급 탭 → CITY / TOUR / TRACK / MIXTE
• Around Spots 필터 캐러셀 + 5초 프로그레스 → 공방 둘레
• Stay The Moment 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으로 배포했습니다.

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