2011년 7월 31일 추가. 이 글이 본 블로그에서 가장 많이 방문되는 글이라는 사실에 충격받아 글을 갈아엎고 싶은 마음이 굴뚝같지만 밑천도 시간도 부족해 간단한 업데이트로 대신하려 한다.

부족한 밑천은 StackOverflow에 올라온 Best Resources to learn JavaScript의 종결자적 답변으로 때워볼까 한다.  많은 사람이 추천하는  더글라스 크락포드(Douglas Crockford)의 웹사이트와 그의 책 JavaScript: The Good Parts을 참고하자. 다행히번역서가 출간되었으니 참고.

이 글을 쓴게 3년 전인데 그 사이 자바스크립트는 세상에서 가장 오해받는 언어에서 가장 핫한 언어가 되었다. 늘 "이 말랑말랑한 언어로 서버사이드 개발을 하면 재밌겠다"고 생각해왔는데, Node.js, Backbone 등 서버사이드의 다양한 솔루션이 나오고 있다. PhoneGap이나 Titanium 등 하이브리드 모바일 앱 개발에도 자바스크립트는 굉장히 중요한 역할을 한다. 웹브라우저의 속도 개선, HTML5의 저변 확대 등의 영향으로 게임 등 전통적으로 JS의 영역이 아니라 여겨지던 부분에서도 활발한 움직임이 있다. JavaScript Game Engine 목록을 보라.

요즘 쏟아져나오는 .js 라이브러리의 양은 상상 초월이다. http://paperjs.org/, http://popcornjs.org/, http://kolber.github.com/audiojs/, http://processingjs.org/, http://impactjs.com/ ... The World's Most Active Programming Language가 되어버린 자바스크립트의 최신 동향을 제대로 훑는 건 내 능력을 벗어나는 일인 것 같다. 나도 따라가기 버거웁다 ㅠㅠ  여기서 이만 부족하나마 오래된 글의 애프터서비스를 마친다.


(원래 글 쓴 날 : 2008년 8월 15일) 몇 년 사이 자바스크립트가 다시 전성기를 맞고 있군요. 이를 증명하듯 한동안 한빛-O'relly의 '자바스크립트 핵심 가이드'하고 정보문화사-Wrox의 'Professional Javascript'외엔 프로그래머가 볼 만한 책이 없었는데 요즘 좋은 책이 많이 나왔네요.

얼마전 후배 개발자가 자바스크립트 책을 추천해달라고 한걸 계기로, 자바스크립트 학습자료를 정리해보기로 했어요.

우선 제가 최고의 자바스크립트 책으로 치는 '자바스크립트 핵심 가이드'의 원서 최신판, 'JavaScript, The Definitive Guide 5/E'가 번역되어 나왔어요. 한빛에서 나온 3/E의 번역서는 애초에 품절이라 아쉬웠는데 이번에 인사이트가 좋은 일을 했네요^^ 저는 구판만 읽어봤지만, 최신판이니만큼 더욱 좋아졌을거라 생각해요. 팀원이 책을 샀길래 잠깐 훑어봤더니 굉장히 좋아졌네요! 예제 코드도 최신 스타일(?)이고, 레퍼런스 부분이 분책되있는 점도 아주 좋고요. 구판은 버려야겠어요^^
자바스크립트 완벽 가이드 - 전2권 - 10점
데이비드 플래너건 지음, 송인철 외 옮김/인사이트

제가 사랑하는 '헤드 퍼스트Head First' 시리즈에서 JavaScript도 나왔군요! 이 책도 읽어보진 않았습니다만, 헤드퍼스트 시리즈 중에는 실망스러운게 없었어요. 전 헤드퍼스트를 믿어요ㅎ 차근차근 친절하게 배우고픈 초보자는 이 책을 고려해보세요!
Head First JavaScript - 10점
마이클 모리슨 지음, 홍형경 옮김/한빛미디어

