Rev. 2.73

업무가 슬슬 재미있어지고 있습니다. 회사에 그래픽 디자이너가 없다 보니 맘대로 사이트를 작살내고 있는 와중에 하나 둘 드러나기 시작하는 시각적 불만족을 잠재울 아이콘 폰트를 찾고 있던 참이었습니다. 구하면 얻는다더니, Web Designer Depot에서 솔깃할 만한 포스트를 최근에 작성했군요. 브라우저 벤더 마다 지원하는 형식이 달라 여러가지 폰트 포맷을 준비해야하는 상황이지만, 그럼에도 아이콘 웹 폰트를 도입했을 때의 이점은 너무나 많습니다. 색상과 크기를 CSS에서 조정할 수 있으며, 그림자와 그라디언트 등의 다양한 CSS3 효과를 적용할 수도 있죠. 벡터이기 때문에 크기에 구애받지 않으면서 자연스럽게 레티나 디스플레이에도 대응합니다. 또한, 글꼴파일이기 때문에 리소스 로딩을 개선할 수 있는 등이 아이콘 웹 폰트를 사용하는 이유입니다. 최근에 인기몰이 중인 아이콘들을 정리해 보겠습니다.

Fico €19.00

프로토타입 개발에 애용하는 아이콘 웹 폰트입니다. jsbin.firejune.com에서도 요긴하게 이용 중인 녀석이지요. 구매자에게는 더 혜택이 있을 줄 알았는데 다를 게 없더군요(맘만 먹으면 퍼올 수 있어요;). 뭔가 기부한 느낌이 드는 유료 웹 폰트입니다. 총 52개의 아이콘으로 구성되었으며, 요소의 data 속성을 이용하여 마크 업하는 것으로 아이콘을 쉽게 표시할 수 있습니다.

<a href="#" class="icon" data-icon="p"></a>

<style>
  @font-face {
    font-family: fico;
    /* reference font files here */
    }

  .icon:before {
    content: attr(data-icon);
    font-family: fico;
    }
</style>
Fico.png

특수문자(Unicode Icon)를 아이콘으로 매핑하여 폰트가 로드되지 않는 상황에서도 그 의미를 전달할 수 있게 만들어졌으며, 문자의 크기와 기준선(Baseline)과도 잘 맞아떨어집니다. 폰트당 7~15KB로 부담 없는 용량이면서 아이콘의 디테일도 훌륭한 편이긴 합니다만, 아이콘의 가짓수가 그리 많지 않습니다.

Pixelated Free

10 x 10 사이즈의 픽셀 짜리 투명 gif 이미지들로 구성된 아이콘 셋입니다. 픽셀 수가 작다 보니 전부 합쳐봐야 용량이 고작 60바이트입니다. 총 36가지 아이콘이 어두고 밝은 색상으로 구분되었으며, PSD파일을 함께 제공합니다. 무료이고 상업적으로도 사용 가능합니다.

pixelated.png

이건 웹 폰트가 아닌 이미지 아이콘입니다. 왜 넣은 거지?

Entypo CC BY-SA 3.0

Pixelated와 같이 상업적으로 사용해도 무방한 무료 아이콘 셋입니다(CC BY-SA 3.0 요약: 저작자 표시). 총 124개의 벡터 아이콘으로 구성되어 있으며, EPS와 OpenType 폰트 포맷으로 제공됩니다. 용량은 19~29KB이며, SVG 포맷은 63KB입니다. 웹 폰트 서비스는 현재 준비 중이군요.

set-entypo1-e1339466491852.png

OpenType 폰트는 Font Squirrel에서 생성된 것으로 문자에 비해 너무 작은 크기로 할당되어 있어 문자와 동시에 사용하기에는 부적합니다.

Uicons $20

391 아이콘 세트, 소셜 네트워크 아이콘 포함, 상대적으로 저렴한 $20(이후 업데이트 공짜), 벡터 소스제공

set-uicons-e1339467899799.png

Iconic Free

Iconic은 오픈 소스로 공개된 171가지 아이콘을 취합한 것입니다. 무료이고요. 이 아이콘 폰트는 확장 가능하도록 설계된 것이 특징입니다. 그리고 Github에 공개하여 만인이 원하고 다 같이 만들어가는 것을 목표로 한다는군요. PNG, SVG, SWC, OFT/TTF/EOT 등 모든 형태의 포맷을 얻을 수 있으며, JSX와 Python 스크립트를 이용하여 원하는 아이콘 셋을 빌드할 수 있습니다. 폰트당 용량은 19~46KB이며, SVG 포맷은 81KB입니다.

