이메일 주소를 canvas로 적어놓기

최근 블로그 스킨을 수정하면서 이것저것을 많이 바꾸었다. 그리고 이렇게 바꾼 것 중 하나가 이메일 주소를 적어놓는 부분이다. 항상 블로그 사이드바 상단에 연락용 이메일 주소를 적어놨었는데, 이메일 주소를 그냥 텍스트로 적어놓으면 광고봇들이 긁어가서 스팸 메일을 날려댈 수도 있으므로 이미지로 만들어서 넣어놨었다.

기존에 이미지로 삽입해둔 이메일의 폰트가 마음에 들지 않아서 이미지를 수정하려다가, canvas 를 이용해 삽입해보면 어떨까? 라는 생각을 하게되었다. 이러면 봇이 긁어갈 일도 없을테고, 어차피 이번 스킨 수정의 테마는 모던이니 복잡한 디자인도 필요 없었고, 별도의 편집기 없이 간단하게 수정해서 넣기도 좋을테니 말이다.

그런데 canvas 를 이용해 email을 삽입하더라도, 소스코드에는 email이 텍스트 형태로 변수에 저장되어 있을테니 이걸 봇이 긁어갈 수도 있을거다. 그래서 봇이 읽어가지 못할 정도로만 암호화 아닌 암호화를 하기로 했고, 이메일 형태만 취하지 않으면 되므로 방법은 많았다. 내 경우에는 email 을 구성하는 각 글자의 charcode 에 일정 숫자를 더해서 저장해두고, 복호화 할 때는 해당 숫자를 빼도록 했다.

그런데 요즘 구글은 이미지 안에 있는 텍스트를 인식해서, 특정 키워드가 본문에 포함되어 있지 않더라도 이미지에 해당 키워드가 포함되어 있다면 해당 키워드로 검색했을 때 이미지를 노출시키더라. 위 이미지에서 블러처리를 한 이유도 이 때문이다. canvas 요소의 경우에는 어떨런지 모르겠다.

코드와 실행 예제는 아래와 같다. 링크는 https://jsfiddle.net/nomomo/zbam0hno/