Blog·인사이트

크롤링 안 되는 3D 콘텐츠, 검색·AI에 노출시키는 법

···4분 읽기
요약

WebGL 3D는 검색 엔진과 AI 크롤러가 내부 텍스트를 못 읽습니다. 3D만 멋지게 만들면 자연 유입이 0이 됩니다. 저희가 웹3D 카탈로그를 만들며 쓰는 HTML 분리와 JSON-LD, 폴백 이미지 설계로 몰입감과 검색·AI 노출을 함께 가져가는 법을 정리합니다.</parameter> <parameter name="score_reason">두코 웹3D와 LG ThinQ 포트폴리오를 역량 전이로 인용하고 균형 섹션과 솔직한 인사이트를 더해 보강함

검색 엔진은 3D 안을 못 읽는다

WebGL로 만든 3D 콘텐츠는 화면에서는 멋지지만, 검색 엔진과 AI 크롤러는 그 안의 정보를 직접 읽지 못합니다. 크롤러에게 캔버스에 그려진 3D는 거대한 그림 한 장과 같아서, 그 안에 박힌 제품명도 사양도 가격도 텍스트로 인식되지 않습니다. 3D 뷰어만 잘 만들고 제품 정보를 전부 그 안에 넣으면, 검색에는 아무것도 잡히지 않아 자연 유입이 0이 됩니다. 잘 만든 3D가 오히려 검색에서 사라지는 역설입니다.

저희가 두코의 화장품 용기 웹3D 카탈로그를 만들 때 정확히 이 지점을 신경 썼습니다. 로고와 색과 재질을 실시간으로 바꿔 보는 셰이더 기반 시뮬레이션이 핵심 경험이었지만, 그 화려한 3D가 검색에 안 잡히면 웹 기업 문의 0건에서 1년도 되지 않아 수백 건이라는 결과는 나오지 않았을 겁니다. 3D는 머무르게 하는 장치였고, 찾아오게 만든 건 그 밑에 깔린 텍스트와 메타 설계였습니다.

그래서 분리해야 한다

이 문제가 가장 첨예해지는 건 디지털 카탈로그와 3D가 한 페이지에서 만나는 경우입니다. 제품 정보를 잔뜩 담은 카탈로그에 3D 경험을 얹는 순간, "검색이 읽어야 하는 정보"와 "검색이 못 읽는 3D"가 같은 화면에 공존하기 때문입니다. 그래서 둘을 한 덩어리로 묶지 말고 역할을 나눠야 합니다. 제품명·설명·가격·사양 같은 카탈로그 정보는 일반 HTML로 두어 검색·AI가 잘 읽고 잘 노출되게 하고, 3D 뷰어는 그 위에 별도 레이어로 얹어 경험만 책임지게 하는 것입니다.

그래야 3D가 로드되지 않아도, 자바스크립트가 늦게 실행돼도, 제품 정보는 검색 엔진이 첫 응답인 서버 렌더링 HTML에서 바로 읽힙니다.

흔한 실수는 이 텍스트를 화면에서 안 보인다고 숨김 처리하거나 3D 로드 후 자바스크립트로만 주입하는 것인데, 그러면 크롤러가 다시 못 읽거나 신뢰도가 떨어집니다. 저희는 사람 눈에는 3D, 크롤러 눈에는 정상 문서가 동시에 성립하도록, 화면 밖으로 밀어내더라도 실제 텍스트는 살아 있게 둡니다.

구조화 데이터와 폴백 이미지

여기에 두 가지를 더합니다. JSON-LD 같은 구조화 데이터로 제품명과 브랜드와 가격을 명시하면 검색과 AI가 이건 어떤 제품인지를 추측이 아니라 선언으로 이해합니다. 그리고 WebGL이 안 되는 환경을 위한 고품질 폴백 이미지를 항상 준비하면, 이 이미지가 검색 썸네일과 카카오와 메타 공유 미리보기에 그대로 쓰입니다. 빈 화면이 아니라 잘 찍은 제품 컷이 뜨는 것, 이 차이가 클릭률을 가릅니다.

