사이트는 만들었지만...

초창기의 SCP 재단의 모습은 처음 봤던 제가 보더라도 별로 좋아보이지 않았습니다. 다채로웠던 영어 폰트와는 다르게 한글 폰트는 전혀 지원하지 않았으니 그야말로 굴림의 향연이었죠.

먼저 굴림으로 가득한 사이트 폰트부터 뜯어고쳐야했습니다. 그리고 발견한 점이 위키닷에서는 테마의 CSS를 수정이 가능하다는 점이었죠.

초창기에는 시스템 기본 폰트만 적용되어 전체 글꼴이 굴림이었다.

웹폰트에 도전하다

다행히 CSS를 수정하여 기본 폰트를 윈도우 기본 폰트인 '맑은 고딕'으로 정하는데까지는 성공했지만, HTML과 CSS를 그저 인터넷에서 보고주워들어서 독학한것 밖에 없었던 저에게있어서는 웹폰트라는것을 깨우치기까지는 좀 시간이 걸렸습니다.

이리저리 보고들은건 있어서 네이버와 산돌에서 제작한 '나눔고딕'을 웹폰트로 하기위해 파일을 올려서 적용시켜봤지만...

정말 엄청나게 느립니다. 위키닷 서버가 별로 좋지 않았는지는 모르겠는데, 아무튼 직접 웹폰트를 적용시키니 엄청나게 로딩이 늦어지게 되었습니다.

그러다보니 웹폰트를 포기할까 싶었는데, 그렇다고해서 맑은 고딕이 굴림처럼 모든 디바이스에 있는 상용폰트가 아니다보니 다른 곳에서는 제대로 표기되지 않는 문제점이 있었습니다.

그러다가 발견한게 구글 웹폰트였죠.

웹폰트로 사이트를 개선하다

어떠한 디바이스를 사용하더라도 웹폰트를 사용하면 동일한 폰트가 나오게됩니다. 하지만 전 이걸 약간 바꿔보기로 했죠. 사실 개인적으로 맑은 고딕이 더 좋다는 사적인 이유가 더 컸습니다.

CSS에서 폰트를 정의하는 속성은 "font-family"입니다. 이것으로 각 태그, 아이디, 클래스의 폰트를 제어할 수 있죠.

일단 CSS에서 웹폰트를 쓰기위해 먼저 사용할 웹폰트를 정의합니다.

위키닷을 처음 개설하고 SCP 재단이 사용하는 스킨을 씌웠을때 CSS가 정의하는 폰트는 다음과 같습니다.

사이트가 굴림으로 나오는것은 이 폰트에 한글 폰트가 없기 때문입니다. 따라서 웹폰트를 지정해주고, 기본 한글 폰트를 '맑은 고딕'으로 한 뒤에 그 뒤에 '나눔고딕'을 넣어줘야했죠.

그런데 여기에 문제가 하나 발생합니다. 맑은 고딕과 나눔고딕을 영어 폰트로 쓰기에는 문제가 좀 많다는 점입니다.

영문 폰트가 뒤섞여 가독성이 더 떨어질바에야 차라리 미리 있던 영어 폰트를 적당히 앞에다 놓고, 한글 폰트만 맑은 고딕과 나눔고딕이 적용되게 설정하기로했습니다.

끝에 돋움을 넣은것은 혹시나 맑은 고딕과 나눔고딕이 뚫렸을때(...)를 대비하여 넣었습니다. 물론 웹폰트를 쓰는 나눔고딕이 뚫리려면 CSS 자체를 지원을 안하는 구버전의 인터넷 익스플로러들이겠지만요.

이제 SCP 재단 홈페이지에서는 나눔고딕이 컴퓨터에 깔려있지 않은 수많은 컴퓨터 기기들(특히 스마트폰같은 모바일 기기)에서 접속하더라도 나눔고딕이 보이게됩니다.