Copy to Clipboard 심화｜HTML, 이미지, UX까지 완벽 활용 가이드

웹에서 “복사하기” 기능은 단순한 텍스트 복사에서 시작해 이제는 HTML, 이미지, 사용자 피드백까지 아우르는 중요한 UX 요소가 되었습니다. 이번 글에서는 navigator.clipboard API를 기반으로 copy to clipboard 심화 활용법을 다룹니다.
기본 복습부터 시작해 HTML, 이미지, 모바일 호환성, SweetAlert2 피드백까지 실무에서 바로 쓸 수 있는 예제를 준비했습니다.

Copy to Clipboard 기본 복습

navigator.clipboard.writeText()는 가장 단순하고 많이 사용되는 복사 방식입니다.
HTTPS 환경에서만 작동하며, 최신 브라우저 지원이 필요합니다.

<button id="copyBtn">복사하기</button>
<script>
  document.getElementById('copyBtn').addEventListener('click', () => {
    navigator.clipboard.writeText("복사할 텍스트 예시")
      .then(() => {
        alert("복사가 완료되었습니다!");
      })
      .catch(err => {
        console.error("복사 실패:", err);
      });
  });
</script>

<button id="copyBtn">복사하기</button>
<script>
  document.getElementById('copyBtn').addEventListener('click', () => {
    navigator.clipboard.writeText("복사할 텍스트 예시")
      .then(() => {
        alert("복사가 완료되었습니다!");
      })
      .catch(err => {
        console.error("복사 실패:", err);
      });
  });
</script>

HTML

HTML 복사하기

텍스트뿐만 아니라 HTML 구조와 스타일까지 그대로 복사해야 할 때가 있습니다.
예를 들어, 사용자가 특정 <div> 내용을 그대로 메신저나 이메일에 붙여넣도록 하고 싶을 때 유용합니다.

<div id="content">
  <h3 style="color:blue;">이 텍스트와 스타일이 그대로 복사됩니다.</h3>
  <p>복사되는 내용 테스트</p>
</div>
<button id="copyHtmlBtn">HTML 복사하기</button>

<script>
document.getElementById('copyHtmlBtn').addEventListener('click', async () => {
  const content = document.getElementById('content').innerHTML;
  const type = "text/html";
  const blob = new Blob([content], { type });
  const clipboardItem = new ClipboardItem({ [type]: blob });

  try {
    await navigator.clipboard.write([clipboardItem]);
    alert("HTML이 복사되었습니다!");
  } catch (err) {
    console.error("HTML 복사 실패:", err);
  }
});
</script>

<div id="content">
  <h3 style="color:blue;">이 텍스트와 스타일이 그대로 복사됩니다.</h3>
  <p>복사되는 내용 테스트</p>
</div>
<button id="copyHtmlBtn">HTML 복사하기</button>

<script>
document.getElementById('copyHtmlBtn').addEventListener('click', async () => {
  const content = document.getElementById('content').innerHTML;
  const type = "text/html";
  const blob = new Blob([content], { type });
  const clipboardItem = new ClipboardItem({ [type]: blob });

  try {
    await navigator.clipboard.write([clipboardItem]);
    alert("HTML이 복사되었습니다!");
  } catch (err) {
    console.error("HTML 복사 실패:", err);
  }
});
</script>

HTML

HTML 복사는 ClipboardItem을 사용합니다.
일부 브라우저(iOS Safari 등)에서는 지원하지 않을 수 있습니다.
호환성 체크는 MDN 호환성 표 참고.

이미지 복사하기 (Canvas 활용)

캔버스에서 생성한 이미지를 클립보드로 복사할 수 있습니다.
예: QR 코드, 통계 차트, 캡처 이미지 등

<canvas id="canvas" width="200" height="100"></canvas>
<button id="copyImageBtn">이미지 복사</button>

<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 간단한 도형 그리기
ctx.fillStyle = 'orange';
ctx.fillRect(10, 10, 180, 80);

document.getElementById('copyImageBtn').addEventListener('click', async () => {
  const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
  const clipboardItem = new ClipboardItem({ 'image/png': blob });
  
  try {
    await navigator.clipboard.write([clipboardItem]);
    alert("이미지가 복사되었습니다!");
  } catch (err) {
    console.error("이미지 복사 실패:", err);
  }
});
</script>