AI 답변 엔진 시대에는 이 설계가 더 중요해집니다. AI가 페이지를 요약해 한 문장으로 답하는 시대에 그 AI가 읽는 건 결국 텍스트와 구조화 데이터입니다. 3D 안에만 정보가 있으면 AI 답변에는 아예 등장하지 못합니다. AEO 시대의 웹사이트 설계를 함께 보면 좋습니다.

이 설계가 덜 중요한 경우도 있다

모든 3D 프로젝트에 이 작업이 필요한 건 아닙니다. 로그인 뒤 사내 설정 툴, 인증 게이트 안의 B2B 관리자 화면, 광고로만 트래픽을 받는 단발성 캠페인 페이지라면 SEO 설계 공수가 회수되지 않습니다. 저희가 LG ThinQ에서 만든 실내 공간 3D 시뮬레이션처럼 앱 안에서 도면을 연동하고 가구와 가전을 배치하는 경험은, 검색 노출보다 앱 내 사용성과 멀티 디바이스 일관성이 훨씬 중요했습니다. 목적이 발견이 아니라 조작이면 우선순위는 달라집니다.

그래서 저희는 시작 전에 먼저 묻습니다. 이 3D는 검색으로 사람을 데려와야 하는가, 이미 들어온 사람을 붙잡는 장치인가. 전자라면 텍스트 분리에 비용을 쓸 가치가 충분하고, 후자라면 그 예산을 인터랙션 품질과 로딩 속도에 넣는 편이 낫습니다. 안 해도 되는 데 돈을 쓰게 만들면 신뢰를 잃습니다.

정리

3D를 도입할 때 보여주기만 생각하면 검색 자산을 통째로 잃습니다. 검색 유입이 목적인 페이지라면 텍스트 분리와 구조화 데이터와 폴백 이미지를 처음부터 설계하세요. 나중에 붙이려 하면 3D 구조를 다시 뜯어야 해서 비용이 몇 배로 커집니다. SEO를 개발 단계에서 해야 하는 이유와 함께 보면 좋습니다.

검색과 AI 노출까지 고려한 3D 도입을 검토 중이시라면, 프로젝트 상담을 통해 문의해 주세요.

다른 포스팅
Blog·인사이트

크롤링 안 되는 3D 콘텐츠, 검색·AI에 노출시키는 법

···4분 읽기

검색 엔진은 3D 안을 못 읽는다

WebGL로 만든 3D 콘텐츠는 화면에서는 멋지지만, 검색 엔진과 AI 크롤러는 그 안의 정보를 직접 읽지 못합니다. 크롤러에게 캔버스에 그려진 3D는 거대한 그림 한 장과 같아서, 그 안에 박힌 제품명도 사양도 가격도 텍스트로 인식되지 않습니다. 3D 뷰어만 잘 만들고 제품 정보를 전부 그 안에 넣으면, 검색에는 아무것도 잡히지 않아 자연 유입이 0이 됩니다. 잘 만든 3D가 오히려 검색에서 사라지는 역설입니다.

저희가 두코의 화장품 용기 웹3D 카탈로그를 만들 때 정확히 이 지점을 신경 썼습니다. 로고와 색과 재질을 실시간으로 바꿔 보는 셰이더 기반 시뮬레이션이 핵심 경험이었지만, 그 화려한 3D가 검색에 안 잡히면 웹 기업 문의 0건에서 1년도 되지 않아 수백 건이라는 결과는 나오지 않았을 겁니다. 3D는 머무르게 하는 장치였고, 찾아오게 만든 건 그 밑에 깔린 텍스트와 메타 설계였습니다.

그래서 분리해야 한다

