월별 글 목록: 2010년 7월월

GuruLinks : Javascript 로 SWF,PDF,SHP,NES 등 Binary 데이터 읽어서 사용하기

웹 어플리케이션들이 다양해 지면서 Javascript로 다양한 Binary 파일들을 읽는 시도들이 나오고 있습니다.

관련링크를 정리해 봅니다. 거의 소스가 공개되어있으므로 내부코드를 참고해보세요.

  • Javascript – Ajax Binary Reader
    현재 JavaScript 자체는 바이너리 데이타를 지원하지 않기 때문에 charCodeAt 함수와 & , | ,  << , >> 같은 비트연산자를 이용하여 바이너리 데이타를 읽어내야 합니다. 이 Binary Reader 라이브러리는 이 비트연산자를 이용한 Binary-Parser 라이브러리에 기초하여 , readChar / readString / readInt8 / readFloat / seek / getPosition 같은 함수를 제공합니다. 데모에서 GIF 파일을 읽어서 헤더에서 파일의 Width,Height 를 읽어오는걸 보여주고 있습니다. 어떤 용도로든 Javascript 내에서 Binary 파일을 읽어야 한다면 꼭 참고해야할 라이브러리입니다.
  • Flash Runtime with Javascript – Gordon
    몇달전에 큰 이슈를 불러일으켰던 Tobias Schneider 의  Gordon 은 Javascript 를 이용해서 Flash 파일 ( SWF ) 을 실행하는것을 보여주고 있습니다. SVG 를 이용해서 벡터 그래픽을 처리하며, 속도향상을 위해 Web Workers 를 이용해서 백그라운드에서 처리하기도 합니다.  Github에 오픈소스로 공개되어 있습니다. 내부의 stream.js 를 보면 앞의 Binary-Parser 와 비슷한 함수들을 작성해서 사용하는걸 알수 있으며, Javascript 만으로 ZIP 압축까지 풀어냅니다. Flash 를 HTML5/Javascript 로 변환하는 좀더 확장된 데모를 선보였던 Smokescreen 도 있습니다만, 아직 소스가 공개되지 않았습니다.
  • WPS : Postscript for the Web
    WPS 는 HTML5 Canvas 와 Javascript 를 이용한 Postscript 와 PDF 인터프리터입니다. PS 와 PDF 자체가 엄청 방대한 포맷이라 아직 일부분밖에 구현이 안되긴 했지만, 기대해볼만한 프로젝트 입니다. 이게 어느정도 실현되면 아무런 플러그인의 도움없이도 웹 브라우저에서 PDF 파일을 볼수 있게 될지도..
  • Shapefile-JS
    GIS 관련 작업을 하시는 분들에게 익숙한 Shape ( SHP ) 파일은 ESRI 사의 GIS 툴에서 사용되다가 공개된 포맷입니다. 주로  점 / 선 / 폴리곤 으로 되어있는 지리 데이타를 표시하기에 좋은데요. 이 SHP 파일을 Javascript 로 읽어서 HTML Canvas 에 그려주는 라이브러리입니다. 내부의 속성들은 요즘은 잊혀져 버린 dBase ( dbf )포맷으로 되어있는데 이걸 자바스크립트로 읽는 dbf.js 도 들어있습니다.
  • JSNES : A Javascript NES Emulator
    NES ( Nintent Entertainment System ) 은  우리에게 패미콤/현대 컴보이로 잘 알려진 닌텐도의 8비트 게임 콘솔입니다. 1983년 발매되어 6천만대 이상이 판매되었습니다. 이 NES 를 HTML5 의 Canvas 와 Javascript 를 이용하여 에뮬레이트 하는 라이브러리입니다. ROM 파일을 AJAX를 이용해서 동적으로 로드하여 실행합니다. 심지어 Sound 까지도 지원됩니다. 오픈소스로 GitHub에 공개되어있습니다. 데모페이지에는 보글보글,곤두라,동키콩,젤다의전설,슈퍼마리오 등 명작 게임들이 링크되어 있습니다. 한번 즐겨보세요. 크롬에서 가장 빠르게 동작됩니다.
  • JSC64 – Javascript Commodore Emulator
    앞의 NES 와 마찬가지로 게임기인 Commodore64 를 에뮬레이트 합니다. NES 에 비해서는 게임이 좀 단순합니다 ^^
  • jsGB – A Gameboy emulator in Javascript
    닌텐도의 Gameboy 를 에뮬레이트 합니다. 제작자인 Imran Nazar 가 어떻게 만들었는지를 블로그에서 자세히 설명하고 있습니다. Z80 CPU 를 어떻게 에뮬레이트 했는지 설명해주고 있는데 Z80 단어만 들어도 향수가 느껴지는군요.

