플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - 영상 스크럽 구현 시 currentTime 변경이 seek 버퍼링을 유발할 수 있으므로, 영상을 WebM 포맷으로 최적화하고 preload='auto'로 전체 버퍼링 후 scrub을 시작하는 로딩 전략을 적용할 예정입니다. - Three.js InstancedMesh 씬에서 모바일 GPU 한계를 고려해 디바이스 픽셀 비율과 성능 점수(navigator.hardwareCo
프로젝트 성과
HTML5 video scrub 프레임 정밀 제어
video.currentTime 직접 조작 시 브라우저별 프레임 드랍 차이가 발생할 수 있으므로, requestVideoFrameCallback으로 프레임 동기화를 보정하는 방식을 적용할 예정입니다.
네온 글로우 퍼포먼스 최적화
CSS box-shadow 다층 글로우는 모바일에서 repaint 비용이 크므로, filter: drop-shadow로 대체하고 GPU 레이어를 분리하는 will-change 전략을 적용할 계획입니다.
CSS 네온 글로우 GPU 최적화 전략
CSS box-shadow 다층 글로우의 모바일 repaint 비용을 줄이기 위해 filter: drop-shadow + will-change: filter를 적용하고
Three.js InstancedMesh 씬 전환 아키텍처
InstancedMesh 기반 게임 월드 씬에서 GSAP camera position 보간으로 게임 타이틀 선택 시 해당 세계관으로 시점이 부드럽게 이동하는 전환 효과를 설계할 계획입니다.
핵심 기능
영상 스크럽 히어로
스크롤 진행에 따라 게임 트레일러 영상이 프레임 단위로 재생되는 풀스크린 히어로를 구현합니다
진행 단계
인터랙티브 UX 기획 및 스토리보드
2026.04
영상 스크럽 타이밍 설계, 게임 라인업 데이터 구조 정의, 씬 전환 흐름 설계
프로젝트 상세
1) 포트폴리오 소개 게임 스튜디오의 신작 라인업을 스크롤텔링으로 소개하는 인터랙티브 홍보 웹사이트를 구현합니다. GSAP 기반 영상 스크럽 인터랙션과 Three.js 게임 월드 프리뷰 씬을 적용하여 게이밍 분위기의 몰입형 경험을 제공할 예정입니다. 2) 작업 범위 - 영상 스크럽 히어로: 스크롤 진행에 따라 게임 트레일러 영상이 프레임 단위로 재생되는 풀스크린 히어로를 구현합니다. - 게임 라인업
