/
KST
브랜드의 철학을 몰입도 높은 디지털경험으로 만드는 웹 스튜디오입니다.디자인만큼 그 과정을중요하게 생각합니다.
이메일:info@alephstudio.art
문의
기업 웹사이트

East Bridge

East Bridge

설명

사우디아라비아 기업 랜딩페이지

기간

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로 묶고, 카테고리 필터가 걸린 비동기 로드 그리드로 렌더링합니다.
  • · 글래스모피즘 문의 인터페이스가 제출에 작은 리플로 답합니다. 완결감을 주되 톤을 깨뜨리지 않을 정도로만.

성능 최적화

  • · 3D 네트워크 연산과 캔버스 렌더링을 GPU 가속에 Frustum Culling까지 걸어, 모든 환경에서 60fps를 유지합니다.
  • · 고해상도 환경 맵과 비주얼 에셋은 WebP·AVIF로 내보내고, 레이지 로딩 순서를 주요 섹션이 먼저 오도록 잡았습니다.

디자인 포인트

기업 하이엔드 미학

가독성 높은 서체, 넉넉한 간격, 구조적 레이아웃이 선도적인 사우디 비즈니스 컨설팅 기업의 무게감, 권위, 전문성을 전달합니다.

순환 & 네트워크 미학

원형 모티프와 유기적으로 연결된 선형 요소를 핵심 UI 언어로 사용해 '순환 수출 솔루션' 컨셉과 긍정적인 비즈니스 생태계를 표현합니다.

키네틱 & 반응형 UI

스크롤과 마우스 궤적에 연동된 미묘한 리빌과 호버 인터랙션이 딱딱한 기업 느낌을 피하고 반응적이고 살아있는 인터페이스를 만들어냅니다.

갤러리

클릭하여 확대

자주 묻는 질문

3D 인터랙티브 웹사이트는 일반 홈페이지와 무엇이 다른가요?

Three.js와 WebGL을 사용해 브라우저에서 3D 오브젝트가 움직이고 마우스와 스크롤에 반응하는 웹사이트입니다. 일반 홈페이지가 정보를 정리해 보여준다면, 3D 인터랙티브 웹은 브랜드의 인상을 체험으로 전달합니다. 패션, 뷰티, 건축, 전시처럼 브랜드 경험이 중요한 분야에서 효과가 큽니다.

웹사이트 제작 기간은 얼마나 걸리나요?

랜딩페이지는 7일, 5페이지 기업 웹사이트는 15일, 10페이지 3D 인터랙티브 웹은 30일을 기준으로 합니다. 자료를 전달받은 시점부터 기산하며 디자인 시안 확인과 피드백 일정에 따라 조정됩니다. 급한 일정이 있으시면 상담 시 말씀해 주시면 가능 여부를 먼저 확인해 드립니다.

호스팅, 도메인, 서버 비용은 따로 드나요?

SSL 보안 인증서 설치, 호스팅 세팅, 데이터베이스 구축은 무상으로 제공해 드립니다. 도메인 구입 비용만 의뢰인이 부담하시며 연 2~3만원 수준입니다. 계정은 처음부터 의뢰인 명의로 생성하므로 이후 담당자가 바뀌어도 서비스가 끊기지 않습니다.

완성 후 제가 직접 내용을 수정할 수 있나요?

관리자 페이지를 함께 구축해 드리므로 개발 지식 없이도 텍스트, 이미지, 게시물을 직접 수정하실 수 있습니다. 납품 시 관리자 사용 매뉴얼을 함께 전달해 드립니다. 화면 구조를 바꾸거나 새로운 기능을 추가하는 작업만 별도 개발이 필요합니다.

프로젝트 보기
웹사이트 방문 →문의하기 →

다음 프로젝트

Lostgarden

인테리어

→

계속 스크롤하세요