웹 게임을 위한 스트리밍 에셋 로딩

플레이어는 100MB 다운로드를 기다려주지 않습니다. 에셋을 점진적으로 로드해서 나머지가 백그라운드에서 로드되는 동안에도 플레이할 수 있게 하세요.

1) 로딩 전략

에셋을 단계별로 나눕니다.

핵심 — 첫 화면을 보여주는 데 필요 (< 1MB)
게임플레이 — 플레이하는 데 필요 (< 10MB)
강화 — 있으면 좋은 것 (백그라운드에서 로드)

2) 기본 에셋 로더

class AssetLoader {
  constructor() {
    this.cache = new Map()
    this.loading = new Map()
  }
  
  async loadImage(url) {
    if (this.cache.has(url)) return this.cache.get(url)
    if (this.loading.has(url)) return this.loading.get(url)
    
    const promise = new Promise((resolve, reject) => {
      const img = new Image()
      img.onload = () => {
        this.cache.set(url, img)
        this.loading.delete(url)
        resolve(img)
      }
      img.onerror = reject
      img.src = url
    })
    
    this.loading.set(url, promise)
    return promise
  }
  
  async loadJSON(url) {
    if (this.cache.has(url)) return this.cache.get(url)
    
    const response = await fetch(url)
    const data = await response.json()
    this.cache.set(url, data)
    return data
  }
  
  async loadAudio(url, audioCtx) {
    if (this.cache.has(url)) return this.cache.get(url)
    
    const response = await fetch(url)
    const buffer = await response.arrayBuffer()
    const audioBuffer = await audioCtx.decodeAudioData(buffer)
    this.cache.set(url, audioBuffer)
    return audioBuffer
  }
}

3) 진행 상황과 함께 로딩

async function loadWithProgress(url, onProgress) {
  const response = await fetch(url)
  const contentLength = response.headers.get('Content-Length')
  const total = parseInt(contentLength, 10)
  
  const reader = response.body.getReader()
  const chunks = []
  let received = 0
  
  while (true) {
    const { done, value } = await reader.read()
    if (done) break
    
    chunks.push(value)
    received += value.length
    onProgress(received / total)
  }
  
  const blob = new Blob(chunks)
  return blob
}

주의할 점: 서버가 응답을 압축하면(gzip 또는 brotli, 대부분의 CDN이 기본으로 사용합니다) Content-Length는 압축된 크기인 반면 읽어 들이는 청크는 이미 압축이 풀린 상태입니다. 그래서 received / total이 100%를 넘어가게 됩니다. 압축된 응답에서 정확한 바이트 단위 진행 바를 만들려면 에셋을 압축하지 않고 제공하거나, 직접 압축 전 크기를 담은 헤더를 보내거나, 실제 전송 진행 상황을 알려주는 XMLHttpRequest의 onprogress 이벤트로 대체하세요.

4) 전체 진행 상황과 함께 일괄 로딩

async function loadAssets(manifest, onProgress) {
  const total = manifest.length
  let completed = 0
  const results = {}
  
  const promises = manifest.map(async (item) => {
    const asset = await loadAsset(item.url, item.type)
    results[item.name] = asset
    completed++
    onProgress(completed / total, item.name)
  })
  
  await Promise.all(promises)
  return results
}

// 사용법
const manifest = [
  { name: 'player', url: 'player.png', type: 'image' },
  { name: 'level1', url: 'level1.json', type: 'json' },
  { name: 'music', url: 'music.mp3', type: 'audio' },
]

const assets = await loadAssets(manifest, (progress, name) => {
  console.log(`Loading: ${Math.round(progress * 100)}% (${name})`)
})

5) 우선순위 큐 로더

class PriorityLoader {
  constructor(concurrency = 4) {
    this.queue = []
    this.active = 0
    this.concurrency = concurrency
  }
  
  add(url, priority = 0) {
    return new Promise((resolve, reject) => {
      this.queue.push({ url, priority, resolve, reject })
      this.queue.sort((a, b) => b.priority - a.priority)
      this.process()
    })
  }
  
  async process() {
    if (this.active >= this.concurrency || this.queue.length === 0) return
    
    this.active++
    const { url, resolve, reject } = this.queue.shift()
    
    try {
      const response = await fetch(url)
      const blob = await response.blob()
      resolve(blob)
    } catch (err) {
      reject(err)
    }
    
    this.active--
    this.process()
  }
}

// 사용법
const loader = new PriorityLoader()
loader.add('critical.png', 10)  // 먼저 로드
loader.add('optional.png', 1)   // 나중에 로드

6) 레벨 지연 로딩

class LevelManager {
  constructor(loader) {
    this.loader = loader
    this.levels = new Map()
  }
  
  async preload(levelId) {
    if (this.levels.has(levelId)) return
    
    const manifest = await this.loader.loadJSON(`levels/${levelId}/manifest.json`)
    const assets = await this.loadLevelAssets(manifest)
    this.levels.set(levelId, { manifest, assets })
  }
  
