GN⁺: 웹 클립보드와 다양한 유형의 데이터 저장 방식

웹 클립보드와 데이터 저장 방식

• 웹 클립보드 API 사용

  • 웹사이트에서 복사한 내용을 Google Docs에 붙여넣으면 서식이 유지되지만, VS Code에 붙여넣으면 텍스트만 붙여넣어짐
  • 클립보드는 MIME 타입과 연관된 여러 표현으로 정보를 저장함
  • W3C 클립보드 사양은 text/plain, text/html, image/png 세 가지 데이터 타입을 지원해야 함

• 비동기 클립보드 API 사용

  • 특정 표현을 읽는 방법:

    const items = await navigator.clipboard.read();
    for (const item of items) {
      if (item.types.includes("text/html")) {
        const blob = await item.getType("text/html");
        const html = await blob.text();
        // HTML 처리...
      }
    }
    

  • 여러 표현을 클립보드에 쓰는 방법:

    const textBlob = new Blob(["Hello, world"], { type: "text/plain" });
    const htmlBlob = new Blob(["Hello, <em>world<em>"], { type: "text/html" });
    const clipboardItem = new ClipboardItem({ [textBlob.type]: textBlob, [htmlBlob.type]: htmlBlob });
    await navigator.clipboard.write([clipboardItem]);
    

• 다른 데이터 타입

  • JSON 데이터를 클립보드에 쓰려고 하면 오류 발생:

    const json = JSON.stringify({ message: "Hello" });
    const blob = new Blob([json], { type: "application/json" });
    const clipboardItem = new ClipboardItem({ [blob.type]: blob });
    await navigator.clipboard.write([clipboardItem]);
    

  • application/json 타입은 지원되지 않음

• isTrusted 속성

  • isTrusted 속성은 이벤트가 사용자 에이전트에 의해 디스패치되었는지 여부를 나타냄
  • 신뢰할 수 있는 이벤트에서만 클립보드에 데이터를 쓸 수 있음

• 클립보드 이벤트 API

  • copy, cut, paste 이벤트에서 clipboardData 속성을 사용하여 데이터 읽기/쓰기 가능
  • JSON 데이터를 클립보드에 쓰는 방법:

    document.addEventListener("copy", (e) => {
      e.preventDefault();
      const json = JSON.stringify({ message: "Hello" });
      e.clipboardData.setData("application/json", json);
    });
    

• clipboardData의 역사

  • 비동기 클립보드 API는 2017년에 추가되었지만, clipboardData는 훨씬 오래된 기능
  • clipboardData는 1997년 Internet Explorer 4에서 처음 도입됨

• 신뢰할 수 없는 스크립트

  • 신뢰할 수 없는 스크립트는 제한된 데이터 타입만 클립보드에 쓸 수 있음
  • 신뢰할 수 없는 이벤트에서 클립보드에 데이터를 쓰려고 하면 실패함

• 복사 버튼 만들기

  • Google Docs와 같은 웹 애플리케이션은 document.execCommand("copy")를 사용하여 신뢰할 수 있는 복사 이벤트를 트리거함
  • 이 방법을 사용하면 클릭 이벤트에서도 임의의 데이터 타입을 클립보드에 쓸 수 있음

• 붙여넣기 버튼 만들기

  • execCommand("paste")는 브라우저와 운영체제에 따라 다르게 동작함
  • Safari는 사용자의 확인을 요구하지만, Chrome과 Edge는 Windows에서만 지원함

• Figma의 복사 및 붙여넣기

  • Figma는 HTML 표현을 사용하여 클립보드에 데이터를 저장함
  • HTML 표현에 base64로 인코딩된 데이터를 포함시켜 클립보드에 저장

• 웹 커스텀 포맷 (Pickling)

  • 2022년부터 Chromium 기반 브라우저에서 지원
  • 웹 애플리케이션이 비동기 클립보드 API를 통해 커스텀 데이터 타입을 쓸 수 있게 함
  • 예시:

    const json = JSON.stringify({ message: "Hello, world" });
    const jsonBlob = new Blob([json], { type: "application/json" });
    const clipboardItem = new ClipboardItem({ [`web ${jsonBlob.type}`]: jsonBlob });
    navigator.clipboard.write([clipboardItem]);
    

GN⁺의 정리

• 이 글은 웹 클립보드 API와 데이터 저장 방식을 탐구함
• 비동기 클립보드 API와 클립보드 이벤트 API의 차이점을 설명함
• Google Docs와 Figma의 복사/붙여넣기 구현 방식을 분석함
• 웹 커스텀 포맷(Pickling) 제안이 소개됨
• 웹 개발자에게 유용한 정보와 클립보드 API의 한계를 이해하는 데 도움을 줄 수 있음