콘텐츠 복사 방지: 오른쪽 클릭·드래그 방지로 내 글을 보호하는 현실적인 방법

오른쪽 클릭·드래그 방지로 내 글을 보호하는 현실적인 방법

글을 열심히 쓰고 올렸더니 다음 날 다른 블로그에 토씨 하나 안 바꾸고 그대로 올라가 있었다. 처음 이런 경험을 했을 때 황당함이 분노보다 먼저 왔다. 어떻게 이런 사람이 있지? 그러다가 어떻게 막을까를 고민했다. 오른쪽 클릭 방지, 드래그 방지, 선택 방지. 이것저것 시도해 봤다. 솔직히 말하면, 완벽한 방어는 없다. 하지만 의미 없지는 않다. 자동차에 도어락이 있다고 도둑을 100% 막지는 못해도, 잠그는 것이 안 잠그는 것보다는 훨씬 낫다. 그 현실적인 선에서 얘기를 해보려 한다.

왜 완벽한 복사 방지는 불가능한가

먼저 솔직하게 한계를 짚고 가자. HTML과 CSS로 복사를 방지해도, 개발자 도구를 열면 소스를 그대로 볼 수 있다. 화면을 캡처해서 OCR 돌리면 텍스트를 뽑을 수 있다. 인쇄 미리보기나 PDF 저장으로 내용을 가져갈 수도 있다. 이걸 다 막으려면 콘텐츠를 아예 이미지로만 제공해야 하는데, 그러면 SEO가 망가진다. 글을 쓰는 이유가 검색에서 발견되기 위함인데, 그 목적 자체를 버리는 셈이다.

그러므로 복사 방지의 목적은 "절대 막기"가 아니라 "문턱 높이기"다. 기술적으로 능숙한 사람은 막을 수 없지만, 복사-붙여넣기가 습관적인 사람은 어느 정도 막을 수 있다. 그게 현실적인 목표다.

JavaScript로 오른쪽 클릭 방지하는 방법

contextmenu 이벤트를 막으면 된다. 간단하다.

// 오른쪽 클릭(컨텍스트 메뉴) 방지
document.addEventListener('contextmenu', function(event) {
  event.preventDefault();
  return false;
});

// 키보드 단축키 방지 (Ctrl+C, Ctrl+A, Ctrl+S 등)
document.addEventListener('keydown', function(event) {
  // Ctrl 또는 Meta(Mac의 Command) 키가 눌렸을 때
  if (event.ctrlKey || event.metaKey) {
    switch(event.key.toLowerCase()) {
      case 'c': // 복사
      case 'a': // 전체 선택
      case 's': // 저장
      case 'u': // 페이지 소스 보기
      case 'p': // 인쇄
        event.preventDefault();
        return false;
    }
  }
  // F12 키 방지 (개발자 도구)
  if (event.key === 'F12') {
    event.preventDefault();
    return false;
  }
});

이렇게 하면 마우스 오른쪽 클릭과 기본적인 단축키가 막힌다. 하지만 이건 생각보다 부작용이 크다. 오른쪽 클릭은 복사 목적 외에도 링크 새 탭 열기, 이미지 저장, 번역 기능 등을 위해 쓰인다. 사용자 경험 측면에서 좋지 않다. 실제로 이 처리를 해둔 사이트에서 링크를 새 탭으로 열려다 막혀서 나가버리는 경우가 많다고 알려져 있다.

텍스트 선택 방지 방법

CSS의 user-select 속성을 쓰면 텍스트 드래그 선택을 막을 수 있다.

/* 특정 영역만 선택 방지 */
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 전체 페이지에 적용하고 싶을 때 */
body {
  -webkit-user-select: none;
  user-select: none;
}

<!-- HTML에서 사용하는 방법 -->
<article class="no-select">
  <p>이 영역의 텍스트는 마우스 드래그로 선택되지 않습니다.</p>
</article>

그러나 이 방법도 문제가 있다. 접근성을 해친다. 저시력 사용자가 텍스트를 복사해서 글꼴을 키우거나 다른 앱에서 읽으려 할 때 막힌다. 번역기 사용도 어려워진다. 그리고 앞서 말했듯 개발자 도구 앞에서는 무력하다.

더 현실적인 방법: 복사 시 출처 자동 추가

막는 것보다 영리한 방법이 있다. 복사를 허용하되, 복사할 때 자동으로 출처 정보를 붙여넣는 것이다. 이 방법이 실제 현장에서 가장 효과적이었다. 왜냐면 내용을 그대로 붙여넣으면 출처가 자동으로 따라가기 때문에, 무심코 복사한 사람도 본인 의도와 무관하게 출처를 달게 된다.

