[타이핑 페이지 만들기_5] 코딩친구의 훼방 1탄 : 불다 하지마:(

 

앞서 미대생이 요구했던 큰기능 들은 모두 완성되어 간단하게 aws에 s3 정적 호스팅으로 배포를 진행했다.

다른 사용자의 피드백도 받아야하니까,,,

물론 미대생은 정적호스팅으로 만든 도멘인 이름을 매우 맘에 들어하지 않았기에

라우트53을 이용해 새로 도메인에 연결해야했지만.. 그건 나중에 정리해야겠다.

(뭐가,,,,이렇게 정리할게 엄청 많지,,?)

 

 

 

여튼 저튼 우선 배포를 진행하였고 코딩친구한테 사용해보라고 시켰다.

충격의 도가니....

 

 

그런데 폰트를 다운받아 버리더라.....

배포된 페이지에서 개발자모드를 키더니 폰트파일인 ttf파일을 다운로드해서

'이거 이렇게 다운 받을 수 있어도돼? '

하고 물어보는데..... 미대생은 안된다고 그러면안된다고오오오오

 

 

 

해서 원래 웹 폰트를 가져올 땐 다운을 받아야해서 어쩔 수 없다는걸 나는 알고있던 거긴 했지만....

이렇게 되어 보안을 알아보기 시작했다. 폰트를 다운 받을 수 없게!!

이쪽 관련은 하나도 아는게 없었기에 시도하고 알아봤던 내용들을 정리해본다.

 

 

 

1차 시도 ... ->보류

처음으로 알게된 방법은 그냥 간단하게 개발자 도구를 키지 못하게 컨트롤이나 f12 버튼을 누르는 것을 막는 방법이었다.

( +마우스 오른쪽 키 블락 정도가 있겠다.)

하지만 문제는 저렇게 단축키를 막는다고 해도 어차피 브라우저 속성 들어가서 개발자 모드를 키게 되면 접근 할 수 있기 때문에 해결이라고 할수가 없었다.

https://898989.tistory.com/54

블로그 포스팅, 무단복사방지 우클릭 및 개발자도구 금지

 

 

 

2차 시도... -> 적용

위의 방법보다 좀더 나은 방법이 없을까 여기저기 알아보던 중

 

같은과 선배가 인코딩 방법을 알려줬다.

 

몇몇페이지는 ttf 파일을 사용하지않고 css정도만 사용해서 페이지를 구성한것을 보고물어봤는데 그걸 선배가 보고 이거 인코딩한거라고 해석해 줘서 우리 미대생 페이지에도 적용해보기로했다.( 인코딩에대한 지식이 아예없을땐 인지를 못했었다. 역시...원하는 정보를 찾아내는 능력도 알고있는게 많아야 된다는 것을 또 한번 느끼며...)

이 방법을 사용하면 ttf 원본 파일을 서버에 올리지않아도 폰트를 사용할 수있어서 제2 ,3 의 코딩친구가 발생하는 것을 막을 수 있을 것 이라 판단했다.

 

 

https://www.giftofspeed.com/base64-encoder/

File to Base64 Encoder

이곳에서 파일을 Base64 인코딩을 진행했고, 페이지 아래에 나와 있는 방법대로 페이지에 적용하여 폰트를 암호화시켜 ttf 원본파일을 사람들이 다운받지 못하도록 진행했다.

 

Base64 인코딩으로 나온 내용!

보는바와같이 꽤나.. 길다..하하;;

 

 

더이상 폰트의 원본파일이 보이지 않는다!

 

 

---

 

Base64 - 인코딩

• Base64 : Binary Data를 Text로 바꾸는 인코딩 방식 중 하나.