Devfolio v2
Next.js + TypeScript + SCSS 기반의 개인 포트폴리오 사이트. GSAP 스크롤 애니메이션, WebP 이미지 최적화, lazy loading, 시맨틱 마크업을 적용하여 Lighthouse 데스크탑 전 항목 100점을 달성한 프로젝트.
프로젝트 소개
- 제작 인원: 1명 (개발, 디자인)
- 제작 기간: 2022.06 — 2022.08
시간이 지나며 쌓인 기술과 역량을 새롭게 정리하기 위해, 기존 Vue 기반 포트폴리오(v1)를 Next.js로 전면 재구축한 프로젝트입니다. 단순히 프레임워크를 바꾸는 것이 아니라, SSR 방식의 SEO 최적화와 성능 최적화를 직접 실험하고 적용하는 것이 핵심 목표였습니다.
v1에서는 Vue SPA 기반으로 인터랙션 구현에 집중했다면, v2에서는 “검색에서 잘 찾히고, 빠르게 로딩되는 사이트”를 만드는 것으로 방향을 전환했습니다.
주요 구현
GSAP 스크롤 애니메이션
스크롤 위치에 따라 섹션별로 시각적 인터랙션을 GSAP으로 구현했습니다. 배경 모션을 위해 ts-particles를 비롯한 여러 라이브러리를 비교·테스트한 뒤, 보여주고자 하는 목적에 가장 부합하는 기술을 선택하여 적용했습니다. 특색 있는 색상이나 UI보다 각 섹션에서 전달하려는 내용이 제대로 보이도록 UI를 구성하는 데 집중했습니다.
이미지 최적화 & 성능
- 반응형 이미지: 화면 사이즈에 맞는 이미지를 제공하고, 압축률이 높은 WebP 포맷을 적용하여 로딩 속도를 개선
- Lazy Loading: 화면에 보이지 않는 영역의 이미지는 지연 로딩하여, 렌더링 완료 후 사용자가 화면을 볼 수 있기까지의 시간을 단축
- 번들 최적화: Production 빌드 시 source map 제거, 트리셰이킹을 적용하여 번들 사이즈 최소화
접근성 & 시맨틱 마크업
<li> 태그의 올바른 사용 위치, <html> 태그의 lang 속성, 이미지의 alt 속성 등 웹 접근성을 최대한 고려하여 제작했습니다. 데스크탑뿐 아니라 태블릿, 모바일에서도 동일한 모션과 레이아웃을 제공하도록 반응형으로 설계하고, 브라우저나 기기, OS에 따라 화면이 달라지지 않도록 크로스 브라우저 테스트를 진행했습니다.
Lighthouse 전 항목 100점 달성
위의 최적화를 종합 적용한 결과, Lighthouse 분석에서 데스크탑 기준 성능·접근성·권장사항·검색엔진 최적화 모든 항목 100점을 달성했습니다. 모바일에서도 최소 95점에서 최대 99점까지의 점수를 기록했습니다.
스프린트 방식 개발
페이지 내 보이는 부분을 섹션 단위로 나누어 스프린트 방식으로 개발했습니다. 각 섹션 개발이 완료된 이후에도 GitHub Issues와 Projects를 활용해 추가 이슈 사항을 지속적으로 체크하고 버전 관리를 진행했습니다.
배운 점
- Next.js의 SSR 방식과 hydration 동작 원리를 이해하고 실제 서비스에 적용할 수 있게 되었습니다.
- 이미지 포맷, 로딩 전략, 번들 최적화를 직접 실험하며 성능 지표를 체감 수준으로 개선하는 경험을 쌓았습니다.
- ts-particles 등 여러 라이브러리를 비교·테스트하며 목적에 맞는 기술을 선택하는 판단력을 길렀습니다.
지금 돌아보면
당시에는 이미지 최적화를 수동으로 처리(WebP 변환, 사이즈별 분기)했지만, 지금이라면 빌드 파이프라인에서 자동화하고 CDN 캐싱 전략까지 포함하는 방향으로 설계할 것입니다. 이 프로젝트에서 직접 경험한 SEO·성능 최적화 노하우는 이후 실무에서 구조화 데이터, 테크니컬 SEO, 페이지 성능 개선 업무로 자연스럽게 확장되었고, 현재 Astro 기반의 v3(이 사이트)를 선택한 근거이기도 합니다. v1에서 인터랙션 기본기를 다지고, v2에서 성능·SEO를 경험한 흐름이 자연스럽게 “콘텐츠 중심의 정적 사이트”인 Astro로 이어졌습니다.