Screen-Shot-2012-06-22-at-19.54.19.png

Unicode 아이콘과 16진수(Hexadecimal) 코드 중 하나를 선택하여 폰트로부터 아이콘을 호출하며, 선(Stroke)과 색이 채워진(Fill) 두가지 스타일로 구분되어 있습니다. 공개된 아이콘들이어서 그런지는 몰라도 쌀티가 물씬 풍깁니다.

Sanscons CC BY-SA 3.0

이것은 Bitcons의 CSS에서 사용하기 편한 버전입니다. 120개 아이콘이 10가지 색상과 16×16, 32×32 그리고 64×64 크기로 구성되었으며, Entypo와 같은 CC BY-SA 3.0 라이센스입니다.

Sanscons.jpg

이것 역시 이미지 아이콘...

Heydings Free

총 60개의 고품질 아이콘이 담긴 무료 웹 폰트입니다. CSS를 이용하여 표시할 수 있고, 사용자가 더 쉽게 사용할 수 있게 하려고 알파벳에 매핑했으며, 다양한 범위의 핵심 인터페이스를 커버할 수 있도록 설계되었습니다.

a:before, a:after {
     font-family:'Heydings';
}

a[href*="rss"]:before {
     color:#c03f29;
     content:'R';
}

a[href*="rss"]:after {
     vertical-align:super;
     font-size:16px;
     content:'e';
}
Heydings1.png

달랑 TTF(TrueType Font) 형식만 제공합니다.

Just Vector ?

이 아이콘 세트는 다양한 크기의 @font-face를 제공합니다. 문자를 그대로 아이콘화하기 때문에 별도의 트릭을 필요로 하지 않습니다. 소셜 아이콘 포함 총 62개로 구성되어 있습니다. 애플 로고도 있군요.

icon_font_20.jpg

다양한 크기에서 문자와의 훌륭한 조합을 보이지만, UI 요소에 사용할만한 아이콘이 없습니다.

Flexi Social Icons $29

Flexi는 myfonts.com에서 제공하는 유료 웹 폰트입니다. 총 68개의 소설 아이콘으로 구성되어 있으며 가격은 $29입니다.

flexi-social2.jpg

WriteSocial $10/$15

WriteSocial은 18가지 아이콘만으로 구성되어 있지만, 모서리가 둥근 사각형이나 원형에 음각으로 들어간 아이콘들을 옵션으로 제공합니다. $10를 지급하고 글꼴만 구입하거나 $10를 자선 단체에 기부하는 대신에 $15를 지급하도록 선택할 수 있습니다.

WriteSocial1.jpg

ikoo Free

ikoo는@font-face를 사용하지 않고 플래시를 이하여 HTML 페이지에 벡터 아이콘을 출력할 수 있도록 개발된 글꼴입니다. 또한, CSS에서 정의한 크기와 색상을 정의할 수 있습니다. 총 65개의 아이콘으로 구성되어 있으며 무료입니다.

<object id="flash_352362" type="application/x-shockwave-flash" style="width:570px; height:90px;" data="http://fontstruct.com/widget.swf">
  <param name="movie" value="http://fontstruct.com/widget.swf" />
  <param name="wmode" value="opaque" />
  <param name="bgcolor" value="#FFFFFF" />
  <param name="allowFullScreen" value="true" />
  <param name="flashvars" value="d=dD0wJmFtcDtwdD0xJmFtcDtpbT0wJmFtcDtsPTEmYW1wO3A9MCZhbXA7cHU9MCZhbXA7Zj0zNTIzNjI=" />
</object>

이거로 뭘 어쩌라는 거냐!

ikoo.jpg

InfoBits (Icons & Dingbats) $19/$29

$19에 Things 또는 Symbols 중 하나를 구입하거나 $29에 둘 다 구입할 수 있는 유료 아이콘 글꼴입니다.

infobits_sample2.gif

Pictos $49

Pictos는 웹 폰트 아이콘뿐만 아니라 다양한 벡터 아이콘을 판매합니다. Pictos 웹 폰트 역시 알파벳과 특수문자를 매핑하고 있으며, 총 94개로 구성되어 있습니다. MS나 EA, Adobe, 3M, Dropbox 등에서 Pictos의 매력적인 아이콘을 이용 중입니다. $49를 내고 웹 폰트 아이콘 셋을 내려받거나 년 $19/$49/$99 의 비용으로 Pictos 폰트 서버를 이용할 수 있습니다. 월 2만 5천 페이지뷰의 무료 플랜도 있으니 실험적으로 적용해 볼 수도 있겠습니다. 웹 폰트의 용량은 21~33KB이며, SVG 포맷은 67KB입니다.

