이미지 다운로드 방지 방법 PC•모바일

이미지 다운로드 방지 방법은 여러가지가 있습니다. 특히 스마트폰에서 이미지를 길게 눌러 저장하려는 것을 방지하려면 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% 완벽하지 않으며, 여전히 이 방법도 파훼 방법이 있습니다. 매우 중요한 이미지인 경우 워터마크를 사용하여 원본 출처를 명확하게 표시하거나, 저작권을 명시하는 것이 좋을 것입니다.

유의사항

이미지 다운로드 방지를 적용할 때 몇 가지 유의사항이 있습니다. 다음과 같은 사항을 확인해 보세요.

지금까지 이미지 다운로드 방지 방법에 대해 살펴보았습니다. 100% 차단은 어렵지만 최소한의 방어 장치를 할 수 있고, 무단 다운로더의 불펌과정을 조금 복잡하게 해 줄 수 있을 것입니다. 그런데 관련 플러그인을 설치해 보았더니 생각보다 페이지 로딩 속도에 많은 영향을 주더라고요. 완벽한 차단 방법도 아닌데다 SEO에 영향을 주어 검색엔진 점수에 영향을 줄 가능성이 있다는 것이 가성비(?)면에서는 그다지 좋은 설정은 아니라는 생각도 듭니다.

가독성 좋은 웹폰트 나눔스퀘어네오 적용하기