2026.03 - 진행 중
Portfolio
웹 애니메이션과 최신 프론트엔드 기술을 활용해 사용자의 시선을 이끄는 인터랙티브 포트폴리오를 구축했습니다.
역할
1인 기획, 디자인 및 프론트엔드 개발
기술
Next.js / TypeScript / Tailwind CSS / Framer Motion
문제 상황
단순한 이력 나열식 포트폴리오는 개발자로서의 인터랙션 구현 능력이나 UI/UX에 대한 고민을 직관적으로 어필하기 어려웠습니다.
해결 방식
깊이감 있는 스크롤 오버랩 효과와 동적인 컴포넌트를 설계해 기술적 전문성을 시각적으로 체감할 수 있도록 구성했습니다.
구현 포인트
- Framer Motion의 useScroll과 useTransform을 결합해 성능 저하 없이 동작하는 스크롤 오버랩 애니메이션을 구현했습니다.
- SSR과 CSR 간 hydration mismatch를 줄이기 위해 테마와 애니메이션 초기 렌더 시점을 분리했습니다.
- 모바일 스크롤 구조와 데스크톱 고정 사이드바 레이아웃을 분리해 반응형 구조를 안정적으로 유지했습니다.
트러블슈팅
초기 섹션 고정에 CSS sticky를 사용했으나 macOS Safari의 오버스크롤 환경에서 레이아웃이 분리되는 현상이 있었습니다. 이를 사이드바 고정 구조로 리팩토링해 뷰포트 스크롤 안정성을 확보했습니다.