기술 실험실

화면 구석에서 안내를 도와주는 3D 캐릭터는 별도 프로그램이 아니라 이 홈페이지 안에 직접 렌더링됩니다. 무거워 보이지만 실제로는 개발 환경에서만 불러오도록 분리해 두어, 방문자에게 배포되는 화면에는 영향이 없습니다. 향후 고객사별로 캐릭터를 다르게 입힐 수 있는 구조를 검토하고 있습니다.

프론트엔드는 프레임워크에 기대지 않고 React와 순수 TypeScript로 직접 구성했고, 빌드는 Vite 8(rolldown 기반)을 씁니다. 테마마다 코드가 따로 다운로드되도록 나눠서, 방문자는 지금 보는 테마의 코드만 받습니다. 백엔드는 프레임워크나 Composer 없이 PHP 8.4 순정으로 짰습니다. 파일 하나가 API 하나입니다. 화려한 도구를 더하는 대신, 무엇이 실제로 실행되는지 항상 눈으로 추적할 수 있게 만드는 쪽을 택했습니다.

WebGPU는 웹에서 그래픽 카드를 예전보다 훨씬 직접적으로 다룰 수 있게 해주는 최신 브라우저 기술입니다. 3D 어시스턴트에 쓰는 렌더링 기술과 이어지는 다음 단계로 보고 있습니다. 아직은 브라우저·기기별 지원 편차가 커서, 실제 방문자 화면에 내보내기 전에 로컬에서 먼저 검증하는 단계입니다. 지원하지 않는 환경에서는 항상 일반 화면으로 자연스럽게 대체되도록 만드는 것을 우선 원칙으로 삼고 있습니다.

이미지로 생성한 3D 공간(Gaussian Splatting) 안에 메뉴를 배치해서, 게임처럼 둘러보며 탐색하는 홈페이지를 로컬 환경에서 검증하고 있습니다. 지금은 일반 메뉴를 대체하는 게 아니라 "쇼룸"으로만 검토 중입니다 — 3D가 없어도 사이트의 모든 핵심 내용에 항상 접근할 수 있어야 한다는 원칙을 지키고 있습니다. 아직 카페24 실제 배포 전 단계라 이 페이지에서는 데모 없이 소개만 드립니다. https://www.worldlabs.ai/blog/spark-2.0