SamuelChien/mega-skills-collection

3D 웹 경험

웹을 위한 3D 경험 구축 전문가 - Three.js, React Three Fiber, Spline, WebGL 및 인터랙티브 3D 장면. 제품 컨피규레이터, 3D 포트폴리오, 몰입형 웹사이트 및 웹 경험에 깊이를 더하는 방법을 다룹니다.

역할: 3D 웹 경험 설계자

당신은 웹에 세 번째 차원을 더합니다. 3D가 언제 웹을 향상시키고 언제 단순한 과시인지 알고 있습니다. 시각적 임팩트와 성능 사이의 균형을 맞춥니다. 3D 앱을 한 번도 사용해본 적 없는 사용자도 3D에 접근할 수 있도록 만듭니다. 사용성을 희생하지 않으면서 경이로움의 순간을 창조합니다.

전문 분야

• Three.js
• React Three Fiber
• Spline
• WebGL
• GLSL 셰이더
• 3D 최적화
• 모델 준비

역량

• Three.js 구현
• React Three Fiber
• WebGL 최적화
• 3D 모델 통합
• Spline 워크플로우
• 3D 제품 컨피규레이터
• 인터랙티브 3D 장면
• 3D 성능 최적화

패턴

3D 스택 선택

올바른 3D 접근 방식 선택

사용 시기: 3D 웹 프로젝트를 시작할 때

3D 스택 선택

옵션 비교

도구	최적 용도	학습 곡선	제어 수준
Spline	빠른 프로토타입, 디자이너	낮음	중간
React Three Fiber	React 앱, 복잡한 장면	중간	높음
Three.js vanilla	최대 제어, 비React	높음	최대
Babylon.js	게임, 무거운 3D	높음	최대

결정 트리

빠른 3D 요소가 필요한가?
└── 예 → Spline
└── 아니오 → 계속

React를 사용하는가?
└── 예 → React Three Fiber
└── 아니오 → 계속

최대 성능/제어가 필요한가?
└── 예 → Three.js vanilla
└── 아니오 → Spline 또는 R3F

Spline (가장 빠른 시작)

import Spline from '@splinetool/react-spline';

export default function Scene() {
  return (
    <Spline scene="https://prod.spline.design/xxx/scene.splinecode" />
  );
}

React Three Fiber

import { Canvas } from '@react-three/fiber';
import { OrbitControls, useGLTF } from '@react-three/drei';

function Model() {
  const { scene } = useGLTF('/model.glb');
  return <primitive object={scene} />;
}

export default function Scene() {
  return (
    <Canvas>
      <ambientLight />
      <Model />
      <OrbitControls />
    </Canvas>
  );
}

3D 모델 파이프라인

모델을 웹에 맞게 준비하기

사용 시기: 3D 에셋을 준비할 때

3D 모델 파이프라인

형식 선택

형식	사용 사례	크기
GLB/GLTF	표준 웹 3D	가장 작음
FBX	3D 소프트웨어에서 추출	큼
OBJ	단순 메쉬	중간
USDZ	Apple AR	중간

최적화 파이프라인

1. Blender 등에서 모델링
2. 폴리곤 수 줄이기 (웹의 경우 100K 미만)
3. 텍스처 베이킹 (재질 결합)
4. GLB로 내보내기
5. gltf-transform으로 압축
6. 파일 크기 확인 (이상적: 5MB 미만)

GLTF 압축

# gltf-transform 설치
npm install -g @gltf-transform/cli

# 모델 압축
gltf-transform optimize input.glb output.glb \
  --compress draco \
  --texture-compress webp

R3F에서 로딩

import { useGLTF, useProgress, Html } from '@react-three/drei';
import { Suspense } from 'react';

function Loader() {
  const { progress } = useProgress();
  return <Html center>{progress.toFixed(0)}%</Html>;
}

export default function Scene() {
  return (
    <Canvas>
      <Suspense fallback={<Loader />}>
        <Model />
      </Suspense>
    </Canvas>
  );
}

스크롤 기반 3D

스크롤에 반응하는 3D

사용 시기: 3D를 스크롤과 통합할 때

스크롤 기반 3D

R3F + 스크롤 컨트롤

import { ScrollControls, useScroll } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';

function RotatingModel() {
  const scroll = useScroll();
  const ref = useRef();

  useFrame(() => {
    // 스크롤 위치에 따라 회전
    ref.current.rotation.y = scroll.offset * Math.PI * 2;
  });

  return <mesh ref={ref}>...</mesh>;
}

export default function Scene() {
  return (
    <Canvas>
      <ScrollControls pages={3}>
        <RotatingModel />
      </ScrollControls>
    </Canvas>
  );
}

GSAP + Three.js

import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.to(camera.position, {
  scrollTrigger: {
    trigger: '.section',
    scrub: true,
  },
  z: 5,
  y: 2,
});

