웹마스터 팁

제목에서 그럴싸한 느낌을 받을지도 모르겠지만.
제가 웹폰트를 사용하려고 했었던 시작점에서부터
지금에 이르기까지 겪었던 그 힘들었던 수난과....
그를 해결할 수 있었던 좋은 방법(?)들을 열거하려 이렇게 글을 씁니다.

항상 느껴왔지만...
남들은 쉽게 해결하는 문제를.... 머리가 돌땡이라는 이유로
남들보다 힘들고 어렵게 해결한 나 자신이 참 초라하군요...

이글을 통해서 아직 모르는 부분에 대한 지식을 축척하실 수 있다면 정말 영광일겁니다..
그럼 지금부터 웹폰트 적용에 대한 멀티태지의 어설프고 암울한 역사를 시작해보려합니다.


1. 웹폰트는 어디서 다운을 받을 수 있는가?
스타일시트가 무엇인지도 모르던 시절... 웹폰트라는 것이 일종의 파일이라는 것을 알게되면서...
어디서 다운을 받아야하는지에 대한 해결책이 나오질 않더라구요...
그래서...
토리9체를 사용하고 있는 홈페이지를 우연히 발견....
오른쪽마우스를 이용하여 소스를 보았습니다...
이때 발견한 한가지가 바로....mwf확장자의 웹폰트를 적용한 헤드와 헤드사이의 폰트적용이었습니다.
저도 같은 방법으로 헤드와 헤드사이에

<head>
<스타일시작>
어쩌구저쩌구....(그사람의웹폰트주소)
다시어쩌구저쩌구.....
<스타일끝>
</head>

위의 형식을 그대로 복사하여 사용했습니다.
이게 왠일.... 나모웹에디터에서 적용이 되더군요...
참으로 기뻤습니다.. 어설프게나마 작업한 html파일을 계정에 올렸죠...
또한번 이게 왠일... 웹폰트가 적용되지 아니하는 것이었죠...

계정에 문제가 있는 것도 아니고.. 그렇다면 웹폰트자체에 문제가 있을것이다...
이러한 결론을 내렸습니다...

네이버를 검색하여 웹폰트... 라고 쳤죠... 거의 모든 네이버지식인의 질답을 읽은 듯 합니다..
여기에서 알아낸 것이...
웹폰트는 쉽게 만들 수 있다~~ 라는 것이었죠...
컴퓨터상에서 사용할 수 있는 ttf확장자를 가진 일반폰트를 가지고 있으면
웹폰트는 만들 수가 있다는 것이었습니다...

네이버에서 웹폰트 제작하는 프로그램을 검색했습니다...
웹폰트를 제작하는 프로그램의 다운로드를 지원하고.. 설치하는 순서까지 이쁘게 정리된
홈페이지가 많이 있었습니다.

그곳에서 프로그램을 다운받고 설명서도 여러번 읽었죠...
허나 이쁜 폰트체가 없더군요...
남들이 사용하는 웹폰트를 캡쳐하여 이리저리 물었습니다...
역시나 구하기 어려운 폰트더군요...

여기서 폰트를 공유하는 카페에 가입을 합니다.
그곳에서 여러가지의 이쁜 폰트체를 볼 수 있었습니다...

이제는 모든 것이 해결된 줄만 알았습니다.. 허나...
웹폰트를 제작했습니다... 이상했습니다...
처음에 복사해서 사용했던 mwf가 아닌 eot였던것이었습니다.     >.<;;

만감이 교차하는 이 순간.... eot도 웹폰트라는 것을 알아버렸죠.. 아주 쉽게... 네이버 검색을 통해서.... .. .. ㅋㅋ


2. 스타일시트를 이용하여 웹폰트를 지대로 적용하기
웹폰트 제작프로그램으로 원하는 폰트를 웹폰트로 제작하였습니다..
그럼 이제는 만든 웹폰트를 저의 계정에 올리고...

<head>
<스타일시작>
어쩌구저쩌구....(내계정의웹폰트주소)
다시어쩌구저쩌구.....
<스타일끝>
</head>

요로꼬롱 적용을 한 순간....
웹폰트가 나오긴 나오는디....
어느 부분은 웹폰트가.. 어느 부분은 "돋움"이 나오는 것이었습니다..
앞이 막막하더군요...
대체 그 무엇이 날 또 가로막는단 말인가...??

여기 제로보드에 질문을 합니다.
글자가 ㅁ으로 나오는 경우... 웹폰트 적용이 되는 부분과 그렇지 않는 부분은 왜 그런가용..?? 라구요..
그랬더니 스타일시트가 어쩌구 저쩌구.. 이랫다가 저랫다가 왔다리 갔다리 하시더군요...

스타일시트?? 그게 어디있냐고 물었더니 스킨안에 있다고 하더군요... -_ -;;
열었습니다..
어디다가 어떻게 하는지 몰랐습니다.
제가 사용하려는 스킨을 배포하신 님의 홈페이지에 갔습니다.
그곳에서 오른쪽마우스를 이용해서 스타일시트를 한장 훔쳐봤습죠..
거기에는 body로 시작하여    웹폰트주소)  로 끝나는 부분이 있더군요..

아하!! 저거구나...
적용을 했습니다..
결과는 마찬가지.... 일반체인 "돋움"으로 나오는 부분은 아직도 였습니다..

그래서 웹폰트에 문제가 있나부다~~ 라고 생각했죠..
다시 네이버로가서 검색을 합니다...
웹폰트라는 말이 들어가는 모든 질문을 합니다..

