3D Model Viewer: glTF 및 GLB 온라인

glTF/GLB 3D Model Viewer란?

glTF/GLB 3D Model Viewer는 .gltf 및 .glb 3D 모델 파일을 웹 브라우저에서 직접 열고 검사할 수 있는 도구입니다. 소프트웨어 설치, 계정, 서버 파일 업로드 없이 사용할 수 있습니다. 모델을 드롭 영역에 드래그하면 마우스로 즉시 궤도, 줌, 팬 동작을 사용할 수 있습니다. Google의 model-viewer 웹 컴포넌트를 사용하며, Google Search의 3D 제품 미리보기와 AR Quick Look에 사용되는 동일한 프로덕션 품질의 렌더러입니다. 5가지 환경 조명 프리셋 전환, 노출과 그림자 강도 조정, 자동 회전 켜기/끄기, 현재 보기의 스크린샷 내보내기가 가능합니다.

주요 기능

• glTF 및 GLB 드래그 앤 드롭 — .gltf 또는 .glb 파일을 드롭; 지원하지 않는 확장자는 로드 전 오류 표시
• 궤도·줌·팬 컨트롤 — 궤도: 왼쪽 클릭 + 드래그, 줌: 스크롤, 팬: 오른쪽 클릭 + 드래그; <model-viewer> 요소에서 camera-controls 활성화
• 자동 회전 토글 — 스위치로 <model-viewer> 컴포넌트의 auto-rotate 속성 활성화·비활성화; 기본값 켜짐
• 5가지 환경 조명 프리셋 — Neutral, Warm, Legacy, Commerce, Spruit Sunrise; environment-image 속성에 직접 매핑
• 노출 조정 — 0.1~3.0 슬라이더(스텝 0.1); 기본값 1.0
• 그림자 강도 조정 — 0.0~2.0 슬라이더(스텝 0.1); 기본값 1.0; shadow-intensity 속성에 매핑
• 스크린샷 내보내기 — modelViewer.toBlob()을 호출하고 {모델명}_{화면비}_{조명}_{해상도}.png로 저장
• 화면 비율 프리셋 — 자유, 1:1, 4:3, 16:9, 9:16, 3:2, 21:9 중 선택
• 다양한 업로드 방법 — 단일 .gltf/.glb 파일, glTF 번들이 포함된 ZIP 아카이브 또는 전체 폴더 업로드 가능
• Google model-viewer 기반 — PBR(물리 기반 렌더링) 재질을 지원하는 프로덕션 품질 WebGL 렌더링

glTF/GLB 3D Model Viewer 사용법

1단계: 3D 모델 불러오기

glTF/GLB 3D Model Viewer를 엽니다. 파일 시스템에서 .gltf 또는 .glb 파일을 드롭 영역으로 드래그합니다. 드롭 영역을 클릭하여 파일 선택기를 열 수도 있습니다(accept 속성은 .gltf,.glb로 설정). 모델은 로컬 객체 URL을 사용하여 로드되므로 네트워크로 데이터가 전송되지 않습니다.

지원하지 않는 확장자의 파일을 드롭하면 "Invalid file"이라는 토스트 알림이 표시되고 아무것도 로드되지 않습니다.

2단계: 모델 탐색

로드 후 뷰어는 500px 높이의 뷰포트에 모델을 표시합니다. 마우스로 탐색합니다:

• 왼쪽 클릭 + 드래그 — 모델 주변을 궤도로 이동
• 스크롤 휠 — 줌 인·아웃
• 오른쪽 클릭 + 드래그 — 카메라 팬

모바일에서는 터치 제스처가 동일하게 작동합니다: 한 손가락 드래그로 궤도, 핀치로 줌, 두 손가락 드래그로 팬.

모델 이름이 컨트롤 패널에 고정폭 글꼴로 표시됩니다. 새 모델 불러오기를 클릭하면 언제든지 현재 모델을 언로드하고 드롭 영역으로 돌아갈 수 있습니다.

3단계: 조명 조정

오른쪽 컨트롤 패널에서 이름을 클릭하여 5가지 환경 조명 프리셋 중 하나를 선택합니다:

선택된 프리셋은 채워진 배경으로 강조 표시됩니다. 변경사항은 즉시 반영되며 새로고침이 필요하지 않습니다.

4단계: 노출 및 그림자 세밀 조정

조명 프리셋 아래에 두 개의 슬라이더로 추가 조정이 가능합니다:

• 노출 (0.1~3.0) — 장면의 전체 밝기를 높이거나 낮춥니다. 1.0이 중립 기준값입니다. 어두운 모델을 밝히려면 1.5~2.0을 시도해 보세요.
• 그림자 강도 (0.0~2.0) — 모델 아래 바닥 그림자의 선명도와 어두움을 조절합니다. 0.0으로 설정하면 그림자가 완전히 사라집니다.

두 값 모두 실시간으로 <model-viewer> 속성을 업데이트합니다.

5단계: 자동 회전 토글 및 스크린샷 내보내기

