이미지 다운로드 방지 방법은 여러가지가 있습니다. 특히 스마트폰에서 이미지를 길게 눌러 저장하려는 것을 방지하려면 CSS와 JavaScript를 활용할 수 있습니다. 하지만 완벽하게 이미지를 보호할 수는 없으며 화면 캡처, 확장프로그램 등을 이용하여 이미지를 가져갈 수 있습니다.
티스토리에는 이미 우클릭 방지 플러그인, 워드프레스에는 이미지 다운로드 방지 등의 기능을 포함한 WP Content Copy Protection & No Right Click 과 같은 플러그인들이 있습니다. 이 글에서는 타사 플러그인을 사용하지 않고 CSS와 JavaScript를 활용하여 직접 코드를 넣는 방법을 설명하겠습니다.
목차
이미지 다운로드 방지
CSS를 이용하여 이미지 다운로드 방지
CSS를 사용하여 이미지를 오른쪽 클릭으로 저장하지 못하도록 설정할 수 있습니다. 스타일시트에 다음과 같은 코드를 추가합니다.
img {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}위 CSS를 사용하면 이미지를 선택할 수 없게 되고, 모바일 장치에서 길게 눌렀을 때 나오는 컨텍스트 메뉴를 비활성화 할 수 있습니다.
JavaScript를 이용하여 이미지 다운로드 방지
<script>
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
document.addEventListener('dragstart', function(e) {
e.preventDefault();
});
</script>
위 JavaScript를 사용하여 마우스 오른쪽 클릭과 컨텍스트 메뉴를 비활성화하고 이미지를 드래그해서 다운로드하는 것을 방지할 수 있습니다.
HTML에 직접 이미지 태그 속성 설정
HTML의 img 태그에 draggable="false" 속성을 추가하면 이미지를 드래그해서 다운로드하는 것을 방지할 수 있습니다. 아래 예시와 같이 적용합니다.
<img src="image.jpg" alt="Example Image" draggable="false">위 방법들을 사용하여 웹사이트 이미지 다운로드 방지를 할 수 있지만 이러한 방법들은 100% 완벽하지 않습니다. 기술적으로 우회할 수 있는 방법들이 많고 무단으로 이미지를 다운로드하는 과정을 좀 더 복잡하게 만들어 줄 수 있는 정도입니다.
키보드 단축키 차단
추가적으로 고려해 볼 것은 개발자 도구를 쉽게 열지 못하도록 방해하거나, 개발자 도구를 열었을 때 웹페이지의 동작을 제한하는 방법이 있습니다.
<script>
document.onkeydown = function(e) {
if (
e.keyCode == 123 || // F12
(e.ctrlKey && e.shiftKey && e.keyCode == 73) || // Ctrl+Shift+I
(e.ctrlKey && e.shiftKey && e.keyCode == 74) || // Ctrl+Shift+J
(e.ctrlKey && e.keyCode == 85) || // Ctrl+U
(e.ctrlKey && e.keyCode == 83) // Ctrl+S
) {
return false;
}
}
</script>
위 코드를 적용하여 개발자 도구 열기 금지, 페이지 소스코드 보기 금지, 현재 페이지 저장 금지를 할 수 있습니다. 이 방법 또한 100% 완벽하지 않으며, 여전히 이 방법도 파훼 방법이 있습니다. 매우 중요한 이미지인 경우 워터마크를 사용하여 원본 출처를 명확하게 표시하거나, 저작권을 명시하는 것이 좋을 것입니다.
유의사항
이미지 다운로드 방지를 적용할 때 몇 가지 유의사항이 있습니다. 다음과 같은 사항을 확인해 보세요.
검색엔진 봇 접근 제한 :
특정 키보드 단축키(F12, Ctrl+Shift+I, Ctrl+Shift+J, Ctrl+U, Ctrl+S)를 사용하여 개발자 도구를 열거나 페이지 소스를 보는 것을 방지할 때 검색엔진 봇에게도 동일하게 적용되는데, 검색 엔진은 페이지의 구조와 콘텐츠를 올바르게 분석하지 못할 수 있어서 SEO에 부정적인 영향을 줄 수 있습니다.
콘텐츠의 접근성 감소 :
검색엔진 봇은 페이지의 HTML 및 CSS를 통해 콘텐츠를 분석하고 색인화하는데 만약 검색 엔진이 페이지의 콘텐츠에 접근하지 못할 경우 그 콘텐츠는 검색 결과에서 제대로 나타나지 않게 됩니다.
페이지 속도와 사용자 경험 :
JavaScript 코드는 많을수록 페이지 로딩이 느려집니다. 페이지 로딩 속도가 저하되면 사용자 경험 및 SEO에 악영향을 줄 수 있습니다. 위 코드들은 복잡한 코드는 아니지만 완벽하게 차단할 수 있는 방법이 아니므로 다이어트하는 것이 좋겠지요!
지금까지 이미지 다운로드 방지 방법에 대해 살펴보았습니다. 100% 차단은 어렵지만 최소한의 방어 장치를 할 수 있고, 무단 다운로더의 불펌과정을 조금 복잡하게 해 줄 수 있을 것입니다. 그런데 관련 플러그인을 설치해 보았더니 생각보다 페이지 로딩 속도에 많은 영향을 주더라고요. 완벽한 차단 방법도 아닌데다 SEO에 영향을 주어 검색엔진 점수에 영향을 줄 가능성이 있다는 것이 가성비(?)면에서는 그다지 좋은 설정은 아니라는 생각도 듭니다.
