월간 보관물: 4월 2012

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 로 구현하기···.

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

태그 지정됨

센차 SASS 오류 compass compile sencha error

최근에 Sencha Touch 2.0 을 이용한 web app 개발을 진행하고 있다.
그러다 개인적으로는 제일 취약한 부분중 하나인 CSS 를 봐야 하는 상황에 놓였는데, 그러다 보니, SASS 를 보게 되었다.

scss 파일을 css 파일로 컴파일 & 압축 생성해 주는데, 간단하게 compass compile 을 통해 (config.rb 파일을 불러들여서) 실행이 된다.

그런데 자꾸 에러가 발생해서

import not found or unreadable: sencha-touch/default/all.

구글링 했더니

stackoverflow 에서 해답 (http://stackoverflow.com/questions/9052900/compass-compile-sencha-error) 을 얻을 수 있었다. 문제는 아주 단순한 곳에 있었다ㅋ

기본적으로 compass compile 을 실행하기 위해 scss 와 같은 경로에 있는 config.rb 파일을 로딩하게 되어 있는데, 여기에 기본적으로 적혀있는 센차터치 프레임워크의 경로 위치가 잘못 되어 있었기 때문이다. (환경설정은 디폴트 세팅이 되어 있으나, 내가 만든 앱의 경로는 센차터치 프레임워크가 위치한 곳과 차이가 있으니까)

정리하면, 경로만 맞춰주면 끝난다.

# Load the sencha-touch framework automatically.
load File.join(dir, ‘..’, ‘..’, ‘..’, ‘..’, ‘sencha-touch-2.0.0-gpl’, ‘resources’, ‘themes’)

loadFile 해올 때, 현재 scss 가 위치한 경로를 기준으로 센차터치의 위치를 잡아주면 된다. 각자 놓아둔 앱 경로의 위치에 따라 조금씩 다르게 수정하면 될 것 같다.

별것 아닌 것 같은데, 꽤 삽질했다 -_-; 다행히 기존에 누군가의 삽질이 있었기에 도움을 받았다. ^^ 감사~!

stackoverflow : sass – compass compile sencha error (링크는 여기로)

태그 지정됨 , , ,

모질라에서 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/

태그 지정됨 , , ,