Day 1 |
프로젝트 셋업 + 표지 구조 작업 |
폴더 구조 구성, 기본 HTML/CSS 세팅.hero-text 위한 span 분리하여 텍스트 블러 사전 구현 |
HTML, CSS, JS |
Day 2 |
표지 GSAP 애니메이션 구현 |
Blur → Clear + Y축 이동, 순차(stagger) 등장 완성 |
GSAP, SplitText, .from() 애니 |
Day 3 |
메뉴바 구조 + 애니메이션 |
메뉴 항목 컴포넌트화좌측부터 줄(line) fade-in 애니 |
CSS, GSAP hover, line grow |
Day 4 |
섹션 1 구조 셋업 |
이미지 full-cover 배치텍스트 파트 3개로 나누기 |
HTML, CSS Layout |
Day 5 |
섹션 1 스크롤 애니메이션 |
ScrollTrigger 기반 3단계 텍스트 등장 연출 |
GSAP.timeline |
Day 6 |
섹션 2 구조 + 텍스트 GSAP |
.section-2 텍스트 fade-up 구현 |
GSAP scroll Trigger |
Day 7 |
섹션 2 슬라이드 구성 |
Swiper 슬라이드 초기화스크롤과 연동하여 slideTo() 적용 |
Swiper, ScrollTrigger 연동 |
Day 8 |
섹션 3 구조 + 단계 애니메이션 |
텍스트/desc/이미지 동시 Fade-in 연출 |
GSAP 순차 대응 |
Day 9 |
섹션 6 무한 캐러셀 + 4섹션 애니 |
loop 슬라이드 완성 + shrik & fade 효과 구현 |
Swiper loop, GSAP scale/opacity |
Day 10 |
반응형 + 최종 디버그 |
1280px 기준 대응, 내용 검토 및 최종 보완, 코드 정리 |
Media Queries, QA |