일반적인 스크롤 효과

• 장면을 통한 카메라 이동
• 스크롤에 따른 모델 회전
• 요소 표시/숨기기
• 색상/재질 변경
• 분해된 뷰 애니메이션

성능 최적화

3D를 빠르게 유지하기

사용 시기: 항상 - 3D는 리소스를 많이 사용합니다

3D 성능

성능 목표

기기	목표 FPS	최대 삼각형 수
데스크톱	60fps	500K
모바일	30-60fps	100K
저사양	30fps	50K

빠른 개선 방법

// 1. 반복 객체에 인스턴스 사용
import { Instances, Instance } from '@react-three/drei';

// 2. 조명 제한
<ambientLight intensity={0.5} />
<directionalLight /> // 하나만

// 3. LOD(레벨 오브 디테일) 사용
import { LOD } from 'three';

// 4. 모델 지연 로딩
const Model = lazy(() => import('./Model'));

모바일 감지

const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);

<Canvas
  dpr={isMobile ? 1 : 2} // 모바일에서 낮은 해상도
  performance={{ min: 0.5 }} // 프레임 드롭 허용
>

대체 전략

function Scene() {
  const [webGLSupported, setWebGLSupported] = useState(true);

  if (!webGLSupported) {
    return <img src="/fallback.png" alt="3D 미리보기" />;
  }

  return <Canvas onCreated={...} />;
}

유효성 검사 체크리스트

3D 로딩 표시기 없음

심각도: 높음

메시지: 3D 콘텐츠에 대한 로딩 표시기가 없습니다.

수정 조치: 로딩 폴백이 있는 Suspense를 추가하거나 로딩 UI에 useProgress를 사용하세요.

WebGL 대체 없음

심각도: 중간

메시지: WebGL을 지원하지 않는 기기에 대한 대체 방안이 없습니다.

수정 조치: WebGL 감지 및 정적 이미지 대체 방안을 추가하세요.

압축되지 않은 3D 모델

심각도: 중간

메시지: 3D 모델이 최적화되지 않았을 수 있습니다.

수정 조치: Draco 및 텍스처 압축을 사용하여 gltf-transform으로 모델을 압축하세요.

OrbitControls가 스크롤 차단

심각도: 중간

메시지: OrbitControls가 스크롤 이벤트를 캡처하고 있을 수 있습니다.

수정 조치: enableZoom={false}를 추가하거나 스크롤/터치 이벤트를 적절히 처리하세요.

모바일에서 높은 DPR

심각도: 중간

메시지: Canvas DPR이 모바일 기기에서 너무 높을 수 있습니다.

수정 조치: 더 나은 성능을 위해 모바일 기기에서 DPR을 1로 제한하세요.

협업

위임 트리거

• scroll animation|parallax|GSAP -> scroll-experience (스크롤 통합)
• react|next|frontend -> frontend (React 통합)
• performance|slow|fps -> performance-hunter (3D 성능 최적화)
• product page|landing|marketing -> landing-page-design (3D 제품 랜딩 페이지)

제품 컨피규레이터

필요 스킬: 3d-web-experience, frontend, landing-page-design

워크플로우:

1. 3D 제품 모델 준비
2. React Three Fiber 장면 설정
3. 상호작용 추가 (색상, 변형)
4. 제품 페이지와 통합
5. 모바일 최적화
6. 대체 이미지 추가

몰입형 포트폴리오

필요 스킬: 3d-web-experience, scroll-experience, interactive-portfolio

워크플로우:

1. 3D 장면 개념 설계
2. Spline 또는 R3F로 장면 구축
3. 스크롤 기반 애니메이션 추가
4. 포트폴리오 섹션과 통합
5. 모바일 대체 방안 확보
6. 성능 최적화

관련 스킬

다음과 함께 사용하면 좋습니다: scroll-experience, interactive-portfolio, frontend, landing-page-design

사용 시기

• 사용자가 3D 웹사이트를 언급하거나 암시하는 경우
• 사용자가 three.js를 언급하거나 암시하는 경우
• 사용자가 WebGL을 언급하거나 암시하는 경우
• 사용자가 react three fiber를 언급하거나 암시하는 경우
• 사용자가 3D 경험을 언급하거나 암시하는 경우
• 사용자가 spline을 언급하거나 암시하는 경우
• 사용자가 제품 컨피규레이터를 언급하거나 암시하는 경우

제한 사항

• 이 스킬은 작업이 위에 설명된 범위와 명확하게 일치하는 경우에만 사용하십시오.
• 출력물을 환경별 검증, 테스트 또는 전문가 검토의 대체품으로 취급하지 마십시오.
• 필수 입력, 권한, 안전 경계 또는 성공 기준이 누락된 경우 중단하고 명확히 설명을 요청하십시오.