소프트 로보틱스 기반 미래 모빌리티 공간 디자인 시뮬레이터
"자동차 좌석은 더 이상 고정된 구조가 아니다. 미래의 자동차는 사용자가 디자인하는 이동 공간이 된다."
FlexRide는 자율주행 시대의 차량 내부 공간을 사용자가 직접 설계하고 체험할 수 있는 3D 인터랙티브 시뮬레이터입니다. 소프트 로보틱스 기반 가변 좌석 시스템을 3D로 시각화하고, 공간 모드 전환과 커스텀 배치를 실시간으로 체험할 수 있습니다.
별도 설치 없이 브라우저에서 즉시 실행됩니다.
# 파일을 Chrome 또는 Firefox에서 직접 열기
open flexride-v3.html권장 환경
- Chrome 110+ / Firefox 110+ / Safari 16+
- WebGL 2.0 지원 브라우저
- 1280×768 이상 해상도
| 영역 | 기술 |
|---|---|
| 3D 렌더링 | Three.js r128 (WebGL) |
| 좌석 지오메트리 | 커스텀 BoxGeometry / CylinderGeometry 계층 구조 |
| 바닥 레이캐스팅 | THREE.Raycaster + THREE.Plane |
| 창문 텍스처 | Canvas 2D API로 직접 드로잉 |
| 조명 | AmbientLight + DirectionalLight + PointLight (7개) |
| 애니메이션 | requestAnimationFrame + easeInOutCubic |
| 폰트 | Cormorant Garamond (serif) + Syne (sans) via Google Fonts |
| 스타일 | 순수 CSS (CSS Variables 기반 디자인 시스템) |
좌석 각 관절마다 **발광 액추에이터 노드(초록)**와 공압 튜브가 시각적으로 표현됩니다.
- 모드 전환 시
PNEUMATIC ACTUATORS ENGAGINGHUD 표시 - 좌측 패널에 Pneumatic Pressure / Shape Memory / Actuator Sync / Flex Resistance 실시간 수치 표시
- 천장 골드 글로우 스트립과 언더시트 조명이 박동 애니메이션
각 모드는 탑승 목적에 최적화된 배치 이유를 가지고 있습니다.
| 모드 | 배치 | 설계 이유 |
|---|---|---|
| Lounge | 4좌석 마주보기 + 중앙 테이블 | 대화·카풀·소셜 라이드 최적화 |
| Work | 전방 쌍쌍 배치 + 공유 데스크 | 2–4시간 집중 업무 세션 |
| Cinema | 전방 일렬 + 외측 좌석 경사 | 파노라마 디스플레이 시야각 최적화 |
| Rest | 3좌석 90° 회전 리클라인 | 장거리 수면, 침대형 연속 면 형성 |
모드 전환 시 easeInOutCubic 곡선으로 1.8초 부드러운 변형 애니메이션이 재생됩니다. 변형 중 좌석이 Y축으로 5% 압축되어 공압 작동감을 표현합니다.
사용자가 좌석을 자유롭게 배치할 수 있습니다.
사용법
- 우측 패널 "Enter Custom Design" 클릭
- 좌석 클릭 → 초록색으로 하이라이트 (선택됨)
- 드래그 → 바닥 평면에 레이캐스팅으로 정확한 3D 위치 이동
- 우클릭 → 45° 회전
- 우측 패널 버튼으로 회전, 리클라인, 패브릭 교체
패브릭 컬러 5종
| 이름 | 색상 |
|---|---|
| Deep Violet | #3a2d60 |
| Burgundy | #5a1818 |
| Slate Blue | #1a3040 |
| Forest | #2e3a10 |
| Cognac | #3a2010 |
Canvas 2D API로 직접 그린 5가지 실사 풍경이 창문에 적용됩니다. 환경 선택 시 캐빈 내부 조명 색온도도 함께 변경됩니다.
| 환경 | 풍경 구성 | 조명 톤 |
|---|---|---|
| Coastal Morning | 태양·파도·모래사장·원경 언덕 | 푸른 해양 |
| City Night | 빌딩 실루엣·창문 빛·네온 반사 | 딥 인디고 |
| Mountain Forest | 광선·캐노피·수목 실루엣·이끼 | 딥 그린 |
| Open Space | 성운·토성·별 레이어·밀키웨이 | 딥 스페이스 블루 |
| Golden Dusk | 사막 실루엣·구름·황혼 그라디언트 | 앰버 |
우측 패널 "Activate Hologram" 버튼으로 활성화합니다.
- 골드 그리드 오버레이
- 수직 스캔라인 애니메이션
- 코너 마커 + 워터마크
| 조작 | 동작 |
|---|---|
| 드래그 | 구면 좌표계 기반 오빗 |
| 스크롤 | 줌 인/아웃 (r: 2.8–14) |
| Auto Orbit | 0.13 rad/s 자동 공전 |
| Reset View | 현재 모드 기본 앵글 복귀 |
flexride-v3.html 단일 파일 앱 (HTML + CSS + JS)
README.md 이 문서
모든 코드는 단일 HTML 파일에 인라인으로 포함되어 있으며 외부 의존성은 CDN을 통해 로드됩니다.
외부 의존성
├── Three.js r128 cdnjs.cloudflare.com
└── Google Fonts Cormorant Garamond, Syne
--bg: #03030a /* 배경 */
--panel: #07071a /* 사이드 패널 */
--gold: #d4a840 /* 주요 액센트 */
--gold2: #e8c060 /* 하이라이트 */
--cream: #f2ead8 /* 주요 텍스트 */
--soft-g: #3ae0a0 /* 소프트 로보틱스 */- Cormorant Garamond — 로고, 모드 이름, 주요 헤딩 (luxury serif)
- Syne — UI 레이블, 버튼, 본문 (geometric sans)
기존 자동차 내부 구조는 운전석 / 조수석 / 뒷좌석이라는 고정된 틀에서 벗어나지 못합니다. 자율주행 시대에 이동 시간은 단순한 이동이 아닌 생활 공간이 됩니다.
FlexRide는 소프트 로보틱스 기술을 통해 좌석이 상황에 따라 유기적으로 변형되고, 사용자가 차량 내부를 직접 설계하는 경험을 프로토타이핑합니다.
- AR/VR 헤드셋 연동 (WebXR API)
- 실제 차량 CAN 버스 연결을 통한 물리 좌석 제어
- AI 기반 탑승 패턴 학습 및 자동 공간 추천
- 다중 사용자 실시간 협업 레이아웃 편집
- 충돌 감지 알고리즘 강화 (OBB collision)
- 모바일 터치 제스처 지원
FlexRide — Moving Space, Designed by You