이건 번역서 나오기 전에 원서를 후루룩 넘겨본 수준이지만.... 책의 저자가 엄청 유명한 웹사이트인 www.quirksmode.org의 주인장 피터 폴 콕이란 이유만으로 추천이에요. www.quirksmode.org에서 배운게 고마워서라도 그냥 책 한권 사주고 싶다는.. 최근 이슈인 '웹표준'과 관련된 내용이 많이 있고, 자바스크립트 초심자를 위한 책은 아니에요.
PPK 자바스크립트 - 10점
피터 폴 콕 지음, 전정환.정문식 옮김/에이콘출판

경량 데이터 교환형식으로 널리 쓰이는 JSON을 고안한 Douglas crockford의 웹사이트 먼저.
The World's Most Misunderstood Programming Language는 자바스크립트에 대해 이런저런 편견을 가진 분들을 위한 글이에요. 한글로 번역된 것도 있으니 부담갖지 마시고요ㅎ
JSON에 대해서도 곧 알아두셔야 할거에요. Ajax시대를 맞아 서로 다른 플랫폼간의 경량 데이터 통신에 아주 많이 쓰이는 형식이거든요. 그 외에도 자바스크립트 코드 압축기라던가 여러가지 참고할 자료가 많아요.

앞에도 잠깐 언급한 http://www.quirksmode.org/는 정말정말 중요한 곳이에요. 웹브라우저에 내장된 클라이언트-사이드 자바스크립트에 대한 정보는 여기 다 있어요. 여기 있는 글을 다 읽어봐야됩니다ㅎ 특히 이벤트 모델에 대한 부분(http://www.quirksmode.org/js/introevents.html)은 이벤트 모델 (.onclick과 addEventHandler/attachEvent)의 차이, 역사, 브라우저별 특성 등 모든게 정리되어 있어요!

Ajax의 등장으로 자바스크립트계가 활발해지면서 각종 라이브러리가 등장했는데, 가장 유명해진 것이 바로 프로토타입prototype.js가 아닐까 합니다. 이 외에도 jQuery라던가 Dojo toolkit, YUI 등 좋은게 많습니다만 저는 prototype.js를 분석해볼 것을 권해드려요. 일단은 제가 라인단위로 분석해본게 이것 뿐이라^^ 관련서적이 나와있기도 하고요, RoR과 함께 엄청 성장을 해서 사용자층이 많은 것도 장점이고요.
김영보님이 prototype.js를 분석한 서적이 출간되기도 했습니다만 지금은 절판이라 구할 수 없어요. 저는 책도 샀고 저자직강도 들었었는데, 인터넷에서 자료찾는게 익숙한 분이면 절판된 사실에 아쉬워하지 않아도 될거에요. 자세한 구현원리까지 설명되어있진 않아서요. prototype.js와 찰떡궁합인 scriptaculous를 같이 설명한 책이 시중에 나왔으니 참고하시구요. (분석서는 아니고, 활용서들이에요)

당장 prototype.js같은 큰 라이브러리를 분석하기 부담스럽다면, 한 때 인기를 끌었던 이 글을 읽어보세요.
http://www.dustindiaz.com/top-ten-javascript/
유용한 자바스크립트 함수 10개만 꼽아본다면? 이라는 질문으로 시작하는 이 글은 prototype.js와 같은 라이브러리가 유행하기 직전에 쓰여진거라는 점을 감안하고 보면 아주 재미있어요. 많은 개발자들이 생각하는 자바스크립트의 아쉬운 점도 엿볼 수 있고, 여기에 있는 함수중에 prototype.js 안에 구현되어 있는 것들도 많아서 나중에 prototype.js를 분석할 때 도움이 되요.
 
자바스크립트 초보자에겐 Javascript Bootcamp tutorial을 추천하고 싶네요! 짧은 코드가 나오는 여러장의 슬라이드인데, 차례대로 넘기면서 보면 '아하!'할 수 있게 구성됐어요. 필수 추천자료에요.