자동 회전 토글 스위치로 모델이 수직 축을 기준으로 천천히 회전하도록 시작하거나 멈춥니다. 자동 회전은 기본적으로 켜져 있어 손을 쓰지 않고도 전체 모델을 볼 수 있습니다.

원하는 대로 뷰가 설정되면 스크린샷을 클릭합니다. 도구는 현재 렌더링을 캡처하고 모델 이름, 화면 비율, 조명 프리셋, 해상도를 포함한 파일명의 PNG 파일로 다운로드합니다. 컨트롤 패널에서 특정 스크린샷 해상도도 선택할 수 있습니다: Viewport(현재 크기), 720p, 1080p, 2K, 4K.

실용적인 활용 예시

통합 전 게임 에셋 검토

게임 개발자가 player-character.glb라는 캐릭터 모델을 받습니다. 에셋이 올바르게 보이는지 확인하기 위해 뷰어에 드래그합니다: Neutral 조명에서 텍스처가 올바르게 적용되었는지, Warm 조명에서 야외 장면의 캐릭터 모습은 어떤지 확인합니다. 검토 티켓에 첨부할 스크린샷을 내보냅니다.

이커머스 상품 목록용 제품 모델 확인

이커머스 팀이 공급업체로부터 .glb 형식의 3D 제품 모델을 받습니다. 뷰어에 로드하고 Commerce 조명 프리셋(깔끔한 제품 사진에 최적화)을 선택하고, 선명도를 높이기 위해 노출을 1.4로 조정하고, 부드러운 느낌을 위해 그림자 강도를 0.5로 줄입니다. 제품 페이지의 정적 대체 이미지로 사용할 스크린샷을 내보냅니다.

Blender에서 glTF 내보내기 검증

3D 아티스트가 Blender에서 .gltf 파일로 장면을 내보내고 뷰어에서 열어 빠른 점검을 합니다: 모델이 오류 없이 로드되는가? 재질이 올바른 색상으로 렌더링되는가? 스케일이 적절한가? 궤도 컨트롤로 모든 면을 빠르게 확인할 수 있습니다. Spruit Sunrise 프리셋으로 자연 야외광에서의 모습을 검증합니다.

팁과 모범 사례

스크린샷 내보내기의 idealAspect: true 매개변수는 정사각형 자르기를 강제하는 대신 뷰어의 현재 화면 비율에 맞게 캡처된 이미지를 조정합니다. 모델이 높이보다 너비가 넓다면 스크린샷에 그것이 반영됩니다.

model-viewer 웹 컴포넌트는 glTF 사양에 정의된 PBR(물리 기반 렌더링) 재질을 지원합니다. 모델이 평평하거나 바랜 것처럼 보인다면 3D 소프트웨어에서 PBR 재질로 내보냈는지 확인하세요. 재질 데이터 없이 내보낸 모델은 기본 회색 음영으로 렌더링됩니다.

외부 텍스처 참조가 있는 .gltf 파일은 브라우저가 디렉터리의 다른 파일에 접근할 수 없어 파일 선택기로 로드하는 데 실패할 수 있습니다. 브라우저에서 안정적으로 로드하려면 모든 텍스처를 포함하는 .glb 형식을 사용하세요.

뷰어는 모델의 크기에 관계없이 500px 높이로 렌더링합니다. 궤도 컨트롤로 모델을 위치시킨 다음 스크린샷을 찍으면 실제 표시 크기로 캡처됩니다.

일반적인 문제 및 해결 방법

"Invalid file" 오류. 도구는 .gltf 또는 .glb로 끝나는 파일만 허용합니다(.match(/\.(gltf|glb)$/i)를 사용한 대소문자 구분 없는 검사). 필요한 경우 파일 이름을 바꾸거나 내보내기 도구가 올바른 형식을 생성하는지 확인하세요.

모델은 로드되지만 텍스처가 없음. .gltf 파일(JSON 변형)을 로드하는 경우 관련 텍스처 이미지 파일과 바이너리 버퍼 파일이 같은 디렉터리에 있어야 합니다. 브라우저의 파일 선택기는 선택한 단일 파일에만 액세스를 허용하고 디렉터리에는 허용하지 않습니다. 모든 것을 하나의 파일로 묶으려면 .glb 형식을 사용하세요.

"Screenshot error" 토스트와 함께 스크린샷 실패. model-viewer.toBlob() 메서드는 WebGL이 사용 가능해야 합니다. 브라우저에서 WebGL이 비활성화되었거나 그래픽 드라이버가 차단하고 있다면 스크린샷이 실패합니다. chrome://settings/graphics(Chrome) 또는 사용 중인 브라우저의 동등한 설정을 확인하세요.

자동 회전이 멈추지 않음. 자동 회전 토글은 auto-rotate 속성을 실시간으로 제어합니다. 토글해도 회전이 멈추지 않으면 모델을 클릭하여 카메라 제어권을 되찾아 보세요(model-viewer의 기본 동작에 따라 자동 회전도 일시 정지됩니다).

개인정보 보호 및 보안

