GLB를 웹사이트에 임베드하는 방법 | model-viewer로 내 캐릭터 3D를 돌려 볼 수 있는 포트폴리오 만들기

GLB를 웹사이트에 임베드하려면 Google이 공개한 웹 컴포넌트 'model-viewer'를 쓰는 것이 간편합니다. 페이지에 불러오기용 script 요소를 한 줄 추가하고, model-viewer 태그의 src 속성에 GLB 위치를 적고 camera-controls 속성을 붙이면, 보는 사람이 마우스나 손가락으로 돌려 볼 수 있는 3D가 페이지에 나타납니다.

이 글에서는 GLB를 웹에 올리는 세 가지 방법의 차이, model-viewer로 임베드하는 순서와 주요 속성의 역할, 표시되지 않을 때 고치는 법, 스마트폰에서의 모습, 작품이 늘었을 때 배치하는 법을 차례로 정리합니다. HTML 코드 자체는 버전 번호까지 정확한 것을 공식 문서에서 복사하는 편이 확실하므로, 이 글에서는 속성의 이름과 역할을 설명하고 코드는 공식 페이지 링크로 안내합니다. model-viewer의 사양은 2026년 11월 기준 공식 문서에서 확인한 내용입니다.

※현재 Figmee가 제공하는 것은 그린 일러스트로 만드는 피규어풍 이미지, 3D 모델 데이터(GLB / 3MF), 3D 모델 회전 영상입니다. 실물 3D 프린트 주문은 준비 중(Coming Soon)입니다. 또한 사진이나 사진처럼 보이는 이미지는 3D로 만들 수 없습니다(그린 그림이 대상입니다).

GLB를 웹페이지에 올리는 방법에는 무엇이 있을까?

보는 사람의 브라우저에서 GLB를 돌려 보게 하는 방법은 '내 사이트에 임베드하기', '만든 서비스의 공유 링크 보내기', '3D 공유 사이트에 올려서 임베드하기' 세 가지입니다. 내 사이트 안에 내 디자인으로 넣고 싶다면 model-viewer로 임베드하는 방법이 맞습니다.

Sketchfab에서는 모델 페이지의 뷰어 아래에 있는 임베드(Embed) 버튼으로 내 페이지에 붙일 임베드용 HTML을 꺼낼 수 있습니다. 비공개나 비밀번호가 걸린 모델도 임베드할 수 있다고 안내되어 있습니다(출처: Sketchfab Help Center 'Embedding your 3D models', 2026년 11월 기준). 공유 링크로 보여 주는 순서와 공개하면 보이는 것은 3D 모델을 온라인에 공개하는 방법에 정리했습니다.

model-viewer란?

model-viewer는 Google이 오픈 소스(Apache License 2.0)로 공개한 웹 컴포넌트로, 페이지에 태그 하나만 두면 3D 모델을 표시하고 돌려 볼 수 있게 해 줍니다. 읽을 수 있는 것은 glTF와 GLB뿐이며, 공식 FAQ는 앞으로도 이 형식만 지원할 계획이라고 밝히고 있습니다(출처: model-viewer FAQ, 2026년 11월 기준).

• 불러오는 법: 공식 README에 있는 type="module"이 붙은 script 요소를 페이지에 붙입니다. 불러오는 곳은 Google CDN(ajax.googleapis.com)이고, URL 중간에 버전 번호가 들어갑니다. npm에서는 @google/model-viewer라는 이름으로 배포됩니다(출처: model-viewer README, 2026년 11월 기준).
• 버전: 2026년 11월 7일 기준 npm의 최신 버전은 4.4.0입니다(출처: npm '@google/model-viewer').
• 지원 브라우저: README는 계속 자동으로 업데이트되는 브라우저(Chrome·Firefox·Safari·Edge 등)의 PC 버전과 모바일 버전에서 최근 두 개의 메이저 버전을 지원한다고 합니다.

Figmee의 GLB는 형태와 색(텍스처)을 하나의 파일로 묶은 것이라 이미지를 따로 올릴 필요 없이 GLB 하나만 업로드하면 됩니다. GLB 자체의 구조는 GLB 파일이란에서, 어떤 그림이 3D에 맞는지는 일러스트를 3D로 만드는 방법 전체 가이드에서 설명합니다.

임베드하는 순서는?

GLB를 준비해 가볍게 하기, 서버에 올리기, 불러오는 한 줄 추가하기, 태그에 속성 쓰기, PC와 스마트폰에서 확인하기의 5단계입니다. HTML을 고칠 수 있는 사이트라면 첫 번째 모델은 30～50분 정도가 기준입니다.

