게시일: 2025년 4월 30일
기념: 이 웹 기능은 이제 세 가지 주요 브라우저 엔진에서 모두 사용할 수 있으며 2025년 3월 30일부터 새로운 기준으로 제공됩니다.
Async Clipboard API를 사용하면 이전보다 훨씬 쉽게 클립보드로 작업할 수 있습니다. 이제 클립보드를 관리하는 이전 메서드 대신 일반 텍스트 콘텐츠의 경우 navigator.clipboard.writeText()를 호출하고 이미지, 텍스트 콘텐츠, HTML과 같은 '거의' 모든 항목의 경우 navigator.clipboard.write()를 호출할 수 있습니다.
하지만 지금까지는 '거의'를 수치화하는 부분이 누락되었습니다. 예를 들어 API가 SVG를 지원하는지 알 수 없으므로 시도한 후 지원되지 않는 경우 발생한 예외를 포착했습니다. 이는 지원을 확인하는 데 그리 편리한 방법이 아니므로 정적 ClipboardItem.supports() 함수가 지정되었습니다.
이제 이 함수가 기준 '신규로 사용 가능' 상태에 도달했습니다. 즉, 클립보드로 작업하는 것이 더욱 쉬워집니다. 브라우저에서 특정 형식을 지원하는지 확인하려면 관심 있는 형식의 MIME 유형을 함수에 전달합니다.
const format = 'image/svg+xml';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does support image/svg+xml."
이전에는 '거의' 모든 것을 작성했습니다. 여기서부터가 정말 흥미로워집니다. 웹 맞춤 형식을 사용하면 브라우저에서 기본적으로 지원하지 않는 형식으로 작업할 수 있습니다. 예를 들어 기본적으로 브라우저는 AVIF 이미지를 지원하지 않습니다.
const format = 'image/avif';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does not support image/avif."
하지만 웹 맞춤 형식을 사용하면 수신자가 웹 맞춤 형식을 처리하는 방법을 알고 있는 한 AVIF 이미지로 작업하고 자유롭게 복사하여 붙여넣을 수 있습니다.
const format = 'web image/avif';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does support web image/avif."
이제 ClipboardItem.supports() 함수를 통해 웹 맞춤 형식의 클립보드 지원 상황을 올바르게 감지하고 작동하는지 확인할 수 있습니다.
if (ClipboardItem.supports('web image/avif')) {
// Fetch remote AVIF image and obtain its blob representation.
const blob = await fetch('image.avif').then((response) => response.blob());
try {
// Write the image data to the clipboard, prepending the blob's actual
// type (`"image/avif"` with the string `"web "`, so it becomes
// `"web image/avif"`.
const clipboardItem = new ClipboardItem({
'web image/avif': blob,
});
await navigator.clipboard.write([clipboardItem]);
} catch (err) {
console.error(err.name, err.message);
}
}
이제 ClipboardItem.supports() 함수를 기준으로 새로 사용할 수 있으므로 웹 개발자는 웹 맞춤 형식을 비롯한 다양한 MIME 유형에 대한 클립보드 지원을 안정적으로 감지할 수 있습니다. 이 개선사항을 통해 클립보드 작업이 더욱 안정적이고 예측 가능해져 모든 브라우저에서 사용자 환경이 개선됩니다.