Next.js와 TypeScript로 개발한 웹 포트폴리오
나의 포트폴리오 사이트 제작 프로젝트
목차
01Framer Motion & GSAP 인터랙션
컨베이어 벨트 히어로 슬라이드
Framer Motion의 animate API와 CSS transform을 조합해 기술 스택 아이템이 끊김 없이 좌우로 흐르는 무한 루프 슬라이드를 구현했습니다. 두 세트를 연속 배치해 이음매가 보이지 않도록 처리했습니다.
GSAP ScrollTrigger 섹션 등장 애니메이션
각 섹션 진입 시점에 GSAP ScrollTrigger를 사용해 요소가 아래에서 위로 fade-in 되도록 구성했습니다. 핵심역량 카드는 stagger 옵션으로 순차 등장 효과를 주어 시선 흐름을 자연스럽게 유도했습니다.
마이크로 인터랙션
프로젝트 카드 hover 시 Framer Motion whileHover로 scale 전환을 적용하고, 아코디언 카드는 flex 너비를 애니메이션해 콘텐츠가 자연스럽게 펼쳐지도록 구현했습니다. 스크롤 버튼에는 무한 bouncing 효과를 추가해 액션 유도를 강화했습니다.
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
이 프로젝트는 2024.04~ 동안 진행되었으며 100% 기여도로 참여했습니다. 주요 기술 스택으로는 Next.js, TypeScript, Tailwind CSS, Framer Motion를 사용했습니다.