GuruLinks 는 제가 제 트위터 ( @xguru ) 에서 소개했던 링크들을 모아서 소개하는 포스트입니다.

제 트위터를 팔로우 하시면 더 다양한정보를 빠르게 접하실수 있습니다 🙂

하루에 한가지 서비스 공동구매 사이트 모음 : 국내 Groupon 클론서비스 한눈에 보기

하루에 한가지 상품만을 특별한 가격에 판매하는 원어데이형 쇼핑몰의 원조였던 미국 woot.com 의 인기에 힘입어, 국내에도 많은 원어데이형 쇼핑몰들이 생겨났습니다. 2년반 전에 이 원어데이 쇼핑몰들을 정리한 포스트를 한번 적으면서 하루에 한가지 쇼핑몰 한눈에 보기 페이지 – http://oneday.xguru.net 을 만들었고, 아직도 저를 비롯해서 ^^ 많은 분들이 이용하고 계십니다.

근래 들어서 다시 한번 유행이 되고있는 것은 Groupon 때문에 유명해진 하루에 한가지 서비스 공동구매 방식입니다. 기존의 원어데이형 쇼핑몰들이 주로 물건들에 집중되고 있던것을 탈피하여, 음식점/미용실/공연 등 다양한 오프라인 서비스에 촛점을 맞추고 있고, 오프라인 매장의 특성상 지역별로 나눠지기때문에 지역기반 공동구매 서비스라고도 하죠. 어차피 오프라인 매장에서 이용을 해야하므로, 온라인에서는 쿠폰을 판매하는 방식이라고 보면 됩니다 ( 그래서 Groupon 의 이름이 Group + Coupon 인것이겠죠 ) . 최저가로 상품을 구매할 수 있던 원어데이 하고는 약간 다르게, 거의 50% 이상의 할인율을 보여주므로 사용자를 유혹하게 되구요. 최저 구매자 수를 넘어야만 이런 초대박 할인 거래가 성립되기 때문에 먼저 참여한 사람들이 다시 입소문을 내게하는 방식으로 홍보효과도 누릴수 있습니다.

국내에서도 다양한 Groupon 클론 서비스들이 생겨나고 있어서 한번 정리해봤습니다.

이 외에도 몇개 쇼핑몰들이 준비를 하고 있는듯 합니다. 오픈하는 대로 추가해 놓겠습니다. 추가를 원하시는 몰담당자 분들은 oneday @ xguru.net 으로 메일주세요.


그리고, 역시 매일 각 사이트를 돌아다니기는 힘들고 해서 예전에 만든 지름도우미 처럼 공동구매 지름도우미 라는 페이지를 하나 만들었습니다.

공동구매 지름도우미의 주소는 http://group.zirum.net 입니다.

아래와 같이 각 티몬/데일리픽/위폰/키위/쇼킹온/딜즈온/슈거딜/파티윈/체리데이 서비스의 오늘 상품들을 한눈에 보실수 있습니다.

공동구매 지름도우미 - Groupon 클론 서비스들 한눈에보기

국내 사이트 들이 더 생기는 대로 계속 추가해 놓겠습니다.

공동구매 지름도우미 바로가기 → http://group.zirum.net

RSS 도 제공됩니다 http://feeds.feedburner.com/zirum/group 입니다.

GuruLinks : Web User Interface 관련 링크모음

