사이트 캡처 외부 유출 방지 배경 워터마크 기능 개발 과정

운영중인 사이트의 스크린샷(캡처)이 타 커뮤니티에 흘러들어가 비난을 받는 일이 발생했다. Closed community 속성을 가지고 있어 외부인이 보면 불편해할만한 내용도 편하게 이야기하는 분위기인데, 이런 일이 반복적으로 일어나면 이용자들이 불편해질 것 같아 조치를 취하기로 했다. 배경에 흐릿하게 아이디, 필명, 가명(유동닉)이 대각선으로 반복해서 나타나는 형태의 워터마크(watermark)를 만들기로 했다. 이렇게 바탕에 배경무늬처럼 깔아두면 스크린샷을 찍을 때 본인의 아이디가 노출되는 부담을 느끼게 하는 의도이다.

워터마크 생성

$txt = $loginid . $nickname . “n” . $alias;
$img = $img = imagecreate(150,100);
$bg = imagecolorallocate($img, 255, 255, 255); // 배경흰색
$c = imagecolorallocate($img, 242, 242, 242); // 연한회색 글자색
imagettftext($img, 11, 25, 5, 80, $c, ‘./font.ttf’, $txt); // 글자크기11, 기울기25도, 시작좌표5,80
header(‘Pragma: public’);
header(‘Cache-Control: max-age=3600’);
header(‘Expires: ‘. gmdate(‘D, d M Y H:i:s GMT’, time() + 3600));
header(‘Content-type: image/png’);
imagepng($img);

간단하게 흰색 바탕을 깔아두고 연한 회색으로 아이디를 배경 타일로 사용하는 것이다. TTF 파일은 라이센스를 잘 확인해서 사용할 것.

워터마크 이미지의 캐시 시간을 1시간으로 설정했는데, 늘려도 큰 상관은 없을 것 같다. URL 뒤에 의미 없는 get 값을 덧붙여주는 트릭을 이용하기 때문. 이 내용은 뒤에 기술.

배경 css

#body {
background-image:url(“./watermark?v=hash”);
background-repeat:repeat;
image-rendering:pixelated;
image-rendering:-moz-crisp-edges;
image-rendering:-o-crisp-edges;
image-rendering:-webkit-optimize-contrast;
-ms-interpolation-mode:nearest-neighbor;
}

id=body인 메인 영역 div에 워타마크를 바둑판식으로 반복해서 깔아주라고 지정하면 된다. 여기서 부딪친 문제점은 2가지였다.

1) 워터마크 이미지가 캐싱되어 로그아웃하거나 다른 아이디로 재로그인할 때 이전에 접속한 사람의 아이디가 노출됨. 그렇다고 no-cache 설정을 해버리면 페이지를 열 때마다 워터마크를 서버에 요청해서 받아와서 부하가 늘어남

해결: 워터마크 url 뒤에 v=아이디-필명-익명의 hash 값을 덧붙여서 로그인한 아이디가 바뀌거나 같은 아이다라도 필명을 바꾼 경우에 다른 url로 인식해 서버에 새로 요청해서 받아오게 됨. 로그인 안 한 경우에는 background-image 지정을 안 하도록 수정

2) 모바일 페이지의 경우 전통적으로 pixel 수를 낮게 산정해서 디자인하는데, 요즘 모바일 기기의 해상도는 웬만한 모니터보다 높기 때문에 모든 컨텐츠를 up-scaling해서 채우는 방식으로 작동함. 이 과정에서 글자는 벡터이미지처럼 취급해서 경계면을 선명하게 만들어서 보여주는데, 이미지는 기본적으로 부드럽게 extrapolation해서 확대시킴. 이 과정에서 연한 회색으로 아이디가 새겨진 이미지는 배경 흰색과 뒤섞여서 글씨를 알아볼 수 없게 된다.

해결: 이미지 확대시 부드럽게 처리하지 말고 그냥 픽셀화가 되도록 선명하게 처리하라고 따로 추가 지정을 해줘야 한다. 이미지 확대 처리 관련 css 설정의 경우 표준화가 덜 되어있어서 크로스브라우징을 위해 다음 자료를 참고해 image-rendering 관련 값을 5줄 써줬다.

https://css-tricks.com/almanac/properties/i/image-rendering/

https://stackoverflow.com/questions/18677983/how-to-prevent-the-background-image-from-getting-blurry

이걸 테스트하는 과정에서 크롬 개발자툴을 이용해 에뮬레이션하는 것과 실제로 모바일 기기에서 보는 것 사이에 차이가 나서 고생했다. (이미지 확대 처리 방식에 차이) 로컬 개발 환경으로 사용하는 데스크탑에 AP모드 설정한 usb 무선랜카드를 꽂아 테스트 모바일기기로 접속하는 방식으로 테스트해야 했다….

결론

생각보다 훨씬 어려웠다. 모바일에서 이미지 확대 처리를 제멋대로 한다는 것도 처음 알았고, 공용PC 등에서 아이디를 바꿔 재로그인하는 시나리오가 존재한다는 것을 개발하는 중간에 알게 되었다. 이가 안되면 잇몸으로 어떻게든 구현하긴 했지만
그래도 웬만큼 만족스러운 결과를 얻을 수 있었다.