Rev. 2.73

역시나, 기업 요구사항은 파일 교환보다는 문서 관리 쪽으로 많이 치우쳐져 있더군요. 그래서 문서관련 기능을 강화하기 위해 매시업할 수 있는 서비스들을 찾아보던 중 Scribd라는 서비스를 알게 되었습니다. 이 서비스는 업로드한 문서를 HTML5(또는 플래시)에서 출력할 수 있도록 컨버전해주는 서비스였습니다. 변환된 문서는 원본 문서와 다른 점을 찾아보기 어려울 정도로 품질이 좋더군요. 그리고 자신들이 가진 기술을 공유에 목적을 두고 마음껏 사용해 주기를 바라는 착한 회사였습니다.

Scribd의 API는 문서를 웹페이지에 임베드하기 위한 자바스크립트 API와 문서를 등록하거나 메타데이터를 조회하거나 검색 등을 할 수 있는 플랫폼 API로 나뉩니다. 플랫폼 API에는 Ruby, Java, PHP, Python 등의 라이브러리가 있었지만 아쉽게도 Node.JS용 라이브러리만 쏙 빠져있어서 래핑 모듈을 만들고 배포합니다. 아래는 GitHub에 공개한 scribd 모듈의 API 문서입니다.

Scribd Platform API binding for Node.JS

Installing:

$ npm install scribd

Usage:

var Scribd = require('scribd');

var key = "ENTER-YOUR-API-KEY-HERE"
  , secret = "ENTER-YOUR-API-SECRET-HERE"; 

var scribd = new Scribd(key, secret);

// or (>= 0.1.5)

var scribd = new Scribd({
    apikey: key
  , secret: secret
});


/**
 * docs.upload
 */

scribd.upload(function(err, res) {
  console.log("\n scribd.upload", err, res);
}, "./my.docx", "doc", "private");

// or (>= 0.1.5)

scribd.upload({
    file: "./my.docx"
  , docType: "doc"
  , access: "private"
}, function(err, res) {
  console.log("\n scribd.upload", err, res);
});

Methods:

/**
 * Docs Method
 */

// docs.upload (callback, file, [docType], [access], [revId])
scribd.upload(function(err, res) {
  console.log('\n scribd.upload', err, res);
}, './document.path');

// docs.uploadFromUrl (callback, url, [docType], [access], [revId])
scribd.uploadFromUrl(function(err, res) {
  console.log('\n scribd.uploadFromUrl', err, res);
}, 'url');

// docs.getList (callback)
scribd.getList(function(err, res) {
  console.log('\n scribd.getList', err, res);
});

// docs.getConversionStatus (callback, docId)
scribd.getConversionStatus(function(err, res) {
  console.log('\n scribd.getConversionStatus', err, res);
}, 'docId');

// docs.getSettings (callback, docId)
scribd.getSettings(function(err, res) {
  console.log('\n scribd.getSettings', err, res);
}, 'docId');

// docs.changeSettings (callback, docId, [title], [description], [access], [license], [showAds], [tags])
scribd.changeSettings(function(err, res) {
  console.log('\n scribd.changeSettings', err, res);
}, 'docId', 'title');

// docs.getDownloadUrl (callback, docId)
scribd.getDownloadUrl(function(err, res) {
  console.log('\n scribd.getDownloadUrl', err, res);
}, 'docId');

// docs.getStats (callback, docId)
scribd.getStats(function(err, res) {
  console.log('\n scribd.getStats', err, res);
}, 'docId');

// docs.delete (callback, docId)
scribd.delete(function(err, res) {
  console.log('\n scribd.remove', err, res);
}, 'docId');

// docs.search (callback, query, [numResults], [numStart], [scope])
scribd.search(function(err, res) {
  console.log('\n scribd.search', err, res);
}, 'Node.JS', 1);

// docs.getCategories (callback, docId)
scribd.getCategories(function(err, res) {
  console.log('\n scribd.getCategories', err, res);
}, 'docId');

