HTML5 API 정리 프로젝트 1

그렇다. 앞서 포스트에서 설명했듯이 나도 몰랐던 API가 우후죽순 생겼다.

하지만 앞으로도 계속 제안되고, 표준으로 등록되는 API가 많아질 것이다.
왜냐면 아직 표준 확정이 아니고 W3C에서도 Working Draft 상태거던!
이지랄을 하니 HTML5 과 HTML5.1 분리하자고 W3C에서 난리 브루스를 친다.

좋다. 그렇다면 현재 제안되어 Editor’s Draft 라도 나온 API를 알아보도록 한다.

물론 이미 알려져서 많은 이들이 알고 있는 API도 많지만, 나조차도 몰랐던 API가 속속 들이대기 시작할 것이다.

  • Fullscreen API 많이들 알거다. HTML5 게임이나 프리젠테이션을 위한 전체 화면.
  • Page Visibility API 말이 거창하지 그냥 다들 알고있는 모든 태그에 hidden 속성이다. style.display=’none’ 이냐 아니냐.
    하지만 더 특징은 hidden 속성 변경에 따른 이벤트를 제공한다는 점이다.
  • getUserMedia API 이것도 많이 알려져 있듯이 카메라에서 나오는 데이터를 HTML 미디어 표현 요소 <canvas>나 <video> 로 전달할 수 있는 API다.
  • Battery API 이건 순전히 모바일을 위한 API다. 뭐.. 제공해봐야 딸랑 배터리 얼마나 남음이겠지만. 아.. 노트북도 있지.
  • Link prefetching 별거 없고 그냥 미리 불러올 URL만 지정해서 해당 페이지로 이동할때 로딩 없이 바로 이동하는 목적이 있다.
  • WebMIDI 순수 웹으로 미디를 재생한다. 참고로 추억의 게임 포트리스2 블루가 음악이 MIDI 인데, 이걸 돌릴 수 있다. 근데 원본 가지고 있는 이가 얼마나 될런지 모르겠다. 근데 한국은 이런거 관심 없나보다. 추후 내가 포스팅 올리겠다.
  • Vibrate API 말그대로 진동 API로, 스마트폰의 진동 기능과 연동하는 API다. 현재 안드로이드 크롬 베타와 안드로이드 불여우가 지원하고 있다고 한다. 이제 순수웹으로 딜… 아니다.
  • History API 브라우저의 뒤로가기 앞으로가기 뿐만이 아니라 URL과 해시를 갖고 놀 수 있는 API로 뭐 많이들 알려져 있으니 패스.
  • Drag n Drop 요소 드래그앤 드롭. 물론 스크립트로 만든 드래그앤 드롭에 비하면 좀 엉성하지만 모든 환경에 지원하려면 이렇게 해야지. 많이 알려진 기능이다.
  • Geolocation 걍 GPS잖아. 알잖아. 내가 굳이 설명해줘야되?
  • Offline 인터넷 안되도 문서는 봐야겠지? 가지고 댕기면서 뭔가는 해야겠지? 그럼 이거야.
  • Messaging 다른 도메인인라고 스크립트 막는다? 응 그건 맞아. 하지만 이제 간단하게 서로를 전달이라도 할 수 있다는점.
  • Web Workers 자바나 닷넷의 쓰레드 역할. 백그라운드 실행을 담당할 API다. 구버전 IE야 지원을 안하지 그래도 웹오피스에서 이게 무거운 처리에 1등공신이다. 이제 무거운 스크립트를 직접 실행할 필요 없다. 이녀석에게 맡기면 브라우저가 얼지 않고 계속 즐길 수 있다.
  • Storage 단순한 저장 기능이다. 그 이상 그 이하도 아니다. 세팅값 저장에 이만한 거 없고 IE 8부터 지원한다. 당장 채용해도 된다. 근데 이벤트도 있는데 이건 안타깝게도 IE 지원은 안한다.
  • Indexed database 순수 웹상의 DB다. 당연히 도메인 단위로 쓸 수 있다. 하지만 NoSQL이다. 이거 이전에 SQL DB로 지정된 Web SQL Database 도 있긴 하지만 접근성이 떨어지고 기술적인 한계로 표준에서 배재된지 오래다. 이것도 많이 알려져 있으니 알아서 찾아봐.
  • Web sockets 존나게 많이 알려져있고 순수 웹으로 만드는 채팅 등 실시간 소켓통신의 선두주자 웹소켓이다. 구글링해라. 내손아프다. 기쁜소식 하나 알려줄까? 이녀석의 인기가 하늘을 치솟다보니 많은 참여와 수정으로 이제 거의 표준 확정이 되가고 있다.
  • Server-Sent Events7 푸시 알림의 HTML5 버전이라고 보면 된다. 한국에서는 웹소켓 때문에 얘기 묻혔지만 무시하지 마라. 구현이 쉽고 polyfill이 쉽게 제공되기 때문에 웹 사이트상의 푸시 알림이나, 실시간 정보 알리미에 이만한 API가 없다.
  • Microdata 시맨틱 정보 수집에 특화된 API다. 검색 잘되라고. 광고에 관심있다면 이것을 눈여겨보는것도 좋은 선택이다.
  • File API 어쩌다 보니 표준이 됐다. 좀 늦게나마 표준에 포함되서 다행이지. 파일을 말 그대로 다루는 API다. 물론 사용자 컴퓨터에 있는 파일을 맘대로 다룰 수 없고, 사용자가 파일을 요청해야만 다룰 수 있다. 그래봤자 예제는 업로드 뿐.
  • Web Notifications 알리미 API다. 현재 크롬에서 재대로 지원하고 있다. 당연히 사용자 승인이 요구되지만, 이 API가 있다면 CRM, 그룹웨어 같은 엔터프라이즈급 고객/자원관리 어플리케이션에 레드불이 날개를 달아준다.