Web 용 User Interface/User Experience 에 대한 링크들 모음입니다. GuruLinks제 트위터를 통해 공유했던 링크들을 재소개 하는 포스팅입니다.

  • 43 Essential Controls for Web Applications
    사용하기 편한 웹 어플리케이션은 깔끔한 UI 컨트롤을 사용하여 유저가 편하게 서비스를 쓸수있도록 해줍니다. Windows 나 Mac OSX 나 자신들만의 기본 UI Control 셋을 가지고 있지만, 많은 어플리케이션들은 자신만의 컨트롤들을 만들어 더욱 훌륭한 어플리케이션들을 만들어 내고 있죠. Web Application 에서도 더욱 멋진 UX (User eXperience)를 제공하기 위해 최근에 Web App 에서 많이 사용되는 43개의 컨트롤들을 정리한 링크입니다.
    디자인 회의시 출력해서 사용할수 있는 Index Card 용 PDF 버전도 제공됩니다.
  • User-Centered Design
    웹 사이트 개발단계에서 유저중심으로 디자인을 하는 방법론입니다. Step-By-Step 가이드 맵도 제공합니다.
    가장 좋은건 웹사이트 개발 Kick-Off Meeting 시에 물어봐야 하는 질문들을 정리한 문서입니다. ( MS Word Doc 160KB )
  • Designing for Social Traction
    소셜 웹사이트 개발/디자인시에 만나게 되는 3가지 주요 문제점. “가입시키기 ( Sign Up ) / 첫번째 사용 ( First-time Use ) / 계속 사용시키기 ( Ongoing Engagement ) ” 를 어떻게 해결하는지를 설명하는 120장 짜리 슬라이드입니다. 웹 기획/개발자 께서는 꼭 한번 읽어보시기 바랍니다.


  • Designing Social Interfaces
    소셜 인터페이스를 디자인하는 5가지 단계, 5개의 원칙,5개의 안티패턴을 보여줍니다. 설명이 없어서 좀 아쉬운 슬라이드이긴 한데, 슬라이드 작성자가 eBook 으로 판매하고 있습니다.


  • Designing Web Interfaces
    동명의 책에 기초한 Web Interface 디자인시 참고할만한 원칙/패턴들을 보여주는 슬라이드 입니다. 327장이나 됩니다.


HTML5 on Mobile : 왜 HTML5 가 모바일에서 중요한가

HTML5 를 이용한 많은 Web Application(웹 어플리케이션, 웹 앱)들 이 만들어 지고 있지만, 데스크탑 환경에선 아직 이슈가 남아있습니다. 현재 브라우저 점유율에서 가장 큰 위치를 차지하고 있는 Internet Explorer ( 6.0 ~ 8.0 ) 가 아직 HTML5 지원이 미진하기 때문이죠. 이 때문에 HTML5 웹 어플리케이션들은 Firefox , Chrome , Safari 같은 타 브라우저를 통해서만 확인이 가능합니다. 대다수의 국내 비 IT 유저들이 IE 를 사용하고 있기에 수많은 HTML5 데모 사이트들은 IT 유저들만 공감하는 사이트들로 보여지고 있습니다.

하지만 모바일 환경으로 오면 얘기가 달라집니다. 현재 모바일 웹 트래픽의 대부분을 차지하고 있는 것이 iPhone, Android 이고 이 두개의 플랫폼이 HTML5 를 잘 지원하고 있는 WebKit 기반의 브라우저를 사용하기 때문입니다.

Mobile OS Web Traffic Share US

왜 HTML5 가 모바일에서 중요한가 ?

현재 스마트폰 시장은 서로 다른 OS를 가진 기기들이 다투고 있습니다. 애플의 iOS , 구글의 안드로이드, 블랙베리 OS , 노키아 심비안 & Maemo, Windows Mobile 과 연말에 출시될 Windows Phone 7 까지.. 데스크탑 OS 환경과는 사뭇 다르죠. 각각의 OS 에 맞는 어플리케이션 ( Native App , 네이티브 앱 ) 을 작성하기 위해서는 전혀 다른 언어/플랫폼들을 이해해야 합니다. 대표적으로 애플 iOS 의 경우 Objective-C 와 CocoaTouch 를 , 안드로이드는 Java 와 안드로이드 프레임워크들을 배워야 하죠.

