태그 보관물: HTML5

HTML5 Now Conference 후기

4월 26일 (목) HTML5 Now 컨퍼런스에 다녀왔습니다.
( 컨퍼런스 관련 링크는 요기입니다 http://w3labs.kr/html5now/agenda.html )

컨퍼런스에 다녀왔으면, 후기를 쓰는 게 인지상정, 기록을 남겨두고, 공유를 위해 후기를 남깁니다.

컨퍼런스 장에 도착···

아침에, 도착하자마자 등록 절차를 마치고 나니, 컨퍼런스가 정리된 책자를 줍니다. 컨퍼런스의 요약본이라 생각하심 됩니다. 책이 꽤 크고, 커서 그런지 안에 내용들이 공간의 여유가 있어 보입니다. 안에 설문지도 포함되어 있는데 컨퍼런스 종료후에 작성해서 제출하면 소정의 기념품을 주는데요. 기념품은 HTML5 로고가 새겨진 흰색 티셔츠입니다.

HTML5 Conference Img

컨퍼런스장에 들어왔습니다. 컨퍼런스 시작하기 전에 왔는데도 이미 1층은 만석에 가깝더군요. 다행히 2층에도 좌석이 마련되어 있어서 2층에 앉았습니다. 불편할까 싶었는데, 오히려 2층에서 프리젠테이션도 더 잘 보이고, 편했습니다. (다만 동시통역기가 2층에는 없었던 지라, 아쉬웠던···)

컨퍼런스를 주최한 미래웹기술연구소의 조만영 대표님 나오셔서, HTML 의 과거, 현재에 대해 얘기해 주셨습니다.

컨퍼런스장은 무지 컸습니다. 삼성역에서 하는 걸로만 얼핏 알고 있어서 왠지 COEX 일거라고 생각했는데 섬유센터 건물 이벤트 홀에서 진행됐습니다. 다만, 홀내에서는 WiFi 가 되지 않아서 못내 아쉬웠습니다. 사진 찍으면서 실시간 SNS 올리기를 할 수 없으니까요. (물론 3G 나, Egg 로 하면 되긴 하지만요 ^^;)

Kaazing CTO John Follows 의 HTML5 WebSocket 에 관련한 발표가 시작되었습니다. 웹에 생명을 불어넣어, Living Web 을 만드는, 결국 웹 생태계에서 웹소켓의 역할이 중요해 지지 않을 수 없다는 생각을 했습니다.

이때 우리나라의 높은 IE 점유율에 대해서도 언급을 했는데, 우리나라의 웹 환경을 알고 있다는 사실에 대해 놀랐습니다.ㅋㅋ

그리고 Adobe 의 Phone Gap 개발자 Tim Kim 이 나와서, Phone Gap 에 대한 발표를 했습니다. 사진은 찍지 못했지만, 흥미로웠습니다. https://build.phonegap.com/ 시연하는 부분도 흥미로웠는데, 웹소스를 묶어서 업로드하고 나면 알아서 컴파일되고, 아이폰에서 QR 코드를 찍어 바로 어플 설치 & 동작을 시켜버리더군요. App Store 에 올릴 필요도 없이 그냥 QR 코드만 찍어서요. 꽤 흥미로워서 이건 나중에 꼭 좀 찾아봐야겠다 싶은 생각이 들었습니다. 그리고 몇가지 사족을 더하자면, 라이브 코딩하는데 크롬 브라우저에 탭을 수십개씩 뛰어 놓은 걸 보고 놀랬습니다. 그리고 아이폰으로 시연할 때 reflection 이라는 맥용 앱을 사용했는데, 아이폰 화면을 맥에서 그대로 보여주는 어플인 듯 하더군요. 또 한가지 흥미로웠던 건 라이브코딩할 때 자바스크립트를 TextWrangler (맥용 무료 텍스트에디트) 에서 코딩하더군요. 뭔가  PhoneGap 개발자라면 TextMate 나, Emacs 쯤 사용할 것 같았던 저에게는 신선한 충격이었습니다. (센차 엔지니어는 TextMate 쓰는 걸로 알고 있는데 말이죠.)

점심 먹고, 이어진 MS 황리건 차장님의 IE10 발표도 꽤 도움이 되었습니다.
compat inspector (http://ie.microsoft.com/testdrive/html5/compatinspector/) 에 대해서 언급을 했는데 IE10 에서 대응여부를 쉽게 판단하고, 오류를 확인·디버깅 할 수 있 수 해주는 자바스크립트 라이브러리인데, 단순히 소스에 임포트 해두는 것만으로 알아서 오류나 경고를 띄어 주고 이녀석을 피들러에 추가해놓으면 소스에 넣어놓을 필요없이 간단하게 오류를 확인할 수 있어서 참 편리할 것 같습니다.ㅋ 게다가, IE10 에서 지원하고 있고, 아직 크롬에서는 지원하지 않고 있는 몇몇 HTML5 기능도 있다고 하면서 언급을 했는데 (잘 기억은 안나고..) 아무튼 MS 의 행보가 밉지만은 않습니다.

이원석 박사님은 webOS 관련해서 모질라의 부트투겍코 이야기 (웹기반 모바일폰), 그리고 추가 논의중인   HTML5 API 에 대해서도 언급을 했는데 역시 주목할만한 부분이 아니었나 싶습니다. 다만, 컨퍼런스장 밖에 나와 있어야 해서, 중간 부분 내용을 듣지 못해서 아쉽네요.

Bluega 라는 회사의 HTML5 기반 프레임워크에 대한 발표도 있었는데 기술력이 대단하단 생각을 했습니다. 왠지 앞으로 잘 나갈 것 같습니다. 흥미롭게 들었네요. 참고로 www.pieOS.com 에서 pieOS 라는 웹서비스도 체험해 볼 수 있습니다. 다음으로 스마트 노무. 사실 스마트 노무는 거의 듣지 못했고 후반부부터 겨우 들었고, 마지막 김종광 님의 Sencha Touch 2 발표가 컨퍼런스의 휘날레였습니다. 마지막 Sencha Touch 2 발표 재밌었고, 다시 한번 더 Sencha Touch 는 거들 뿐이란 생각을 했습니다. Sencha Touch 로 거들고 (베이스만 만들어 놓고) 나머지 컨텐츠 영역은 더 이쁜 UI 로 구현하기···.

간략하게 정리해 볼려고 했는데 잡설이 약간 길어진 것 같아서, 여기서 줄입니다.ㅎ

Advertisements
태그 지정됨

모질라에서 HTML5 로 개발한 고전게임틱한, MMORPG “BrowserQuest”

모질라에서 최근에 신기술로 무장한 2D MMORPG 가 나왔습니다. (물론 데모/실험작입니다만)

소개글 (영문): BrowserQuest – a massively multiplayer HTML5 (WebSocket + Canvas) game experiment (http://hacks.mozilla.org/2012/03/browserquest/)

일단, BrowserQuest 는 이름부터 DragonQuest 가 연상될 만큼, 과거의 고전 2D RPG 형태의 게임입니다. 그래픽도 과거 비디오 게임기 시절의 획을 그었던 그 느낌을 연상시킵니다.

대략 살펴보면, 일종의 데모용인데 멀티플레이어도 지원하고, 게임을 만들기 위해 들어간 기술들도 주목해볼 만 합니다.

첫번째로 WebSocket 을 이용해서 하나의 웹페이지에서 어떻게 다중 사용자를 위한 실시간 게임을 만들 수 있었는지를 보여주고 있습니다. Server Side 는 Node.Js 기반으로 소스 코드까지 공개하고 있습니다. 오오. 소스코드는 github 에 올라와 있습니다. (요기 링크)

두번째로 웹플랫폼 기반의 HTML5 기술이 들어가 있습니다.
2D 그래픽연출을 위한 HTML5 Canvas, 넓은 지도를 처리하기 위한 Web workers, 캐릭터 정보를 담기 위해 localStorage 를 사용하고, 다양한 기기에 대응하기 위한 CSS3 처리, 그리고 HTML5 audio 까지.

신기술의 집합입니다. 흠 좀 짱이네요.ㅋ

게다가, 소스까지 오픈하고 있으니, 관심있으신 분들이라면 한번쯤 파볼 만 하겠네요.
https://github.com/mozilla/BrowserQuest

해보시면 아시겠지만, 게임도 전혀 느리지 않아요 🙂
게임하기 : http://browserquest.mozilla.org/

태그 지정됨 , , ,

basket.js – LocalStorage 에 script 캐싱/로딩해주는 자바스크립트

HTML5 에서 제공하는 웹 저장 기술중 하나인 localStorage 를 사용하여, 자바스크립트를 캐싱하고, 로딩해주는 자바스크립트로 basket.js 라는 간단하지만 (개념 증명정도의) 흥미로운 자바스크립트 오픈소스.

먼저 localStorage 를 간단히 언급하자면, HTML5 에서 추가된 저장기술 중 하나인데 브라우저마다 차이는 있지만 대략 5MB ?? 정도 제공을 해 주고요.  구글크롬을 쓰신다면 CTRL+SHIFT+I (도구-개발자도구) 에서 Resources 란에 보면 Databases 와 Session Storage 사이에, Local Storage 항목이 존재합니다. 그 영역에 저장되는 거죠.

자바스크립트 콘솔에서 직접 localStorage 를 접근해 보면, 아래 처럼 작동하구요.
> localStorage.setItem(“Name”, “rkJun”)
> localStorage.getItem(“Name”)
“rkJun”

basket.js 는 LocalStorage 를 활용하여, jQuery 같은 자바스크립트 라이브러리를 통째로 LocalStorage 영역에 저장하고 호출해서 이용하도록 자바스크립트로 구현해 놨습니다. 물론, 당연히 성능의 극대화를 끌어올리기 위해서구요. (시작은 트위터 -영문- 에서…) basket.js 소개페이지에는 jQuery , backboneJs, underScoreJs 를 담아놨습니다.
사용법은 간단합니다.

basket.require(‘js파일경로’) : 호출 (해당 js파일이 있는지 체크해서 localStorage 에 있으면 무시, 없으면 ajax 방식으로 가져와 localStorage 에 넣습니다. )

basket.remove(‘js파일경로’) : localStorage 에 제거
basket.add(‘js파일경로’) : localStorage 에 추가

물론 체인방식도 제공하고요.
basket.require(‘jquery.js’).require(‘underscore.js’).require(‘backbone.js’);

basket.require(‘jquery.js’).wait().require(‘jquery.plugin.js’)  를 통해, jquery.js 호출이 끝나고 나서 다음을 실행하도록 wait() 를 걸 수도 있습니다. jQuery plugin 을 실행하기 전에 jQuery 가 먼저 호출이 돼 있어야 하니까요.

다만, 이  basket.js 에서 캐싱을 위해 선택한 localStorage 가 고민끝에 선택한 건 아니라고 언급해 두며,  WE NEED TO KILL OFF THE LOCALSTORAGE API 라는 글도 링크걸려 있구요. (대략 localStorage 는 형편없고 후지다. IndexedDB 만이 대안이다 라고···.)

암튼 basket.js 의 성능 실험 자체가 꽤 흥미로워서, 소개해 봤습니다.

태그 지정됨 , , ,

Bootstrap 2.0 에 대한 소개

1. 부트스트랩 (Bootstrap, from Twitter) 은 무엇인가?

부트스트랩  (http://twitter.github.com/bootstrap/) 은 트위터에 근무하는 두 명의 엔지니어 (Mark OttoJacob Thornton)가 개발한 가볍고 간단한 오픈소스기반 (아파치2.0라이센스) 의 HTML5, CSS3 UI 프레임워크입니다. HTML5, CSS3, Javascript 로 구성되어 있고, 가볍게 트위터 디자인 비슷한 UI 를 빠르게 구현해낼 수 있는 각종 콤포넌트들을 제공해 주고 있습니다.

2. 부트스트랩 다운로드

부트스트랩 홈페이지 (http://twitter.github.com/bootstrap/) 에서 릴리즈된 버전을 다운로드 할 수 있습니다. 현재 2.0 까지 릴리즈됐고, 부트스트랩 저장소 (http://github.com/twitter/bootstrap)를 살펴보면, 현재 2.0.1 버전으로 작업이 진행중이네요.

3. 내 홈페이지에 bootstrap 적용하기

HTML, CSS, Javascript 에 선수지식이 있으면 조예가 깊지 않아도, 부트스트랩을 가져다가 나만의 사이트를 만들 수 있습니다. 이미 샘플로 구성된 부트 스트랩 예제 화면을 참조하면 어렵지 않게 따라 만들 수 있습니다. 또한 부트스트랩 홈페이지에서 자세한 설명까지 설명되어 있으니, 조금만 시간을 내어 읽어보면 원하는 입맛대로 만들어 낼 수 있습니다. 기본적으로 CSS 에 대한 깊은 지식이 없어도 class 를 이용하는 것으로 충분히 원하는 의도대로 만들어 낼 수 있다는 점에서, 디자인에 약한 개발자에게는 나홀로 이쁜 사이트 만들기에 최적화된 아이템임에 틀림없습니다.

저도 간단하게, 샘플 가져다 만들어 봤습니다. (rkJun’s bootstrap) -_-;

4. 커스터마이징

어느정도까지는 내 입맛대로 바꿔서 쓸 수 있어야, 써볼 맛이 납니다. 부트스트랩 페이지에서도 이미 커스터마이즈 기능을 기본으로 제공해 주고 있습니다. 추가로 부츠왓치(http://bootswatch.com/) 사이트를 통해서도 간단하게 색상 변경을 통해 원하는 CSS 를 얻어낼 수도 있습니다. 랩부트스트랩 (http://wrapbootstrap.com/) 에서는 부트스트랩용 테마를 판매하고 있기도 합니다.

5. 웹 개발자의 놀이가 되어 줄 부트스트랩.

사이트의 틀을 부트스트랩이 잡아주니, 나머지는 웹 개발자 혼자서도 어떻게든, 그럭저럭 이쁜 사이트를 만들어 낼 수 있을 듯 합니다. 나머지 코딩은 개발자 몫인 거죠. 부트스트랩에 최적화된 JQuery Plugin 들도 꽤 흥미롭습니다.  특히나 캐러셀 (carousel : 화면을 회전하듯 부드럽게 전환시키는 방식.) 같은 기능들은 왠지 무조건 넣고 봐야 하는 거죠.^^;

6. 더 많은 정보들.

http://www.initializr.com/
15 초안에, HTML5 프로젝트를 시작할 수 있게 해준다는 이니셜라이져(initializr.com) 사이트인데, HTML5 템플릿을 생성해 줍니다. 최근 부트스트랩2 지원되고 있습니다.

http://bootswatch.com/
위에서 언급했던 부트스트랩 커스터마이징해주는 사이트입니다.

http://wrapbootstrap.com/
여기도 위 커스터마이징 얘기할 때 언급하기는 했는데, 부트스트랩용 테마를 판매하고 있습니다.

http://stylebootstrap.info
위에서는 언급하지 않았지만, Bootswatch 처럼 커스터마이징할 수 있는 곳입니다. 똑같은 디자인은 싫어. 라고 하신다면 스타일부트스트랩에서 나만의 디자인으로 간단하게 부트스트랩을 커스터마이징할 수 있습니다. 🙂

https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme#readme
부트스트랩은 반응형 디자인 (Responsive Design)으로 되어 있지만, 아예 모바일에 특화하길 원한다면 jQuery Mobile Bootstrap Theme 를 이용하는 방법도 있습니다.

7. 국내 부트스트랩 적용된 사이트들

http://dogfeet.github.com/
좋은 글들이 많이 올라오는 블로그입니다. Pro Git 한글 번역도 하셨고, 도움이 많이 되는 곳이네요. (아, 부트스트랩 얘기하다 갑자기 샛길로;;)

http://feed9.com/
역시 부트스트랩기반. 소스공개도 되어 있습니다. ( https://github.com/sungchi/feed9)

8. 잡담

디자인에 약한 웹 개발자들(특히나 서버사이드개발자) 에게  꽤 흥미로운 물건이다. 쉽고 재밌게 가져다 쓸 수 있는 것도 큰 장점이고. 암튼 이 bootstrap 의 기반에는 less (http://lesscss.org/) 기술도 사용되어지고 있는데 이게 또 꽤 흥미로운데, 이건 나중에 차차 다시 포스팅해야겠다.

태그 지정됨 , , , , ,

워드프레스를 만나다.

티스토리에 운영중인 블로그를 접고, 새롭게 워드프레스 (wp) 에서 블로깅을 시작하려 한다.

여러가지 이유가 있겠지만, 가장 큰 이유는 새로운 마음으로 시작해 보고 싶어서 가 가장 큰 것 같다. (딱히 티스토리 블로그 서비스에 불만이 있는 건 아니다.)

2004년부터 쭉 자바 개발자로 서버단 위주의 웹 개발을 해왔는데, 최근에는 프론트 페이지단, 클라이언트 (주로 javascript, HTML5) 웹 개발에 관심을 갖게 되어 , 주로 그 쪽 관련분야의 블로그를 운영해 보고 싶었다.

사실, 티스토리에서 놀 때는 여러가지 얘기들을 두서없이 하곤 했었다. 이번 워드프레스 블로그에는 아예 For Front-end Web Development 에 포커스를 두고 블로그를 운영해갈까 한다.

거창할 건 없다. 그냥 재미삼아 하는 거니까. 재미있을 것 같아서, 그래서 시작해 본다.

태그 지정됨 , , , , , ,