1. GLB를 준비해 가볍게 하기(10～30분): Figmee라면 작품 화면에서 '저장'을 누르고 '3D 모델(GLB)'을 고릅니다(저장할 때 추가 토큰은 들지 않습니다). 로딩이 느릴 것 같으면 텍스처 축소, 폴리곤 감소, 압축 순으로 가볍게 합니다(순서는 GLB 용량 줄이는 방법).
2. GLB를 서버에 올리기(5분): 페이지와 같은 서버(같은 도메인)에 업로드하는 것이 간단합니다. 다른 도메인에 둘 경우 그 서버가 CORS 헤더를 보내도록 설정해야 합니다(아래 '로딩이 느리거나 표시되지 않을 때는?' 참고).
3. 불러오는 한 줄 추가하기(2분): 공식 README의 script 요소를 복사해 버전 번호(예: 4.4.0)를 넣고, 페이지의 head에 붙입니다.
4. 태그를 두고 속성 쓰기(5분): 표시하고 싶은 곳에 model-viewer 태그를 두고, src에 GLB의 URL을, alt에 작품 설명을 쓰고, camera-controls를 붙입니다. 그 밖의 속성은 아래 표에서 고릅니다. 태그를 쓰는 예시는 model-viewer 문서에 있습니다.
5. PC와 스마트폰에서 확인하기(5분): 돌아가는지, 불러오는 동안 무엇이 보이는지, 스마트폰에서 페이지를 세로로 스크롤할 수 있는지, 색과 광택이 의도대로인지 봅니다.

자주 쓰는 속성은 다음과 같습니다(출처: model-viewer 문서, 2026년 11월 기준).

Figmee의 GLB에는 움직임(애니메이션)이 들어 있지 않으므로 model-viewer의 애니메이션 속성은 쓰지 않습니다. 포즈도 바꿀 수 없으니, 캐릭터의 보여 주고 싶은 방향은 camera-orbit로 처음 카메라 위치를 정해 맞춥니다.

로딩이 느리거나 표시되지 않을 때는?

아무것도 나오지 않을 때는 GLB의 URL, 올린 곳의 도메인(CORS), 불러오는 한 줄의 세 가지를 차례로 의심합니다. 표시는 되는데 모습이 이상할 때는 아래 표의 증상에서 찾습니다.

CORS 설명은 공식 FAQ의 'Why am I getting CORS errors?'에, 디코더의 기본 불러오기 위치는 문서의 dracoDecoderLocation·meshoptDecoderLocation 항목에 있습니다(모두 2026년 11월 기준).

마지막의 '가장자리가 빛남'은 Figmee로 만든 GLB에서 생기기 쉬운 증상입니다. Figmee의 GLB는 재질의 메탈릭(Metallic)이 높은 설정으로 내보내지고, Figmee 뷰어에서는 메탈릭을 0으로 바꿔 표시합니다. 그래서 같은 GLB라도 model-viewer 같은 다른 뷰어에서는 조각된 가장자리가 금속처럼 빛나 보일 수 있습니다. 신경 쓰인다면 Blender로 불러와 재질의 메탈릭을 0에 가깝게 하고(메탈릭 입력에 이미지가 연결되어 있다면 그 연결을 끊은 뒤 값을 바꿉니다), GLB로 다시 내보낸 다음 올린 곳에서 광택이 달라졌는지 확인합니다. Blender로 불러오는 법은 Figmee GLB를 Blender로 불러오는 순서에 정리했습니다.

스마트폰에서도 돌려 볼 수 있을까?

돌려 볼 수 있습니다. model-viewer는 스마트폰 브라우저도 지원하며, camera-controls를 붙이면 손가락으로 드래그해 돌릴 수 있습니다. 신경 쓸 것은 페이지 스크롤과의 관계, 그리고 메모리 두 가지입니다.

• 스크롤과의 관계: touch-action의 기본값 pan-y에서는 손가락을 세로로 움직이면 페이지가 스크롤되고, 가로로 움직이기 시작하면 모델이 돕니다. none으로 하면 모델 위에서는 페이지가 스크롤되지 않으므로, 모델을 화면 가득 둘 때는 보는 사람이 페이지 아래로 넘어갈 수 있는지 확인합니다.
• 메모리: 큰 텍스처는 파일로는 작아도 표시할 때 메모리를 많이 써서 스마트폰에서는 무거워지는 원인이 됩니다. 가로세로 해상도를 낮추면 효과가 있습니다(자세한 내용은 GLB 용량 줄이는 방법).