모바일 기반의 서비스를 제공해야는 회사들은 선택을 하거나, 순위를 두어야 합니다. 모든 플랫폼용 네이티브 앱을 만들기에는 투자비용이 너무 크기 때문이죠. 아이폰이 국내 출시된 후 많은 업체들이 아이폰용 앱을 앞다투어 출시했습니다만, 올해 들어서는 다양한 안드로이드 폰들이 출시되면서 안드로이드용 앱까지 한번 더 개발을 진행하고 있습니다. 자원이 충분한 회사라면 각각의 플랫폼용으로 만드는게 가능하겠지만, 그렇지 못한 스타트업 들이나, 중소기업들에서는 참 어려운 선택일수 밖에 없습니다. 국내의 경우 핸드폰 시장 점유율 1위인 SKT 가 안드로이드에만 집중하고 있으니 아이폰이 아무리 이슈라고 해도 아이폰/안드로이드는 동시에 지원해야 하는 상황인것이죠.

구글의 부사장인 Vic Gundotra 는 작년에 한 인터뷰에서 다음과 같은 말을 했습니다.

Even Google was not rich enough to support all of the different mobile platforms from Apple’s AppStore to those of the BlackBerry, Windows Mobile, Android and the many variations of the Nokia platform

– Vic Gundotra, Google Engineering VP

인터넷의 거물 구글 조차도 모든 모바일 플랫폼용으로 앱을 만들어 지원하기에는 돈이 없다! 라는 것이죠. 물론 이건 HTML5 에 집중하겠다고한 구글의 입장을 대변한, 약간 정치적인 발언이긴 합니다만 이 말은 많은 인터넷 업체들에게도 적용되는 것이라고 볼수 있습니다. 즉, 각각의 앱스토어에 대응하기보다는 HTML5 를 이용한 모바일 웹앱으로 동시에 여러가지 디바이스를 지원하는 것이 미래적인 접근방법이라는 것이죠.

2010년 6월 24일에 공지된 행정안전부 고시 제 2010-40호” 의 내용을 한번 보실까요 ?

「전자정부서비스 호환성 준수지침」개정 고시

  1. 개정이유 
    모바일 전자정부 서비스 제공 시 국민들의 보편적 접근성 제고 등을 위하여 국가기관, 지방자치단체, 공공기관이 준수해야 할 사항을 추가로 규정
  2. 추진경위
    <생략>
  3. 주요 개정내용
    • 국민들이 다양한 모바일 기기를 사용할 수 있도록 ‘모바일 앱(App)’ 방식보다 ‘모바일 웹(Web)‘ 방식을 표준으로 권고
      – 단, ‘모바일 웹’ 방식이 기술적으로 어렵거나, 속도 및 비용이 현저하게 차이나는 경우는 ‘모바일 앱’ 방식도 허용
    • 모바일 웹 방식 서비스 개발을 위한 기술 표준지침 마련
      • 최소 3종 이상의 웹 브라우저에서 동등한 서비스 제공
      • 국제표준화기구에서 제공하는 표준 사용 의무화
      • 단말정보저장소(DDR), 미디어쿼리(Media Queries) 및 기타기술을 활용하여, 다양한 사용자 단말에 적합하도록 콘텐츠 제공 노력

국민의 세금으로 만들어지는 전자정부서비스야 말로 다양한 스마트폰 사용자들이 모두 혜택받을 수 있도록 모바일 웹 방식을 권장하는게 올바른 방향일것 같습니다.

HTML5 는 Web App을 만들어 다양한 네이티브 플랫폼들을 동시에 지원하기 위한 최적의 솔루션입니다.

Web App vs. Native App

Web App ( 웹 앱 ) 이라고 하면, 웹 기술을 이용하여 만들어진 어플리케이션을 말합니다. 즉, 컨텐츠 리딩을 위해 사용되던 단방향성이던 웹사이트와 달리 사용자와의 인터랙션을 통하여 데스크탑에서의 Application 같은 사용성을 주는 앱을 의미하며, 위젯이라는 단어도 종종 사용되는데 웹 앱은 이 위젯을 포함한 좀 더 넓은 범위로 보는게 맞습니다.