// docs.featured (callback, [limit], [offset], [scope])
scribd.featured(function(err, res) {
  console.log('\n scribd.featured', err, res);
});

// docs.browse (callback, [limit], [offset], [categoryId], [sort])
scribd.browse(function(err, res) {
  console.log('\n scribd.browse', err, res);
});

// docs.uploadThumb (callback, file, docId)
scribd.uploadThumb(function(err, res) {
  console.log('\n scribd.uploadThumb', err, res);
}, 'thumbnail.path', 'docId');


/**
 * Thumbnail Method
 */

// thumbnail.get (callback, docId, [width], [height])
scribd.getThumbnail(function(err, res) {
  console.log('\n scribd.getThumbnail', err, res);
}, 'docId', 256);


/**
 * User Method
 */

// user.login (callback, username, password)
scribd.login(function(err, res) {
  console.log('\n scribd.login', err, res);
}, 'username', 'password');

// user.signup (callback, username, password, email, [name])
scribd.signup(function(err, res) {
  console.log('\n scribd.signup', err, res);
}, 'username', 'password', 'email', 'name');

// user.getAutoSigninUrl (callback, [nextUrl])
scribd.getAutoSigninUrl(function(err, res) {
  console.log('\n scribd.getAutoSigninUrl', err, res);
}, '/');

Have fun!

License

MIT <3

Comments

입사 후 처음으로 수행한 웹 프로젝트가 1년만에 슬슬 마무리 단계에 접어들고 있습니다. 개발자라고는 저 혼자인 상황에서 막연하게 시작했던 프로젝트입니다. 백-엔드 개발자 뽑느라고 4개월 허송세월 보내고, 중간에 다른 프로젝트 한다고 서너달 접어두기도 했었습니다. 이제 그 모습을 여기에 공개해 보겠습니다.

프로젝트 코드명은 벨록스(Velox)입니다. 도메인이 준비되는 바람에 제품명으로 굳혀지고 있는 듯한 모습입니다. 벨록스는 드랍박스, 구글 드라이브와 유사한 온라인 파일 관리 도구이며 기업에 사용하기에 적당한 구조를 가진 솔루션으로 개발되었습니다. 본격적으로 개발에 착수 할 때 즈음 몇몇 중견 기업의 파일 관리 실태를 사전조사 했었는데, 내부인과 외부인이 보안성 파일을 교환하는데 문제가 가장 심각한 것으로 드러났습니다. 그리고 우리에게 매우 친숙한 폴더 하이어라키 파일 시스템은 사실, 사람보다는 기계에 더 친숙한 것입니다. 나중에 파일들이 많아지게 되면 자신의 파일이 어디에 쳐박혀 있는지도 모르고, 이력도 없고, 심지어 복사본인지 원본인지도 모르는 경우가 상당수여서 뭔가 다른 관리 방법이 필요하다는 생각이 들었습니다. 뭐, 기본적인 보안이야 당연한 거니까 생략할께요.

attachment
공유 탭과 계정 헤더, 영역별 도구바, 태그 사이드바 그리고 파일 브라우저 영역으로 구분된 레이아웃

