브라우저에 따라 window.URL.createObjectURL()과 window.webkitURL.createObjectURL()을 선택하는 방법

브라우저 호환성 문제와 해결 접근 방식

파일이나 Blob 객체에 대한 임시 URL을 생성할 때 사용하는 createObjectURL()은 브라우저마다 구현 방식이 달랐습니다. 표준 API는 window.URL.createObjectURL()이지만, 구버전 WebKit 기반 브라우저(구형 Chrome, Safari 등)에서는 window.webkitURL.createObjectURL()이라는 별도의 네임스페이스를 사용했습니다.

따라서 모든 브라우저에서 안정적으로 동작하려면, 실행 환경을 판별하여 적절한 API를 호출해 주는 래퍼(wrapper) 함수를 정의하는 것이 가장 좋은 방법입니다.

1. 래퍼 함수 정의하기

아래 함수는 먼저 window.webkitURL의 존재 여부를 확인하고, 없다면 표준 window.URL.createObjectURL 메서드가 있는지 검사합니다. 어느 쪽도 지원하지 않으면 null을 반환해 오류를 방지합니다.

function display(file) {
  if (window.webkitURL) {
    // WebKit 계열 브라우저 (구버전 Chrome, Safari)
    return window.webkitURL.createObjectURL(file);
  } else if (window.URL && window.URL.createObjectURL) {
    // 표준 URL API를 지원하는 브라우저 (Firefox, 최신 Chrome 등)
    return window.URL.createObjectURL(file);
  } else {
    // Object URL 생성을 지원하지 않는 환경
    return null;
  }
}

2. 크로스 브라우저로 사용하기

함수를 정의한 뒤에는 브라우저 종류를 신경 쓰지 않고 동일하게 호출할 수 있습니다.

var url = display(file);

if (url) {
  var img = document.createElement('img');
  img.src = url;
  document.body.appendChild(img);
} else {
  console.error('이 브라우저는 Object URL 생성을 지원하지 않습니다.');
}

추가로 알아두면 좋은 점

• 최신 브라우저에서는 표준 API만 사용해도 됩니다. 현재 대부분의 브라우저는 window.URL.createObjectURL()을 표준으로 지원하므로, 위의 webkitURL 분기 처리는 구형 브라우저 호환성이 필요한 경우에만 유용합니다.
• 메모리 관리를 잊지 마세요. 생성된 Object URL은 명시적으로 해제하기 전까지 유지되므로, 더 이상 필요하지 않을 때 URL.revokeObjectURL(url)을 호출해 메모리 누수를 방지하는 것이 좋습니다.