브랜드 모션280,000원
수강 신청이런 경험, 있지 않나요?
GSAP 기초는 배웠는데 실전 프로모션 사이트를 못 만든다
스크롤 기반 스토리텔링을 어떻게 설계하는지 모르겠다
모션 외주가 들어와도 '못 합니다'라고 답하고 있다
Apple, Nike 같은 사이트를 보면서 '나도 만들어보고 싶다' 생각만 한다
같은 AI를 써도, 결과가 달라집니다
GSAP 기초만 아는 상태 — 실전 사이트는 못 만든다
브랜드 프로모션 사이트를 혼자 기획하고 완성
모션 외주 → '못 합니다' → 단가 50만원 정체
풀 모션 프로모션 납품 → 단가 300만원
Apple 사이트 모션 → '대체 이걸 어떻게 만들지?'
레퍼런스 분석 → 스토리보드 → 구현까지 자신감
이런 것을 배웁니다
Apple 사이트 스크롤 모션, 직접 만들어봤나요?
스크롤하면 제품이 회전하고, 텍스트가 한 글자씩 등장하고, 배경이 전환되는 그 모션. 보기만 하던 걸 이제 직접 만듭니다.
스크롤만으로 브랜드의 이야기를 전달합니다
버튼을 누르지 않아도, 스크롤하는 것만으로 브랜드의 메시지가 전달되는 경험. 스토리보드 설계부터 모션 시나리오까지 전 과정을 배웁니다.
글자가 한 글자씩 등장하는 텍스트 모션
SplitText로 글자/단어/줄 단위로 분리하고, 시간차를 두고 등장시키는 프리미엄 텍스트 모션. 브랜드 사이트의 첫인상을 결정짓는 기술입니다.
커서가 따라오고, 버튼이 끌려오는 인터랙션
마우스를 올리면 이미지가 일그러지고, 버튼이 자석처럼 끌려오고, 커스텀 커서가 따라옵니다. 사용자가 '놀고 싶어지는' 사이트를 만드세요.
스크롤에 맞춰 소리가 나고, 영상이 재생됩니다
스크롤 위치에 따라 효과음이 나오고, 비디오가 자동 재생되는 멀티미디어 연동. 시각을 넘어 청각까지 — 몰입감의 차원이 달라집니다.
모션 외주 단가, 50만원에서 300만원으로
정적 사이트만 만들 수 있는 퍼블리셔와, 풀 모션 프로모션을 납품할 수 있는 퍼블리셔의 단가 차이. 이 강의 하나가 그 차이를 만듭니다.
커리큘럼
총 5개 파트 · 30강
00. 모션 기획 & 스토리보드
1모션 기획의 기본 — 목적, 타겟, 메시지 정의
무료15:00
2스토리보드 작성 — 섹션별 모션 시나리오
무료18:00
3레퍼런스 분석 — Apple, Nike 사이트 모션 해부
무료18:00
4모션 타이밍 설계 — ease, duration, delay 전략
무료15:00
5프로젝트 구조 세팅 — Next.js + GSAP 최적 설정
12:00
6에셋 준비 — 이미지, 비디오, 폰트 최적화
12:00
01. GSAP 심화
7복합 타임라인 — 중첩 시퀀스 설계
18:00
8ScrollTrigger 심화 — scrub, pin, snap 조합
20:00
9SplitText 심화 — 글자/단어/줄 단위 모션
18:00
10SVG 애니메이션 — 패스 드로잉, 모핑
15:00
113D 변환 — perspective, rotateY로 입체감
15:00
12커스텀 ease — 브랜드만의 모션 곡선 설계
12:00
02. 풀페이지 스크롤 사이트
13히어로 섹션 — 임팩트 있는 첫 화면 모션
22:00
14제품 소개 섹션 — 스크롤 연동 이미지 시퀀스
22:00
15스토리 섹션 — 텍스트 + 비주얼 교차 모션
20:00
16갤러리 섹션 — 가로 스크롤 + 패럴랙스
18:00
17CTA 섹션 — 마그네틱 버튼 + 마우스 인터랙션
15:00
18프리로더 — 브랜드 진입 모션
12:00
03. 인터랙티브 & 사운드
19마우스 추적 커서 — 커스텀 커서 효과
15:00
20호버 인터랙션 — 이미지 디스토션, 마그네틱
18:00
21사운드 연동 — 스크롤/클릭 사운드 이펙트
18:00
22비디오 연동 — 스크롤 기반 비디오 제어
15:00
23페이지 전환 — exit → enter 트랜지션
18:00
24패럴랙스 심화 — 깊이감 있는 레이어 분리
12:00
04. 최적화 & 배포
25성능 최적화 — will-change, GPU 가속, 디바운스
15:00
26모바일 최적화 — 터치 이벤트, 모션 줄이기
15:00
27접근성 — prefers-reduced-motion 대응
12:00
28반응형 모션 — 뷰포트별 타이밍 분기
12:00
29배포 + 포트폴리오 정리
12:00
30마무리 — 프로모션 사이트 수주 전략
10:00