극한 효율성: 내 포트폴리오의 테크 분석

Source: Dev.to

기술 스택

이 프로젝트는 속도와 개발자 경험을 위해 설계된 현대적이고 고성능의 React 스택으로 구축되었습니다.

• 핵심 프레임워크: React 18
• 언어: TypeScript (타입 안전성과 향상된 개발자 도구를 위해)
• 빌드 도구: Vite (번개처럼 빠른 개발 서버 시작 및 최적화된 빌드)
• 스타일링: Tailwind CSS v4 (새로운 실험적 v4 또는 최신 v3 기능을 사용한 유틸리티 퍼스트 스타일링)
• 아이콘: Lucide React (깨끗하고 일관된 SVG 아이콘)

디자인 시스템: 네오브루탈리즘

시각적 스타일은 네오브루탈리즘 디자인 트렌드를 따르며, 다음과 같은 특징이 있습니다:

• 고대비: 선명한 색상에 대비되는 강렬한 검은 테두리(border-2 또는 border-4).
• 대담한 색상: Tailwind 설정에 정의된 맞춤 팔레트:
  • neo-blue
  • neo-green
  • neo-yellow
  • neo-pink
  • neo-black (매우 어두운 회색/검정)
  • neo-offwhite
• 오프셋 그림자: 흐릿하지 않은 강한 그림자(예: box-shadow: 4px 4px 0px 0px #000;)를 사용해 “스티커” 혹은 “겹친 종이” 같은 느낌을 줍니다.
  구현 예시: shadow-neo와 같은 클래스를 사용하면 위 그림자를 적용할 수 있습니다.

애니메이션 및 인터랙티브

사이트는 애니메이션 라이브러리와 CSS 기법을 혼합해 살아있는 느낌을 줍니다.

Framer Motion

framer-motion을 통해 포함된 이 라이브러리는 복잡한 입장 애니메이션과 상태 전환을 담당합니다.

Hero 섹션 – 텍스트 요소와 히어로 이미지가 motion.div를 사용해 슬라이드 인 및 위로 페이드 인됩니다.

스크롤 애니메이션 – 요소들이 스크롤에 따라 나타나며, 보통 whileInView 등 Framer Motion 속성에 의해 트리거됩니다.

React CountUp & Intersection Observers

• Stats 섹션은 react-countup을 사용해 뷰포트에 들어올 때 숫자를 애니메이션합니다(예: “30+ Projects Completed”).
• react-intersection-observer는 숫자가 보이는 시점을 감지해 한 번만 카운트업 애니메이션을 트리거합니다(triggerOnce: true).

CSS Animations

Tailwind를 통해 설정된 표준 CSS 애니메이션이 지속적인 효과에 사용됩니다:

• Pulse – Hero 섹션의 배경 블롭이 animate-pulse를 사용해 부드럽게 페이드 인/아웃합니다.
• Bounce – 장식 요소(예: “HI!” 배지)가 animate-bounce를 사용해 주목을 끕니다.
• Hover 효과 – 버튼과 카드에 transition-all 클래스를 적용해 호버 시 살짝 스냅하거나 움직이며 촉각적인 UI 느낌을 강화합니다.

핵심 컴포넌트

• Hero.tsx – 절대 위치 배경 블롭, 텍스트와 이미지의 그리드 레이아웃, 그리고 입장 애니메이션을 위한 Framer Motion을 레이어링합니다.
• Stats.tsx – 교차 관찰자의 useInView와 CountUp을 통합해 정교한 숫자 애니메이션을 구현합니다.
• ProjectModal.tsx – 높은 z-index를 가진 고정 오버레이와 상태 기반 조건부 렌더링을 사용해 상세 프로젝트 뷰를 처리합니다.

요약

이 포트폴리오는 네오브루탈리즘의 거친 대담한 미학과 현대 React 애니메이션의 부드럽고 정교한 느낌을 결합합니다. 결과적으로 레트로한 외관이면서도 놀라울 정도로 빠르고 반응성이 뛰어난 사이트가 완성됩니다.