플러스프로젝트 배경
1) 문제점 AAA 게임사·엔터테인먼트 브랜드 대상 프리미엄 B2B 스튜디오임에도 기존 사이트는 포트폴리오를 단순 그리드로만 나열해 사운드 디자인·로컬라이제이션·아티스트 매니지먼트가 하나의 신호 체인으로 연결된다는 서사가 전달되지 않았습니다. 스튜디오의 시네마틱 톤이 시각적으로 전달되지 않아 리드 유입 후 '우리가 무엇을 하는 회사인가'를 반복 설명하는 초기 전환 비용이 누적되고 있었습니다.
프로젝트 성과
전 기기 스크롤텔링 60fps 달성
iOS 저사양 기기에서 22fps로 떨어지던 Three.js 파티클을 3단 렌더링 계층
(Three.js → Canvas 2D → 정적 프레임)으로 재설계해 모든 디바이스에서 60fps 회복.
(Three.js → Canvas 2D → 정적 프레임)으로 재설계해 모든 디바이스에서 60fps 회복.
prefers-reduced-motion 100% 준수
Lenis·GSAP scrub·Three.js RAF·파티클·커서 트레일 전 컴포넌트에 reduced-motion
분기를 상수로 적용. 애니메이션 전면 정지 후에도 모든 내러티브 비트 열람 가능.
분기를 상수로 적용. 애니메이션 전면 정지 후에도 모든 내러티브 비트 열람 가능.
20+ 컴포넌트 · 디자인 시스템
6개 섹션 + work/[slug] 동적 라우팅 + DESIGN.md(9개 섹션, 도·돈트 포함)를
Next.js 15 App Router + React 19 + Tailwind v4 최신 스택으로 단독 완성
Next.js 15 App Router + React 19 + Tailwind v4 최신 스택으로 단독 완성
핵심 기능
4-Beat 스크롤텔링 스테이지
스크롤 한 동작으로 4개 브랜드 메시지가 타이포·3D 파형·웨이브폼을 동기화해
크로스페이드. 사운드 스튜디오의 서사를 텍스트 없이 체험으로 전달.
크로스페이드. 사운드 스튜디오의 서사를 텍스트 없이 체험으로 전달.
진행 단계
기획 및 방향 수립
2026.04.
ElevenLabs 벤치마킹, 3가지 구현 방식(정적 그리드/영상 배경/스크롤텔링) 검토.
스크롤텔링 스테이지를 최종 채택하고 컨셉·타이포·컬러 시스템 방향 확정.
스크롤텔링 스테이지를 최종 채택하고 컨셉·타이포·컬러 시스템 방향 확정.
프로젝트 상세
1) 포트폴리오 소개 글로벌 사운드·로컬라이제이션·아티스트 매니지먼트 스튜디오 SOUNDSTAGE의 B2B 기업 웹사이트입니다. Three.js 파티클, GSAP 스크롤 핀, Lenis 스무스 스크롤을 결합한 스크롤텔링 스테이지로 '소리의 무게감'을 시각적으로 전달합니다. Lighthouse Performance 데스크톱 92+, 모바일 85+, 전 기기 60fps를 달성했으며, prefers-r