이 문제가 가장 첨예해지는 건 디지털 카탈로그와 3D가 한 페이지에서 만나는 경우입니다. 제품 정보를 잔뜩 담은 카탈로그에 3D 경험을 얹는 순간, "검색이 읽어야 하는 정보"와 "검색이 못 읽는 3D"가 같은 화면에 공존하기 때문입니다. 그래서 둘을 한 덩어리로 묶지 말고 역할을 나눠야 합니다. 제품명·설명·가격·사양 같은 카탈로그 정보는 일반 HTML로 두어 검색·AI가 잘 읽고 잘 노출되게 하고, 3D 뷰어는 그 위에 별도 레이어로 얹어 경험만 책임지게 하는 것입니다.

그래야 3D가 로드되지 않아도, 자바스크립트가 늦게 실행돼도, 제품 정보는 검색 엔진이 첫 응답인 서버 렌더링 HTML에서 바로 읽힙니다.

흔한 실수는 이 텍스트를 화면에서 안 보인다고 숨김 처리하거나 3D 로드 후 자바스크립트로만 주입하는 것인데, 그러면 크롤러가 다시 못 읽거나 신뢰도가 떨어집니다. 저희는 사람 눈에는 3D, 크롤러 눈에는 정상 문서가 동시에 성립하도록, 화면 밖으로 밀어내더라도 실제 텍스트는 살아 있게 둡니다.

구조화 데이터와 폴백 이미지

여기에 두 가지를 더합니다. JSON-LD 같은 구조화 데이터로 제품명과 브랜드와 가격을 명시하면 검색과 AI가 이건 어떤 제품인지를 추측이 아니라 선언으로 이해합니다. 그리고 WebGL이 안 되는 환경을 위한 고품질 폴백 이미지를 항상 준비하면, 이 이미지가 검색 썸네일과 카카오와 메타 공유 미리보기에 그대로 쓰입니다. 빈 화면이 아니라 잘 찍은 제품 컷이 뜨는 것, 이 차이가 클릭률을 가릅니다.

AI 답변 엔진 시대에는 이 설계가 더 중요해집니다. AI가 페이지를 요약해 한 문장으로 답하는 시대에 그 AI가 읽는 건 결국 텍스트와 구조화 데이터입니다. 3D 안에만 정보가 있으면 AI 답변에는 아예 등장하지 못합니다. AEO 시대의 웹사이트 설계를 함께 보면 좋습니다.

이 설계가 덜 중요한 경우도 있다

모든 3D 프로젝트에 이 작업이 필요한 건 아닙니다. 로그인 뒤 사내 설정 툴, 인증 게이트 안의 B2B 관리자 화면, 광고로만 트래픽을 받는 단발성 캠페인 페이지라면 SEO 설계 공수가 회수되지 않습니다. 저희가 LG ThinQ에서 만든 실내 공간 3D 시뮬레이션처럼 앱 안에서 도면을 연동하고 가구와 가전을 배치하는 경험은, 검색 노출보다 앱 내 사용성과 멀티 디바이스 일관성이 훨씬 중요했습니다. 목적이 발견이 아니라 조작이면 우선순위는 달라집니다.

그래서 저희는 시작 전에 먼저 묻습니다. 이 3D는 검색으로 사람을 데려와야 하는가, 이미 들어온 사람을 붙잡는 장치인가. 전자라면 텍스트 분리에 비용을 쓸 가치가 충분하고, 후자라면 그 예산을 인터랙션 품질과 로딩 속도에 넣는 편이 낫습니다. 안 해도 되는 데 돈을 쓰게 만들면 신뢰를 잃습니다.

정리

3D를 도입할 때 보여주기만 생각하면 검색 자산을 통째로 잃습니다. 검색 유입이 목적인 페이지라면 텍스트 분리와 구조화 데이터와 폴백 이미지를 처음부터 설계하세요. 나중에 붙이려 하면 3D 구조를 다시 뜯어야 해서 비용이 몇 배로 커집니다. SEO를 개발 단계에서 해야 하는 이유와 함께 보면 좋습니다.

검색과 AI 노출까지 고려한 3D 도입을 검토 중이시라면, 프로젝트 상담을 통해 문의해 주세요.

다른 포스팅
WebGL프로젝트 상담