플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - 다수의 배경 영상·이미지 자산이 동시에 로드되는 메인 페이지에서 초기 렌더링 지연 리스크가 있어, lazy 로딩과 poster 이미지 우선 렌더링으로 대응할 계획입니다 - 브라우저별 GSAP 트랜지션 및 hover 인터랙션 호환성 편차 리스크가 있어, transform 기반 GPU 가속과 폴백 트랜지션으로 대응할 계획입니다 - 비개발자인 에이전시 담당자가 직접 콘텐츠
프로젝트 성과
GSAP 기반 스크롤 인터랙션 엔진 구현
ScrollTrigger로 섹션별 페이드/트랜스폼 타임라인을 설계하고, poster 이미지 우선 로딩으로 초기 렌더링을 최적화하는 구조를 구축합니다
비동기 필터·모달 상세 뷰 아키텍처 설계
React Query 캐싱과 URL 상태 동기화, Portal 기반 모달 스택 관리로 다수 카테고리 간 매끄러운 전환 구조를 설계합니다
헤드리스 CMS 콘텐츠 스키마 설계
포스트·포트폴리오·모델 프로필을 분리한 콘텐츠 모델과 노출 토글 필드를 Prisma 스키마로 정의합니다
대용량 미디어 업로드 파이프라인 구현
Multer + S3 presigned URL로 영상/이미지 업로드를 처리하고, 클라이언트 사전 검증으로 업로드 실패를 방지하는 구조를 설계합니다
핵심 기능
메인 히어로 인터렉티브 연출
전체 화면 배경에 영상을 자동 재생하고, 스크롤에 반응해 헤드라인과 서브 텍스트가 순차적으로 페이드인/아웃되는 인터렉티브 히어로를 구현합니다
진행 단계
요구사항 분석 및 콘텐츠 모델 설계
2026.08
인터렉티브 사이트·CMS 구조 분석, Prisma 스키마 12개 테이블 정의 및 노출 상태 필드 설계
프로젝트 상세
1) 포트폴리오 소개 본 프로젝트의 요구사항인 배경영상 자동재생, 스크롤 페이드, 호버 애니메이션과 비동기 포트폴리오 필터링을 기반으로 직접 구현한 맞춤 데모입니다. 모델 매니지먼트 에이전시의 화보·광고 콘텐츠를 소개하는 인터렉티브 웹사이트와, 비개발자도 다룰 수 있는 CMS 관리자 화면을 시각적 완성도를 최우선으로 삼아 함께 구현합니다. 2) 작업 범위 - 메인 히어로 인터렉티브 연출: 전체 화면