HTML5 를 이용해서 만들어진 Web App 과 iPhone / Android 환경에서의 Native App 을 비교해 보겠습니다.

Web App Native App

모바일 디바이스에 최적화된 웹사이트

모바일 디바이스 전용 앱

HTML , CSS , Javascript

Objective-C ( iPhone ) , Java ( Android )

기존에 사용하던 웹 개발환경

XCode ( iPhone ) , Eclipse ( Android )

웹 표준 컨트롤 , iUI , JQTouch ..

Cocoa Touch (iPhone), UI Framework (Android)

꼭 Mac 이 필요하지는 않음

Mac 이 필요 ( iPhone )

Android 는 멀티플랫폼 ( Win , Mac , Linux )

App 개발자 등록 필요없음 1)

개발자등록 년 $99 (iPhone) or $35 (Android)

제한적인 디바이스 사용 – 카메라/마이크.. 2)

디바이스의 모든 기능을 활용

자체 결제시스템 구축필요 또는 광고

App Store/Market를 통한 판매/수익 & 광고

서버에서 바로바로 업데이트가능

업그레이드 할 때 마다 검수 ( iPhone )

Android / Blackberry등으로도 바로 변환가능

실행속도가 빠르다

1)     PhoneGap 등 Hybrid App Framework 사용하여 앱 만든후 등록시 필요함

2)     Phonegap , QuickConnect 를 통하여 카메라/연락처 정보등 사용가능 – 따로 진행중인 W3C DAP , OMTP BONDI , JIL 등의 스펙으로 디바이스 접근가능(차후)

Mobile Web App 의 종류

Web App 이라고 해서 기존의 Web Site 에 비해 특별한 것은 아니지만, 모바일 관점, 특히 HTML5 기술을 기반으로 하는  Web App 들의 경우 다음과 같이 나눠 볼수 있습니다.

  1. Online Web Application
    Online Web Appilcation with HTML5

    • 기존의 모바일 웹페이지를 포함한 웹 앱을 의미한다.
    • HTML5, CSS3 등을 통하여 모바일 에서의 UI / UX 를 향상한다.
    • GeoLocation API 를 이용하여 위치가 고정되지 않는 모바일의 장점을 활용한다.
    • 주로 포털이나 컨텐츠를 리딩하는 형태의 앱이 많다.
  2. Offline Enabled Web Application
    Offline Enabled Web Appilcation with HTML5

    • Application Cache , LocalStorage , Web SQL Database 를 활용하여 오프라인에서도 사용이 가능한 웹 앱을 의미한다.
    • 처음 접속시에 주요데이타를 캐쉬하여 재 접속시에 네트웍 트래픽을 최소화한다.
    • 오프라인상태에서 행한 동작들에 대해서 온라인시 서버의 데이터와 싱크한다.
    • 이메일 어플리케이션과 같은 컨텐츠 리딩 & 작성 앱에 적절하다.
      * 모바일 Gmail 사이트는 이미 완벽한 오프라인 메일 앱으로 동작한다.
  3. Offline Web Application
    Offline Web Appilcation with HTML5

    • 한번 서버에 접속해서 다운받으면 계속 오프라인으로 사용 가능한 앱.
    • Application Cache 와 Web SQL Database 를 활용
    • 서버와의 동기화를 필요로 하지 않는 게임, 유틸리티, EBook
  4. Hybrid Web Application
    Hybrid Web Application with HTML5

    • Native App 과 Web App을 합친 형태의 앱.
    • 앱 스토어를 통한 다운로드 가능.
    • 모바일 디바이스로 다운로드후에는 앱 속성에 따라 서버와의 AJAX 통신도 가능
    • Native 수준의 다양한 앱 작성가능

모바일 웹 앱이 이렇게 4가지로 명확하게 분리되는 것은 아니지만, 이를 통해 모바일에서 어떤 종류의 웹 앱이 만들어 질 수 있는지를 알 수 있습니다.

