HTML <template> 요소를 사용한 콘텐츠 가상화 (Content Virtualization)

이 실험을 시작했을 때, 핵심 질문은 간단했습니다:

<template> 내부의 콘텐츠는 비활성 (inert) 상태이므로, HTML을 템플릿으로 페이지화(page)하여 DOM에 추가하거나 제거함으로써 성능을 개선하는 동시에, 봇(bot)과 콘텐츠 스크레이퍼(scraper)가 접근할 수 있도록 유지할 수 있을까?

정답은 '예'이지만, 몇 가지 중요한 주의 사항이 있습니다.

네 가지 접근 방식

저는 100,000개의 항목으로 구성된 동일한 데이터셋을 사용하여 네 가지 테스트를 구축했으며, 매우 큰 리치 로우(rich rows) 목록을 렌더링할 때 각각 어떻게 동작하는지 비교했습니다.

1. 가상화 없음 (No Virtualization)
2. 페이지화된 템플릿 (Paged Templates)
3. JS 가상화 (JS Virtualization)
4. 지연 페이지화된 템플릿 (Lazy Paged Templates)

각 데모는 초기 비용 (startup cost), 활성 DOM 크기, 구현 복잡도, 콘텐츠 가시성, 그리고 크롤러/스크레이퍼 동작 사이의 서로 다른 트레이드오프 (tradeoff)를 나타냅니다.

1. 가상화 없음 (No Virtualization)

데모: 가상화 없음 (No Virtualization)

이것은 최악의 기준점(baseline)입니다. 모든 로우(row)가 초기 HTML에 포함되어 전송되며 DOM 내에서 활성 상태로 유지됩니다.

장점

• 가장 단순한 구현
• 모든 콘텐츠를 문서에서 즉시 사용할 수 있음
• 원시 HTML 검사, 비-JS 스크레이핑 (non-JS scraping), 소스 기반 AI 분석에 가장 적합함
• SEO 및 인덱싱에 가장 신뢰할 수 있음

단점

• 최악의 초기 비용 (startup cost)
• 가장 큰 활성 DOM
• 가장 높은 메모리 압박 (memory pressure)
• 최악의 스크롤/레이아웃/스타일 재계산 (recalculation) 동작
• 로우가 풍부해질수록 확장성(scale)이 떨어짐

요점

이 방식은 콘텐츠 가시성을 극대화하는 데 가장 좋은 옵션이지만, 대규모 환경에서의 브라우저 성능 측면에서는 최악입니다.

2. 페이지화된 템플릿 (Paged Templates)

데모: 페이지화된 템플릿 (Paged Templates)

이 버전은 초기 HTML에 모든 행(row)을 포함하여 전송하지만, 대부분의 행을 <template> 요소 내부에 저장하여 마운트(mount)될 때까지 비활성(inert) 상태로 유지합니다.

장점 (Pros)

• 활성 DOM (live DOM) 압박 감소
• 마크업을 HTML 우선(HTML-first) 방식으로 유지
• 필요한 경우에만 콘텐츠를 DOM으로 페이지화(page)할 수 있음
• 우리의 간단한 AI 파싱 테스트에서, 일반적인 HTML만큼이나 콘텐츠를 잘 노출함

단점 (Cons)

• 여전히 대규모의 초기 HTML을 다운로드하고 파싱해야 함
• 비활성(inert) 콘텐츠는 공짜가 아님: 여전히 문서 크기에 기여함
• 전체 데이터셋을 사전에 전송하는 경우 시작 비용(startup cost)이 여전히 높음
• <template> 콘텐츠는 비활성 상태이며 일반적인 렌더링 페이지 콘텐츠가 아니기 때문에, SEO 동작이 일반적인 렌더링된 HTML보다 여전히 예측하기 어려움

시사점 (Takeaway)

템플릿 가상화(Template virtualization)는 실행 가능한 방법이지만, 시작 비용(startup cost)보다는 런타임 DOM 비용을 개선하는 데 더 효과적입니다. 이 테스트에서 AI 파싱은 정적 소스에 여전히 비활성 템플릿 콘텐츠가 포함되어 있었기 때문에 예상보다 훨씬 더 잘 작동했습니다.

3. JS 가상화 (JS Virtualization)

데모: JS Virtualization

이 버전은 데이터를 JavaScript에 유지하며, 스크롤하는 동안 작은 행 노드 풀(pool)을 재사용합니다.

장점 (Pros)

• 테스트 중 가장 우수한 시작 동작(startup behavior)
• 작은 초기 HTML 문서
• 낮은 활성 DOM (live DOM) 크기
• 고정된 노드 풀을 재활용하므로 효율적인 스크롤 가능
• 일반적으로 앱 스타일 UI 성능을 위한 가장 강력한 선택지

단점 (Cons)

• 더 많은 클라이언트 측 로직이 필요함
• 콘텐츠가 초기 HTML에 완전히 존재하지 않음
• JS를 사용하지 않는 스크래핑(scraping) 및 소스 기반 분석에는 가장 취약한 옵션
• SSR(Server-Side Rendering), 프리렌더링(prerendering) 또는 크롤링 가능한 페이지네이션 경로(paginated routes)와 결합되지 않으면 SEO에 덜 신뢰할 수 있음

시사점 (Takeaway)

목표가 브라우저 UI 성능이라면, 이것이 대개 가장 강력한 기본 선택입니다. 목표가 콘텐츠 발견 가능성(discoverability)이라면, 이것이 대개 가장 취약한 선택입니다.

4. 지연 페이지 템플릿 (Lazy Paged Templates)

데모: Lazy Paged Templates

