← 포트폴리오 목록
모델 에이전시 인터렉티브 쇼케이스
본 프로젝트의 요구사항인 배경영상 자동재생, 스크롤 페이드, 호버 애니메이션과 비동기 포트폴리오 필터링을 기반으로 직접 구현한 프로젝트입니다.
GSAP 기반 스크롤 인터랙션 엔진 구현ScrollTrigger로 섹션별 페이드/트랜스폼 타임라인을 설계하고, poster 이미지 우선 로딩으로 초기 렌더링을 최적화하는 구조를 구축합니다
비동기 필터·모달 상세 뷰 아키텍처 설계React Query 캐싱과 URL 상태 동기화, Portal 기반 모달 스택 관리로 다수 카테고리 간 매끄러운 전환 구조를 설계합니다
헤드리스 CMS 콘텐츠 스키마 설계포스트·포트폴리오·모델 프로필을 분리한 콘텐츠 모델과 노출 토글 필드를 Prisma 스키마로 정의합니다
Overview
프로젝트 개요
본 프로젝트의 요구사항인 배경영상 자동재생, 스크롤 페이드, 호버 애니메이션과 비동기 포트폴리오 필터링을 기반으로 직접 구현한 프로젝트입니다. 모델 매니지먼트 에이전시의 화보·광고 콘텐츠를 소개하는 인터렉티브 웹사이트와, 비개발자도 다룰 수 있는 CMS 관리자 화면을 시각적 완성도를 최우선으로 삼아 함께 구현합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
다수의 배경 영상·이미지 자산이 동시에 로드되는 메인 페이지에서 초기 렌더링 지연 리스크
lazy 로딩과 poster 이미지 우선 렌더링으로 대응합니다
브라우저별 GSAP 트랜지션 및 hover 인터랙션 호환성 편차 리스크
transform 기반 GPU 가속과 폴백 트랜지션으로 대응합니다
비개발자인 에이전시 담당자가 직접 콘텐츠 노출 상태를 전환할 때 실수할 리스크
변경 전 미리보기와 되돌리기 이력을 제공하는 구조로 대응합니다
영상 업로드 용량이 큰 경우 서버 처리 부하 리스크
클라이언트 사전 용량 검증과 S3 직접 업로드(presigned URL)로 서버 부하를 우회하는 구조로 대응합니다
핵심 기능 1
메인 히어로 인터렉티브 연출
전체 화면 배경에 영상을 자동 재생하고, 스크롤에 반응해 헤드라인과 서브 텍스트가 순차적으로 페이드인/아웃되는 인터렉티브 히어로를 구현합니다
핵심 기능 2
포트폴리오 갤러리 & 비동기 필터링
모델·광고 캠페인 포트폴리오를 썸네일 그리드로 배열하고, 클릭 시 상세 이미지·영상이 담긴 모달을 열며, 카테고리 필터 클릭 시 새로고침 없이 목록을 비동기로 재정렬합니다
핵심 기능 3
CMS 콘텐츠 관리
등록된 기사·포트폴리오 콘텐츠 목록을 관리자가 조회하고, 노출 여부를 토글 버튼으로 전환하며, 개별 콘텐츠를 수정·삭제할 수 있는 CMS 관리 화면을 구현합니다
핵심 기능 4
콘텐츠 에디터 & 파일 업로드
텍스트·이미지·영상 콘텐츠를 등록하는 에디터를 제공하고, 메인 배경 영상 교체 시 파일 업로드와 용량 제한 초과 알림을 구현합니다
구현 과정
프로젝트 진행 단계
STEP 1
요구사항 분석 및 콘텐츠 모델 설계
인터렉티브 사이트·CMS 구조 분석, Prisma 스키마 12개 테이블 정의 및 노출 상태 필드 설계
STEP 2
인터렉티브 프론트엔드 개발
GSAP·Framer Motion 기반 히어로/갤러리/모달 UI 구현, 반응형 레이아웃 적용
STEP 3
CMS 관리자 백엔드 및 에디터 개발
Express API 엔드포인트 구현, Tiptap 에디터와 파일 업로드 파이프라인 연동
STEP 4
통합 테스트 및 성능 최적화
영상 lazy 로딩, 크로스 브라우저 애니메이션 검증, API-프론트 통합 테스트 수행
프로젝트 성과
GSAP 기반 스크롤 인터랙션 엔진 구현ScrollTrigger로 섹션별 페이드/트랜스폼 타임라인을 설계하고, poster 이미지 우선 로딩으로 초기 렌더링을 최적화하는 구조를 구축합니다
비동기 필터·모달 상세 뷰 아키텍처 설계React Query 캐싱과 URL 상태 동기화, Portal 기반 모달 스택 관리로 다수 카테고리 간 매끄러운 전환 구조를 설계합니다
헤드리스 CMS 콘텐츠 스키마 설계포스트·포트폴리오·모델 프로필을 분리한 콘텐츠 모델과 노출 토글 필드를 Prisma 스키마로 정의합니다
대용량 미디어 업로드 파이프라인 구현Multer + S3 presigned URL로 영상/이미지 업로드를 처리하고, 클라이언트 사전 검증으로 업로드 실패를 방지하는 구조를 설계합니다
Review
기술적 주안점
- GSAP와 Framer Motion을 조합해 배경영상·스크롤 페이드·페이지 전환을 하나의 인터렉티브 애니메이션 시스템으로 설계합니다
- 비동기 카테고리 필터링과 hover 인터랙션을 결합해 새로고침 없는 매끄러운 탐색 경험을 구현합니다
- 낙관적 UI와 역할 기반 접근 제어를 결합해 비개발자도 안전하게 콘텐츠를 다룰 수 있는 CMS 화면을 구현합니다