  async loadLevelAssets(manifest) {
    // 이 레벨에 필요한 것만 로드
    const assets = {}
    
    for (const texture of manifest.textures) {
      assets[texture.name] = await this.loader.loadImage(texture.url)
    }
    
    return assets
  }
  
  unload(levelId) {
    this.levels.delete(levelId)
    // 에셋은 가비지 컬렉션될 수 있다
  }
}

7) 큰 파일 스트리밍

큰 파일(3D 모델, 오디오)은 스트리밍하면서 점진적으로 처리하세요.

async function streamLargeFile(url, onChunk) {
  const response = await fetch(url)
  const reader = response.body.getReader()
  
  while (true) {
    const { done, value } = await reader.read()
    if (done) break
    onChunk(value)
  }
}

// 오디오: Media Source Extensions 사용
// 3D: 도착하는 대로 메시 데이터 처리

8) 로드한 에셋 캐싱

영구 캐싱을 위해 IndexedDB와 결합하세요.

class CachedLoader {
  constructor() {
    this.memCache = new Map()
    this.dbName = 'AssetCache'
  }
  
  async loadImage(url) {
    // 메모리 확인
    if (this.memCache.has(url)) return this.memCache.get(url)
    
    // IndexedDB 확인
    const cached = await this.getFromDB(url)
    if (cached) {
      const img = await this.blobToImage(cached)
      this.memCache.set(url, img)
      return img
    }
    
    // 가져와서 캐시
    const response = await fetch(url)
    const blob = await response.blob()
    await this.saveToDB(url, blob)
    
    const img = await this.blobToImage(blob)
    this.memCache.set(url, img)
    return img
  }
  
  blobToImage(blob) {
    return new Promise((resolve) => {
      const img = new Image()
      img.onload = () => {
        URL.revokeObjectURL(img.src)
        resolve(img)
      }
      img.src = URL.createObjectURL(blob)
    })
  }
  
  // IndexedDB 메서드...
}

9) 로딩 화면 패턴

class LoadingScreen {
  constructor(canvas) {
    this.canvas = canvas
    this.ctx = canvas.getContext('2d')
    this.progress = 0
    this.message = 'Loading...'
  }
  
  update(progress, message) {
    this.progress = progress
    this.message = message || this.message
    this.render()
  }
  
  render() {
    const { ctx, canvas } = this
    ctx.fillStyle = '#1a1a2e'
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    
    // 진행 바
    const barWidth = canvas.width * 0.6
    const barHeight = 20
    const x = (canvas.width - barWidth) / 2
    const y = canvas.height / 2
    
    ctx.fillStyle = '#333'
    ctx.fillRect(x, y, barWidth, barHeight)
    
    ctx.fillStyle = '#4ade80'
    ctx.fillRect(x, y, barWidth * this.progress, barHeight)
    
    // 텍스트
    ctx.fillStyle = '#fff'
    ctx.font = '16px sans-serif'
    ctx.textAlign = 'center'
    ctx.fillText(this.message, canvas.width / 2, y - 20)
    ctx.fillText(`${Math.round(this.progress * 100)}%`, canvas.width / 2, y + 50)
  }
}

10) 모범 사례

즉시 뭔가 보여주기 — 정적 이미지라도 좋습니다
보이는 것부터 로드 — 현재 화면에 필요한 텍스처
플레이스홀더 사용 — 나중에 업그레이드되는 저해상도 이미지
다음 레벨 미리 가져오기 — 플레이어가 아직 플레이하는 동안
실패를 매끄럽게 처리 — 재시도 로직, 폴백

async function loadWithRetry(url, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      return await fetch(url)
    } catch (err) {
      if (i === maxRetries - 1) throw err
      await new Promise(r => setTimeout(r, 1000 * (i + 1)))
    }
  }
}

빠르게 로드되는 웹 게임 출시하기
게임 캐싱을 위한 Service Worker
IndexedDB 게임 저장
게임 로직을 위한 Web Worker — 메인 스레드 밖에서 에셋 디코딩과 처리
무료 게임 에셋을 찾을 수 있는 곳 — 스트리밍할 3D 모델, 텍스처, 오디오 소스

외부 자료

MDN: Fetch API — 스트리밍 응답과 ReadableStream
MDN: ReadableStream — 스트리밍된 데이터 청크 처리
glTF 2.0 specification — 3D 에셋 스트리밍을 위한 표준 포맷

웹 게임을 위한 스트리밍 에셋 로딩 ​

1) 로딩 전략 ​

2) 기본 에셋 로더 ​

3) 진행 상황과 함께 로딩 ​

4) 전체 진행 상황과 함께 일괄 로딩 ​

5) 우선순위 큐 로더 ​

6) 레벨 지연 로딩 ​

7) 큰 파일 스트리밍 ​

8) 로드한 에셋 캐싱 ​

9) 로딩 화면 패턴 ​

10) 모범 사례 ​

관련 글 ​

외부 자료 ​