게시일: 2025년 9월 23일
clipboardchange 이벤트는 Microsoft Edge팀이 Chrome에 추가한 새로운 기능입니다. 이를 통해 폴링의 성능 오버헤드 없이 클립보드 변경사항을 효율적으로 모니터링할 수 있습니다.
이제 버전 140부터 Chrome과 Edge 모두에서 오리진 트라이얼을 통해 clipboardchange 이벤트를 테스트할 수 있습니다.
Google은 이 새로운 기능을 표준화하기를 바라므로 테스트하는 동안 의견이 있으면 언제든지 알려주세요.
클립보드를 폴링하여 변경사항을 감지할 때의 문제점
시스템 클립보드에서 사용할 수 있는 콘텐츠를 확인하려면 비효율적인 폴링 방법을 사용해야 합니다. 예를 들어 텍스트 편집 웹 앱은 클립보드에 텍스트, 이미지 또는 HTML 콘텐츠가 포함되어 있는지에 따라 다른 '붙여넣기' 버튼을 사용 설정할 수 있습니다.
이를 달성하기 위한 현재 접근 방식에서는 다음 코드 스니펫에 표시된 대로 클립보드 콘텐츠를 확인하기 위해 navigator.clipboard.read() 메서드를 반복적으로 호출해야 합니다.
// Inefficient polling approach
setInterval(async () => {
try {
const clipboardItems = await navigator.clipboard.read();
updatePasteButtons(clipboardItems);
} catch (err) {
console.error('Failed to read clipboard:', err);
}
}, 1000); // Poll every second
이 방법은 작동하지만 상당한 단점도 있습니다.
성능 영향
클립보드를 지속적으로 폴링하면 불필요한 오버헤드가 발생합니다. navigator.clipboard.read() 호출에는 시스템 수준 클립보드 액세스가 필요하며, 이는 특히 리소스가 제한된 기기에서 애플리케이션의 성능에 부정적인 영향을 미칠 수 있습니다. 폴링 빈도는 응답성과 성능 간의 절충이 됩니다.
배터리 소모
모바일 기기에서 클립보드를 자주 폴링하면 사용자가 콘텐츠를 적극적으로 복사하거나 붙여넣지 않을 때도 애플리케이션이 시스템 리소스에 지속적으로 액세스하므로 배터리 소모가 발생할 수 있습니다.
사용자 환경 불일치
폴링 간격으로 인해 콘텐츠가 복사된 시간과 새 클립보드 상태를 반영하도록 UI가 업데이트되는 시간 사이에 지연이 발생합니다. 사용자에게 오래된 붙여넣기 버튼 상태가 표시되거나 올바른 옵션을 사용할 수 없는 짧은 기간이 발생할 수 있습니다.
과도한 폴링으로 인한 개인 정보 보호 문제
클립보드에 자주 액세스하면 애플리케이션이 변경되지 않은 경우에도 클립보드 데이터를 계속 읽어 개인 정보 보호 문제가 발생할 수 있습니다. 클립보드 콘텐츠에 대해 개인 정보 보호를 중요하게 생각하는 사용자에게는 이러한 기능이 침해적으로 느껴질 수 있습니다.
clipboardchange 이벤트
이러한 문제를 해결하기 위해 clipboardchange라는 새로운 이벤트를 구현했으며, 앱에서 테스트할 수 있도록 Edge와 Chrome 모두에서 오리진 트라이얼을 시작합니다.
이 이벤트를 사용하면 웹 애플리케이션이 클립보드 변경사항을 적극적으로 폴링하는 대신 반응적으로 응답할 수 있습니다. 콘텐츠가 애플리케이션에서 클립보드로 복사되거나 잘리거나 클립보드가 지워지거나 콘텐츠가 붙여넣기될 때 (경우에 따라 클립보드가 지워질 수 있음) 자동으로 실행됩니다. 이 이벤트는 문서에 포커스가 있을 때만 발생합니다.
다음과 같이 navigator.clipboard 인터페이스에 리스너를 추가하여 clipboardchange 이벤트를 수신할 수 있습니다.
navigator.clipboard.addEventListener('clipboardchange', event => {
console.log('Clipboard content changed!');
console.log('Available MIME types:', event.types);
// Update UI based on available formats
updatePasteButtons(event.types);
});
주요 이점
clipboardchange 이벤트는 폴링에 비해 다음과 같은 여러 이점을 제공합니다.
- 효율적: 변경사항이 실제로 발생할 때만 이벤트가 발생합니다.
- 개인 정보 보호: 이벤트는 실제 콘텐츠가 아닌 네이티브 MIME 유형만 노출합니다.
- 권한 프롬프트 없음: 민감한 데이터가 노출되지 않으므로 사용자 권한이 필요하지 않습니다.
- 실시간 응답성: 클립보드의 콘텐츠가 변경되면 UI가 즉시 업데이트됩니다.
- 포커스 인식: 문서에 포커스가 있는 경우에만 이벤트가 발생합니다.
types 속성
clipboardchange 이벤트 객체에는 클립보드에서 사용할 수 있는 MIME 유형의 배열이 포함된 types 속성이 포함됩니다.
navigator.clipboard.addEventListener('clipboardchange', event => {
// Example types array: ['text/plain', 'text/html', 'image/png']
const hasText = event.types.includes('text/plain');
const hasImage = event.types.includes('image/png');
const hasHtml = event.types.includes('text/html');
// Enable/disable paste buttons accordingly
document.getElementById('paste-text').disabled = !hasText;
document.getElementById('paste-image').disabled = !hasImage;
document.getElementById('paste-html').disabled = !hasHtml;
});
포커스 동작
문서에 포커스가 없는 동안 클립보드 변경이 발생하면 문서가 시스템 포커스를 다시 얻을 때 단일 clipboardchange 이벤트가 발생합니다.
이전 클립보드 변경 정보는 사용할 수 없으며 페이지가 포커스를 얻을 때 사용 가능한 유형만 types 멤버에 포함됩니다.
오늘 clipboardchange 이벤트 테스트
오늘 새로운 clipboardchange 이벤트를 테스트할 수 있습니다.
- 브라우저에서만 기능을 사용 설정하여 로컬로
- 또는 프로덕션 웹 애플리케이션에서 오리진 트라이얼을 등록합니다.
호환성 향상을 위해 clipboardchange 이벤트 감지
먼저 이 기능은 새로운 기능이므로 사용하기 전에 지원 여부를 감지해야 합니다. 다음과 같이 navigator.clipboard에서 onclipboardchange 속성의 존재를 테스트하여 이를 확인할 수 있습니다.
if ('onclipboardchange' in navigator.clipboard) {
// The clipboardchange event is supported
navigator.clipboard.addEventListener('clipboardchange', handleClipboardChange);
} else {
// Fallback to polling or other methods
console.log('clipboardchange event not supported, using fallback');
setInterval(checkClipboard, 2000);
}
로컬에서 테스트
브라우저에서만 clipboardchange 이벤트를 테스트하려면 다음 단계를 따르세요.
about://flags페이지를 엽니다.- 플래그 검색 상자에서
ClipboardChangeEvent를 검색합니다. - 드롭다운을 사용하여 값을 기본값에서 사용으로 변경합니다.
- 브라우저를 다시 시작합니다.
오리진 트라이얼 신청
실제 사용자와 함께 사이트에서 clipboardchange 이벤트를 사용해 보려면 Chrome 또는 Edge에서 오리진 트라이얼에 가입하세요.
오리진 트라이얼은 Chrome 및 Edge에서 버전 140~142(2025년 9월 2일~2025년 12월 2일) 사이에 실행됩니다.
오리진 트라이얼 시작하기를 읽고 오리진 트라이얼과 시작하는 방법을 자세히 알아보세요.
데모
이벤트가 작동하는 것을 확인하려면 데모를 살펴보고 GitHub에서 소스 코드를 확인하세요.
이 데모에서는 clipboardchange 이벤트를 사용하여 클립보드 콘텐츠에 따라 자동으로 업데이트되는 반응형 붙여넣기 인터페이스를 만드는 방법을 보여줍니다.
다양한 유형의 콘텐츠 (텍스트, 이미지, HTML)를 복사해 보세요. 폴링 없이 붙여넣기 버튼이 실시간으로 사용 설정 및 중지되는 것을 확인할 수 있습니다.
의견
clipboardchange 이벤트가 사용 사례에 어떻게 적용되는지 알려주시면 감사하겠습니다. W3C/clipboard-apis 저장소에서 문제를 만들어 의견을 제공하세요.
관심사에 관한 공개 신호는 Google과 다른 브라우저가 이 기능의 중요성을 이해하는 데 도움이 되며, 이는 표준화 프로세스에 영향을 줄 수 있습니다.
이 이벤트는 점진적 개선으로 사용할 수 있지만 클립보드 API 사양의 일부로 표준화하여 결국 모든 브라우저에서 채택되기를 바랍니다. 지금은 폴링이나 다른 클립보드 모니터링 기법으로 대체할 수 있습니다.