벨록스의 주요기능이 담긴 스크린샷과 설명입니다. 기능을 줄줄이 읇자면 너무 지루해지므로 요지만 간략하게 말씀드리겠습니다. 폴더를 대체하기 위해 강력한 태그 필터링 기능을 넣자고 박박 우겨서 허락도 안 받고 만들어버렸습니다. 벨록스의 태그 필터는 시스템이 스스로 분석하여 자동으로 할당해 주는 자동 태그와 사용자들이 입력한 사용자 태그로 구분됩니다. 한 폴더에 파일의 종류에 상관없이 몽창 때려넣고 태그 필터와 검색 필터를 AND 연산으로 데이터 출력 범위를 좁히는 것이지요. 아이포토 처럼요. 휴지통 태그는 조금 특수한 것으로 삭제된 파일들에 입혀집니다. 이 태그가 활성화되면, 지워진 녀석들만 나타나게 되고, 도구는 복구, 완전 삭제, 전체 삭제로 변경됩니다. 기존에 할당했던 태그들과 조합할 수도 있습니다. 일반적인 OS의 있는 휴지통을 구현한 것으로 이해하면 되겠습니다. 사용자 태그는 블로그나 SNS에서처럼 태그를 엉뚱하게 사용하는 일이 없도록 신중하게 입력하여 간결하게 유지할 것을 강요합니다. 한일/할일 목록을 작성하는 느낌의 인터페이스를 만들고 싶었지만 잘 안된거 같습니다. 추가적으로, 사용자의 불필요한 행동을 차단하기 위해 수신된 데이터에서 더이상 범위를 좁힐수 있는 태그가 발견되지 않으면 태그 필터 버튼이 비활성됩니다. 여러 사람을 대상으로 시연을 하는동안 다수의 분이 불편할 것 같다고 토로 했는데 일단 사용해 보실것을 권장한 뒤로 별다른 크레임은 없는 상태이긴 합니다만, 어이가 없어서 그런건지... 도무지 알길이 없네요. 이 부분에 대한 사용성은 개인적으로도 가장 검증하고 싶은 부분입니다. 만약 테스트에 참여하신다면 의견 꼭 부탁드릴께요.

SocketIO를 이용한 알림을 지원합니다. 파일이 추가되거나 갱신되는 경우 파란색 카운터가 아이콘 대신 나타나며, 노트와 같은 소통성 데이터가 추가되거나 갱신되는 경우 주황색 카운터가 나타납니다. 다른 사람에게 초대된 경우 느닷없이 새로운 탭이 추가되며, 현재 접속중인 공유 탭의 사용자 수를 하단에 표시합니다. 이번 주 중에 다른 사람이 포커스 중인 아이템을 비주얼라이즈하는 기능이 추가될 거 같습니다. SocketIO는 이미 여러 번 다뤄봤기 때문에 처음부터 신중하게 적용했는데, 크로스-도메인 제약이 없기 때문에 SocketIO를 완전히 독립된 서버로 운영하고 이 서버가 죽거나 브라우저가 WebSocket을 지원하지 않아도 기능상에는 아무런 지장이 없게 하는 것에 원칙을 두었습니다.

오래 머물러 봐야 채 10분 내외인 사이트에 채팅 기능은 굳이 필요 없다고 판단했습니다. 그래도 명세기 웹 서비스인데 커뮤니케이션 피처는 있어야겠다 싶어서 노트 페이퍼(Note Paper)라 명명한 종이쪽지를 통해 필요한 소통만 이루어지도록 했습니다. 마치 포스트-잇을 작성하는 느낌으로 메모를 덕지덕지 화면에 붙여 놓는 것이죠. 이 쪽지는 파일들과 상호작용하도록 설계되었습니다. 파일과의 연결 없이는 작성할 수 없으며, 우측 상단의 링크 아이콘을 클릭하면 이미 화면에 있는 경우 파일 위치로 스크롤하고 포커스, 없는 경우 나타날 때까지 탐색합니다. 이것은 마치 이메일에 파일을 첨부하는 행위로 이해하셔도 무방하겠습니다. 이렇게 작성된 쪽지는 해당 공유 탭에 참여한 모든 사용자에게 나타나게 되며, 닫기 버튼을 눌러야 화면에서 사라져요. 이 행위를 시스템은 사용자가 내용을 확인한 것으로 간주하는 것입니다. 한 번 닫으면 다시 는 열 수 없으니 신중하게 처리해야 합니다. 다시 조회하는 기능이 없는 대신 환경설정에서 쪽지 수신에 대한 이메일 알림으로 대체할 수 있도록 했습니다.

attachment
초창기 사용자 인터페이스 목업

