올해부터 본격적으로 티스토리를 운영하면서 하나씩 차차 익히고 있습니다.
처음엔 아무 생각 없이 남들도 다 하는 블로그의 작성글 복사 막기를 제 블로그에도 그냥 이렇게 하면 되는 건가? 이러고
적용을 해놨었습니다.
근데 제가 간과한 사실은 제가 운영하는 블로그는 명색이 기술블로그, 개발블로그라는 점입니다.
물론 제가 공부하는 과정을 블로그에 담아내는것이 목표긴 하지만 그래도 제 블로그에 와서 글을 보는 사람들이 필요한 정보와
필요한 내용을 얻어가면 좋겠다는 것도 제 블로그의 목표이기도 합니다.
그래서 아무 생각 없이 기존의 티스토리 블로그 글을 막아둔 코드를 지우고 다시 블로그 글 복사가 가능하게 끔 해야겠단 생각이 들었습니다.
다만 그래도 복사를 했을 때 저의 블로그가 널리 퍼지 기도 원하고 또 출처를 남겨주셨으면 좋겠단 마음에서
복사 시에 제 블로그의 링크와 제목이 출처 되게끔 했는데 이 방법을 알아보겠습니다.
코드
<script>
document.addEventListener('copy', function(e) {
// 1. 복사된 원본 텍스트를 가져옵니다.
var selectedText = window.getSelection().toString();
// 2. 추가할 출처 정보를 정의합니다.
var pageTitle = document.title;
var pageUrl = location.href;
// 3. 텍스트와 출처 정보를 조합하여 새로운 텍스트를 만듭니다.
var sourceInfo = '\n\n' + '---' + '\n' +
'출처: ' + pageTitle + '\n' +
'링크: ' + pageUrl;
var newText = selectedText + sourceInfo;
// 4. 기본 복사 기능을 막고, 새로운 텍스트를 클립보드에 설정합니다.
e.clipboardData.setData('text/plain', newText);
e.preventDefault(); // 기본 복사 이벤트를 방지
});
</script>스크립트는 위와 같습니다. 위 스크립트는 addEventListner를 통해서 복사 이벤트를 읽어서 해당 이벤트가 감지될 때마다
아래의 펑션들을 실행하는 구조입니다.
원리는 간단합니다.
원리
1. 복사된 원본 텍스트를 가져온다.
2. 복사된 텍스트에 붙일 내 정보를 가져온다.
3. 원본 텍스트에 가져온 내 정보를 붙인다.
4. 기본 복사기능을 막고 내가 만든 이벤트를 타게끔 하고 출처를 포함한 글을 전달한다.
이런 방식이 되는 것인데요. 원리를 이해했으니 실제 적용을 해보겠습니다.
적용 방법
1. 티스토리의 관리자에 접속합니다.
2. 티스토리의 꾸미기-스킨편집을 클릭
3. 스킨편집화면 우측의 html 편집 클릭
4. /body 태그 찾기
5. 찾은 /body의 앞에 복사한 스크립트를 붙여 넣어 줍니다.
왜 /body 태그 끝에 넣어야 하는가?
1. 페이지 로딩 속도 (성능 최적화)
페이지 중간에 해당 스크립트를 넣게 되면 페이지가 로딩되면서 스크립트 파일을 도중에 다운로드하는데 이때 html 파싱을 일시적으로 멈춰서 성능이 이슈가 생길 가능성이 있습니다.
2.dom 요소 접근 문제
현재 스크립트를 보시면 document.title, location.href 사용자가 선택한 텍스트(window.getSelection())등이 스크립트에 있는데 이는 모두 페이지가 전부 생성된 다음에서야 정상적으로 작동하는 요소들입니다. 위 요소들이 제대로 생성되기 전에 스크립트를 실행하면 정상적으로 작동하지 않을 가능성이 큽니다.
6. 스킨적용
7. 적용확인
저는 제 글인 https://gapal.tistory.com/62 접속해서 확인을 해보겠습니다.
8.결과확인
위처럼 코드를 복사하고 메모장에 붙여 넣으면 아래와 같이 복사된 글에 저의 출처가 남게 됩니다.
이로써 티스토리 게시글 복사 시 출처 남기는 법에 대해 정리했습니다.
그리고 간단한 원리까지 살펴봤는데 개발, 기술 블로그인 만큼 코드를 자유롭게 복사할 수 있어야 한다고 생각이 들어서 바로 적용을 했습니다.
제 블로그에 오시는 분들이 제 글을 보시고 항상 좋은 정보를 가져가셨으면 좋겠습니다. 감사합니다!
'기타' 카테고리의 다른 글
| 공공 API 호출 시 Forbidden 오류(403) 발생 시 대처 방법 (4) | 2025.11.06 |
|---|---|
| 구글 서치콘솔 리디렉션 오류 해결 법 티스토리 블로그 구글 검색 안될 때 조치 + 실제 url 테스트 이상 없음 색인 요청 (0) | 2025.10.31 |