React, GSAP 및 Tailwind v4로 프리미엄 벤또 스타일 포트폴리오 만들기

Source: Dev.to

포트폴리오를 만드는 것은 일종의 통과 의식이지만, 나는 정적인 이력서보다 OS 대시보드 같은 느낌을 주는 것을 원했다. 최신 디자인 트렌드를 탐색한 뒤, 벤토 스타일 그리드를 구축하기로 결정했으며, 이는 살아있고 반응형이며 데이터 기반이다.

🎨 디자인: “벤토” 철학

벤토 그리드(Apple의 홍보 자료에서 영감받음)는 정보를 고밀도로 배치하면서도 복잡해 보이지 않게 해준다. 각 카드마다 고유한 목적이 있다:

• 프로필 카드 – 간단한 “안녕”.
• 동적 통계 – 실시간 뷰어 수와 GitHub 메트릭.
• 경력·학력 – 구조화된 타임라인.
• 프로젝트 – 작업을 보여주는 세련된 캐러셀.

🛠️ 기술 스택

• 프론트엔드: React 19 + TypeScript (타입 안전성을 위해).
• 스타일링: Tailwind CSS (새로운 v4 기능을 활용한 깔끔한 변수 처리).
• 애니메이션: GSAP (GreenSock)으로 부드러운 진입 전환 구현.
• 아이콘: Lucide‑React (일관되고 가벼움).
• 데이터 연동: SWR을 사용해 커스텀 API에서 효율적으로 가져오기.

🚀 주요 기술 특징

1. 진입 애니메이션 (GSAP)

카드가 ScrollTrigger와 함께 스케일‑업 효과로 순차적으로 나타나며, 사용자가 스크롤할 때 UI에 “무게감”을 부여한다.

gsap.fromTo(
  ".bento-card",
  { opacity: 0, y: 50, scale: 0.9 },
  {
    opacity: 1,
    y: 0,
    scale: 1,
    stagger: 0.1,
    duration: 0.8,
    ease: "power3.out",
  }
);

2. 최적화된 아이콘 가시성

다크 모드에서는 검은 아이콘(예: GitHub, Express)이 사라질 수 있다. 유틸리티가 이러한 아이콘을 자동으로 감지하고 dark:invert 필터를 적용해 사용자 테마와 관계없이 아이콘이 돋보이게 만든다.

3. “풀스택” 스킬 카드

단순 리스트 대신 스킬을 카테고리(프론트엔드, 백엔드, 도구)별로 정리하고 레이어드 UI를 제공한다:

• 굵은 카테고리 제목과 가로 구분선.
• 깊이를 위한 은은하고 큰 배경 워터마크 텍스트.
• 모든 기술에 대한 고품질 SVG 아이콘.

4. 인터랙티브 소셜 허브

소셜 링크를 인터랙티브 카드 형태로 제공하며 다음을 지원한다:

• Instagram / YouTube / X 연동.
• PDF 링크에 download 속성을 사용해 이력서 직접 다운로드.
• 마우스 오버 시 약간 회전하고 스케일이 변하는 상태로 그리드에 인터랙티비티 추가.

📈 실시간 데이터 연동

포트폴리오는 커스텀 API 서버와 연결되어:

• 실시간 GitHub 통계(별, 레포지토리, 커밋)와 프로젝트 레포지토리를 가져온다.
• 로컬 스토리지에 저장된 방문자‑ID 시스템을 이용해 고유 뷰어와 좋아요를 추적한다.

🔗 링크

실제 데모:

벤토 포트폴리오가 방금 공개되었습니다 👀.