GSAP, Next.js, pnpm을 사용한 애니메이션 포트폴리오 만들기

Source: Dev.to

왜 이 스택을 선택했나요?

• Next.js – 서버 + 클라이언트 렌더링 및 최신 라우팅
• TypeScript – 안전성과 유지보수성
• GSAP – 타임라인 기반 애니메이션 및 스크롤 인터랙션
• pnpm – 빠른 설치, 디스크 효율성, 그리고 모노레포/워크스페이스 스크립팅

구현한 기능

• GSAP 타임라인 오케스트레이션을 활용한 히어로 텍스트 애니메이션
• GSAP ScrollTrigger를 이용한 스크롤 트리거 섹션
• 손쉬운 업데이트를 위한 모듈형 컴포넌트 구조
• pnpm 워크스페이스를 활용한 워크스페이스 스크립트
• 완전 반응형 및 최적화된 UI

내가 사랑한 pnpm의 장점

• 초고속 의존성 해결
• node_modules 부피 감소
• 워크스페이스 스크립팅으로 프로젝트 구조가 깔끔해짐
• CI/CD 파이프라인에서 향상된 성능

GSAP의 강점

CSS 키프레임 대신 GSAP 타임라인을 사용해 정확한 제어가 가능한 애니메이션을 구성했으며, 복잡한 시퀀스도 손쉽게 구현할 수 있었습니다.

연락처

모션이 풍부한 프론트엔드를 만들고 있는 분들과 연결하고 싶어요! 현재 작업 중인 프로젝트를 알려주세요.

체크아웃: portfolio