Copy to Clipboard 버튼과 알림창 구현하기｜간편 복사 UX 완성

글쓴이 /

웹사이트에서 텍스트나 URL을 손쉽게 복사할 수 있는 Copy to Clipboard 기능은 사용자 편의성을 높이는 필수 기능 중 하나입니다. 이번 글에서는 JavaScript의 navigator.clipboard API를 활용해 복사 버튼을 만들고, SweetAlert2 라이브러리를 이용해 복사 성공 알림창까지 구현해보겠습니다.

Copy to Clipboard란?

Copy to Clipboard는 웹페이지의 특정 텍스트나 데이터를 사용자가 직접 선택하지 않아도 버튼 클릭 한 번으로 클립보드에 복사하는 기능입니다.

활용 예시

  • 추천인 코드 복사
  • 계좌번호 복사
  • URL 간편 복사
  • 프로모션 쿠폰 코드 복사

이 기능은 특히 모바일 사용자 경험(UX) 향상에 매우 유용합니다.

HTML 구조 만들기

<div class="copy-box">
  <input type="text" id="copyText" value="https://exploretechlife.com" readonly />
  <button id="copyBtn">복사하기</button>
</div>
HTML
  • readonly 속성을 통해 사용자가 입력값을 수정할 수 없도록 설정
  • id="copyBtn"은 JavaScript에서 이벤트를 연결하기 위해 사용

기본 스타일 (CSS)

.copy-box {
  display: flex;
  gap: 10px;
  max-width: 400px;
  margin: 20px auto;
}

.copy-box input {
  flex: 1;
  padding: 8px;
  font-size: 14px;
}

.copy-box button {
  padding: 8px 12px;
  background: #4caf50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.copy-box button:hover {
  background: #43a047;
}
CSS

JavaScript로 복사 기능 구현

navigator.clipboard.writeText() 사용

최신 브라우저에서는 navigator.clipboard.writeText()를 사용해 간단히 복사 기능을 구현할 수 있습니다.

<script>
  document.getElementById('copyBtn').addEventListener('click', () => {
    const copyText = document.getElementById('copyText').value;

    navigator.clipboard.writeText(copyText)
      .then(() => {
        alert('복사되었습니다!');
      })
      .catch(() => {
        alert('복사에 실패했습니다.');
      });
  });
</script>
JavaScript

TIP:

  • HTTPS 환경에서만 동작
  • 로컬 환경에서는 http://localhost 예외적으로 허용

SweetAlert2로 알림창 개선하기

기본 alert() 대신 SweetAlert2를 사용하면 시각적으로 세련된 알림창을 구현할 수 있습니다.

SweetAlert2 CDN 추가

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
JavaScript

복사 성공 시 알림창 표시

navigator.clipboard.writeText(copyText)
  .then(() => {
    Swal.fire({
      icon: 'success',
      title: '복사 완료!',
      text: 'URL이 클립보드에 복사되었습니다.',
      timer: 1500,
      showConfirmButton: false
    });
  })
  .catch(() => {
    Swal.fire({
      icon: 'error',
      title: '실패',
      text: '복사 기능을 사용할 수 없습니다.'
    });
  });
JavaScript

UX 향상 팁

팁설명
클릭 시 버튼 색상 변경버튼을 클릭했을 때 즉각적인 피드백 제공
복사 성공 후 자동 닫힘알림창을 1.5~2초 뒤 자동으로 닫히게 설정
접근성 고려 (A11y)aria-label 추가로 스크린 리더 지원
모바일 터치 영역 확대버튼 크기를 최소 44px 이상 확보

예시:

<button id="copyBtn" aria-label="URL 복사하기">복사하기</button>
HTML

마무리

Copy to Clipboard 기능은 간단하지만 사용자 편의성을 크게 향상시킵니다.
navigator.clipboard API를 활용해 깔끔하게 구현하고, SweetAlert2를 통해 직관적인 알림창을 제공하면 UX까지 챙길 수 있습니다.

특히 모바일 환경에서 간편 복사 기능은 사용자 만족도를 높여 사이트 체류 시간과 전환율 향상에 큰 도움이 됩니다.
👉 클립보드 기능을 더 깊이 알고 싶다면, 심화편 포스팅을 확인해보세요.

Summary in English

Learn how to create a Copy to Clipboard button using JavaScript and enhance user experience with stylish alerts powered by SweetAlert2.

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

위로 스크롤