HTML5 Key Elements for Mobile

모바일에서 HTML5 가 특별히 다른 태그를 활용하는 것은 아닙니다. 다만 몇몇 Javascript API 와 Video/Audio/Canvas 태그등 몇 개가 모바일 환경에서 아주 유용하게 쓰일수 있습니다.

  • Offline 지원 : LocalStorage , Web Database , App Cache
  • 미디어 처리 : Video , Audio , Canvas
  • 입력 지원 : Advanced Forms
  • 위치 정보 : GeoLocation ( 연계표준 )

Offline 지원의 경우 항상 인터넷에 연결되어 있는 데스크탑과 달리 모바일 환경은 꼭 3G 와 같은 네트웍에 항시 연결되어있지 않은 WIFI 전용 기기 ( iPod Touch , iPad ) 들도 있으며, 3G 환경이라 할지라도 네트웍 트래픽을 최소화 하는 것이 아주 중요합니다.

또한 HTML5 의 중요 스펙중 몇 가지는 아직 주요 브라우저에서도 지원되지 않습니다. ( iOS 4 , Android  ) 이건 현재 HTML5 가 Draft 상태이기도 하고, 아직은 HTML5 를 이용한 Web App 의 초기단계이기 때문입니다. 점점 사용자가 많아지면 추가될 것이라고 생각됩니다.

  • WebSocket
  • FileReader
  • IndexedDB
  • Web Workers

현재로선 모바일에서의 HTML5 사용은 주로 Offline 지원을 통한 Local App 으로서의 동작 및 트래픽 최적화, Geo Location 을 통한 위치정보 연동이 가장 많이 쓰이고 있습니다.

HTML5 on Mobile

모바일에서의 HTML5 사용은 점점 확대될 것입니다. Native App 을 대체하지는 못하겠지만, Web App은 멀티 플랫폼에 대응할수 있는 하나의 중요한 대안입니다. 향후에 출시되는 모든 Mobile 기기들은 HTML5 대응이 필수가 될 것이고, 각 웹사이트들은 모바일기기에 맞게 화면만 작게만든 초기의 모바일 페이지에서 벗어나, 더욱 App 스러운 형태로 바뀌게 될 것입니다.

지금까지 모바일 환경에서 약간 동떨어져 있던 웹 개발자들도 모바일 시장의 한 주류가 될것이므로, 계속적으로 공부하고 공유하면서 기술을 발전시켜야 합니다.  이건 단지 클라이언트단의 모바일 환경만이 아니라, 서버측도 모바일 & 실시간 웹에 맞게 발전해야 할것입니다.

제가 블로그를 개편하면서 블로그에 붙인 소제목이 “Beyond Web – HTML5 and Mobile” 입니다. 개인적으로 이 블로그에서 앞으로 Mobile 과 HTML5 분야에 대해서 다양하게 글을 쓰겠다는 저의 작은 결심 입니다 🙂

Slide & Book

이 글은 7월2일날 열린 HTML5 오픈 컨퍼런스 에서 제가 발표했던 내용을 간략히 정리한 것이구요. 발표자료는 아래 공개합니다. 아직 Slideshare 가 HTML5 형태의 임베딩은 지원하지 않아서, 스마트폰으로 보시는 분들은 모바일용으로 보기

프리젠테이션에는 좀더 많은 내용과 각 Web App 들에 대한 예제사이트들도 포함되어 있으니, 한번 각 사이트들도 들어가셔서 보시면 잘 이해가 되실것 같습니다. 이 자료보다 조금 더 심화된 내용은 먼저 공개한 HTML5 로 아이폰 앱 만들기 를 참고해주세요.

또한, 책으로 제작해서 배포된 “HTML5 실전 가이드” 의 PDF 파일도 공개되었습니다. 다운받으셔서 출력해서 보시면 되구요. 전 이중에 5장에 HTML5 를 이용한 모바일 앱 만들기 실전예제 부분을 담당했고, 간단한 HTML5 웹앱 예제코드 2개를 담았습니다. 참고하시고 궁금한점은 블로그나 트위터로 질문주세요.