glTF/GLB 3D Model Viewer는 브라우저 로컬 URL.createObjectURL()을 사용하여 모델 파일을 로드하므로 데이터가 기기를 떠나지 않습니다. Google model-viewer 컴포넌트는 JavaScript 라이브러리로 로드되어 WebGL을 통해 GPU에서 완전히 렌더링됩니다. 모델 지오메트리, 텍스처, 메타데이터는 서버로 전송되지 않습니다. 따라서 독점 3D 에셋, 미발표 제품 또는 기밀 산업 디자인에도 안전하게 사용할 수 있습니다.

자주 묻는 질문

glTF/GLB 3D Model Viewer는 무료인가요?

네, 계정 없이 이용 제한도 없이 완전 무료입니다. Glyph Widgets 무료 도구 모음의 일부입니다.

glTF/GLB 3D Model Viewer는 오프라인에서 작동하나요?

페이지가 한 번 로드되면(@google/model-viewer 컴포넌트 포함) 인터넷 연결 없이도 로컬 모델 파일을 로드하고 볼 수 있습니다. 뷰어 라이브러리를 다운로드하기 위해 최초 페이지 로드 시 네트워크 연결이 필요합니다.

glTF/GLB 3D Model Viewer에서 내 데이터는 안전한가요?

모델 파일은 URL.createObjectURL()로 로드되어 WebGL에서 로컬로 렌더링됩니다. 지오메트리, 텍스처, 메타데이터는 서버로 전송되지 않습니다. Google의 model-viewer 컴포넌트는 브라우저 내에서만 실행됩니다.

어떤 파일 형식을 지원하나요?

.gltf(JSON + 외부 파일)와 .glb(바이너리 번들 형식)만 지원합니다. 다른 3D 형식(.obj, .fbx, .stl, .dae)은 지원하지 않습니다. Blender나 Khronos의 glTF 변환기 같은 도구를 사용하여 glTF로 변환한 후 로드하세요.

glTF와 GLB의 차이는 무엇인가요?

glTF는 외부 바이너리 버퍼와 텍스처 이미지를 참조하는 JSON 텍스트 파일입니다. GLB는 JSON, 버퍼, 텍스처를 하나의 파일로 묶은 바이너리 컨테이너 형식입니다. 브라우저 로딩에는 모든 에셋이 자체 포함되어 있는 GLB가 강력히 권장됩니다.

사용 가능한 조명 프리셋은 무엇인가요?

5가지 프리셋이 있습니다: Neutral(균형 잡힌 스튜디오 조명), Warm(호박/따뜻한 톤), Legacy(클래식 렌더링), Commerce(깔끔하고 고대비의 제품 조명), Spruit Sunrise(자연스러운 야외광). 이것들은 model-viewer 컴포넌트의 environment-image 속성에 매핑됩니다.

노출 슬라이더는 무엇을 하나요?

노출은 렌더링된 장면의 전체 밝기를 0.1~3.0 범위에서 조정합니다. 기본값은 1.0입니다. 1.0 이상의 값은 장면을 밝게 하고, 1.0 미만의 값은 어둡게 합니다. 사진이나 렌더러의 노출 설정과 동일한 기능입니다.

애니메이션이 있는 glTF 모델을 볼 수 있나요?

model-viewer 컴포넌트는 glTF 애니메이션을 지원하지만 Glyph Widgets 인터페이스는 애니메이션 재생 컨트롤을 제공하지 않습니다. 자동 회전이 현재 UI에서 유일한 동작 기능입니다. glTF 애니메이션을 미리 보려면 Khronos glTF Sample Viewer 같은 전용 도구를 사용하세요.

스크린샷은 어떤 해상도로 내보내나요?

컨트롤 패널에서 5가지 해상도 옵션 중 선택할 수 있습니다: Viewport(현재 표시 크기), 720p(1280x720), 1080p(1920x1080), 2K(2560x1440), 4K(3840x2160). Viewport 해상도에서 스크린샷은 뷰어의 표시 크기와 일치합니다. 더 높은 해상도에서는 도구가 일시적으로 뷰어 요소의 크기를 선택한 해상도로 조정하여 렌더링한 후 복원합니다.

매우 큰 GLB 파일을 로드할 수 있나요?

강제적인 크기 제한은 없지만 큰 파일(50MB 이상)은 로컬 객체 URL을 생성하고 model-viewer 렌더러를 초기화하는 데 몇 초가 걸릴 수 있습니다. 성능은 브라우저, GPU, 사용 가능한 RAM에 따라 다릅니다.

관련 도구

• 곧 출시 예정: Image Converter — 뷰어에서 내보낸 스크린샷을 다른 이미지 형식으로 변환
• 곧 출시 예정: SVG to PNG — 3D 워크플로를 보완하는 SVG 기반 디자인 에셋 변환
• 곧 출시 예정: EXIF Viewer — 3D 모델링 참고 이미지로 사용된 사진의 메타데이터 검사

지금 glTF/GLB 3D Model Viewer 사용해 보기: Glyph Widgets glTF/GLB 3D Model Viewer