티스토리 특정영역 드래그/복사허용 설정 - 문제점 및 대안

많은 블로거들이 불펌을 방지하기 위해 플러그인 설정을 하여 마우스 오른쪽 버튼을 사용못하게 막아두기도 합니다. 그런데, 이렇게 해도 되는 블로그가 있고, 그렇지 않은 블로그가 있는 것 같습니다. 코딩과 관련된 내용을 공유하는 블로그들이 그럴텐데요. 복사를 못하게 해 놓으니, 정작 본인 조차도 불편하게 됩니다. 저는 그렇더군요. 다른 사람들을 위해서 적어놓은 부분도 있지만, 저 자신도 불편해졌습니다. 매번 수정 모드로 들어가서 복사해 오는 것도 불편하고요. 그래서, 특정 영역만 복사 허용하기에 대한 설정을 보고 적용해 봤습니다. 그리고, 그 방법 역시도 제약사항이 있다고 느끼게 되었습니다. 일단, 기존 적용 방법부터 소개하고 대안도 함께 소개하고자 합니다.

 

마우스 오른쪽 클릭방지 사용 해제

우선 앞서 말한 플러그인 사용을 해제 합니다. 관리메뉴의 플러그인을 선택하고 마우스오른쪽 클릭방지 플러그인을 사용해제 합니다.

이렇게 하는 이유는, 플러그인의 도움을 받지 않고, 드래그 방지를 할 영역과 허용할 영역을 수동 지정하기 위해서 입니다.

 

CSS로 오른쪽 클릭방지 설정/ 허용 영역 설정하기

블로그관리 홈 > 꾸미기 > 스킨편집을 선택합니다.

오른쪽에 위와 같이 뜨면, html 편집 버튼을 클릭합니다. HTML/ CSS/ 파일업로드와 같이 뜰텐데, 이 중에 CSS를 클릭합니다.

CSS 파일 제일 뒤에 다음과 같이 작성합니다.

pre, code {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}

body {
-webkit-user-select: none !important;
-moz-user-select: -moz-none !important;
-ms-user-select: none !important;
user-select: none !important;
}

그리고, 위 메뉴의 상단에 있는 적용 버튼을 누릅니다. 그리고 나서 확인합니다.

 

직면한 문제점

여러 블로거들이 이렇게 하는 방안을 소개해줘서, 똑같이 적용한 것입니다. 그래서 잘 되는 줄 알았습니다. 실제, 다른 부분을 드래그도 안되지만 위의 코드 영역은 드래그가 됩니다. 다른 분들 블로그는 잘 동작하는지 모르겠으나, 제 블로그에서는 위와 같이 설정한 것으로는 충분하지 않았습니다. 드래그는 되는데, 정작 복사가 되지 않았습니다. 드래그 하면서 글을 읽을 수는 있지만 (마치 책을 읽을 때 밑줄 긋듯이), 이 정보를 활용하는 순간에는 위의 플러그인을 적용한 것과 별반 다르지 않았습니다. 복사를 했다고 생각했으나, ctrl+v 해보면 기존의 클립보드에 있는 내용이 복사됩니다. 

ps. 특정 스킨과의 궁합 문제일 수도 있습니다. (확인 중)

 

대안찾기 - gist 활용

티스토리 구에디터를 쓸 때는, 플러그인을 설정하고 코드를 복사했었는데 신에디터에서는 그렇게 하지 않고 있었습니다. 그 방식으로 해야 하나 고민해보면서 몇몇 syntax highlighter 사이트를 활용해서 정상 동작하는지 해봤지만, 잘 동작하지 않네요. 복사가 잘 되지 않는 것도 마찬가지고요. 제가 찾은 대안은 gist 입니다. gist(https://gist.github.com)를 사용하여 코드부분을 생성하면, 다음과 같이 됩니다.

 

원본 CSS 부분과 다른 부분은, 허용 code 구문 부분에 .gist를 넣은 점입니다. 왜냐하면, gist 코드 부분이 .gist로 렌더링 되기 때문입니다. 이렇게 설정했다고 해서 모든 것이 해결되지는 않지만 적어도 대안은 생긴다는 점은 그나마 낫습니다. 하단의 view raw를 클릭하게 되면, 드래그해서 복사할 수 있도록 창이 뜹니다. 그 내용을 복사하면 됩니다.

 

고민

사람들이 공유해준 방식으로 하면, 코드의 일부분이나 짧은 길이 일부분 등과 같이 평문에 해당하는 부분들은 잘 복사되는 것 같습니다. 그런데, 적어도 제가 작성하는 코드 및 설정들은 위와 같은 부분 허용으로는 드래그는 되지만 복사는 할 수 없었습니다. 그에 따라, gist를 적용하여 차선책을 마련해 봤습니다. 물론, 이렇게 하면 동작은 합니다. 그러나, 불편한 건 여전합니다. 복사를 하려면, view raw를 눌러서 다른 페이지로부터 복사해야 하는데, 불편함은 여전합니다.

• gist를 아는 사람은 view raw를 눌러서 복사하면 되나, 새 페이지로 안내됨
• 작성자는, gist에 가서 작성하고 링크를 복사해서 편집해야 함 - 글 작성시 불편함
• gist - view raw를 모르는 사용자는, 드래그는 되는데 왜 복사는 안되지? 라고 생각하고 이탈할 것임

결국, 대안을 찾았으나 고민이 됩니다. 복사 방지 CSS를 푸는 것과 위와 같은 설정으로 유지하는 것 사이에서요. 조금만 더 고민해보고 결정해야겠네요.

 

추가 확인한 내용

위에서 정리한 CSS가 오동작하게 되는 조합을 확인했습니다. 

만약, 이 플러그인이 켜 있다면 사용해제를 해야합니다. 이 옵션이 켜있으면, 위의 CSS 설정이랑 충돌이 되거나 오작동합니다. 즉, 복사가 되지 않습니다. 이 플러그인을 끄면, CSS 제어로 원하는 영역만 드래그/복사 사용 허용할 수 있습니다.

 

결론

* 특정 영역 드래그/복사 허용 CSS로도 충분함 (단, 마우스 오른쪽 클릭방지 플러그인, 저작권자 표시 플러그인을 반드시 꺼야 함)

* gist는 gist 나름대로의 장점이 있음. 재사용성/ 코드 가독성 등의 목적에 맞게 사용하면 좋을 듯함.