워터마크

워터마크란 무엇일까? 워터마크는 이미지나 비디오등에 삽입되는 표지로, 주로 저작권 정보를 삽입하거나 보안상의 이유로 이용한 사람이 누구인지를 표시할 때 이용된다.

웹사이트에 워터마크를 삽입하는 방법은 뭐가 있을까? 가장 쉬운 방법은 배경에 넣는 방법이다. 그러나 배경에 워터마크를 넣으면 배경 위의 글자가 워터마크를 가린다. 이보다 더 나은 방법이 있지 않을까? 오늘은 필자가 웹사이트에 워터마크를 넣은 이야기를 짧게 풀어보고자 한다.

구상

워터마크를 넣으려면 어떻게 해야할까?

첫째, 워터마크는 글자나 사진 등에 의해 가려서는 안 된다. 단순하게 background CSS로 워터마크를 넣으면 (위치를 교묘하게 하지 않는 이상) 앞서 말했듯 글자나 사진에 의해 가려질 것이다.

둘째, 워터마크는 최대한 제거하기 어렵게 해야한다. 빈 공간 한 구석에 워터마크가 덩그러니 있다면 그냥 그림판으로 지워버리면 된다. 글자나 사진과 같은 컨텐츠 위에 덧붙여진 워터마크가 지우려는 사람 입장에서 가장 짜증날 것이다.

위 두가지를 만족하게 하는 방법은 간단하다. HTML의 모든 요소들의 맨 위에서 희미한 워터마크를 무한반복하는 요소를 만들면 된다.

스케치

간단히 생각해보자. 먼저 서버측에서 다음과 같은 워터마크를 생성하는 /watermark 엔드포인트를 만든다. 해당 예시의 배경색은 완전한 투명으로 하고, 글자에도 70% 정도의 불투명도를 적용한다.

이제 모든 요소들의 위에서 위 워터마크를 삽입하면 된다. 방법은 간단하다. 다음 HTML과 CSS를 삽입하면 된다. background-repeat 속성은 기본값이 repeat이므로 굳이 설정할 필요가 없다.

<div class="simple_watermark"></div>

.simple_watermark {
    z-index: 999;
    background: url("/watermark");
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

간단하다. 그러나 위 방법의 한가지 문제점이 있다. 웹사이트가 클릭이 안 된다. 생각해보면 당연한 일이다. 모든 요소들의 맨 위에 아무것도 없는 워터마크 요소가 덩그라니 있을테고, 클릭하면 해당 요소를 클릭하게 될테니 클릭이 정상적으로 안 되는 게 정상이다. 그렇다면 웹 사이트를 정상적으로 이용할 수 있게 하려면 어떻게 해야할까?

pointer-events CSS

포인터가 해당 워터마크 요소를 투과하도록 하면 된다. pointer-events CSS를 이용하면 된다. pointer-events 속성이 none이 되면 포인터가 해당 요소를 뚫고 들어가게 된다.

none 값의 경우 요소가 포인터 이벤트의 대상이 아님을 가리키는 동시에, 이벤트가 요소를 "뚫고" 들어가 "아래" 요소를 대상으로 하도록 만듭니다.

-- MDN pointer-events 문서

물론, 자식 요소들 중 하나가 pointer-events 속성을 명시적으로 허용했다면, 해당 CSS는 의미가 없게 된다. 그러나 위 예시의 HTML에는 자식 요소가 없으므로 신경쓰지 않아도 된다.

따라서 CSS에 pointer-events: none; 한 줄을 추가하면 완벽해진다.

.simple_watermark {
    z-index: 999;
    background: url("/watermark");
    pointer-events: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

결론

웹사이트에 워터마크를 간단하게 넣는 방법을 알아보았다. 위와 같이 pointer-events CSS를 곁들이면 간단한 투명 워터마크를 만들 수 있다. 물론 투명 워터마크를 위해서는 위 예시 이미지와 같이 워터마크 자체가 투명해야 한다. 이를 위해 레스터 이미지로 작업하는 게 귀찮을 수 있다. 그렇다면 SVG를 이용해 투명 워터마크를 만들면 된다. SVG로 만드는 편이 더 간단하기도 하다.

누군가는 이렇게 물을 수 있다: "개발자도구를 이용하면 워터마크를 삭제할 수 있지 않느냐?". 이 글에서 해당 질문에는 답변하지 않겠다. 이러한 것들까지 어렵게(정확히는 귀찮게) 하는 것은 독자의 몫이다.