생각나는대로 막 적어내려봤는데, 생각보다 가진 자료가 별로 없네요^^ 레퍼런스와 다른 분들이 모아둔 자료를 아래 참고에 링크하면서 마치겠습니다. 더 생각이 날때마다 업데이트 하도록 하지요.

참고


신고
  1. Commented by BlogIcon juniac at 2008.08.15 22:46 신고

    오 자바스크립트 완벽 가이드 이거 주문했는데 글이 딱올라옴??

  2. Commented by BlogIcon at 2008.08.19 17:07 신고

    음. 최근에 가장 놀랐던것이.. javascript 가 생각외로 거대한(! 어디까지나 생각외로 ㅋ) 프로그램이란거.. 였는데.. 기회가 닿으면 꼭 봐야겠네요.. 사무실을 뒤져봐야게씸 ㅋㅋ

    • Commented by BlogIcon sh. at 2008.08.19 19:32 신고

      The World's Most Misunderstood Programming Language 라니까! ㅋㅋ
      정운대리가 "자바스크립트 완벽 가이드(5/E) - 전2권"샀길래 훑어봤더니 굉장히 좋은데!! 오렐리책 버리고 이거 구비해야겠어.

Update 2012. 3 - 사실 좀 오래된 뉴스인데, 2011년 10월 Adobe가 Typekit을 인수했다.

예전에도 한 번 웹폰트에 대해서 쓴 적이 있는데 그 후로 참 이쪽 업계에 많은 발전이 있었다. 주요 웹브라우저가 웹폰트 지원을 강화했고, iOS4.2부터 모바일 사파리가 웹폰트를 지원한다. Typekit도 빠르게 성장하는 것 같고, 구글도 웹폰트 서비스를 오픈한 후 신경을 많이 쓰는 것 같다. 구글에서 제공하는 폰트 패밀리가 지금 197개에 달하고, 빠르게 추가되고 있다. 국내에서도 미투데이가 한동안 나눔고딕을 웹폰트로 제공했는데 성능을 이유로 제거했다. 한국어 폰트는 글자수가 많아 용량이 큰데, 적극 도입하는데 큰 장벽이 되는 것이 사실이다. 하지만 웹폰트는 앞으로 대세 내지는 상당히 일반적으로 쓰일 것으로 생각한다. 내가 개발하고 있는 서비스에서도 웹폰트를 쓰고 있는데, 관련 자료를 정리하기 위해 이 글을 쓴다. 약간의 구글링만으로 찾을 수 있는 자료들이지만... 나이를 먹어감에 따라 자꾸 헷갈려서 원.

쉬운 방법부터. 구글이나 타입킷같은 웹폰트 호스팅을 이용하면 정말 쉽다. Google WebfontsTypekit에서 마음에 드는 폰트를 고르고 코드 몇 줄 복사해 넣으면 바로 적용된다. 구글은 Open/Free 폰트만 제공하지만 쓸만한 것들이 많다. 타입킷은 무료부터 유명 상용 폰트까지 다양하다. 비슷한 서비스가 많으니 고려해보자. 한글 폰트가 필요하다면 fontface.kr(무료, 비상업, 나눔 패밀리만 제공)이 우선 시도해보기 좋고, 더 본격적으로 상업적 지원까지 고려한다면 모빌리스의 웹폰트 서비스(나눔, 은, 백묵 등 공개글꼴 제공)에 관심을 가져보자.

좀 더 기술적인 것들을 알고 싶다면 계속 읽어주세요. 일반인은 여기까지.

@font-face로 웹폰트를 쓸 때 성가신 점은, 바로 브라우저 호환성이다. IE은 EOT, Firefox는 WOFF(3.5 이하는 TTF/OTF), Safari는 TTF 포멧을 지원한다(IE9와 OS X Lion의 사파리는 WOFF 지원한다고. 5년 후엔 WOFF로 대동단결 가능하겠다.). 즉 한 가지 웹폰트를 사용하려면 세 가지 포멧을 서버에 올려두어야 한다. Google Web fonts나 Typekit같은 서비스는 이걸 알아서 해주니 편하다. 

