작성완료

Clipboard API 사용 방법

Clipboard API는 웹에서 복사 및 붙여넣기 기능을 프로그래밍적으로 제어할 수 있는 최신 API로, 버튼 클릭으로 텍스트 복사, 리치 텍스트 및 이미지 전송이 가능하며, 보안성과 사용자 경험을 향상시킵니다. 사용 시 HTTPS 환경에서 사용자 제스처가 필요하며, 일부 브라우저는 이미지/HTML 붙여넣기를 제한할 수 있습니다.

JavaScriptWeb Front Developer

Clipboard API로 구현하는 현대적인 웹 클립보드 기능

Clipboard API는 웹에서 복사, 붙여넣기 기능을 프로그래밍적으로 제어할 수 있게 해주는 최신 Web API입니다. 기존 document.execCommand('copy') 방식보다 안정적이며, 비동기 코드 기반으로 보안 모델도 명확합니다.

Clipboard API가 필요한 이유

버튼 클릭만으로 텍스트 복사 기능 구현
리치 텍스트나 이미지도 클립보드와 주고받기 가능
권한 기반 동작으로 보안성과 예측 가능성 증가
모바일 브라우저에서도 일관된 사용자 경험 제공

텍스트 복사하기

javascript
async function copyText() {
  try {
    await navigator.clipboard.writeText("Hello Clipboard API!");
    console.log("복사 완료");
  } catch (e) {
    console.error("복사 실패", e);
  }
}

텍스트 읽어오기

javascript
async function pasteText() {
  try {
    const text = await navigator.clipboard.readText();
    console.log("붙여넣기: ", text);
  } catch (e) {
    console.error("읽기 실패", e);
  }
}

이미지 읽기 예제

javascript
async function readImage() {
  const items = await navigator.clipboard.read();

  for (const item of items) {
    if (item.types.includes("image/png")) {
      const blob = await item.getType("image/png");
      const url = URL.createObjectURL(blob);
      console.log("이미지 URL", url);
    }
  }
}

권한 확인하기

javascript
async function checkClipboardPermission() {
  const result = await navigator.permissions.query({ name: "clipboard-write" });
  console.log(result.state);// granted, denied, prompt
}

주의할 점

HTTPS 환경에서만 동작
사용자 제스처(클릭 등)가 있어야 복사/붙여넣기 허용
일부 브라우저는 이미지/HTML 붙여넣기 지원 제한

마무리

Clipboard API는 사용성 개선에 큰 도움을 주는 현대적 기능입니다. 간단한 복사 버튼부터 이미지 기반의 클립보드 연동까지 다양한 방식으로 활용할 수 있으므로, 사용자 경험을 개선하고 싶은 웹 프로젝트에서 적극 활용해볼 만합니다.