복사 시 출처 추가 기능 구현 가이드

📋 복사 시 출처 추가 기능 구현 가이드

🔹 소개

정적 사이트에서 JavaScript를 사용해 복사 시 출처를 추가하는 기능을 구현하는 방법입니다. 클립보드 이벤트를 활용하여 사용자가 콘텐츠를 복사할 때 자동으로 출처 정보를 추가할 수 있습니다.

💻 구현 코드

📌 소스 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>복사 시 출처 추가 예시</title>
    <style>
      body {
        font-family: 'Malgun Gothic', sans-serif;
        margin: 20px;
      }
      .article-content {
        border: 1px solid #ddd;
        padding: 20px;
        max-width: 600px;
        margin: 0 auto;
        background-color: #f9f9f9;
      }
    </style>
  </head>
  <body>
    <div class="article-content">
      <h1>제목: 복사 시 출처 추가 예시</h1>
      <p>
        내 글을 누군가 복사해 붙여넣기를 할 때, 내 사이트의 이름이 함께
        표시되도록 할 수 있습니다. 기본적인 원리는 다음과 같습니다.
      </p>
      <p>
        copy 이벤트 리스너 등록: JavaScript를 사용하여 문서(또는 특정 영역)에
        copy 이벤트를 감지하는 리스너를 추가합니다. 사용자가 텍스트를 복사할 때
        이 이벤트가 발생합니다.
      </p>
      <p>
        클립보드 데이터 조작: copy 이벤트가 발생하면 event.clipboardData 객체에
        접근하여 복사될 텍스트를 가져옵니다. 여기에 신문사 이름, 기사 제목, 원본
        URL 등 원하는 출처 정보를 추가하여 다시 클립보드에 설정합니다.
      </p>
      <p>
        기본 동작 방지: event.preventDefault()를 호출하여 브라우저의 기본 복사
        동작(선택된 텍스트만 복사)을 막고, 우리가 정의한 텍스트가 복사되도록
        합니다.
      </p>
    </div>

    <script>
      document.addEventListener('copy', function (event) {
        // 사용자가 선택한 텍스트 가져오기
        const selectedText = window.getSelection().toString();
        // 현재 페이지의 URL 가져오기
        const pageUrl = window.location.href;
        // 현재 문서의 제목 (예: <title> 태그의 내용)
        const pageTitle = document.title;

        // 추가할 출처 정보
        const attributionText = `\n\n[출처: ${pageTitle}] 원문: ${pageUrl}\n\n(자료 인용 시 출처를 표시해 주세요.^^)`;

        // 클립보드에 설정할 최종 텍스트
        const newClipboardText = selectedText + attributionText;

        // 클립보드 데이터 설정
        event.clipboardData.setData('text/plain', newClipboardText);
        // 기본 복사 동작 방지
        event.preventDefault();
      });
    </script>
  </body>
</html>

📋 실행 예시

북두문학/복사 시 출처 추가 예시

내 사이트의 글을 누군가 복사해 붙여넣기를 할 때, 내 사이트의 이름이 함께 표시되도록 할 수 있습니다. 기본적인 원리는 다음과 같습니다.

copy 이벤트 리스너 등록: JavaScript를 사용하여 문서(또는 특정 영역)에 copy 이벤트를 감지하는 리스너를 추가합니다. 사용자가 텍스트를 복사할 때 이 이벤트가 발생합니다.
클립보드 데이터 조작: copy 이벤트가 발생하면 event.clipboardData 객체에 접근하여 복사될 텍스트를 가져옵니다. 여기에 사이트 이름, 기사 제목, 원본 URL 등 원하는 출처 정보를 추가하여 다시 클립보드에 설정합니다.
기본 동작 방지: event.preventDefault()를 호출하여 브라우저의 기본 복사 동작(선택된 텍스트만 복사)을 막고, 우리가 정의한 텍스트가 복사되도록 합니다.

📌 코드 설명

.article-content: 복사될 콘텐츠가 있는 영역입니다. 이 예시에서는 문서 전체에 copy 이벤트를 걸었지만, 특정 div에만 걸 수도 있습니다.
document.addEventListener('copy', function(event) { ... });: 문서에 copy 이벤트 리스너를 추가합니다. 텍스트를 복사하려고 할 때 이 함수가 실행됩니다.
window.getSelection().toString();: 사용자가 현재 웹페이지에서 선택한 텍스트를 문자열로 가져옵니다.
window.location.href;: 현재 웹페이지의 전체 URL을 가져옵니다.
document.title;: 현재 웹페이지의 <타이틀> 태그에 있는 제목을 가져옵니다.
attributionText: 사이트 이름, 원문 링크 등 원하는 출처 정보를 포함하는 문자열을 만듭니다. \n\n은 줄 바꿈을 의미합니다.
event.clipboardData.setData('text/plain', newClipboardText);: 클립보드에 text/plain 형식으로 newClipboardText를 설정합니다. 이 부분이 핵심입니다.
event.preventDefault();: 이 코드가 없으면 브라우저의 기본 복사 동작(선택된 텍스트만 복사)이 수행되어 우리가 추가한 출처 정보가 무시될 수 있습니다.

🎯

이 가이드를 통해 정적 사이트에서 JavaScript를 활용하여 복사 시 출처를 추가하는 기능을 쉽게 구현할 수 있습니다. 클립보드 이벤트를 사용하면 사용자가 콘텐츠를 복사할 때 자동으로 출처 정보를 추가하여 콘텐츠의 원본을 보호할 수 있습니다. 지금 적용해보세요!

여러분의 웹 개발 여정을 응원합니다! 🏠