차량 디자인·3D: 박규태 · 인터랙션 디렉션·웹 개발: RUTTO · McLaren Automotive 비제휴 독립 스터디
이 글은 실차 출시·성능 리뷰가 아니라, 독립 콘셉트 디자인에 인터랙션 웹을 결합한 제작 기록입니다.
자동차 웹사이트에서 스크롤 효과를 많이 쓰는 것만으로는 사용자가 차를 더 잘 이해하게 되지 않습니다. 장면마다 확인할 정보와 다음 행동이 분명해야 합니다. RUTTO가 웹 인터랙션과 프런트엔드를 맡은 McLaren Z1 — The Last Overture는 차량 디자인을 호흡, 실루엣, 공기 흐름의 순서로 읽도록 구성한 독립 디자인 스터디입니다. McLaren Automotive와 제휴하거나 공식 제품을 소개하는 페이지가 아닙니다.
1. 첫 동작은 사용자가 선택하게
페이지 진입 직후 사운드를 자동으로 재생하지 않습니다. 사용자가 ‘Enter with sound’를 눌러야 9초 시네마틱 시퀀스가 시작됩니다. 여기서 쓰인 엔진 레이어는 Z1 실차 녹음이 아니라 가공한 라이브러리 음원입니다. 소리를 켤지 직접 고르게 하고, 연출의 출처도 숨기지 않는 방식입니다.
2. 조형 설명을 스크롤 장면에 연결
‘Lung → Form’ 구간은 폐의 두 엽을 좌우 사이드포드로, 가운데 틈을 엔진 스파인으로 해석한 콘셉트를 보여줍니다. 참조 이미지에서 추상화, 상부 형태, 최종 뷰로 이어지는 과정을 순서대로 배치했습니다. 스크롤은 장식 효과가 아니라 각 단계의 관계를 드러내는 탐색 도구로 사용했습니다.
3. 한 줄을 따라 차체를 읽기
캐릭터 라인 구간에서는 노즈에서 프런트 펜더를 지나 사이드 인테이크와 리어 데크로 이어지는 선을 보여줍니다. 사용자는 한 장의 완성 이미지뿐 아니라 선의 방향과 꺾임이 차체 비례를 어떻게 묶는지 볼 수 있습니다. 설계 해석과 실제 자동차의 공식 사양은 구분해야 하므로, 이 부분은 콘셉트 디자인 설명으로 한정했습니다.
4. 공기 흐름은 ‘콘셉트 단계’라고 표시
흡기·흐름·배출을 노즈, 루프, 사이드 인테이크와 디퓨저 주변의 개념으로 설명하고, CFD 이미지는 콘셉트 단계 스터디로 표시했습니다. 이를 실제 주행 성능이나 양산 차량의 검증 결과처럼 말하지 않습니다. 시각 자료가 설명하는 범위를 정확히 적는 것도 인터랙션의 신뢰도를 만듭니다.
5. 필요한 뷰는 직접 열어 비교
마지막에는 측면·상부·정면·후면·후측면 버튼으로 주요 뷰를 전체 화면에서 열 수 있습니다. 연속 장면을 감상한 뒤에도 사용자가 궁금한 각도를 다시 선택해 형태를 확인할 수 있습니다. 이야기형 시퀀스와 직접 조작하는 뷰어가 한 페이지 안에서 서로 다른 역할을 맡습니다.
제작 역할과 범위
자동차 디자인과 3D 모델링은 박규태가 맡았고, 이지원(RUTTO)은 인터랙션 디렉션과 웹 개발을 맡았습니다. RUTTO의 작업은 웹 경험과 구현이며 차량 원작 디자인·3D 제작이 아닙니다. 본 프로젝트는 독립 디자인 스터디로 McLaren Automotive와 제휴하지 않았습니다.
브랜드 웹사이트나 제품 소개 페이지에서 실제 기능을 어떻게 보여줄지 함께 정리하고 싶다면 RUTTO 프로젝트 문의로 목적, 필요한 인터랙션, 공개 일정만 알려주세요.