2026Archive
SBJ Archive
설명
Creative Direction Archive
기간
Dec 2025 - Jan 2026
역할
- UX/UI 디자인: 아티스트의 아이덴티티를 시각화하는 대담하고 실험적인 웹 인터페이스 디자인.
- 풀스택 개발: 고성능 Next.js 클라이언트 및 작품 데이터 관리 백엔드 구축.
- 모션 그래픽 개발: GSAP를 활용한 페이지 전환 및 인터랙티브 모션 요소 개발.
- 성능 최적화: 대용량 비주얼 에셋 로딩 속도 최적화 및 기술 SEO 설정.
기술
Frontend
Next.js · TypeScript · Tailwind CSS
Animation
GSAP · Framer Motion · Lenis
Backend
Supabase · Vercel
Infrastructure
Cloudflare
프로젝트 목적
"예술과 디렉션이 만나는 곳." The 1975, Wolf Alice 등 세계적인 아티스트와 협업한 Samuel Burgess-Johnson의 방대한 비주얼 작업을 디지털 공간으로 압축했습니다. 단순한 포트폴리오를 넘어, 그의 독특한 색채 감각과 타이포그래피 실험을 웹 환경에서 재현하여 사용자가 SBJ의 예술적 세계관을 직접 체험할 수 있도록 설계했습니다. • 예술적 큐레이션: 각 프로젝트의 고유한 분위기를 해치지 않는 미니멀하면서도 강렬한 레이아웃을 설계했습니다. • 경계 없는 내비게이션: 이미지와 텍스트가 딱딱한 프레임 없이 자연스럽게 어우러지는 유연한 사용자 경험을 제공합니다.
범위
- · 브랜드 아이덴티티 확립
- · 인터랙티브 웹 디자인
- · 풀스택 개발
- · CMS 구축
주요 기술 특징
몰입형 멀티미디어 아카이브
- · 성능 저하 없이 고해상도 작품과 영상 에셋을 렌더링하는 이미지 최적화 및 비디오 스트리밍 파이프라인 구축.
- · 각 작품의 비율과 특성에 따라 레이아웃이 유연하게 변하는 반응형 그리드의 적응형 미디어 레이아웃 시스템 구현.
고급 모션 디렉션
- · Lenis와 GSAP를 결합해 스크롤 중 부드럽고 흐르는 듯한 시각적 움직임 구현.
- · 마우스 움직임이나 스크롤 위치에 따라 변화하는 타이포그래피 모션으로 SBJ의 독특한 디자인 스타일을 강조.
확장 가능한 콘텐츠 아키텍처
- · Supabase 구조화 데이터로 새 프로젝트 추가 시 레이아웃이 자동 최적화되는 동적 데이터베이스 구조 설계.
- · Vercel Edge Functions 적용으로 전 세계 팬들이 어디서든 빠르게 작품을 감상할 수 있도록 구현.
디자인 포인트
볼드 타이포그래피
굵고 과감한 폰트로 시각적 임팩트를 연출하고, 무채색 배경을 채택해 각 작품의 개성을 부각했습니다.
비주얼 스토리텔링
사용자가 스크롤할수록 작품의 비하인드 스토리나 초기 스케치가 점차 드러나는 디렉션으로 깊은 감상을 유도했습니다.
미니멀리스트 인터페이스
모든 UI 요소를 최소화해 사용자가 오롯이 비주얼 아트워크 자체에만 집중할 수 있는 환경을 조성했습니다.
갤러리
클릭하여 확대프로젝트 보기웹사이트 방문 →