수집하기 왜이렇게 힘드냐.. W3C 한국지사에 멜좀 보내야겠다. 정리하기 빡세네..

<

p>

composite / 2014년 2월 6일 / 미분류 / 0 Comments

composite / 2014년 1월 27일 / 미분류 / 0 Comments

편의점 군대버거 비교

한 방송에 군대 홍보인지 뭔지 하여튼 무슨 방송과 군대리아 썰이 유행이 되면서 군대리아 상품이 올랐고,

거기에 질세라 편의점에서 각기 다른 군대버거를 출시했다.

세븐일레븐같은 경우 군대 컨셉을 가진 버거가 가장 일찍 나왔으며, 이번 진짜사나이란 프로 방송 이후 군대리아 찾는 사람이 늘면서 군대리아 컨셉의 버거를 개발, 출시한 듯 하다.

  1. CU – 추억의맛 진짜사나이버거 오리지날

가격 – ?

구성 – 야채샐러드, 패티, 잼

총평 – 쨈맛이 강하고 밸런스가 붕괴된 맛. CU는 일반 햄버거가 나을 듯 하다.

별점 – 1 / 5

  1. 세븐일레븐 – 이수근 이등병버거 군대리아

가격 – 1600원

구성 – 야채샐러드, 패티, 잼

총평 – 야채가 패티의 밸런스를 유지하면서 식감을 자극하지만 무언가 빠진 느낌이 든다.

별점 – 2.5 / 5

  1. GS25 – 진짜사나이 군대리아

가격 – 1600원

구성 – 가공샐러드, 패티, 잼, 치즈

총평 – 조금이나마 군대리아를 재현한 듯한 구성과 맛. 야채샐러드는 없지만 충분한 커버.

별점 – 3.5 / 5

  1. 미니스톱은 출시했는지 모름.

내가 왜 이걸 먹어봤나? 단순히 군대리아 향수 때문은 아니다. 일단 나는 편의점을 가끔 들르는데, 거기서 새로운 게 나오면 한번 먹어보고 보는 편이다. 물론 혼자서 못먹거나 술, 담배 등은 빼고. 담배는 근데 먹는게 아니잖아. 어자피 담배 피지도 않지만.

