Exclusive Illumination — for your Car, Motorbike and Bicycle
스크롤이 카메라를 움직이는 랜딩페이지. 어두운 개러지에서 시작해 딜러 쇼룸, 색이 바뀌는 글라스, 조립 워크숍, 개인 컬렉션을 지나 보이드에 떠 있는 제품까지 컷 없이 한 번에 날아갑니다.
Frankonia RS GmbH의 CarThrone · BikeThrone · VeloThrone — RGB LED 글라스 바닥을 가진 매트블랙 스틸 플랫폼 — 랜딩페이지 리뉴얼입니다. oso95/scroll-world 스킬로 제작했습니다.
기존 사이트는 Wix 기반 정적 스펙 나열이었고, "빛이 변한다"는 핵심 가치가 페이지에서 전혀 움직이지 않았습니다. 이 페이지에서는 스크롤이 곧 카메라 타임라인입니다.
기존 사이트와 실제 영업의 포지셔닝이 어긋나 있었습니다.
| 사이트 / 포토북 | 인스타그램 (실제 영업) | |
|---|---|---|
| 배경 | 어두운 개인 차고 | 딜러 쇼룸 · 리테일 플로어 |
| 주체 | 개인 오너의 슈퍼카 | 브랜드 딜러십 전시차 |
| 사이트 반영 | 100% | 0% |
18.7K 팔로워와 실제 도입 사례가 최대 자산인데 사이트에 한 줄도 없었습니다.
→ B2B 딜러 쇼룸을 서사 축으로 세웠습니다. 전체 분석은 research/BRIEF.md.
스크롤 위치가 비디오의 currentTime을 직접 구동합니다. 카메라는 실제로 움직이고,
스크롤은 시간만 돌립니다 — Apple의 스크롤 제품 페이지와 같은 기법입니다.
- 아키텍처 A (연속 전진 테이크) — 커넥터 없이 6개 레그가 곧 여정입니다. 실사 톤에서 다이브+커넥터 방식은 이음매마다 카메라가 역방향으로 전환돼 "되감기" 스터터로 읽힙니다.
- 각 레그의 시작 이미지 = 직전 레그의 실제 마지막 프레임. 씬 스틸을 재사용하면 이음매가 "팝"합니다.
- 모바일은 센터 크롭이 아니라 네이티브 9:16 별도 체인입니다.
- 클립은 Blob으로 받아 재생하므로 HTTP Range를 지원하지 않는 호스트에서도 스크럽됩니다.
python build/seam_matrix.py| 이음매 | 데스크톱 | 모바일 9:16 |
|---|---|---|
| ignition → showroom | 38.18 dB | 35.84 dB |
| showroom → spectrum | 33.12 dB | 32.80 dB |
| spectrum → engineering | 37.06 dB | 31.44 dB |
| engineering → garage | 30.62 dB | 32.12 dB |
| garage → throne | 32.92 dB | 33.76 dB |
| 최저 | 30.62 dB | 31.44 dB |
스킬 기준은 "1080p 이상에서 올바로 frame-lock 된 이음매도 디테일 시머링만으로 18–25 dB로 읽힐 수 있다"이므로 30 dB 초과는 여유 있는 통과입니다.
| 필름 | 6개 씬 — Ignition · The Showroom · The Spectrum · The Engineering · The Private Garage · The Throne |
| 스펙 | 4개 모델 치수·중량·전력 표 + 3t 하중 / 32mm / 28.8 W/m / 90분 설치 |
| 프루프 | 포토북에서 추출한 실제 설치 사진 6장 |
| CTA | 견적 요청 · Techsheet · Photo Book · Instagram |
| 서브페이지 | Imprint · Privacy Policy · Contact — 원본 사이트 문구 그대로 |
모바일은 16:9를 자른 게 아니라 네이티브 세로(720×1280)로 따로 렌더링한 체인입니다.
python -m http.server 8080 --directory build/site정적 파일만 있으면 됩니다. 빌드 스텝도, 의존성도 없습니다.
powershell -File build/encode.ps1 # 원본 렌더 → 스크럽용 인코딩 + 포스터
python build/make_logo.py # 브랜드 마크 추출 + 파비콘 생성
python build/seam_matrix.py # 전 이음매 PSNR 검증원본 렌더(
build/work/)와 씬 스틸(build/stills/)은 230MB라 커밋하지 않습니다.build/sections.json의 씬 정의와docs/BUILD.md의 프롬프트로 재생성할 수 있습니다.
build/
sections.json 씬 정의 · 카피 · 스타일 프리앰블 (단일 소스)
encode.ps1 스크럽용 인코딩 (crf20/GOP8 데스크톱, 720w/GOP4 모바일)
posters.py 레그 프레임 0 → 포스터 webp
make_logo.py 브랜드 마크 추출 + 파비콘
seam_matrix.py 배포 파일 기준 전 이음매 PSNR
seamcheck.py 개별 이음매 검증
site/ ← 배포 대상 (GitHub Pages 아티팩트)
index.html · imprint.html · privacy.html · contact.html
scrub-engine.js scroll-world 엔진 (무수정 원본)
pages.css 서브페이지 공통 스타일
assets/vid/ 12개 클립 (데스크톱 6 + 모바일 6)
assets/img/ 포스터 · 실제 제품 사진 · 로고 · 파비콘
assets/doc/ photobook.pdf · techsheet.pdf
research/BRIEF.md 기존 사이트 진단 · 인스타 분석 · 브랜드 키트 · 기술 실사
docs/BUILD.md 전체 빌드 기록 · 검증 결과 · 남은 결정
| 항목 | 값 |
|---|---|
| 런타임 의존성 | 0 — 순수 HTML/CSS/JS |
| 엔진 | scrub-engine.js 28.5KB (scroll-world 무수정) |
| 아트 디렉션 | 포토리얼 시네마틱, 풀블리드, 다크 |
| 스틸 | nano_banana_pro 16:9 4K / 9:16 2K |
| 비디오 | minimax_h3 2K · 24fps · 6s · start+end 프레임 |
| 데스크톱 마스터 | 2560×1440 · crf 20 · GOP 8 · 41.6 MB |
| 모바일 체인 | 네이티브 1440×2560 → 720w · crf 23 · GOP 4 · 13.1 MB |
| 접근성 | 크롬 전 요소 WCAG AA · prefers-reduced-motion 대응 |
main의 build/site/**가 바뀌면 Actions 워크플로가
GitHub Pages로 배포합니다. 배포 전 필수 파일과 클립 12개 존재 여부를 검사합니다.
대역폭 참고 — 데스크톱 필름 전체가 41.6MB입니다. GitHub Pages의 소프트 한도는 월 100GB이므로 월 방문 2,000명대부터 여유가 빠듯해집니다. 1080p로 내리면 약 45% 줄고 육안 차이는 거의 없습니다 (
docs/BUILD.md참조).
- 딜러 브랜드 실명 — 인스타로 Aston Martin · Ducati München · Alpine · Porsche 딜러십 도입이 확인되지만, 각 브랜드 사용 동의가 필요한 사안이라 카피에는 넣지 않았습니다.
- Contact 폼 백엔드 — 정적 사이트라 제출 시
mailto:로 폴백합니다.contact.html의ENDPOINT상수만 채우면 실제 폼 엔드포인트로 POST합니다.
Frankonia RS GmbH · Anna-Maria-Weg 11, 91161 Hilpoltstein, Germany thethrone.store · @thethrone.store · shop@carthrone.de
제품 사진·로고·브랜드 자산의 저작권은 Frankonia RS GmbH에 있습니다.