웹에서 사용하기에 한글 글꼴의 용량은 너무 크다. 10~20년 후면 그런 용량도 커버하는 인터넷 속도가 자연스러워질지 모르나, 지금은 아니다.
그래서 나눔고딕 cufon을 minify로 압축하고, 글꼴을 가진 경우에는 cufon을 적용하지 않으며, 캐시를 사용하는 방법이 있다. 그러면 300kb 정도로 용량을 줄일 수 있다.
cufon은 ‘함초롬 돋움’ 같은 용량이 큰 글꼴로는 만들 수 없다. 그래서 이런 글꼴을 사용하려면 어쩔 수 없이 이미지 글자를 생성해야 한다.
이미지 글꼴의 커다란 단점은 수정이 불편하다는 거다. 디자이너에게 의뢰해야만 고치거나 새로 만들 수 있다.
그런데 만약 이미지 글자를 생성해 주는 스크립트를 만든다면?
phpThumb를 이용하면 간단하게 이미지 글자 생성 스크립트를 만들 수 있다. 아래와 같은 URL 형식을 따르면 된다.
/phpThumb/phpThumb.php?src=/t.png&w=398&h=94&zc=2&fltr[]=wmt|다국적군은 리비아 폭격을 중단하라|30|L|000000|NanumGothicBold.ttf|100|0|0&f=png&aoe=1
나 같은 경우는 배경을 투명하고 글자만 나오게 할 생각이므로, 일단 투명하기만 한 png가 하나 필요하다. (투명하기만 한 png 다운로드 : 다른이름으로 다운로드를 사용해 다운받는 게 속편할 거다. 열어봤자 투명해서 안 보인다.)
그렇지 않은 사람은 파라미터 맨 마지막의 f=png
를 f=jpeg
으로 고치면 되겠다.
위의 파라미터를 하나씩 설명하겠다.
- src=/t.png : 당연히 배경그림 되겠다. 투명 png이다.
- w=398 : 가로가 398px이라는 거다.
- h= 94 : 세로가 94px이라는 거다.
- zc=2 : 배경그림을 지정한 가로세로에 맞춰 잘라 버리라는 거다.
- f=png : 출력을 png 포맷으로 하라는 거다. 당연히 나는 투명 png을 사용할 거니까. jpg 사용하고 싶은 사람은 jpeg으로 쓰면 된다.(투명 png을 사용할 경우 ie6 처리를 해 줘야 한다는 걸 알고 있을 거다.)
- aoe=1 : Output Allow Enlarging 의 약자다. 확대를 허용한다는 말이다. 이렇게 안 하면 t.png의 기본 사이즈인 100×30 이상으로 글자가 써 지지 않는다. 1이 켜는 거고 0이 끄는 거다. 당연히.
- fltr[]=어쩌고 저쩌고… : 필터를 사용한다는 거고, 글자를 박는 게 바로 이 필터기능을 이용한 거다. 원래는 글자 워터마크를 찍는 기능인 건데, 투명 png에 글자를 와방 크게 넣으면 그게 그냥 이미지 글자가 되는 거다. 내 생각에, 유동적인 제목 같은데는 사용하려면 좀더 머리를 짜내 봐야 할 것 같고, 일단 메뉴나 항목 제목처럼 가로세로 너비가 고정돼 있는 경우에 사용하면 될 것 같다.
fltr 워터마크 옵션
fltr[]의 어쩌고 저쩌고 부분을 설명하겠다. 이건 phpThumb의 phpthumb.readme.txt 의 Parameters 항목을 보고 쓴 거다. 맨 앞의 wmt 는 WaterMarkText 필터를 사용하겠다는 선언이다.
fltr[]=wmt|다국적군은 리비아 폭격을 중단하라|30|L|000000|NanumGothicBold.ttf|100
fltr[]=wmt|글자|폰트사이즈(pt)|정렬|컬러hex코드|사용할 글꼴파일|투명도|마진|기울임 각도|배경색hex코드|배경색 투명도|배경 확산 방향
- 글자: 한글 ttf 파일을 사용하면 한글도 가능하다
- 정렬: BR, BL, TR, TL, C, R, L, T, B 중 하나를 쓰면 된다
- 사용할 글꼴파일: ttf만 되며, phpThumb.config.php에서 $PHPTHUMB_CONFIG[‘ttf_directory’] 변수에 폴더를 지정해 줘야 한다. 기본값은 phpThumb/fonts 다. 이곳에 ttf 파일을 넣어 줘야 한다.
위에 쓴 두 개를 비교해 보면 알겠지만, 내가 실제 사용한 코드에서는 글자의 투명도까지만 옵션을 줬다. 즉, 안 써주면 기본값이 들어간다.
참고
이미지 폰트를 출력하는 함수를 짜 봤다. 가장 기본적인 것은 날변수로 받고, 기타 잘 사용하지 않을 만한 옵션은 옵션 배열로 처리하도록 만들었다. 자신의 상황에 맞게 수정해서 사용하기 바란다.
특히 폰트 파일명의 경우 대소문자 구분을 잘 해 줘야 한다. 윈도우 서버라면 모를까 리눅스 서버에서는 대소문자를 칼같이 구분하기 때문이다.
(여기 함수 소스를 넣어 뒀었는데 에디터 오류로 깨졌다)
텍스트에 엔터값을 넣으려면 %0A 라고 써 주면 된다. %0A은 urlencode를 한 엔터값이다. 또한, 한글을 사용할 경우에도 당연히 urlencode를 해 주는 게 좋을 거다. ie에서 제대로 보일 거라고 장담할 수 없다.
그러나 엔터값을 줘 봤자 줄간격을 조절할 수 없어 글자가 딱 붙어 나온다.
따라서 여러 줄을 사용하려면 그냥 두 번 생성하는 게 낫다. 만약 블로그 제목 같은 걸 자동으로 생성할 생각이라면 일정 글자 수 이상이면 공백을 기준으로 나눠서 이미지를 두 번 생성하도록 스크립트를 짜면 될 것이다.
댓글 남기기