UI가 꾀나 불친절하다는 것을 잘 알고 있습니다. 대부분의 기업용 솔루션은 사전 학습을 요구하는 과정이 있기 때문에 레이블들로 떡칠이 되어 난잡해진 레이아웃을 제공하는 것이 그저 마음에 안들었던 거죠. 조금 미안한 마음이 들어서 주요 기능들에는 예쁜 툴팁울 넣어 두었습니다. 모든 상호작용은 멀티플로 작동하고 행동에 따른 패널과 다이얼로그를 통해 이루어집니다. 복수로 타겟팅한 다음 선택 가능한 액션이 활성화 되는 일반적인 애플리케이션 인터랙션과 마찬가지에요.

모바일 웹도 지원합니다. 모바일용 페이지를 별도로 만들어 제공하는 것은 설계 자체를 잘못한 것이라는 생각이 들어서 스타일 시트와 약간의 조건문만으로 모바일 웹 지원을 해결했습니다. 조금 이상한 것이 모바일에서 올리는 이미지 파일은 이름이 모두 image.jpg로 넘어오기 때문에 업로드전에 파일명을 유니크하게 변경해 주는 작업이 필요했습니다. 그리고 모바일 사파리에는 File API 자체에 버그가 있어서 첫 사진만 중복해서 등록됩니다.(미친 모바일 사파리는 post도 캐시를 하면서 발생한 문제였습니다. Timestamp로 해결) 로드맵에는 전용 데스크탑 앱과 모바일 앱 개발이 포함되어 있으니 최소한의 수준으로 마무리한 거죠. 아직은 iOS만 지원하고 안드로이드 머신까지는 아니에요. 프론트-엔드 얘기는 이즘에서 접고, 다른 쪽 얘기를 해 볼까요.

백-엔드는 100% NodeJS로 구축되었습니다. 협업에 용이하도록 GitHub에 둥지를 틀고 프레임웍으로는 ExpressJS기반의 RailwayJS를 사용했으며, 데이터베이스는 Mongo이고, MongooseJS 모듈을 사용했습니다. 그리고 스토리지는 자주 언급한 바 있는 OpenStack Object Storage(Swift)입니다. AD, LDP과의 연동이 용이하도록 Keystone인증 체계를 사용했고요.

원래 .NET하던 친구인 성열군에게 NodeJS가 죽여준다고 꼬드겨서 우여곡절 끝에 우리 화사 공식 백-엔드 개발자로 영입하게 되었습니다. 요즘엔 자바스크립트가 구리다는 소리를 늘 입에 달고 다니면서도, 처리해야 할 일이 생기면 똑부러지게 처리해 주는 멋진 동료입니다. (지금은 분명 속았다는 느낌일 거에요.) 최근 결혼 준비 때문에 바쁜 와중에도 큰 도움을 줘서 얼마나 고마운지 몰라요. 결혼 축하해!

이 양반과 NodeJS로 삽질하면서 수나잘을 떠들고도 모자랄 정도의 많은 이슈들을 처리했습니다. 특히, File API를 이용한 멀티플 업로드를 구현하는 과정에서 노드로 바이너리(Binary)를 다루는 일은 다시는 하고 싶지 않은 코딩 지옥이었어요. 당시에는 자바스크립트로 만든 웹서버를 구축한다니 어처구니가 없고 너무 못 미더워서 만드는 중간에 다른 플랫폼으로 컨버젼해야 한다는 생각이 끊이질 않았었습니다. 기능 구현에 목말라 예외처리를 너무 등한시 한데서 문제가 발생한 경우가 많기도 했지만, 이미 다뤄 보신 분 들이라면 끝없는 콜백, 지랄 같은 문법, 메모리 릭과 같은 풀리지 않는 문제 등을 경험해 보셨을 것입니다. 지금은 Production 모드에서 Redis를 이용해 서버가 죽어도 세션(Session)이 살아있게 처리하고, CPU 수만큼 클러스터링해서 돌려놓으니 한결 안정화된 느낌입니다.

Splunk.png