브라우저 호환성을 고려해 CSS 작성하는 방법은 Bulletproof @font-face syntax 참고. 그리고 웹폰트를 임베딩 할 때 CSS파일에 직접 써줘도 되지만 Google Font API의 WebFont Loader 라이브러리(JavaScript)를 고려해보자. 폰트를 비동기적으로 불러올 수도 있고, 유용한 이벤트도 제공한다. 꼭 구글 웹폰트에 등록된 폰트가 아니라도 사용할 수 있다.

영문 폰트는 유/무료로 선택의 폭이 넓다. 한글의 경우 자유롭게 사용할 수 있는 폰트가 많지 않은 실정이다. GPL 혹은 OFL을 채택한 폰트는 모빌리스 웹폰트 서비스에서 제공하는 것들의 거의 다라고 생각하면 되겠다. 무료로 공개된 한글 폰트가 꽤 있지만 웹폰트 형태로 자유롭게 쓸 수 있는 것은 거의 없다. 예를 들어 포탈 다음도 네이버와 마찬가지로 '다음체'라는 글꼴을 무료 공개했지만 '나눔글꼴'처럼 수정과 재배포가 자유로운 OFL을 채택하지도 않아 웹폰트로 활용은 어렵다. 공식 페이지의 사용가이드란에 (그것도 이미지로) "배포되는 형태 그대로 사용해야 합니다"라는 조항이 있더라. (정말 안되는지 궁금하면 다음에 문의해보세요.) 한겨레라던가 조선일보, 엠비씨 등 언론기관에서도 글꼴을 공개했지만 개인 용도에 한한다던가 하는 단서가 있으니 역시 웹폰트로 사용하는 것은 어렵겠다.

나의 경우는 서울시에서 배포하는 서울 남산/한강체를 웹폰트로 활용하기 위해 이 글에 적고 있는 내용들을 조사한건데, 서울체의 경우 서울시에 전화로 문의해서 웹페이지에 사용해도 좋다는 답을 얻었다. 담당자가 기술적인 사항을 제대로 이해했는지는 확실하지 않지만, 공공기관에서 만들었고 되도록 널리 사용되기를 바라는 것 같았다.

아래는 폰트파일을 웹폰트 포멧으로 바꾸는 방법이다. 그런데, 바꾸기 전에 꼭 기억하자 - 폰트도 소프트웨어로서 저작권을 보호받는다. 웹에 올릴 수 있는 권리가 있는지 꼭 확인하자. 당신의 컴퓨터에 깔린 폰트라고 해서 웹에 올려도 되는건 아니다. 돈주고 샀을지라도 말이다.

TTF를 EOT/WOFF로 변환해주는 웹서비스가 있다. 폰트를 업로드하면 필요한 모든 작업을 해줘서 너무너무 편하다. 단 두 곳 모두 2Mb 업로드 용량 제한이 있어 아쉽다.

한글 폰트의 용량이라는 것은 예사로 2Mb를 넘기 때문에 직접 변환해야 하는데 TTF to EOT는 http://www.eotfast.com/가 괜찮은 것 같다. http://code.google.com/p/ttf2eot/도 같은 일을 해주는 프로그램인데 나의 경우는 잘 작동하지 않았다. MS에서 윈도우 95시절에 만들었다던가 하는 WEFT라는 툴이 있는데, 나는 제대로 써보질 못했다.

WOFF로 바꿀 땐  http://people.mozilla.org/~jkew/woff/를 쓰면 된다. OTF나 TTF를 변환해준다는데, 내 경우 OTF는 변환이 안되고 TTF만 되더라.

변환한 폰트 파일들은 위의 @font-face 설명이나 Google Web Font Loader 등을 이용해서 웹사이트에 넣으면 되겠다. 

