Introduction
Interactive
Portfolio
+ Blog CMS

GSAP ScrollTrigger를 활용한 스크롤 기반 인터랙션과 Neon PostgreSQL + Vercel Blob 기반의 마크다운 블로그 CMS를 결합한 웹 애플리케이션입니다.

Next.js App Router와 ISR(Incremental Static Regeneration) 전략으로 정적 사이트의 성능과 동적 콘텐츠 관리의 편의성을 동시에 제공합니다.

INTERACTIVE · PORTFOLIO · BLOG · CMS · NEXT.JS · GSAP · INTERACTIVE · PORTFOLIO · BLOG · CMS · NEXT.JS · GSAP ·
  • Interactive

  • Database

  • Storage

  • ISR Caching

  • SEO

  • Migration

01/06

레주메 페이지(/)는 GSAP ScrollTrigger 기반 시네마틱 스크롤 연출로 구성되어 있습니다. Lenis 스무스 스크롤과 정교하게 조율된 easing curve(power3.out, expo.out)가 "빠른 진입, 긴 여운" 모션 철학을 구현하며, 각 섹션이 자연스럽게 전환됩니다.

prefers-reduced-motion 설정을 감지하여 모션을 최소화하고, 모바일에서는 성능 최적화를 위해 과도한 blur와 shadow를 제거합니다.

서버리스 환경에 최적화된 연결 풀링과 자동 스케일링을 제공합니다.

content_md(마크다운 원문)와 content_text(검색용 텍스트)를 분리 저장하여 검색 인덱싱 성능 최적화. 마크다운 문법을 제거한 순수 텍스트로 변환하여 빠른 전문 검색을 지원합니다.

CDN 기반 이미지 전송과 자동 최적화를 제공합니다.

Hero 이미지와 본문 이미지를 구조화된 경로로 관리하며, Admin에서 업로드 시 서버 API를 경유하여 보안을 강화합니다. 글 삭제 시 연관된 이미지도 자동으로 정리됩니다.

Incremental Static Regeneration을 통한 정적 사이트의 성능과 동적 콘텐츠의 최신성을 동시에 달성합니다. 모든 블로그 페이지를 빌드 타임에 정적 생성하고, revalidatePath를 통한 On-Demand 캐시 무효화로 글 생성/수정/삭제 시 /blog, /blog/[slug], /sitemap.xml을 자동으로 재생성합니다.

post:{slug}, posts:list를 활용하여 세밀한 캐시 제어. 글 발행 시 해당 slug와 리스트 페이지만 선택적으로 무효화하여 불필요한 재생성을 방지합니다.

sitemap.ts로 동적 생성. 글 생성/수정/삭제 시 revalidatePath로 sitemap.xml도 자동 업데이트. lastModified 포함하여 검색엔진에 최신 정보 제공.

robots.ts로 크롤링 규칙 설정. /admin, /api 차단하여 불필요한 크롤링 방지. sitemap.xml 위치 명시로 검색엔진 인덱싱 최적화.

Meta Tags: OpenGraph, Twitter Card, Canonical URL / JSON-LD: Person, Blog, BlogPosting, ItemList, BreadcrumbList

Velog에서 작성한 모든 글을 자동으로 마이그레이션하는 스크립트입니다. GraphQL API를 활용하여 username만으로 전체 글을 가져오며, 마크다운 본문에 포함된 이미지를 자동으로 Vercel Blob에 업로드하고 URL을 교체합니다.

원본 발행일 보존으로 SEO 연속성을 확보하고, slug 중복 체크로 이미 마이그레이션된 글은 자동으로 건너뛰며, 태그, 썸네일, 조회수 등 메타데이터를 완전히 보존합니다.

Skills

Next.jsReactTypeScriptSCSSHTML5CSS3GSAPScrollTriggerFramer MotionLenisNeon PostgreSQLVercelVercel BlobServerlessGitReact MarkdownZodESLintVitest
0
Lighthouse ScorePerformance · Accessibility · Best Practices · SEO

Homepage

Blog List

Blog Post