또한, 우리 윤진군은 바이너리에 연약한 노드를 강하게 만들어줄 NginX 환경을 재구성하여 외부에서 https로 들어오는 것을 노드에게 http로 프락시 패스해주고, 정적인 파일들을 모두 NginX에서 서빙하여 노드의 성능을 끌어올리는데 크게 한몫했습니다. 10개 프로세스가 각 1024개 스레드로 작동한데요. 그 무거운 서버들을 Cafe2x 데이터 센터까지 들고가서 손수 설치하는 걸 도와주지 못해 미안한 마음도 들었지만... 아무튼, Velox라는 네이밍도 이 친구 아이디어였어요. 별도로 설치해 준 Splunk라는 로그 분석도구를 이용해서 위 화면에서 보는 것처럼 노드에서 크래쉬가 발생한 코드를 기간단위로 가시화해서 모니터링하여 분석할 수 있었고 예상치 못한 오류를 대폭 수정할 수 있었습니다. 2012년 11월 24일에 엄청 죽었군요; 간단한 사용팁 하나를 드리자면 위처럼 컬러코드가 로그에 포함되지 않게 하려면 forever를 실행할 때 --plain 옵션을 사용하세요. 노드로 서비스 돌리시는 분들에게 강력추천합니다. 로그 크기 500MB까지 공짜임!

언제나 그렇듯이 글이 두서가 없네요. 아침 일찍 포항으로 날아가야 하는 관계로 나중에 다시 가다듬도록 하겠습니다. 급하게 마무리하자면, 노드로 밀어 붙인 건 잘한 일이라 생각하고 었어요. 언젠가 꼭 배워야겠다고 생각만 10년 했던 리눅스를 다루는 데에도 조금 익숙해지고, 맥이랑도 친해지고, 서버를 운영하는 기술도 등 넘어 배우고, 노드의 장단점도 확실히 몸으로 깨우쳤으니까요. 무엇보다도 최근 5개월 스팟하는 동안 그리 넉넉한 개발환경이 아님에도 열심히 달려준 동료가 있었기에 가능한 일이었습니다. 재미있는 프로젝트에 참여할 기회를 주신 대표님, 버그 리포팅와 신선한 아이디어를 아낌없이 지원해 주신 팀장님, 내부 테스트에 참여해 주신 사운드파이프코리아 여러분, 그리고 쳐 싸우면서 같이 고생한 성열, 윤진군에게 이 자리를 빌려 고마운 마음을 전합니다.

아, 참! 이 서비스의 도메인은 https://thevelox.com 입니다. 서버 수용치 만큼만 테스트 회원가입을 받을 예정이니 테스트 의향이 있으신 분들은 서둘러 가입해 주시면 감사하겠습니다. 1등에서 3등까지는 이쁜이 사진 3,000여장 공유해 드림! 테스트 기간은 미정이고, 계정당 100GB씩 할당해 드리며, 다른 사람이 공유한 탭에 가입하면 소비량은 합산되고 파일당 용량 제한은 4GB입니다. 그리고 파일을 외부인과 전송하는 기능은 아직 마무리 되지 않아서 접근제한이 풀려있는 상태이니 착오 없으시길 바라고요. 어디까지나 테스트이니만큼 등록한 파일이 갑자기 사라져도 전 몰라요.(헤헤... 농담입니다.) 그리고 또, 디자인도 아직 가다듬어 지지 않았습니다. 디자인에 대한 의견은 무효입니다. 우리 회사엔 디자이너가 없어요! 다 어디서 퍼온거에요.

외주로 진행 가능한 실력있는 디자이너님 추천해주세요! - @firejune

Comments

업무가 슬슬 재미있어지고 있습니다. 회사에 그래픽 디자이너가 없다 보니 맘대로 사이트를 작살내고 있는 와중에 하나 둘 드러나기 시작하는 시각적 불만족을 잠재울 아이콘 폰트를 찾고 있던 참이었습니다. 구하면 얻는다더니, 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