순서는 내가 먹어본 순서다. 나온 순서가 아니다. 나온 순으로 치자면 2->1->3 이다.

주의 : 편의점 즉석식품은 첨가물이 많이 들어있기 때문에 밥처럼 자주 먹는 습관은 건강에 문제를 일으킬 수 있으므로 땡길때 가끔 먹는 편이 좋다.

(나처럼 과거에 매일 아침마다 편의점음식 주기적으로 먹다가 살찌지 말라고.)

composite / 2014년 1월 24일 / 미분류 / 0 Comments

cutoff prevention

5년 이상된 internet meme 지만 지금도 많이 쓰이는데 소개한 곳이 없어서 내가 소개한다.

우리말로 말그대로 “짤림방지” 다. 짤방이라 해도 된다. 비슷한 개념이니까.

우리나라의 짤방은 디씨에 갤러리 게시판 특성상 사진이나 그림 안올리면 짤리기 때문에 글 안짤리려고 별 의미없는 그림 올린게 유래됐다.

그에 반해 미국은 유튜브로 몇 초밖에 안되는 병맛영상을 만들어 보여주는데, 너무 짧으면 아예 안틀어져서 보여주기 어려워 쓸데없는 그림이나 영상으로 몇초 더 연장시키려고 한 게 유래라고 한다.

유래와 사용은 비슷하지만 목적은 틀리다. 하지만 그래도 “짤리지 않으려고” 애를 쓴 거라는건 공통적인 사실이다.

이 유행은 Internet meme 중 하나이다. 5년전에 Team Fortress 란 게임이 유행하고 나서 그들의 캐릭터로 웃기는 영상에서 이 cutoff prevention 을 많이 써서 많이 유명해졌다. 물론 그밖에 짧고 병맛 영상에도 많이 쓴다.

composite / 2014년 1월 24일 / 미분류 / 0 Comments

비즈니스를 위한 node-webkit 데모를 지금 공개한다!

비즈니스에 node-webkit 를 관심가져야 하는 이유를 글 올렸었다.

하지만 아직도 망설이거나 개소리라고 하는 인간들 있을거다. 내가 다 안다.

그래서 준비했다. 나는 결과물을 통해 주장을 증명하고, 근거를 제시한다.

더이상 긴 말 안하겠다. 프로젝트 가서 설치법 및 실행법 보고 체험하라.

https://github.com/composite/NodePlatform

XPlatform 같은 비즈니스 CRUD를 순수 웹과 node-webkit 로 구현했다.

끝.

윈도우 사용자를 내가 열심히 배려했다. 단일실행파일 배포한다.

http://www.solidfiles.com/d/c5df88cb09/

다운받고 실행만 하면 된다. 소스? 프로젝트 사이트 가라니까 좀.

다른 운영체제? 미안하지만 회사컴에 맥이나 리눅스가 없어서.

composite / 2014년 1월 15일 / 미분류 / 2 Comments

임베디드 JSON 기반 Document DB – EJDB

아마 모바일에서 아는 사람은 쓸 것이다. 모바일에 딱좋은 저장소가 딱히 없는데, 이녀석이 딱좋거든. JSON 짱짱맨.

http://ejdb.org/

MongoDB 같은 임베디드 DB를 지향한다고 한다. 그래서 그런지 BSON 표준을 사용하고 있다.

Tokyo Cabinet 소스를 사용해서 만들었다.

도쿄캐비넷이 뭐냐고? 고전적인 NoSQL DB이다. 한국에서는 잠잠했다가 NoSQL 이 뜨면서 쁑 튀어나온 게 한국이 왜 DB를 SQL에만 의존하는지 보여주는 대목 되겠다. 뭐.. 리눅스에서 빌드해서 써야 하는 귀차니즘도 한몫 했지만.

됐고. 이걸 왜 소개하냐? 모바일이야 뭐 쓴사람은 안다. 우왕ㅋ굳ㅋ.

