📌 East Bridge - 사우디아라비아 기업 East Bridge 랜딩페이지 웹 제작

🔹 프로젝트 개요

• 작업 기간: 2026.01 ~ 2026.02
• 작업 범위: 기업 브랜딩 웹 디자인 및 개발, WebGL 기반 글로벌 네트워크 시각화, 동적 서비스 아카이브 구축, 스크롤 인터랙션 연동, 해외 CDN 설정
• 사용 도구:
• Frontend: Next.js (App Router), TypeScript, Tailwind CSS
• Creative / 3D: Three.js, React Three Fiber (R3F), GLSL (Shaders)
• Animation: GSAP, Lenis (Smooth Scroll), Framer Motion
• Backend: Supabase (Data Archive, Contact Uplink)
• Deployment: Vercel

🔹 프로젝트 목적

East Bridge는 해외 기업들의 성공적인 사우디아라비아 진출을 돕는 글로벌 컨설팅 펌입니다. 본 프로젝트는 단순한 정보 전달을 넘어, '글로벌 연결(Global Connection)'과 '순환(Circular)'이라는 핵심 가치를 WebGL 기반의 3D 인터랙션으로 시각화하는 데 목적을 두었습니다. 정적인 B2B 웹사이트의 틀을 깨고, 하이엔드 미니멀리즘 디자인과 브라우저 상에서 유기적으로 반응하는 부드러운 트랜지션을 통해 프리미엄 브랜드로서의 최상의 사용자 경험(UX)을 제공하고자 했습니다.

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

Real-time WebGL Engine (실시간 웹GL 렌더링 엔진)

• Custom Shader Implementation: GLSL을 활용해 마우스 커서의 궤적에 따라 입자들이 반응하며 사우디아라비아와 글로벌 시장을 잇는 '네트워크 브릿지'를 형상화한 동적 3D 이펙트를 구현했습니다.
• Post-processing Pipeline: 화면 전환과 3D 오브젝트 렌더링 과정에 세련된 Bloom 효과를 후처리기법으로 적용하여, 기업이 지향하는 프리미엄 컨설팅 서비스의 고급스러운 무드와 무한한 가능성을 연출했습니다.

Immersive Interaction System (몰입형 인터랙션)

• Depth-based Animations: Lenis 스크롤의 속도 및 위치 값을 훅(Hook)으로 받아와, 스크롤 흐름에 따라 핵심 서비스(Jusur Service)와 시장 진출 단계가 3D 공간의 깊이(Z축)를 활용해 자연스럽게 다가오는 물리 기반 인터랙션을 적용했습니다.