플러스프로젝트 배경
제조·로봇 기업 홈페이지에서 제품을 사진 몇 장으로만 보여주면 구조와 크기감이 전달되지 않습니다. 방문자가 제품 영상을 보고, 스크롤에 따라 카메라가 로봇 전체에서 관절과 그리퍼로 다가가는 입체 시점을 직접 조작하며 살펴보도록 하나의 페이지로 구현했습니다.
프로젝트 성과
제품 영상에서 3D 탐색과 라인업까지 한 흐름으로 구현
2560×1440 렌더 영상, 스크롤 연동 3D 카메라(전체·관절·그리퍼, 좌우 회전), 확대 디테일, 제품 필터·상세, 활용 분야 탭을 구현하고 6개 화면 크기 검사를 통과했습니다.
핵심 기능
제품 영상 오프닝
직접 렌더링한 6초 제품 영상이 첫 화면에서 재생됩니다. 자동 재생·일시정지·반복, 화면 밖 정지, 동작 줄이기 설정에서는 정지 이미지로 대체합니다.
진행 단계
설계 렌더링 구현 자동 검증
2026.09.
화면 리듬(밝은 영상 → 어두운 3D 무대 → 디테일)을 정한 뒤 Blender로 렌더링하고 React·Three.js로 스크롤 3D 씬을 구현, Playwright로 6개 화면 크기를 자동 검사했습니다.
프로젝트 상세
산업용 로봇팔과 그리퍼를 소개하는 제품 홈페이지 콘셉트입니다. 첫 화면의 제품 영상에서 시작해 스크롤에 따라 카메라가 로봇 전체 → 관절 → 그리퍼로 다가가는 3D 탐색, 확대 디테일, 제품 라인업·활용 분야·FAQ로 이어집니다. 주요 화면은 위의 ‘핵심 기능’에서 설명과 실행 화면을 함께 확인할 수 있습니다. 체험 주소 https://kinet-cinematic.vercel.app 담당 범위
