포럼
웹폰트 사용 방식을 제안합니다. 모든 스킨 개발자님들에게...
2012.05.12 05:13
안녕하세요?
모든 스킨 개발자님들과 함께 웹폰트에 대한 사용 방식에 대해 얘기하고 결정하고 싶어서 글을 남겼습니다.
간단 명료하게 남기겠습니다.^^
현재 웹폰트 사용의 문제점
사이트 구성을 다음과 같이 한다면,
레이아웃 스킨 + 게시판 스킨 + 위젯 스킨
모두 다른 개발자이며 모두 "나눔고딕"을 쓴다고 가정했을 때입니다.
이렇게 되면 한 페이지에서 불러오는 나눔고딕 폰트파일은 3개가 됩니다.
레이아웃의 나눔고딕, 게시판의 나눔고딕, 위젯의 나눔고딕
왜 이런 현상이 일어나냐면
폰트가 설치된 폴더와 폰트파일명이 다르고 CSS에서 지정하는 폰트명도 다르기 때문입니다.
이렇게 되면 엄청난 트래픽이 발생합니다.
해결 제안 방법
일단 폰트파일이 공유가 되어야 합니다.
지금까지는 각각의 스킨 폴더에 따로따로 저장해서 같이 배포했었는데,
제안하는 방법은
xe설치폴더/fonts 라는 폴더를 만들어 폰트파일을 공유하는 것입니다.
스킨제작자는 폰트가 xe설치폴더/fonts 에 있다는 것을 가정하고 항상 이 폴더로 폰트 경로를 지정해 주면 됩니다.
이렇게 하면
레이아웃 스킨, 위젯 스킨, 모듈 스킨 모두가 이 곳 하나의 파일만 불러들이게 되겠죠.
그럼, xe설치폴더/fonts에 폰트파일은 누가 어떻게 설치하느냐?
사용자가 설치하되 스킨 배포할 때 폰트파일도 함께 배포해서 xe설치폴더/fonts에 업로드하라고 안내하는 방법입니다.
이미 있으면 업로드 안해도 되구요.
가장 좋은 방법은 자료실에 쉬운설치로 통해 폰트 설치가 되었으면 좋겠습니다.
* 예시 파일명(xe설치폴더/fonts/)
나눔고딕 : ng.eot, ng.woff, ng.font.js
나눔고딕 Bold : ngb.eot, ngb.woff, ngb.font.js
* 예시 CSS @FONT-FACE 사용시
@font-face{font-family:ng; src:url('/font/ng.eot'); src:local('☺'), url('/font/ngb.woff') format('woff')}
.example{font-family:"나눔고딕", NanumGothic, ng}
* 예시 Cufon JS 사용시
<load target="/cufon-yui.js" />
<load target="/ng.font.js" />
<script type="text/javascript">
Cufon.replace('.example');
</script>
반대 의견이나 좋은 의견 모두 남겨주셔서 충분한 검토가 된 후에 확실히 제안해 보겠습니다.^^
이런 문제가 영어는 크지 않은데
한글은 돋움 밖에는 쓸만한 폰트가 없어서 생기는 문제인 것 같습니다.
윈도우에서 나눔고딕 폰트를 기본 채택하길 바라는 마음도...
그리고, 나눔고딕과 같은 기본적으로 사용할 수 있는 웹폰트가 많이 나왔음 좋겠네요.
댓글 9
-
윈컴이
2012.05.12 10:12
-
Treasurej
2012.05.12 11:52
fontface.kr도 문제인게
브라우저에서 처음에 돋움을 먼저 보여주고 나눔고딕으로 리프레쉬 되더라구요.
사용자 입장에서는 조금 불안한 사이트로 보여주죠. 특히 상업용 사이트 같은데서는 이러면 안되서...
로딩속도도 조금 문제가 있구요..
사이트 자체에서 불러와야 할 경우엔 위와 같이 대책이 없는거죠^^
그리고, cufon 사용할 때는 위 font-face에서는 지원하지 않구요.
어쨋든 자체적으로 폰트를 제공해야 하는 경우가 있는데 이럴 때의 대책이죠^^
웹폰트 맞네요ㅎㅎ
-
윈컴이
2012.05.12 11:55
맞아요. 기본 글꼴을 보여준 다음 리프레쉬 되더라고요.. ㅠㅠ;;
-
배워서남준다
2012.05.12 11:05
XE에 bootstrap 이 기본 탑재되어도 좋을듯 싶은데요.
bootstrap에서 사용되는 css 클래스명과 비슷해서 수정해서 사용하고 있습니다만...
bootstrap처럼 자주 사용되는것들은 클래스로 등록해서 사용하면, 폰트문제도 해결될듯 싶은데요.
기본코드보다는 클래스로 등록해서 사용자가 자유롭게 선택적으로 사용할 수 있으면 좋을듯 싶은데
XE 개발팀이 모두 프로그래머이다보니 UI나 디자인까지 신경쓰기에는 조금 힘든것 같습니다.
사이트 개편도 늦어지는것을 보면...
감사합니다.
-
엘카
2012.05.12 13:14
공용으로 로드되는 폰트는 필요하긴 합니다.
코어에 폰트를 탑재하기엔 스킨기반/소수 대상이라는 점에서 그 실효성이 부족할 것 같은데요,
웹 폰트를 하나의 라이브러리 개념으로 접근하여 iePngFix, css3pie, 웹 폰트 등 다양한 라이브러리를 모아놓고 선택하여 적용할 수 있도록 하면 조금은 더 쓰이지 않을까 생각합니다.
libs/ 디렉토리에 skin/css3pie, skin/DD_belatedPNG, skin/fonts 이런식으로 탑재할 수 있는 공용화가 필요합니다.
애드온으로 제작/사용 하는건 거부감이 들지만, 위와 같이 라이브러리 형태로 연동자료에 연결하고, 스킨제작자가 필요한 라이브러리만 {@ Context::addCSSFile("libs/fonts/nGothic.css"); Context::addJsFile("libs/css3pie/pie.js"); } 이렇게 쓰이면 제가 스킨 제작할 경우 여기에 참여할 의사가 있습니다.
얼마나 다수의 개발자들이 참여해줄지는 미지수지만, 군더더기 없이 원 형태를 잘 유지한다면 괜찮을 것 같습니다.
업데이트와 같은 유지보수 비용도 절약되구요. (스킨마다 개별의 라이브러리를 적용하면 한번 업뎃될때마다 스킨의 라이브러리는 죄다 구버전이 되죠..)
아무튼 이 라이브러리가 널리 활용되기 위해서는 공공성을 띄는 누군가가 나서야 하는데, XE에서 이러한 라이브러리들을 모아놓은 꾸러미를 자료실에 등록하면 금상첨화일 것 같습니다.
이런 문제들에 대응하려고 테마가 있는 듯 한데, 테마 취지는 좋았지만 현실성이 없음..
-
배워서남준다
2012.05.12 13:25
제가 내용을 잘못 이해했는지는 모르겠지만 다수든 소수든 외부 개발자들에 의한 독립된 라이브러리는 큰 의미는 없다고 생각합니다.
외부 개발자들에 의한 독립된 라이브러리는 지금의 에디온이나 기타 모듈과 별로 다를바 없는것 같습니다만...
그누보드의 배추스킨이나 불땅팩과 같은 의미겠네요.
-
엘카
2012.05.12 13:28
라이브러리가 유용한 것은 맞지만 항상 쓰이는 것은 아니죠..
용량문제와 실용성(얼마나 널리 쓰이는가)을 고려하면 코어에 탑재될 가능성은 제로입니다.
따라서 누군가가 이러한 라이브러리들을 하나로 묶어 배포하는 것을 제안하고, 개발자들의 참여를 위해 그 배포자는 XE여야 한다는 내용입니다.
-
배워서남준다
2012.05.12 13:34
외부 개발자보다는 문제는 XE 개발팀에서 어떻게 받아들이고 처리를 해줄지...
좋은 제안이긴 한데요. 현실성이 있을까 싶어요~
다른건 몰라도 폰트는 XE에서 어떻게 해결해주면 좋을것 같은데요.
-
Treasurej
2012.05.12 14:37
공용라이브러리는 큰 문제이니 폰트부터!^^
저는 맥이라서... 상관 안써요 ㅋㅋ;;
그런데 "폰트"가 아니라 "웹 폰트"아닐까요?