생활정보 연구소

그동안 블로그를 운영하면서 화날때 있으셨나요? 전 심혈을 기울여서 제 시간 쪼개서 힘들게 작성한 포스팅을 복붙해서 그대로 올리는 분들 보고 얼마나 화나던지. 당해보니 정말 열받더라고요. 바로 신고해서 삭제하도록 했죠. 

그러다보니 티스토리에서 제공하는 오른쪽클릭 방지 플러그인까지 사용했습니다. 아무래도 오른쪽 클릭이 안되니 저의 글을 무단 불펌하는 사례는 많이 줄어들었습니다. 문제는 정보를 얻으러 제 블로그를 찾아온 구독자분들이 불편했습니다. 

블로그를 하다보면 소스코드나 중요한 내용 등은 복사하기를 허용해야 되는데 마우스 오른쪽클릭을 방지해 놓으니 좋은 내용도 공유를 할 수 가 없었습니다. 오른쪽 클릭 방지는 지식 공유에 암적인 기능이라는 글도 봤었죠ㅎ저도 어느정도 인정하지만 저의 창작물이 무단으로 사용되는 것을 보니 너무 힘이 빠지더라구요. 

제가 원하는건 전체글을 복사 금지하고 제가 원하는 부분만 쉽게 복사를 허용할 수 있는 방법이었습니다. 그런데 아무리 구글링을 해봐도 어렵고 사용하기가 불편해서 포기했었죠. 

이번에 정말 마음 단단히 먹고 열심히 알아보고 연구해서 결국 방법을 찾았습니다. 아래 순서대로 티스토리 스킨의 CSS를 변경하면 쉽게 복사 금지 설정이 가능하고 원하는 구문만 복사를 허용할 수 있습니다. 티스토리 복사 금지 설정 및 특정 영역 복사 허용 방법 자세히 알아보겠습니다.

불펌 방지 설정하기

1. 티스토리 마우스 오른쪽클릭 방지 플러그인 해제

혹시 마우스 오른쪽 클릭방지 플러그인을 사용하고 계신다면 해제해 주세요. 티스토리 관리모드에서 가능합니다. 

마우스 오른쪽클릭 방지 플러그인

마우스 오른쪽클릭 방지 플러그인 해제

2. 스킨변경

스킨변경

3. 스킨편집

스킨편집

4. html 편집

html 편집

5. CSS에 불펌방지 코드 붙여넣기

html이 아니라 CSS탭에 가장 아래부분에 코드를 붙여넣어 주세요. 그리고 오른쪽 상단에 적용버튼을 눌러주시면 설정 끝!

불펌방지 소스 붙여넣기

티스토리 불펌 방지 및 특정영역 복사허용 코드 (복사 가능)

간단하게 설명하자면 body 부분의 마우스 오른쪽클릭과 드래그 등을 금지하고 code 태그를 쓰면 복사를 허용한다는 코드입니다. 본문은 복사가 안되지만 위의 코드는 복사 가능합니다.  

사용방법

티스토리에서 포스팅 작성시 html 편집기 모드에서 원하는 구문 사이에 <code> ... </code>를 넣으면 그 구문은 복사가 가능합니다. 

티스토리 html 에디터

위와 같이 html 편집기에서 code 코드 태그를 삽입 하면 이렇게 복사 허용하고 싶은 구문 특정 부분만 복사를 허용할 수 있습니다. 

응용하기

1. 다른 태그도 설정 가능해요.

<code> 대신 <blockquote>와 같은 태그도 가능합니다. 소스코드의 code를 blockquote로 바꾸면 blockquote 태그가 쓰여진 곳만 복사가 가능해 지는 것입니다. 복사가능 태그를 code, blockquote 처럼 동시에 여러개로 지정할 수도 있습니다. 

2. 나만의 명령어로 바꿀 수 있을까?

code나 blockquote는 이미 html에서 지정된 명령어들입니다. 그러다 보니 복사 가능영역은 폰트가 다르게 나옵니다. 만약 나만의 명령어를 만들어서 그 명령어에 블로그 스킨과 같은 폰트를 입력해 놓으면 어색함 없이 표현할 수 있을 거 같은데요. 아니면 code 명령어를 기본폰트와 같은 폰트로 나오도록 수정하는 방법도 있을 거 같습니다. 이 부분은 좀 더 고민을 해봐야겠습니다. 

마치며..

이렇게 별짓을 다해도 완벽하게 불펌을 막을 수는 없습니다. 구글링 잠깐만 해도 웹페이지 복사하는 방법이 수십가지 나오니까요. 그런 방법을 몰라도 이미지 텍스트 변환프로그램도 많고 정 안되면 그대로 타자치면 되는거니까요. 일차적인 방지책이라고 보시면 됩니다. 제가 알아본 방법 중에 가장 간편한 방법이고 저도 유용하게 사용하고 있답니다. 

갓쇼님이 중요한 내용을 피드백해주셨습니다. 소중한 피드백 감사합니다. 이 포스팅에서 설명한 방법은 텍스트는 잘 되는데 이미지는 적용이 안됩니다. 이미지 불펌금지 방법은 아래 링크를 참조바랍니다. 이미지 설정방법은 정말 간단하니 텍스트, 이미지 둘다 설정해 두시면 좋을거 같습니다. 

2019/01/19 - [블로그] - 티스토리 html/CSS 이미지 복사 금지 설정 방법

2018/12/23 - [블로그] - 티스토리 반응형#2 스킨 오른쪽 사이드바 수정본 배포