Next.js와 TypeScript로 개발한 웹 포트폴리오
나의 포트폴리오 사이트 제작 프로젝트
목차
01Framer Motion & GSAP 인터랙션
컨베이어 벨트 히어로 슬라이드
motion의 animate API로 키워드 배열을 4세트 연속 배치한 뒤 x: 0% → -50% 무한 루프를 구현했습니다. 절반만 이동하면 시작점과 동일한 화면이 되기 때문에 이음매 없이 자연스럽게 반복됩니다.
GSAP ScrollTrigger 섹션 등장 애니메이션
About·Projects·Contact 전 섹션에 걸쳐 ScrollTrigger reveal 수치를 duration 0.8s / y 40 / stagger 0.14s / ease power3.out으로 통일해 일관된 속도감을 유지했습니다. Projects 섹션은 gsap.matchMedia로 데스크톱에서만 콘텐츠를 pin 고정해 스크롤로 카드를 탐색하도록 구성하고, 배경 워터마크 텍스트는 scrub으로 스크롤 진행에 따라 fade-in·out 되도록 처리했습니다.
마이크로 인터랙션
히어로 버튼에 whileHover scale, 스크롤 유도 버튼과 프로젝트 슬라이더 인디케이터에 무한 bounce를 적용했습니다. 프로젝트 카드는 spring(stiffness 220 / damping 28)으로 x·scale·opacity·zIndex를 동시에 전환하며, drag="x" 제스처로 스와이프 탐색도 지원합니다. 페이지 전환·라이트박스·토스트 알림은 AnimatePresence로 마운트·언마운트 시 자연스러운 등장·퇴장 효과를 구현했습니다.
02SEO 최적화
Next.js Metadata API
App Router의 정적 metadata 객체로 title, description을 선언해 빌드 타임에 메타 태그가 HTML에 포함되도록 했습니다. 검색 엔진이 JavaScript 실행 없이도 페이지 정보를 읽을 수 있어 인덱싱 품질이 향상됩니다.
시맨틱 HTML 구조
header, main, section, aside, nav 등 의미 있는 태그를 사용해 문서 계층을 명확히 했습니다. heading 레벨(h1 → h2 → h3)을 문서 구조에 맞게 유지해 스크린리더와 크롤러 모두에서 콘텐츠 구조가 올바르게 해석되도록 했습니다.
next/image를 통한 LCP 개선
모든 이미지에 next/image를 적용해 자동 WebP 변환, lazy loading, 적절한 sizes 속성을 통한 반응형 소스 제공으로 Largest Contentful Paint(LCP) 지표를 개선했습니다.
03Tailwind CSS 활용
디자인 토큰 기반 테마 관리
globals.css의 @theme 블록에서 색상, 폰트, 간격을 CSS 변수로 선언하고 Tailwind 유틸리티와 연결했습니다. 라이트/다크 양쪽에서 일관된 디자인을 유지하면서 단일 소스에서 전역 스타일을 제어할 수 있습니다.
다크모드 대응
dark: 변형자를 활용해 모든 컴포넌트에서 라이트/다크 전환을 선언적으로 처리했습니다. ThemeProvider로 시스템 설정을 감지해 초기 flicker 없이 테마가 적용됩니다.
반응형 모바일 퍼스트 레이아웃
sm, md, lg 브레이크포인트를 기준으로 모바일 퍼스트 방식으로 레이아웃을 구성했습니다. 그리드 컬럼, 패딩, 폰트 크기를 뷰포트별로 세분화해 다양한 디바이스에서 일관된 사용자 경험을 제공합니다.
Project Visuals
framer-motion으로 컨베이어 벨트로 스타일링한 메인 화면 입니다. 다크모드를 지원하고 반응형을 대응합니다.
GSAP 스크롤 애니메이션을 이용하여 페이지에 부드러운 전환 효과를 주었습니다.
Project Overview
이 프로젝트는 2026.04~ 동안 진행되었으며 100% 기여도로 참여했습니다. 주요 기술 스택으로는 Next.js, TypeScript, Tailwind CSS, Framer Motion를 사용했습니다.