2026Corporate Website
East Bridge
설명
Saudi Arabia Corporate Landing Page
기간
Jan 2026 - Feb 2026
역할
- 크리에이티브 개발자: React Three Fiber로 3D 글로벌 네트워크 시각화 씬 구축, 커스텀 프래그먼트 셰이더 구현, 스크롤/마우스 기반 인터랙션 및 GSAP 애니메이션 디렉션.
기술
Frontend
Next.js (App Router) · TypeScript · Tailwind CSS
3D / Creative
Three.js · React Three Fiber · GLSL (Shaders)
Animation
GSAP · Lenis · Framer Motion
Backend
Supabase
Deployment
Vercel
프로젝트 목적
East Bridge는 해외 기업의 사우디아라비아 시장 진출을 성공적으로 돕는 글로벌 컨설팅 펌입니다. 이 프로젝트는 단순한 정보 전달을 넘어, WebGL 기반 3D 인터랙션을 통해 '글로벌 연결'과 '순환'이라는 핵심 가치를 시각화하는 것을 목표로 합니다. 정적인 B2B 웹사이트의 틀을 깨고, 부드러운 전환과 반응형 모션이 최상위 컨설팅 브랜드를 위한 프리미엄 사용자 경험을 제공하는 고급 미니멀리스트 경험을 설계했습니다.
범위
- · 기업 브랜딩 웹 디자인 & 개발
- · WebGL 기반 글로벌 네트워크 시각화
- · 다이나믹 서비스 아카이브 구축
- · 스크롤 인터랙션 연동
- · 해외 CDN 설정
주요 기술 특징
실시간 WebGL 엔진
- · GLSL 커스텀 셰이더 구현으로 파티클이 마우스 궤적에 반응해 사우디아라비아와 글로벌 시장 사이의 동적인 3D '네트워크 브릿지'를 형성합니다.
- · 전환과 3D 오브젝트에 적용된 세련된 Bloom 효과의 포스트 프로세싱 파이프라인으로 프리미엄 컨설팅 분위기와 무한한 가능성의 감각을 전달합니다.
몰입형 인터랙션 시스템
- · Lenis 스크롤 속도와 위치 기반 깊이감 애니메이션으로 핵심 서비스와 시장 진출 단계가 사용자 방향으로 Z축을 따라 이동합니다.
- · 'Your Premier Gateway' 비전에 맞춘 로딩 시퀀스로 핵심 타이포그래피와 3D 실루엣이 부드러운 페이드인으로 공개됩니다.
다이나믹 아카이브 구조
- · 전문 분야 데이터와 클라이언트 문의를 Supabase에 통합, 매끄러운 카테고리 기반 필터링이 적용된 비동기 로드 그리드 UI로 렌더링.
- · 제출 시 미묘한 리플 피드백이 있는 글래스모피즘 영감의 컨택트 인터페이스로 B2B 경험을 안정적이면서도 몰입감 있게 유지.
성능 최적화
- · GPU 가속 3D 네트워크 연산과 Frustum Culling을 적용한 캔버스 렌더링으로 모든 환경에서 60fps 유지.
- · 고해상도 환경 맵과 비주얼 에셋은 WebP/AVIF로 제공하고 주요 섹션에 레이지 로딩 우선 적용.
디자인 포인트
기업 하이엔드 미학
고가독성 서체, 넉넉한 간격, 구조적 레이아웃이 선도적인 사우디 비즈니스 컨설팅 펌의 무게감, 권위, 전문성을 전달합니다.
순환 & 네트워크 미학
원형 모티프와 유기적으로 연결된 선형 요소를 핵심 UI 언어로 사용해 '순환 수출 솔루션' 컨셉과 긍정적인 비즈니스 생태계를 표현합니다.
키네틱 & 반응형 UI
스크롤과 마우스 궤적에 연동된 미묘한 리빌과 호버 인터랙션이 딱딱한 기업 느낌을 피하고 반응적이고 살아있는 인터페이스를 만들어냅니다.
갤러리
클릭하여 확대프로젝트 보기웹사이트 방문 →