[HTML] 블로그 이미지 불펌 우클릭방지 없이 막기

[HTML] 블로그 이미지 불펌 우클릭방지 없이 막기

  오전 4:10    홍다슬

---

이번에 쓸 내용은 사실 개발적인 내용이라기보단 간단한 편법에 가깝지만,
블로그 게시 작업에서 오직 열람만을 허용하고 저장을 완전히 막고 싶을 때 권장하고 싶은 방법이다.

물론 기존에 우클릭 방지나 드래그 방지 등의 방법들이 있지만, 뚫는 방법 또한 많이 알려진 상태이기 때문에 좀 다른 방법을 소개하고자 한다.

html 수정 기능이 있는 블로그 플랫폼이라면 모두 가능하다.
(단, 네이버는 스마트 에디터로 바뀐 후엔 더이상 불가능한 듯하다.)
물론 지금 글을 쓰고 있는 Blogger도 가능하기에 바로 예제를 올려보겠다.

위 사진을 일반적인 사진처럼 우측버튼 - 다른 이름으로 저장을 눌러도 웬 .html을 저장하는 결과만 나올 것이다.
그 이유는, 주로 이미지 업로드 시 img 태그를 쓰지만, 지금 쓴 방식은 흔히 레이아웃을 그릴 때 쓰는 div태그에 그냥 배경식 입히듯이 사진을 입힌 것뿐이기 때문이다.

적용 방법은 많이 쓰이는 플랫폼 중 하나인 티스토리와 크롬 브라우저 기준으로 설명하겠다.

1. 일단 평소대로 사진 버튼을 눌러 첨부를 한다.

2. 이 상태로 F12를 눌러 개발자모드를 켠 후, 요소 검색(왼쪽 최상단 아이콘 참조, 단축키 Ctrl + Shift + C)을 클릭 후 첨부한 사진을 클릭하면 아래 사진처럼 코드 부분에 회색 표시가 생긴다.

3. 이미지 url부분 (http:// 로 시작하는 파란 글자)에서 우측버튼 클릭 후 Edit attribute를 클릭하면 복사할 수 있게 수정 가능한 모드가 되고, Ctrl + C로 복사하면 된다.

4. 우측 상단 부분의 HTML에 체크하면 작성한 글의 html이 나올텐데, 모두 지우고 아래와 같이 입력한다.

<div style="background-image: url('★'); background-repeat: no-repeat; background-size: contain; height: 60vw;"></div>

(+ 이후에 해보니 글 수정 시 해당 과정에서 다른 내용 없이 입력했었을 경우 html 코드가 전부 날아가는 현상이 있었다. 티스토리 내부 자체 문제인지는 모르겠지만 혹시 이 현상을 겪으면 저장하지 말고 다시 들어와 위처럼 개발자 모드에서 코드를 백업해두는 게 좋을 것 같다.)

★에는 아까전에 복사했던 url을 붙여넣으면 된다.

각 옵션을 간단히 설명하자면
- background-image : 배경 이미지 url
- background-repeat : 바둑판여부 설정. no-repeat은 한 장만 나오게 됨
- background-size : 배경 이미지 크기. 수치를 정할 수 있지만 여기선 contain을 써 그냥 div태그 크기에 맞춤.
- height : 높이

맨 마지막의 height: 60vw;는 60vw는 내가 임의로 해보다가 정한 값이고, 혹시 모바일 등에서 여백이 엄청 넓게 나온다면 다른 값으로 수정하면 된다.
또한 입력란에 가득찬 사이즈로 올리고 싶은 게 아니라면 아무 ; 오른쪽에 width: 50%; 를 추가하면 크기가 반으로 줄어든다.




물론 이렇게 해도 개발자 모드를 쓰거나 캡쳐툴을 쓰는 방법은 피할 수가 없지만,
최소한 손쉽게 퍼갈 수 있는 방법은 막는 셈이니 저작권 문제 등에 도움이 되지 않을까 싶다.
(실험해보니 Pinterest 업로드나 구글 이미지 다운로드 확장 프로그램은 확실히 안된다.)