그렇다면 이걸 당신의 앱에 접목한다면 어떨까? 당! 신! 앱!

EJDB는 아래 언어에 바인딩 되어 있다.

나온 순서대로 기록하니 해당되는 언어에 쓰면 되겠다.

원래 C언어이기 때문에 유의해서 쓰도록 한다.

커뮤니티 참여이지만 공식 패키지이기 때문에 믿고 쓰도록 하자.

EJDB나 토쿄 캐비넷이 수동으로 빌드해야 한다고 윈도우 유저들이여 서운해 마라. 윈도우 프리빌드 패키지가 있다.

참고로 node.js 모듈이 기본이기 때문에 node.js 개발자는 걍 써!

닷넷과 자바 개발자의 경우 메모리 걱정으로 임시 저장소나 캐시 등이 걱정된다면 이 솔루션을 고려해 보는것도 좋다.

근데 닷넷은 4 이상이 요구된다. 자바는 1.6 이상이다. 닷넷개발자들 ASP.NET MVC 3 이상이 아니면 “아아 울고싶어라…”

composite / 2014년 1월 13일 / 미분류 / 0 Comments

데스크탑 앱의 홀릭, Brackets-shell 빌드하기 자료 소개.

뭐.. 내컴이 윈도우라 지랄같을 뿐이다.

일단 Brackets-shell 로 데스크탑 앱 개발하기 위해 고군분투를 할 것이다.

어도비에서 직접 지원을 하고 있고, 크로미움 기반이며, 소스가 MIT이기 때문이다.

Node-webkit 는 네이티브 플러그인 지원 측면에서 차별화된 양상을 보이지만,

bracket-shell 은 기존 node 네이티브 플러그인을 갖다 쓰거나 당신의 씨뿔뿔로 만든 라이브러리를 같이 쳐넣을 수 있기 때문에 더 주목을 받지 않은가 싶다.

이 링크를 참고하면 내가 왜 이리 씨뿔뿔부렸는지 알 것이다. 물론 영문이다.

http://clintberry.com/2013/native-desktop-javascript/

https://github.com/joelrbrandt/brackets-simple-node (이건 예제)

게다가 기본이 크롬리스 윈도우(테두리 없다고)이고, API가 안정적으로 제공되고 있는 측면이 힘을 발휘한 듯 하다.

어찌됐던 간에. Brackets-shell 을 빌드하여 커스텀 앱을 만드는 여러가지 팁이 있으니 소개해 보겠다.

나는 윈도우 기준으로 빌드를 할 거기 때문이고, 그리고 그렇게 할 것이기에, 윈도우 빌드방법 및 후기를 내가 직접 겪어봐서 올리도록 하겠다.

지금 나온 팁들은 죄다 맥 기준이다. 어도비는 맥에서 짱먹었으니.

http://clintberry.com/2013/html5-desktop-apps-with-brackets-shell/ (영문)

http://steamboatlabs.com/blog/brackets-native-desktop-apps-with-html-js-css/ (영문)

http://uiandwe.tistory.com/891 (한글 용자 등장, 물론 맥.)

어느 프레임워크를 선택할 지는 당신 마음이지만, 응용 프로그램의 다양성과 웹의 생산성 둘을 합친 비즈니스 앱의 강점은 내 블로그에 잘 설명되 있으니 보도록.

http://blog.hazard.kr/117

데스크탑 앱 만들기. 조또 없다.

근데 시발 Windows SDK가 안깔려…

composite / 2014년 1월 10일 / 미분류 / 0 Comments

요즘 웹디자인 대세는 점점 되돌아가는 방향으로 가는 것인가?

아마 앞으로 나간 디자인은 글로시 디자인(Glossy Design)인 것 같다. 확실히 미래지향적으로 느껴지는 디자인이었으니.

PNG의 보급과 CSS 의 입지가 커짐으로써 같이 주목받고 유행했던 디자인이었다. 2012년까지는.