참고로 나도 아직 잘 모르는 부분들이긴 하지만 몇 가지를 더 소개하자면... EOT는 특정 도메인에서만 사용할 수 있도록 만들 수 있다. 이걸로 수익모델을 만든 회사도 좀 있더라. 그리고 구글 웹폰트는 필요한 글자의 폰트만 다운로드하는 옵션이 있어 전송량을 줄이도록 도와준다. 한글 폰트야말로 이런 기법을 적용하면 큰 효과를 볼 수 있을테다.

웹폰트에 대해 더 알고싶다면 위키피디아의 Web Typography 항목이 좋은 시작점이 될거고, Typekit Blog에서도 좋은 글을 많이 올라와있으니 체키라웃.

p.s : 또 다른 font-face ;)

저작자 표시
신고
  1. Commented by BlogIcon yuna at 2011.07.15 13:18 신고

    부지런하고 꼼꼼하고 친절하셔라! :-D

  2. Commented by BlogIcon CANTATA at 2011.07.29 08:46 신고

    좋은 정보 잘 보고갑니다.
    적용시켰습니다.

  3. Commented by BlogIcon lucy at 2011.12.23 16:35 신고

    유용한 정보 감사합니다 :)

  4. Commented by 열셋 at 2012.01.27 16:58 신고

    내용중 http://people.mozilla.org/~jkew/woff/ 의 링크가 ttf2eot 로 걸려있네요 ^^;
    잘못눌렀나 하고 몇번이나 다시 눌러봤습니다...

  5. Commented by 궁금이 at 2012.01.30 00:49 신고

    글을 읽고 서울 한강체와 남산체를 받아서 변환후 폰트페이스로 사용해봤는데
    한강체의 경우 라이트와 미디움 사이즈 서체가 파이어 폭스와 크롬에서 안보이고 남산체의 경우 라이트 미디움 볼드 셋이 파이어 폭스와 크롬에선 안보였습니다.
    아무래도 WOFF 포맷에 문제가 있는 것 같은데 웹폰트 적용시 어떠하셨는지 결과가 궁금합니다. 답글 부탁드려요. 감사합니다

    • Commented by BlogIcon sh. at 2012.02.01 12:28 신고

      저도 변환해본지 좀 오래되서 정확하게 기억이 안 납니다만, 웹페이지에서 쓰려고 했던거라 미디엄만 변환을 했던 것 같습니다. 제가 변환해둔 폰트를 한번 사용해보세요. http://dl.dropbox.com/u/1989606/seoulnamsanwebfonts.zip

  6. Commented by BlogIcon sh. at 2012.04.26 23:54 신고

    http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/ 각 운영체제/브라우저별 웹폰트 렌더링에 관해 자세히 기술한 글.

  7. Commented by 초코 at 2014.06.16 04:24 신고

    안녕하세요

    구글 웹폰트를

    1. 자바스크립트 비동기 식으로 하면 더 좋을까요

    아니면 그냥 링크로 하는것이 좋을까요?

    2. 그리고 페이지 로딩을 보는사람이 마우스로 화면을 내려가면 그때 계속해서
    로딩되게끔 할수 있을까요?.. 그러면 페이지 로딩시간이 단축될것 같아서요..

    답변 부탁드립니다.

    • Commented by BlogIcon sh. at 2014.07.04 13:57 신고

      안녕하세요. 댓글 알림이 안 와서 이제야 봤네요. 각각 장단점이 있을텐데요, 저는 스크립트로 로딩합니다. 화면에 깜빡거리는 단점이 있긴 하지만 스타일시트로 부르면 아무래도 화면 로딩이 느려질 것 같아서요. 특정 이벤트(말씀하신 화면 스크롤 포함) 발생했을 때 로딩하는 것도 가능할 것 같아요. 그런데 사이트 로딩 속도가 걱정되는 거라면 자바스크립트(https://github.com/typekit/webfontloader)를 쓰시면 어차피 비동기 로딩을 하니까 따로 신경을 안 쓰셔도 될 것 같아요.



티스토리 툴바