인터넷을 하다 보면 꼭 글 일부를 드래그로 복사하거나 글에 있는 이미지나 영상을 저장하고 싶은 순간들이 있습니다.
- 유용한 기술 블로그에서 복잡한 소스 코드나 쉘 명령어를 오타 없이 복사하고 싶을 때 (명령어는 직접 타이핑하다 한 글자만 틀려도 에러가 나니까요!)
- 내 최애 연예인의 잘나온 사진을 소장하고 싶을 때
- 웃긴 짤방을 저장하고 또 친구에게 공유하고 싶을 때
하지만 마우스를 가져다 우클릭을 하면 아무 동작을 하지 않습니다. 또 드래그도 되지 않죠. 불펌을 방지하려는 원작자의 마음은 이해하지만, 빨리 복사해야 하거나 이미지나 영상을 꼭 저장하고 싶은 순간에는 참 답답합니다.
특히 기술 블로그에서 명령어를 적어두고 복붙을 못하게 할때는 저걸 어떻게 다 타이핑해서 쓰라고 우클릭을 막아놨을까 하는 생각도 듭니다.
오늘은 별도의 프로그램 설치 없이 우클릭 해제하는 임시 방법과, 그 방법으로 안되는 사이트까지 다 드래그가 되게 풀어주고 우클릭이 되게 해주는 인생 확장 프로그램까지 정리해 보겠습니다.
그리고 마지막으로 제가 궁금해서 우클릭 방지 어떻게 하는지 알아봤고 그 내용도 간단히 정리해봤습니다.
방법1. 프로그램 설치 없이 우클릭 해제 방법 (Disable JavaScript)
가장 먼저 확장 프로그램을 설치하기 번거롭거나, 빨리 해보고싶을때 때 쓸 수 있는 간단한 임시 방법입니다.
일부 사이트는 자바스크립트(JavaScript)를 이용해 우클릭과 드래그를 차단합니다.
이 경우 개발자 도구에서 JavaScript를 비활성화하면 제한이 해제될 수 있습니다.
Disable JavaScript 하는 방법
1.우클릭이 막힌 페이지에서 키보드의 F12를 눌러 개발자 도구를 켭니다.
2.개발자 도구 창 우측 상단의 톱니바퀴 모양 아이콘(Settings)을 클릭합니다.
3.설정 메뉴 아래쪽으로 스크롤을 내려 [Debugger] 섹션에 있는 ‘Disable JavaScript‘ 항목에 체크합니다.
이렇게만 해도 대부분 우클릭이 즉시 해제됩니다. 별도로 새로고침을 할 필요 없이 그 상태 그대로 긁거나 저장하시면 됩니다.
(⚠️ 주의: 이 상태에서 다른 페이지로 이동하거나 새로고침을 하면 Disable JavaScript 설정이 자동으로 풀리게 됩니다. 개발자 도구 창을 닫아도 원래대로 돌아갑니다.)
Disable JavaScript의 단점과 한계
- 이 방법을 써도 우클릭과 드래그가 안 되는 사이트들이 있습니다. (티스토리, 네이버 블로그, 네이버 카페 등…) 자바스크립트가 아닌 디자인 코드(CSS) 잠금을 2중으로 걸어둔 곳들이 그렇습니다.
- 또한, 일부 최신 홈페이지(GitHub, Notion 등)는 JavaScript를 끄는 순간 화면 자체가 정상적으로 표시되지 않고 하얗게 멈춰버릴 수 있습니다.
Disable JavaScript를 해도 드래그나 우클릭이 안 되는 경우, 그리고 또 편하게 우클릭을 하고 싶은 경우에는 아래의 확장 프로그램을 이용하면 좋습니다.
방법2. 추천 우클릭 해제 툴 – 드래그프리
이전 방법으로 해결되지 않는 경우 가장 간단한 방법은 드래그프리(Drag Free) 확장 프로그램을 사용하는 것입니다.
드래그프리(마우스제한 해제+글자수세기+이미지저장+화면캡쳐)
- 드래그프리 바로가기: https://chromewebstore.google.com/detail/dragfree-mouse-unblock+ch/cnfngpgfjllafbghaimjcmailafcdhod
- 직접 검색 시: 크롬 웹스토어(https://chromewebstore.google.com)에 접속 후 ‘드래그프리‘를 검색하세요.
맨위의 링크에 들어가서 설치해거나 크롬 웹스토어에가서 드래그프리 검색 후 설치해도 됩니다.
크롬 웹스토어 링크에 접속하여 [Chrome에 추가] 버튼을 클릭해 설치합니다.
설치 완료 후, 크롬 주소창 오른쪽의 퍼즐 모양 아이콘(확장 프로그램)을 누른 뒤 드래그프리 옆의 고정(핀) 아이콘을 눌러줍니다.
고정하고 나면 주소창 오른쪽에 늘 민트색 Drag Free 아이콘이 추가된 것을 볼 수 있습니다.
이제 우클릭이 막힌 곳에서 이 아이콘을 누르고 [제한 풀기] 버튼을 클릭하거나, 단축키 Alt + 1을 누르면 끝입니다!
드래그프리 – 어떤 모드로 써야 할까? (추천 설정)
설정을 ‘자동’으로 바꾸면 매번 단축키를 누를 필요 없이 알아서 다 풀립니다. 다만, 상시 자동 모드로 켜두면 여러 웹사이트에서 화면이 정상 표시되지 않거나 예기치 않은 오작동 오류가 발생할 수 있습니다.
프로그램 개발사에서도 안전과 호환성을 위해 ‘수동 상태’로 두고, 필요할 때만 단축키(Alt + 1)로 푸는 것을 권장하니 기본 상태인 수동 모드로 쓰시는 걸 강력 추천합니다.
드래그프리 장점
- 강력한 우클릭 / 드래그 방지 해제 기능
- 복사 금지 및 이미지/영상 다운로드 방지 해제
- 깔끔하게 단축키(
Alt + 1) 하나로 작동 가능 - 2중 잠긴 사이트도 다 뚫림 (이걸로 해제 안 되는 사이트 아직 못 봤습니다.)
- 지저분한 광고가 없음
마무리
크롬 우클릭 해제와 드래그 해제 여러 확장프로그램을 써봤지만 드래그프리가 그 중 가장 마음에 들었습니다.
가벼운 텍스트 복사라면 개발자 도구 기능(방법 1)만으로도 충분하며, 네이버 카페나 이미지 소장처럼 제한이 강하게 걸린 사이트를 자주 이용하신다면 단축키 하나로 끝나는 ‘드래그프리’를 써보세요. 정말 편합니다.
(단, 저작권이 있는 이미지나 콘텐츠는 어디까지나 개인 참고·소장 용도로만 활용하시고, 무단 재배포나 상업적 이용은 절대 피해야 한다는 점)
궁금해서 알아본 웹사이트 우클릭/드래그 방지 코드 원리
도대체 웹사이트들은 어떤 코드로 막는걸까요? 재미 삼아 알아보는 대표적인 불펌 방지 관련 소스코드들입니다.
// 자바스크립트로 우클릭 자체를 금지하는 코드
//브라우저에서 마우스 오른쪽 클릭 기본 이벤트(contextmenu)가 발생하면 작동하지 못하게 강제로 가로채는 방식입니다. (방법 1로 뚫리는 원리입니다.)
//방식A
document.oncontextmenu = () => false;
//방식B
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});/* CSS 스타일시트로 드래그를 금지하는 코드
텍스트나 이미지를 마우스로 드래그하여 블록(선택 영역)을 잡는 행위 자체를 디자인 규칙으로 차단합니다. 브라우저 엔진별 접두사까지 붙여 촘촘하게 막아둡니다. (방법 1로 안 풀리고 드래그프리로 뚫리는 주범입니다.*/
/*드래그방지*/
body {
user-select: none;
}
/*드래그방지*/
body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}//자바스크립트로 드래그 시작 및 복사 행위를 금지하는 코드
//마우스 드래그가 시작되거나(dragstart), Ctrl + C 같은 복사 명령(copy)을 내렸을 때 발동하는 브라우저 기능을 정지시킵니다.
// 드래그 시작 자체를 금지
document.addEventListener('dragstart', function(e) {
e.preventDefault();
});
// 복사 기능 자체를 금지
document.addEventListener('copy', function(e) {
e.preventDefault();
});//복사 금지
document.addEventListener('copy', function(e) {
e.preventDefault();
});//주요 단축키 및 개발자 도구(F12) 진입 차단 코드
//사용자가 키보드를 누를 때(keydown) 컨트롤 키 조합이나 F12 키가 감지되면 아예 작동하지 못하게 막아버리는 고난도 방어 방식입니다.
// 복사(C), 전체선택(A), 잘라내기(X) 단축키 금지
document.addEventListener('keydown', function(e) {
if (e.ctrlKey && (e.key === 'c' || e.key === 'a' || e.key === 'x')) {
e.preventDefault();
}
});
// F12 개발자 도구 단축키 및 Ctrl+Shift+I 진입 차단 시도
document.addEventListener('keydown', function(e) {
if (e.key === 'F12') {
e.preventDefault();
}
if (e.ctrlKey && e.shiftKey && e.key === 'I') {
e.preventDefault();
}
});<!--HTML과 CSS를 조합한 이미지 저장 방지용 '투명 레이어' 수법
실제 이미지 파일(.jpg) 위에 눈에 보이지 않는 투명한 박스(.block-layer)를 한 겹 배치하는 방식입니다. 사용자는 사진을 우클릭했다고 생각하지만 실제로는 투명한 빈 공간을 누르게 되어 이미지 저장 메뉴가 뜨지 않습니다. -->
<!-- 이미지 저장 방지용 투명 레이어 -->
<div class="image-wrap">
<img src="photo.jpg">
<div class="block-layer"></div>
</div>
<style>
/* CSS 구조 */
.image-wrap {
position: relative;
}
.block-layer {
position: absolute;
inset: 0;
}
</style>