Pictos.png

아이콘의 디테일은 상당히 우수하지만, 문자와 혼용해서 사용할 때 기준선과 일치하지 않고 아이콘 치수가 불규칙하여 들쭉날쭉해 보이는 문제가 있습니다. 무턱대고 구입했으면 큰일 날 뻔 했네요.

Font Awesome Free

이 웹 폰트는 Bootstrap 인터페이스에 사용되도록 설계된 무료 아이콘 세트입니다. 총 220개의 깔끔한 아이콘들로 구성되어 있으며, CSS에서 제어할 수 있고, v2.0부터는 IE7까지 지원합니다. 누구나 수정할 수 있도록 벡터 아이콘 소스도 함께 제공하네요. 용량은 41~67KB이며, SVG 포맷은 128KB입니다.

faicons2.png

UI 요소로 갖추어야 할 아이콘은 모두 갖추었다고 봐도 무방합니다. 아이콘의 디테일이나 문자와의 조합도 훌륭한 편이고요. 하지만 폰트당 용량이 다소 무겁고, 함께 제공되는 CSS를 이용하지 않을 때에는 16진수 코드만으로 아이콘을 호출합니다.

Comments

얼마 전 소개했던 PrismJS는 아직 HTML, CSS, JS만을 지원하고 있습니다. 지금 즈음 다른 언어를 지원하지 않을까 해서 살펴보니 역시나 있더군요. 제가 발견한 현재 확장 가능한 언어는 JAVA, PHP, Bash 그리고 모든 C 스타일 언어에 적용할 수 있는 Generic 등이 있습니다. 이 문법 강조 컴포넌트를 확장하려면 PrismJS를 포크한 각 개발자의 저장소에서 직접 가져와야 합니다. 몇몇 컴포넌트에서 사소한 문제를 발견했지만, 신속히 수정되고 있어 해결방법을 어렵지 않게 찾아낼 수 있었어요. 각 언어별 저장소 위치를 아래에 정리했습니다. PrismJS를 사용하는 분들은 참고하세요.

Bash - https://github.com/ktmud/prism/tree/gh-pages/components
JAVA - https://github.com/thomasklemm/prism/tree/gh-pages/components
Clojure - https://github.com/samflores/prism/tree/gh-pages/plugins
Vim - https://github.com/samflores/prism/tree/gh-pages/plugins
Ruby - https://github.com/samflores/prism/tree/gh-pages/plugins
PHP - https://github.com/Aaron3/prism/tree/php/components
Generic - https://github.com/Aaron3/prism/tree/generic/components
Okaidia(theme) - https://github.com/ocodia/prism/tree

언어를 추가하는 방법은 아주 간단합니다. 컴포넌트 또는 플러그인 폴더에 있는 해당언어의 소스를 prism.js에 추가해 주세요.

Comments

BananaBread는 얼마전 MDN(Mozilla Developer Network) 데모에 제출된 WebGL을 이용하여 구현한 FPS 게임입니다. C++과 OpenGL로 작성된 Cube 2: Sauerbraten 엔진을 Emscripten을 이용하여 자바스크립트와 WebGL로 컴파일하여 모던 브라우저에서 별도의 플러그인 설치없이 즐길 수 있도록 했습니다.

EmscriptenLLVM(C/C++)을 자바스크립트로 컴파일하는 프로젝트입니다. C++로 짜여진 Bullet 물리 엔진, TTS(Text-to-Speech) eSpeak 등의 놀라운 컴파일 데모들이 있습니다.

이 프로젝트의 주요 목표는 첫째로, 브라우저의 3D 성능 프로파일링 하는 것이고, 둘째로, 많은 사람들이 회의적으로 생각하는 자바스크립트와 WebGL을 이용한 게임 구축에 대한 증명하는 것이며, 마지막으로, 이 프로젝트에 사용된 모든 소스 코드(미술 자산 포함)를 공개하여 다른 사람들이 게임을 만드는 데 사용할 수 있게 하는 것입니다.

멋진 양반들이군요! 저는 맥용 크롬에서 테스트했는데 chrome://flags에서 기본으로 비활성화 되어 있는 "포인터 잠금" 항목을 활성화하고 브라우저를 재시작하여 성공적으로 실행할 수 있었습니다.

Comments