<canvas id="canvas" width="200" height="100"></canvas>
<button id="copyImageBtn">이미지 복사</button>

<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 간단한 도형 그리기
ctx.fillStyle = 'orange';
ctx.fillRect(10, 10, 180, 80);

document.getElementById('copyImageBtn').addEventListener('click', async () => {
  const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
  const clipboardItem = new ClipboardItem({ 'image/png': blob });
  
  try {
    await navigator.clipboard.write([clipboardItem]);
    alert("이미지가 복사되었습니다!");
  } catch (err) {
    console.error("이미지 복사 실패:", err);
  }
});
</script>

HTML

SweetAlert2로 복사 성공/실패 알림

기본 alert() 대신 SweetAlert2를 사용하면 훨씬 깔끔한 UX를 제공합니다.

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<button id="copySweetBtn">복사</button>

<script>
document.getElementById('copySweetBtn').addEventListener('click', () => {
  navigator.clipboard.writeText("Hello SweetAlert2")
    .then(() => {
      Swal.fire({
        icon: 'success',
        title: '복사 완료!',
        text: '클립보드에 복사되었습니다.',
        timer: 1500,
        showConfirmButton: false
      });
    })
    .catch(() => {
      Swal.fire({
        icon: 'error',
        title: '복사 실패',
        text: '브라우저 설정을 확인해주세요.'
      });
    });
});
</script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<button id="copySweetBtn">복사</button>

<script>
document.getElementById('copySweetBtn').addEventListener('click', () => {
  navigator.clipboard.writeText("Hello SweetAlert2")
    .then(() => {
      Swal.fire({
        icon: 'success',
        title: '복사 완료!',
        text: '클립보드에 복사되었습니다.',
        timer: 1500,
        showConfirmButton: false
      });
    })
    .catch(() => {
      Swal.fire({
        icon: 'error',
        title: '복사 실패',
        text: '브라우저 설정을 확인해주세요.'
      });
    });
});
</script>

HTML

실무 예시

쿠폰 코드 복사 버튼

쇼핑몰, 이벤트 페이지에서 자주 활용
복사 후 바로 사용 유도 메시지 표시

블로그 코드 블록 복사

개발 블로그에서 코드 블록에 복사 버튼 제공
Prism.js, Highlight.js와 연동

관리자 페이지 고객 정보 복사

주문번호, 사용자 이메일 등 빠른 처리 가능

📌 TIP:

버튼을 너무 자주 노출하지 말고, UX 흐름을 고려

모바일에서는 복사 후 시각적 피드백을 꼭 제공

모바일 브라우저 호환성 팁

모바일 브라우저에서 발생할 수 있는 문제와 대응 방법입니다.

플랫폼	주요 이슈	해결 방법
iOS Safari	HTML/이미지 복사 제한	텍스트 복사만 지원 안내
Android Chrome	권한 필요	`permissions` API로 미리 권한 확인
구형 브라우저	ClipboardItem 미지원	`execCommand()`로 폴백 제공

if (!navigator.clipboard) {
  // execCommand()로 폴백
  const textarea = document.createElement('textarea');
  textarea.value = "복사할 텍스트";
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}

if (!navigator.clipboard) {
  // execCommand()로 폴백
  const textarea = document.createElement('textarea');
  textarea.value = "복사할 텍스트";
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}

JavaScript

마무리

Clipboard API는 단순한 텍스트 복사에서 시작해 이제는 HTML, 이미지까지 다양한 데이터 전송이 가능해졌습니다.
이번 포스팅에서 다룬 copy to clipboard 심화 기법을 활용하면 쇼핑몰, 블로그, 관리자 페이지 등 다양한 서비스에서 UX를 향상시킬 수 있습니다.
다음 글에서는 SweetAlert2와 함께 실전 쿠폰 코드 시스템을 만드는 예제를 다뤄보겠습니다.

Summary in English

Upgrade your clipboard skills! This advanced guide covers text, HTML, and image copying, with SweetAlert2 integration and mobile browser tips for a better UX.

“이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.”

대표 사진: Unsplash의Gabriel Heinzer