document.addEventListener('copy', function(event) {
  // 사용자가 선택한 텍스트 가져오기
  var selectedText = window.getSelection().toString();

  if (selectedText.length > 100) {
    // 출처 텍스트 구성
    var sourceText = '\n\n출처: ' + document.title + '\nURL: ' + window.location.href;

    // 클립보드에 복사될 내용 수정
    if (event.clipboardData) {
      event.clipboardData.setData('text/plain', selectedText + sourceText);
      event.clipboardData.setData('text/html', selectedText + '<br><br><cite>출처: 
      <a href="' + window.location.href + '">' + document.title + '</a></cite>');
      event.preventDefault();
    }
  }
});

워터마크와 저작권 고지 방법

CSS로 배경에 워터마크를 깔아두는 방법도 있다. 인쇄나 스크린샷에도 워터마크가 남게 할 수 있다.

<!-- 워터마크 적용 HTML 구조 -->
<div class="content-wrapper">
  <p>보호하려는 콘텐츠 내용</p>
</div>

/* CSS 워터마크 - 반복 배경으로 처리 */
.content-wrapper {
  position: relative;
}

.content-wrapper::before {
  content: "© 블로그이름 무단복제금지";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  font-size: 5vw;
  color: rgba(0, 0, 0, 0.05);
  pointer-events: none;
  white-space: nowrap;
  z-index: 1000;
}

이 방법은 너무 진하게 하면 가독성을 해치고, 너무 옅게 하면 스크린샷에서 안 보인다. 미묘한 균형이 필요하다.

진짜 효과 있는 방어: 법적 고지와 DMCA

<!-- 페이지 하단에 저작권 고지 추가 -->
<footer>
  <p>Copyright &copy; 2024 블로그이름. 본 블로그의 모든 콘텐츠는 저작권법에 의해 보호됩니다.</p>
  <p>무단 복제, 배포, 전송을 금지합니다. 인용 시 반드시 출처를 명시하고 원문 링크를 포함해야 합니다.</p>
</footer>

현장에서 느낀 장단점

오른쪽 클릭 방지와 텍스트 선택 방지를 처음 적용했을 때 예상치 못한 문제가 생겼다. 스마트폰에서 링크 롱프레스가 먹통이 됐고, 번역기를 쓰려는 해외 방문자가 불편해했다. 무엇보다 일반 사용자를 불편하게 만드는 것이 이탈률 증가로 이어졌다. 결국 강한 방어는 도둑뿐 아니라 일반 방문자도 막는다는 걸 알게 됐다.

반면 복사 시 출처 자동 추가 방법은 부작용이 없었다. 복사를 허용하면서 자동으로 출처를 달아주니 무심코 복사한 사람들도 출처를 갖게 됐다. 이 방법이 SEO 관점에서도 오히려 백링크 효과가 생기는 예상 밖의 부수 효과를 낳았다.

마무리: 막는 것보다 증거를 남기는 게 더 강하다

콘텐츠 복사 방지를 10년 가까이 고민하고 실험해온 결론은 이것이다. 막는 기술보다 증거를 남기는 방법이 더 효과적이다. 내 글이 언제 발행됐는지 구글 Search Console에 색인되어 있고, 내 글의 복사본에 내 URL이 자동으로 달리고, 문제가 생기면 DMCA를 통해 법적으로 대응할 수 있는 구조. 이 세 가지가 갖춰진다면 기술적 복사 방지보다 훨씬 강력한 방어선이 된다.

보안 울타리를 높이는 것도 중요하지만, 울타리 안에 CCTV를 다는 것이 더 실질적인 억제력이 된다. 복사를 시도하는 사람이 '이 블로그는 복사하면 증거가 남고 신고를 당할 수 있다'는 것을 알게 만드는 환경을 조성하는 것이다. 저작권 고지를 명확히 하고, 복사 시 출처 자동 추가를 적용하고, Google Search Console에 내 콘텐츠 원본을 빠르게 색인시키는 습관. 이 세 가지가 내가 현장에서 쓰는 현실적인 콘텐츠 보호 방법이다. 완벽하지 않지만, 충분히 효과적이다. 그리고 사용자 경험을 해치지 않는 선에서 최선이다.

오랜 기간 이 주제를 다루면서 가장 인상적이었던 사실은, 복사 방지에 가장 열심인 블로그들이 오히려 SEO에서 밀리는 경우가 많았다는 것이다. 강한 JavaScript 방어 코드가 페이지 로딩을 느리게 만들고, 텍스트 선택 방지가 접근성을 해쳐 Lighthouse 점수를 떨어뜨렸다. 보호하려다 오히려 자신을 약하게 만든 셈이다. 방어는 전략적이어야 한다. 막을 수 없는 것을 막으려다 막아야 할 것을 놓치는 실수를 하지 말자.

출처 및 참고 경로

구글 DMCA 신고 센터: https://support.google.com/legal/troubleshooter/1114905
MDN user-select CSS 속성: https://developer.mozilla.org/ko/docs/Web/CSS/user-select
MDN ClipboardEvent API: https://developer.mozilla.org/ko/docs/Web/API/ClipboardEvent
Google Search Console 색인 요청: https://search.google.com/search-console

저작자표시 비영리 동일조건 (새창열림)

⚡ 정보 부스터 <IT, 맛집투어, 여행을가자, 이모저모> 🚀