그리고 2013년 플랫 디자인으로 유행을 했는데..

이제는 디자인 패턴이 되돌아보자는 차원인지.. 모르겠다.

물론 이게 나쁜것만은 아니다. 디자이너는 원래 유행을 좇는 종특을 가지고 있다고 하면 디자이너가 나 죽여 팰 것이고.

유행을 만들던 따르던 그건 당신 마음이지만 일단 유행은 그렇다고.

그리고 2013년 후반기부터 플랫 디자인에 힘입어 새로운 패턴이 등장했으니 바로 카드 디자인이다.

님들 페북이나 튓터 많이 하잖아. 글 하나하나마다 영역이 분리돼있지? 그게 카드 디자인이라고. 납득 ㅇㅇ?

어쨌든, 왜 카드 디자인이 2014년 디자인을 유행할 아이템인 것인가?

간단하다. 나 따라해봐.

  1. 니 명함을 본다.
  2. 니 명함을 스마트폰에다 갖다대본다
  3. 올ㅋ

그렇다. 카드 디자인은 모바일 장치에도 대응할 수 있고, 글 하나하나 영역이 뚜렷하기 때문에 어렵지 않게 볼 수 있다는 장점이 있다.

플랫 디자인은 영역이 “공백의 미” 라면, 카드 디자인은 “영역의 미” 인 것이다.

이 카드 디자인의 첫 상용화의 신호탄은 페이스북인가? 아니다. 의외로 새로운 서비스가 신호탄을 때렸다. 핀터레스트다. 사진 기반 소셜. 여자들이 모르면 간첩인 서비스다. (몰랐다구여? 죄송해여.)

페이스북도 사실 카드 디자인을 반영한 것 맞지만, 글로시도, 플랫도 아닌, 뭔가 리트로하고 심플하며 조금이나마 입체감 있는 디자인 패턴이 주류였다. 물론 지금은 IOS 7 신호탄 때릴때 플랫한 카드 디자인을 채용했다. 좀 됐지만.

구글도 이미 이를 따라갔고, 구글쁠라쓰 가면 카드 디자인이 담긴 메시지가 당신을 반길 것이다.

하지만 역시 디자이너의 글이 내 글보다 더 와닿을 것이다. 아래 글을 참고하라.

http://insideintercom.io/why-cards-are-the-future-of-the-web/ (원문)

http://radiofun.tumblr.com/post/60843934125/why-cards-are-the-future-of-the-web (한글번역)

비디자이너가 카드 디자인이 왜 유행인지 한번 내가 납득시켜주겠다.

쿠폰 봐봐. 존나 눈에 확들어오지? 그거야.

카드 디자인의 핵심을 다시한번 짚어보고 끝내겠다.

  • 정보 전달의 집중성.
  • 다양한 활용 능력.
  • 작지만 많은 것을 담을 수 있는 수용력.

ㅇㅋ?

이해 못하겠으면 내가 링크한데 가보랑께?

그럼 끝. 개발자가 존나 나불대봐야 디자이너와 개발자는 논란의 시발점이지. 물론 나처럼 안싸우는 사이도 있긴 하지만.

이렇게 기존에 실생활에 쓰던 디자인이 웹 디자인의 중심이 되고 있다.

그래서 나는 되돌아가는 방향으로 가고 있나 의심을 해봤다.

근데.. 되돌아간다기보다는 되짚어본다가 맞는 것 같다.

카드라고 해서 옛디자인으로 돌아가는 건 아니다. 디자인은 계속 진보되고 있는 사실은 확실하다. 베충이도 이해시켜줄까? 이게 팩트라고.

기존의 것에서 활용하는 것으로 시작된 웹 디자인. 플랫디자인부터 시작해서 카드 디자인,

이제 다음 디자인은 어디서 발견할 것인가? 이목을 집중시킬 만 하다.

진짜 끝.

composite / 2014년 1월 10일 / 미분류 / 0 Comments

composite / 2014년 1월 9일 / 미분류 / 0 Comments