ar 속성을 붙이면 지원 기기에서 AR 표시(카메라 너머로 3D를 놓고 보는 표시)를 시작할 수 있게 됩니다. Android의 Scene Viewer에는 파일 크기나 삼각형 수 같은 권장값과 쓸 수 있는 확장의 조건이 공개되어 있으니(출처: Google ARCore 'Scene Viewer', 2026년 11월 기준), AR 표시까지 쓸 때는 그 조건에 맞춘 GLB로 시험합니다.

작품이 늘었을 때는 어떻게 배치할까?

한 페이지에 여러 개를 늘어놓으면 그만큼 로딩과 메모리가 늘어납니다. 목록 페이지에는 작품마다 정지 이미지(포스터와 같은 이미지)를 늘어놓고, 3D는 작품별 페이지에 하나씩 두는 형태로 하면 목록 페이지가 덜 무거워질 것으로 보입니다.

• 목록은 이미지, 상세는 3D: 목록에서 작품 페이지로 넘어간 곳에서 돌려 볼 수 있는 3D를 보여 줍니다.
• 한 페이지에 여러 개를 둔다면: 기본 loading(auto)은 화면에 가까워질 때 불러오므로, 아래쪽 모델은 보는 사람이 거기까지 스크롤한 뒤에 불러옵니다. 모두에 poster를 붙여 두면 불러오기 전에도 배치가 흐트러지지 않습니다.
• 원본 일러스트와 나란히 두기: 3D 옆에 원본 그림을 두면 어떤 그림에서 입체가 되었는지 전해집니다.

내 사이트가 없거나 한곳에 모아 보여 줄 곳이 필요하다면, Figmee의 크리에이터 페이지(마이페이지에서 공개 설정을 켜면 공개한 작품이 늘어서는 프로필 페이지)도 쓸 수 있습니다. GLB를 다른 사람에게 보내 보여 주는 방법은 무료로 3D 모델을 보는 방법 5가지에서 소개합니다.

자주 묻는 질문

WordPress 같은 블로그 서비스에서도 쓸 수 있나요?

쓸 수 있는지는 그 서비스에서 script 요소를 포함한 HTML을 쓸 수 있는지로 정해집니다. 쓸 수 없는 서비스에서는 model-viewer를 쓰지 못할 수 있습니다. 그럴 때는 Sketchfab 임베드(Sketchfab 도움말은 WordPress 등에 붙이는 방법도 안내합니다)나 공유 링크를 붙이는 방법을 고릅니다.

보는 사람이 GLB를 저장할 수 있게 되나요?

페이지에 표시하기 위해 GLB 파일은 보는 사람의 브라우저로 전송됩니다. 따라서 URL을 알면 저장할 수 있다는 전제로 올려 주세요. 의뢰해서 그려 받은 그림으로 만든 모델이라면, 공개해도 되는지 먼저 그린 사람에게 확인합니다(판단 기준은 의뢰한 일러스트를 3D로 만들어도 될까).

요금이 드나요?

model-viewer는 오픈 소스라서 쓰는 것 자체에는 요금이 들지 않습니다. GLB를 올릴 서버 비용은 쓰는 서비스에 따라 다릅니다. Figmee에서는 3D 모델 생성에 5토큰을 쓰고(계정당 첫 1개는 무료), GLB 저장에는 추가 토큰이 들지 않습니다.

정리

GLB를 웹사이트에 임베드하려면 model-viewer가 간편합니다. GLB를 가볍게 해서 서버에 올리고, 공식 README에서 불러오는 한 줄을 복사한 뒤, src·alt·camera-controls를 기본으로 poster나 auto-rotate를 더해 갑니다. 표시되지 않을 때는 URL·CORS·불러오는 한 줄을, 가장자리가 빛날 때는 재질의 메탈릭을 확인합니다. 스마트폰에서는 스크롤과의 관계와 텍스처 크기에 신경 씁니다.

내 캐릭터를 돌려 볼 수 있는 3D로 포트폴리오에 두고 싶다면, Figmee에서 그린 그림으로 3D 모델을 만들고 GLB를 저장한 뒤 이 글의 순서대로 임베드해 보세요.

관련 가이드

• GLB 용량 줄이는 방법
• GLB 파일이란? 여는 법·쓰임새·변환 방법
• 3D 모델을 온라인에 공개하는 방법
• 무료로 3D 모델을 보는 방법 5가지
• 일러스트를 3D로 만드는 방법(2026년판)