여기서 알게된 한가지!!
웹폰트라는 것중에서 사람들이 공통적으로 많이 사용하고 있는
"e1.eot" 라는 폰트의 실체를 알게 된 멀티태지....
그 e1체는 웹폰트중에서는 숫자가 이쁘게 표현되는 그런 것이었습니다..

흔희 게시판에 사용되는 글작성날짜. 조회수. 추천수.... 그것이 바로 e1체인 것이었죠..
그래서....
e1체를 구해보려 노력했지만 아니되더군요...
생각해서 내린 즉....

내 목적은 e1체를 구하는 것이 아니라... 일반체인 "돋움"이 아니나오고...
모든 부분에서 웹폰트가 적용되야한다!! 였습니다..

그래서 제가 제작한 웹폰트를 e1이라는 다른 이름으로 교체해서 또 올렸습니다..
제 계정에는 웹폰트가 두개 들어가는 결과를 낳았죠...
그랬더니....
모든 부분에서 웹폰트가 적용되더군요...

지금은 e1체를 어느분의 홈페이지에서 훔쳤지만... 굳이 e1체를 사용하지 않아도
웹폰트가 워낙 이쁘다보니까... ^^;; 괜찮더라구요...

긴글 읽으셨네요...
여기서 제가 드리고 싶은 말씀이 있습니다...

요즘 홈페이지의 소스를 훔쳐볼 수 있는 프로그램이 여러 나오고 있죠...
얼마전에 누군가... 제 계정에 있는 bgm과 웹폰트를 본인의 계정에 옮기지 않고..
그냥 제 계정의 주소를 사용하고 있던군요...
트래픽 무지 잡아먹었습니다...
여러카페와 몇몇 계정홈페이지까지... 어떤 날은 트래픽으로 문이 닫히는 날도 -_ -;;

웹폰트에 대한 관심을 가지고 계신 분들중에서는....
아마 제가 장왕하게 설명한 위와 같은 수순을 밟을지도 모릅니다...

잘 모르더라도... 조금만 더 생각하면.....
남에게 피해를 주지않고도 얼마든지 본인의 뜻을 이룰 수 있습니다.
웹폰트 사용을 선호하지 않는 분들에게는 조금 깊이없는 이야기일수도 있겠지만..
웹폰트라는 것에 한번 빠지게 되면....
헤어나오지 못하더군요...
물론 실력이 되지 않으니깐.. 뻘짓(?)을 하다가 시간을 보내곤합니다...

여기 제로보드를 뒤져도.. 그리고 좋은 검색사이트를 뒤져도...
저와 같은 멍청한 순서를 거치고 시간낭비를 하지 않을 수 있습니다..
허나... 남에게 피해는 주지 말아야한다는 생각이 드네요....

웹폰트 제작할 때... 그래서 저는 제계정에만 사용할 수 있게 넣어둡니다..
개인적으로 제작하시는 분들 많을줄 압니다..
그렇게... 각막한 웹폰트를 만들어야한다는 것이 제 스스로의 목을 조른다는
생각이 드네요...

그 누군가의 말처럼..
"나의 것이 소중하면 남의 것도 소중합니다."

정말로 긴글이군요...
e1체의 실체도 한번 알아가는 게 좋을 듯 합니다...

^^;;
별 것 아닌데 이렇게 적었네요...
오늘도 행복한 하루 되세요...
제목 글쓴이 날짜
XHTML 1.0 Strict에서 더 이상 사용할 수 없는 태그 / 속성 [16] EDENe 2005.01.22
[기초]홈페이지의 프레임 나누기 입니다. [5] piasol 2004.12.10
드래그 금지 및 오른쪽 버튼 금지 소스 [6] 편입성공기 2004.12.06
브라우저 주소창에 긴 경로 안 나타나게 하기 [7] 편입성공기 2004.12.06
새창에 폼태그로 전송하기 편입성공기 2004.12.06
도메인 포워딩 즉 페이지 자동이동하기 [6] 편입성공기 2004.12.06
페이지 회색스크롤바로 바꾸기 편입성공기 2004.12.06
톡톡 튀는 홈페이지 테이블 제작하기 ^^ [6] piasol 2004.12.03
최근게시물의 폰트크기와 링크색상 바꾸는 방법 LUFFY 2004.11.20
웹폰트사용에 대한 실체를 밝힌다!! [22] Multi_Taeji 2004.11.13
a링크를 이용 새창 띄우기 [10] 토토루 2004.11.07
웹문서 검색을 대비한 헤더,푸터 나누기. [4] 그럴까? 2004.10.29
각 객체접근.. [2] canelia 2004.10.29
W3C 표준 권고안. 앞으로 꼭 지켜주세요.. [14] canelia 2004.10.29
스타일시트에서 링크포커스 없애기 [12] keymove 2004.10.26
타이틀 바에 움직이는 타이틀 넣기. [5] 덜렁이 2004.10.16
<button>태그를 아시나요? [6] 그냥이렇게。 2004.10.13
TabIndex를 이용하여 탭키 컨트롤하기 [5] 손상모 2004.10.08
테이블 주위에 점선효과!!!~~(초간단팁!) [6] 초라 2004.09.25
경고창 없이 부모창 닫고 아기창에서 마우스 오른버튼 클릭시 아기창도 닫는다. [4] 詩와언어™ 2004.08.27