📌 SBJ_Archive 크리에이티브 디렉션 아카이브 웹사이트

🔹 프로젝트 개요

• 작업 기간: 2025.12 ~ 2026.01
• 작업 범위: 브랜드 아이덴티티 수립, 인터랙티브 웹 디자인, 풀스택 개발, CMS 구축
• 사용 도구:

Frontend: Next.js, TypeScript, Tailwind CSS

Animation: GSAP, Framer Motion, ScrollTrigger

Backend: Supabase (Auth, DB, RLS), Vercel

Infrastructure: Cloudflare (DNS & Security)

🔹 프로젝트 목적

"예술과 상업의 경계, 그 찰나의 기록 (Where Art Meets Direction)." 방대한 비주얼 작업물을 디지털 공간에 압축했습니다. 단순한 포트폴리오를 넘어, 독창적인 색채 감각과 타이포그래피 실험을 웹 환경에서 재현하며 사용자가 SBJ의 예술적 세계관을 직접 체험할 수 있도록 설계했습니다.

• Artistic Curation: 각 프로젝트가 가진 고유의 분위기를 해치지 않도록 미니멀하면서도 힘 있는 레이아웃 설계.
• Boundaryless Navigation: 정형화된 틀을 벗어나 이미지와 텍스트가 경계 없이 어우러지는 유연한 사용자 경험 제공.

🔹 핵심 기술 및 구현 기능 (Key Technical Features)

• Immersive Multimedia Archive (몰입형 멀티미디어 아카이브)
  • High-Resolution Rendering: 고화질 아트워크와 영상 자산을 성능 저하 없이 렌더링하기 위해 이미지 최적화 및 비디오 스트리밍 파이프라인을 구축했습니다.
  • Adaptive Media Layout: 작품의 비율과 성격에 따라 유동적으로 변화하는 반응형 그리드 시스템을 구현했습니다.
• Advanced Motion Direction (고난도 모션 디렉션)
  • Smooth Scroll & Parallax: Lenis와 GSAP을 결합하여 스크롤 시 시각적 요소들이 부드럽게 흐르는 듯한 감각적인 움직임을 구현했습니다.
  • Typography Interaction: 마우스 움직임이나 스크롤 위치에 따라 변화하는 타이포그래피 모션으로 SBJ 특유의 디자인 스타일을 강조했습니다.
• Scalable Content Architecture (확장 가능한 콘텐츠 구조)
  • Supabase Structured Data: 새로운 프로젝트가 추가될 때마다 자동으로 레이아웃이 최적화되는 동적 DB 구조를 설계했습니다.
  • Vercel Edge Functions: 전 세계 팬들이 어디서든 빠르게 작품을 감상할 수 있도록 에지 가속 기술을 적용했습니다.