포트폴리오 사이트

개요

다수의 지원서류를 검토하시느라 고생하시는 채용 담당자분들의 UX를 고려하였습니다. 피로하고 걸리적거리는 애니메이션은 사용하지 않고 스크롤과 클릭만으로 읽을 수 있도록 구성했습니다.

작업범위

• 폴더 구조 및 네이밍 컨벤션 설계
• 색·타이포그래피 토큰 기반 디자인 시스템 정의 (Tailwind CSS v4)
• 프로젝트 갤러리와 상세 뷰 인터랙션 설계·구현
• Case Study 콘텐츠 작성 파이프라인 구성
• 한글 폰트 서브셋, 이미지 최적화 등 정적 자산 튜닝
• Vercel 배포

설계 포인트

프로젝트 갤러리 카드 UI 인터랙션

처음에는 갤러리 카드가 그대로 늘어나 다이얼로그로 펼쳐지는 framer-motion 레이아웃 애니메이션을 시도했으나 iOS 사파리에서 성능이 따라주지 않았고, 인터랙션 완성도도 기대에 못 미쳤습니다. 모바일 앱 환경에서는 자연스러운 패턴이지만, 웹에서 이 수준을 안정적으로 내기에는 아직 적합하지 않고, 개발 비용이 너무 과도하다고 판단하였습니다.

구현 비용 대비 인터랙션상의 임팩트를 줄 수 있을 것으로 기대되어 vaul 기반 하단 시트로 방향을 바꿨습니다. 확실하게 보장된 동작을 제공하면서, 데스크톱과 태블릿, 모바일 화면에서 각각 어색하지 않은 배경 스타일, 애니메이션을 분기하여 차별점을 주었습니다.

인터셉팅 라우트 시트로 페이지 이탈 최소화

인터셉팅 라우트를 채용하여 페이지 이동을 가로채 하단 시트로 상세를 띄워, 사용자의 맥락 이탈을 줄였습니다. 주소를 직접 열거나 새로고침하면 정적 페이지로 로드되도록 하여 혹시 모를 새로고침으로 다시 카드를 열어야 하는 수고를 줄였습니다.