SBJ Archive
설명
크리에이티브 디렉션 아카이브
기간
Dec 2025 - Jan 2026
역할
- UX/UI 디자인: 아티스트의 아이덴티티를 시각화하는 대담하고 실험적인 웹 인터페이스 디자인.
- 풀스택 개발: 고성능 Next.js 클라이언트 및 작품 데이터 관리 백엔드 구축.
- 모션 그래픽 개발: GSAP를 활용한 페이지 전환 및 인터랙티브 모션 요소 개발.
- 성능 최적화: 대용량 비주얼 에셋 로딩 속도 최적화 및 기술 SEO 설정.
기술
Next.js · TypeScript · Tailwind CSS
GSAP · Framer Motion · Lenis
Supabase · Vercel
Cloudflare
프로젝트 목적
"예술과 디렉션이 만나는 곳." Samuel Burgess-Johnson은 The 1975, Wolf Alice 같은 아티스트의 아트 디렉션을 맡아 왔고, 그 작업량은 웬만한 포트폴리오 구조로는 납작해질 만큼 많습니다. 그래서 목록으로 정리하는 대신 그의 색채 감각과 타이포그래피 실험을 그대로 실어 나르도록 만들었습니다. 방문자가 작업을 지나치는 게 아니라 그 안에 머무르게 하는 것이 목적이었습니다. • 예술적 큐레이션: 각 프로젝트의 고유한 분위기를 해치지 않는 미니멀하면서도 강렬한 레이아웃을 설계했습니다. • 경계 없는 내비게이션: 이미지와 텍스트가 딱딱한 프레임 없이 자연스럽게 어우러지는 유연한 사용자 경험을 제공합니다.
범위
- · 브랜드 아이덴티티 확립
- · 인터랙티브 웹 디자인
- · 풀스택 개발
- · CMS 구축
주요 기술 특징
몰입형 멀티미디어 아카이브
- · 이미지 파이프라인과 영상 스트리밍을 구성해, 고해상도 작품과 영상 에셋을 성능 손실 없이 렌더링합니다.
- · 각 작품의 비율과 성격에 맞춰 그리드가 다시 흐르는 적응형 미디어 레이아웃을 만들었습니다. 전부 한 규격으로 잘라내지 않습니다.
고급 모션 디렉션
- · Lenis와 GSAP를 결합해 아카이브 전체를 끊김 없이 흐르는 하나의 움직임으로 묶었습니다.
- · 타이포그래피가 포인터 위치와 스크롤 깊이에 반응합니다. SBJ 특유의 디자인 언어는 설명이 아니라 여기서 드러납니다.
확장 가능한 콘텐츠 아키텍처
- · Supabase 구조화 스키마 덕분에 새 프로젝트가 들어와도 레이아웃이 손대지 않고 자리를 잡습니다.
- · Vercel Edge Functions로 전 세계 어디서 접속하든 작품이 빠르게 열립니다.
디자인 포인트
볼드 타이포그래피
굵고 과감한 폰트로 시각적 임팩트를 연출하고, 무채색 배경을 채택해 각 작품의 개성을 부각했습니다.
비주얼 스토리텔링
사용자가 스크롤할수록 작품의 비하인드 스토리나 초기 스케치가 점차 드러나는 디렉션으로 깊은 감상을 유도했습니다.
미니멀리스트 인터페이스
모든 UI 요소를 최소화해 사용자가 오롯이 비주얼 아트워크 자체에만 집중할 수 있는 환경을 조성했습니다.
갤러리
클릭하여 확대자주 묻는 질문
3D 인터랙티브 웹사이트는 일반 홈페이지와 무엇이 다른가요?
Three.js와 WebGL을 사용해 브라우저에서 3D 오브젝트가 움직이고 마우스와 스크롤에 반응하는 웹사이트입니다. 일반 홈페이지가 정보를 정리해 보여준다면, 3D 인터랙티브 웹은 브랜드의 인상을 체험으로 전달합니다. 패션, 뷰티, 건축, 전시처럼 브랜드 경험이 중요한 분야에서 효과가 큽니다.
웹사이트 제작 기간은 얼마나 걸리나요?
랜딩페이지는 7일, 5페이지 기업 웹사이트는 15일, 10페이지 3D 인터랙티브 웹은 30일을 기준으로 합니다. 자료를 전달받은 시점부터 기산하며 디자인 시안 확인과 피드백 일정에 따라 조정됩니다. 급한 일정이 있으시면 상담 시 말씀해 주시면 가능 여부를 먼저 확인해 드립니다.
호스팅, 도메인, 서버 비용은 따로 드나요?
SSL 보안 인증서 설치, 호스팅 세팅, 데이터베이스 구축은 무상으로 제공해 드립니다. 도메인 구입 비용만 의뢰인이 부담하시며 연 2~3만원 수준입니다. 계정은 처음부터 의뢰인 명의로 생성하므로 이후 담당자가 바뀌어도 서비스가 끊기지 않습니다.
완성 후 제가 직접 내용을 수정할 수 있나요?
관리자 페이지를 함께 구축해 드리므로 개발 지식 없이도 텍스트, 이미지, 게시물을 직접 수정하실 수 있습니다. 납품 시 관리자 사용 매뉴얼을 함께 전달해 드립니다. 화면 구조를 바꾸거나 새로운 기능을 추가하는 작업만 별도 개발이 필요합니다.