이 버전은 템플릿 모델을 유지하면서도, 모든 템플릿을 처음에 한꺼번에 전송하는 대신 초기 페이지 로드 후에 템플릿 페이지들을 생성합니다.

장점 (Pros)

• 템플릿 기반 페이징 (template-backed paging)의 이점을 유지함
• 거대한 템플릿이 가득 찬 HTML 문서로 인해 발생하는 최악의 초기 구동 비용 (startup cost)을 방지함
• 작업을 시간에 따라 분산함으로써 응답성 (responsiveness)을 향상시킴
• 모든 템플릿을 처음에 전송하는 방식보다 더 나은 템플릿 기반의 절충안을 제공함

단점 (Cons)

• 정적 템플릿 (static templates)보다 복잡함
• 페이지를 계속 생성할 경우, 결국 많은 양의 비활성 마크업 (inert markup)을 생성하게 됨
• 여전히 JavaScript (JS) 기반임
• 콘텐츠의 상당 부분이 초기 로드 후에 나타나기 때문에 SEO/스크래핑 (scraping) 가시성이 정적 HTML보다 약함

요약 (Takeaway)

이 방식은 제가 테스트한 템플릿 기반 접근 방식 중 가장 흥미롭습니다. 정적 템플릿 버전의 가장 큰 결함을 피하면서도 비활성 템플릿 (inert template) 아이디어를 유지하지만, 인덱싱 (indexing) 및 스크래핑 (scraping) 측면에서는 여전히 일반 HTML보다 신뢰도가 낮습니다.

성능 vs SEO vs 스크래핑 vs AI 분석

이번 실험을 통한 실질적인 순위는 다음과 같습니다:

접근 방식	브라우저 성능	SEO / 인덱싱	기본 스크래핑	소스 기반 AI 분석
가상화 없음 (No Virtualization)	최악	최상	최상	최상
...

이것이 의미하는 바

• 브라우저 성능이 우선순위라면, JS 가상화 (JS Virtualization)가 대개 승리합니다.
• SEO, 인덱싱, 콘텐츠 스크래핑, 또는 원본 페이지 소스를 검사하는 AI 시스템이 우선순위라면, 가상화 없음 (No Virtualization)이 가장 강력한 선택입니다.
• 활성 DOM 크기를 줄이면서도 HTML 우선 (HTML-first)의 이점을 일부 얻고 싶다면, 페이지형 템플릿 (Paged Templates)이 AI 파싱 (parsing) 및 기본 스크래핑에 놀라울 정도로 효과적일 수 있습니다. 정적 응답에 여전히 템플릿 콘텐츠가 포함되어 있기 때문입니다.
• 즉각적인 전체 초기 구동 비용을 지불하지 않고 템플릿 모델을 사용하고 싶다면, 모든 템플릿을 처음에 전송하는 것보다 지연 페이지형 템플릿 (Lazy Paged Templates)이 더 나은 방향입니다.

AI 파싱 (AI parsing)

각 예제에 대해 간단한 AI 발견 가능성 (discoverability) 테스트를 수행했습니다.

저는 AI(Claude Code 및 Copilot)에게 페이지에서 "Avery Adams"라는 이름이 몇 번 나타나는지 물었습니다. 정답은 391번입니다.

예시	이름을 정확히 카운트함
가상화 없음 (No Virtualization)	✅
...

이 결과는 주목할 만한데, AI 시스템은 종종 페이지의 정적 응답 (static response)을 검사하기 위해 curl과 같은 도구를 사용하기 때문입니다. 이 경우, AI는 <template> 태그 내부의 콘텐츠를 무시하지 않는 것으로 보였습니다. 덕분에 Paged Templates는 순수 JS 렌더링 (JS-rendered) 방식보다 소스 기반 AI 분석에 훨씬 더 높은 발견 가능성 (discoverability)을 가졌습니다.

Lazy Template 버전은 결과가 좋지 않았는데, 콘텐츠의 상당 부분이 원래의 HTML 소스에 존재하는 것이 아니라 초기 응답 이후에 생성되기 때문입니다.

시사점

• 가상화 없음 (No Virtualization)은 AI 파싱 (AI parsing)을 위한 가장 명확하고 신뢰할 수 있는 옵션으로 남아 있습니다.
• Paged Templates는 템플릿 콘텐츠가 정적 HTML에 존재하기만 한다면, 많은 사람들이 예상하는 것보다 AI 발견 가능성이 더 높을 수 있습니다.
• JS 가상화 (JS Virtualization)는 AI 시스템이 초기 페이지 소스로부터 전체 콘텐츠를 이해하기를 원할 때 적합하지 않습니다.
• Lazy Paged Templates는 시작 성능 (startup performance)을 향상시키지만, 그 동일한 지연 (laziness) 특성이 소스 기반 도구가 볼 수 있는 범위를 줄입니다.

결론

템플릿 가상화 (Template virtualization)는 성능을 개선하면서도 정적 분석 (static analysis)이 가능하도록 콘텐츠를 제공하는 실행 가능한 접근 방식이 될 수 있지만, 이를 위한 최선의 도구는 아닐 수 있습니다.

• 가상화 없음 (No Virtualization): 가시성에는 가장 좋으나, 확장성(scale) 면에서는 최악
• Paged Templates: 더 나은 런타임 DOM 동작을 제공하며, 초기 비용은 여전히 높지만 예상보다 AI 파싱에 강력함
• JS 가상화 (JS Virtualization): 전반적인 UI 성능 면에서 최상
• Lazy Paged Templates: 템플릿 기반의 시작 성능 타협안으로는 최상이지만, 소스 가시성 기반의 발견 측면에서는 약함