#device api

[insidehtml5]

The market for casual mobile gaming is keeping pace with the growing market for smartphones. There are Web tools that can help web developers like ...

[cbalisky]

Accounting for Environmental Variables

One of the more inspiring, recent trends in technology, at least to me, is enabling devices to adapt to changing conditions. Some easy examples are things like a screen backlight dimming while in a dark room or brightening while in a brighter environment, or a large application or OS update telling you to plug in your device before continuing as there is not enough battery life to complete the installation. Software and hardware both being designed with the idea that the user's circumstances might change, or that the user may want to use the device in a different manner (from the desk to the couch, for instance). All these things working together to create a seamlessly adapting and thus consistent user experience.

For the most part, however, these kind of technologies have been limited to a device's OS. Interactions on the web have gone only as far as smoother animation, better video, etc. This is not to limit the impact of web apps. The web has seen great strides in interactivity. But the user's physical environment has generally been unknown territory to a web page. Enter Device APIs. The idea is simple: gather some info from the device about its status, and rework accordingly. One status that would be sent is battery life. If a user's phone has high battery life, send high quality pictures, give the full experience. However, if the user's device is low on battery life, send smaller pictures, limit background images and animations, etc. Let the user continue using the site and enjoying the content without killing the battery. This is but a toy example. Using multiple functions of the Device API, a website would be able to respond to ever changing conditions on the fly. The API includes listeners for the battery life, the charging status, network speed, metered connection flags, ambient light sensor data, proximity sensor data, and more. Used in conjunction with each other, listeners for these changes could drastically improve the mobile web experience. This is a change that a user doesn't have to buy a new, faster device to appreciate. Check out the source link for the full article.

[papa-broccoli]

Webapps Futurecon 2011 후기

지난 2월 24일 삼성동 섬유센터에서 열린 Webapps Futurecon 2011 행사에 다녀왔습니다. 2011년 들어 처음 찾은 세미나였고, HTML5과 Webapps에 대한 화두로 진행되는 만큼 관련 정보를 어느 정도 기대하고 참석했습니다.

세미나는 이원석 박사님의 '2011년 HTML5 기술현황 및 전망', FOBIKR의 박종일 부장님의 'Device API의 현재와 미래', web2mobile의 김민태 팀장님의 'HTML5 N-Screen UI 대응 전략', NHN의 김양원 선임님의 '2011년 자바스크립트 개발자 전성시대', KTH의 권정혁 팀장님의 '모바일과 웹개발자가 2011년 주목해야하는 기술들'등 총 다섯 세션으로 이루어졌습니다.

발표자분들의 준비가 많아서였겠지만 발표는 모두 인상적이었고, 내용도 부실하다라는 느낌은 없었습니다. 권정혁 팀장님의 발표는 두어차례 듣게 되었는데 매번 업그래이드된 내용과 발표 수준으로 발전하시는 것 같아 특히 인상적이었습니다. N-Screen 전략을 소개해 주신 김민태 팀장님의 발표도 데모를 부드럽게 진행해 주셔서(미리 녹화된 화면으로 오류 없이 진행해 주셔서) 좋았던것 같습니다.

각 세션별로 내용적인 부분을 적어보자면, 첫번째 세션의 이원석 박사님께서는 HTML5의 현황과 전망에 대한 큰 그림을 보여주셨는데요. 웹 상에 관련 정보가 산재해 있긴 하지만 몇장의 슬라이드 안에 이렇게 정리해서 전달받을 수 있는 기회는 흔치 않다고 생각합니다. 하지만 다행히 박사님께서는 개인 블로그를 통해서도 HTML5 관련 정보와 소식들을 정리해서 올려주시고 계시죠. 최근에 포스팅된 '2011년, W3C HTML5 표준화 동향 및 전망'을 보시면 발표장의 내용을 대략 알아갈 수 있을것 같습니다.

두번째 세션은 좀 더 관심이 가는 내용이었습니다. 애플리케이션이 아닌 웹페이지상에서 기기를 조작할 수 있다는 것은 매우 매력적인 일이 될 테니까요. 그런데 발표 대부분 할애된 WAC(Wholesale Applications Community)은 제가 지식이 미천한 부분이어서인지 사실 이해 자체를 거의 하지 못했습니다. 애플과 애플의 앱스토어에 대항해서 전 세계 24개 통신회사들이 모여 만든 커뮤니티가 WAC이라는 것인데 가입된 통신사들의 통합된 오픈 마켓을 구축하는게 목적이라고 합니다. 개인적으로는 WAC 자체에 대한 기대치가 높지 않아서 별로 관심을 두고 있지는 않았지만, 이번 세미나에서 함께 들어볼 내용은 WAC에서 구축한 마켓에 올라가는 애플리케이션들이 웹 기술로 제작되어진다는 점이고, 그 중심에 HTML5, CSS3, JavaScript가 있다는 점이였습니다. 거기에 네이티브한 앱이 가지고 있는 기술들- 즉 휴대폰의 카메라를 작동시킨다거나, 파일을 저장한다거나 하는 등의 조작력을 Device API가 제공해준다라는 것이 핵심이죠. 확실히 Device API는 HTML5의 다른 스펙들보다 유용할 것으로 기대가 됩니다. 당장에 네이티브 앱에서는 앱상에서 바로 사진을 찍어 포스팅을 할 수 있는 기능도 웹 페이지를 통해서는 구현이 되지 않습니다. 미투데이와 같은 SNS는 모바일 환경에서 특히 서비스 사용이 빈번하기 때문에 아이폰이나 안드로이드 전용 네이티브 앱의 사용율이 높습니다. 모바일 전용 웹페이지를 제공하고 있긴 하지만 사진 촬영이나 속도면에서 네이티브 앱의 사용성을 뛰어넘기 힘든것이 현실입니다. 하지만 Device API를 충분히 활용할 수 있다면, 모바일 웹 페이지를 통해서도 사진이나 동영상을 찍어 올리거나, 모바일 기기의 상태(베터리 잔량, 현재 듣고 있는 음악, 위치 정보) 정보를 연동해서 수시로 글을 포스팅하는 기능까지도 고민해 볼 수 있을것 같습니다. 네이티브 앱이 하는 일을 그대로 할 수 있다는 것이고, 이것은 그대로 데스크탑 PC를 통해서도 가능하다는 점에서 네이티브 앱과는 차별점을 가진다고 볼 수 있을것 같습니다. 이러한 웹 앱의 성능이 충분히 향상된다면 아이폰이나 안드로이드 네이티브 앱 개발에 들어가는 큰 비용을 줄일수 있겠죠.

세번째 세션은 멀티 디바이스에 따른 N-Screen 전략을 다룬 김민태 팀장님의 발표였습니다. N-Screen 전략은 발표에서도 소개하고 있지만 용어만 새롭지 실상 개념 자체가 처음 나온 것은 아닙니다. 과거에서부터 현재에 이르기까지 우리는 수 많은 모니터를 대상으로 서로 다른 해상도를 고민했고, 끊임 없이 탄생하는 디바이스들을 대응해 왔습니다. 시기와 기술의 발전 방향에 따라서 여러가지 방법으로 대응해 왔는데, 최근에 이슈가 되고 있는 것이 반응형 웹 디자인(Responsive Web Design)이죠. 오늘의 포커스는 여기에 맞추어져 있었습니다. 팀장님께서는 데모를 통해서 반응형 웹 디자인이 작동되는 모습을 실제로 보여주시면서 이러한 것이 가능하다. 라는 것을 일깨워주시는데 중점을 두셨던 듯 합니다. 구체적으로 어떤 기술로 접근해서 구현해야 하는지에 대한 설명은 없으셨습니다. 제가 알고 있는 지식선에서 반응형 웹 디자인은 CSS3의 미디어 쿼리를 사용합니다. 표현을 담당하는 스타일시트로 하여금 해상도를 예측하여 서로 다른 화면을 출력시키도록 하는 기술이죠. 즉, 1024px을 넘는 일반적인 상황과 600px의 너비를 갖는 해상도일때, 320px 너비보다 작아지는 경우를 미리 예측하여 각각의 디자인을 정의해 놓는 것입니다. 이것은 데스크탑 브라우저와 테블릿, 작은 스마트폰에서 각각 훌륭하게 대응될 수 있습니다. 또한, 데스크탑에서도 사용자가 브라우저 창의 크기를 임의로 줄이거나 늘렸을 때 콘텐트의 배치를 사이즈에 맞게 재설정할 수 있습니다. 반응형 웹 디자인에 대한 좀 더 자세한 내용은 A List apart에 실린 Responsive Web Design을 참고해 주세요.

아 그런데, 이날 이 세션을 들으면서 든 생각인데 광고 영역이 노출되어야 하는 사이트인 경우 과연 이 기술을 어떻게 적용할 수 있을까? 하는 의문이 들었다. 웹페이지 상에서 광고 영역은 특정 영역의 특정 사이즈로 광고가가 계산되어서 판매가 될텐데 사용자에 의해서 수시로 리사이징 되는 웹페이지에서 화면 배치까지 유동적이라면? 마케터 머리가 터저버리지 않을까? 그리고 기술이야 너무 너무 좋은데, 기획자와 디자이너는 각 단계별 디자인을 추가로 그려야 하는 상황이 어렵지 않게 연상되는데 개발 비용보다 기획과 디자인 비용(단순히 돈 뿐 아니라 시간과 노력 등)이 훨씬 커질 가능성도 있겠다 싶었다.

네번째 세션은 자바스크립트 전성시대라는 발표였는데 초반의 지루함을 후반의 데모로 말끔히 씻어 주셨습니다. 어떻게 보면 두번째 세션의 머리에 잘 드러오지 않았던 이론들의 실체가 이번 세션의 마지막 부분 데모를 통해 보여진 셈이었습니다. 선임님은 전반부에 2011년은 자바스크립트 개발자에게 매우 중요한 시기이고 기회가 될 것이다라는 점을 재차 강조해 주셨습니다. 저는 흔히 말하는 UI개발자이고, 현재 근무하는 회사에서의 롤만 봐서는 자바스크립트 개발을 제외한 UI개발에만 치중하는 편입니다. 개인적으로도 자바스크립트가 중요하고 필요한 기술이다라는 점에서는 이견이 없습니다만 뭐랄까요. HTML5로 인해 결국 빛을 보는건 자바스크립트 개발자뿐인가? 하는 의구심 비슷한게 들기도 했습니다. 하지만 후반부에 자바스크립트 기술로(엄밀히 말하면 node.js라는 서버측 자바스크립트 기술로) 물리적으로 연결되어 있는 전구의 불빛을 밝히는 데모를 선보였는데요. 유레카를 외칠 만큼은 아니었지만 입력된 값을 전달하는 것 이외에는 어떤 것도 쉽사리 허락하지 않았던 웹에서 전구를 건드렸다!라는 점은 분명 진일보한 웹 기술의 성과였습니다.

마지막 세션은 권정혁님께서 이날의 발표 내용을 종합적으로 정리해주는 시간처럼 진행이 되었습니다. Device API에 대한 언급도 있었고, 반응형 웹 디자인에 대한 소개도 재차 진행되었습니다. HTML5에 대한 여러 이슈도 소개되었구요. 그것뿐이었다면 아주 아까운 시간이었겠지만 정리 자체도 꽤 만족스러운 수준으로 진행해 주셨고, 더불어 하이브리드 앱이라는 주제로 덤을 주셨습니다. 네이티브 앱과 웹 앱의 범위와 그 중간에 가능성을 갖는 하이브리드 앱을 소개해 주셨고, 실제로 하이브리드 형태로 제작된 자사 앱을 데모해 주시기도 했습니다. (안탑깝게도 제가 사용하는 안드로이드 스마트폰은 해당 앱이 지원하는 기기가 아니라며 제대로 이용할 수 없기는 했습니다만...) 권정혁님의 발표 자료는 블로그에도 등록되어 있습니다.

좋은 세미나였습니다. 많은 사람들이 유료 세미나에서 기대 이상의 것들을 원하고, 가져가길 바라지만 사실 그것은 다소 욕심일 것 같구요. 개인적으로는 이번 세미나를 준비하신 분들이나 발표자 분들의 정성이 부족해 보이지는 않았습니다. 다만, 내용적으로 그리고 최근에 HTML5와 관련된 논의 가운데 아쉽다고 느껴지는 것들을 몇가지 적어볼까 합니다.

우선 이번 세미나도 그랬지만 HTML5를 너무 포괄적인 개념으로 접근하고 있어 저도 그렇지만 많은 사람들이 혼란스러워 하고 있는것 같습니다. 전통적으로 HTML은 구조를 담당하는 언어로 사용되어 왔습니다. 물론 HTML5에서 어플리케이션화를 위한 여러가지 새로운 기술들을 포함해 왔다는 사실을 알지만 W3C에서도 HTML5 스펙 안에 여러가지 기술이 혼재되고 혼란스러워지는 것을 막기 위해 스펙을 분리해서 다루고 있습니다. 하지만 이번 세미나를 통해 HTML5를 접하신 분들은 Device API나 반응형 웹 디자인을 위해 사용된 미디어 쿼리 등이 모두 HTML5인 것으로 오해할 수 있었습니다. 첫번째 세션에서 이원석 박사님이 HTML5 스펙 전체를 쉽게 설명해 주시고, 이 날 세미나에서 다룰 Device API나 CSS3등이 어떤 관계에 있는지 등을 간단히나마 설명해 주셨었다면 더 좋지 않았을까 하는 생각이 들었습니다.

그리고, 또 하나 HTML5를 활용한 웹 애플리케이션을 만드는 과정에서 자바스크립트의 역활이 그 무엇보다 크다는 사실을 모르지 않습니다. 그리고 이러한 세미나에서 자바스크립트의 원리나 이해를 위해 강좌를 하는 것은 말이 되지 않겠지요. 하지만 제가 오후 반나절 동안 어둠속에 앉아서 들은 키워들은 거의 대부분이 자바스크립트 프레임워크들이었습니다. 얼마나 많은 프레임워크들이 소개되었는지 그 숫자를 기억할 수 조차 없는데요. 함께 동행했던 기획자님이 한참을 참고 계시다가 한마디 하시더군요. 저걸 언제 다 공부하니? 라구요. 발표자들이 유용하고 훌륭한 프레임워크를 소개하고자 하는 마음은 이해합니다만 그것이 자칫 입문자나 저처럼 지식이 낮은 사람들에게는 HTML5를 위해서 꼭 알아야 하고, 배워야 하는 '신 기술' 자체로 오해해 버릴지 모른다는 점을 간과하지 안았나 싶습니다. 누군가는 jQuery 터치나 센챠 기술이 HTML5의 하위 스펙인줄로 알아갈지 모릅니다. 그리고 그 사람은 회사나 스터디 모임에 가서 센챠는 HTML5 기술이니까 공부해야돼. 라고 전파를 할지도 모르지요. 그것들만 알면 웹앱을 얼마든지 만들 수 있어! 라면서요.

저는 자바스크립트 프레임워크들의 향연을 바라보면서 또 다른 걱정도 들었습니다. 앞으로, 네, 미래에는 HTML 문서가 HTML 어플리케이션이 될 수 있을겁니다. 굉장히 멋진 일일 것이고, 많은 사람들에게 새로운 기회를 줄 것입니다. 하지만 여전히 수 많은 웹 사이트들이 HTML 문서로 남아 있을 것이고, 또 만들어질 것입니다. 웹 애플리케이션은 웹의 불과 몇 퍼센트정도밖에 되지 않을 것입니다. 그런 의미에서 우리가 HTML5를 바라보면서 가장 처음 고민해야 할 것은 시멘틱웹을 위해 HTML5이 어떤 지향점을 가졌는가를 고민해보는 것이었나 싶습니다.

미래 기술이라고 불리우는 HTML5. 신기술이라고 느껴지는 HTML5. 우리는 그 HTML5를 마스터하기 위해 이 날 들은 수 많은 프레임워크 중 몇개 정도는 익혀야 할지 모릅니다. 신 기술을 얻기 위해 새로운 기술을 익혀야 하는 것이죠. 그리고 또 다시 멋지거나 흥미 있는 프레임워크가 등장하면 유행처럼 번저나갈 것이고 다시 익혀야 할지 모릅니다. 그 사람들은 계속 그렇게 새 기술만 쫓아 다닐 것이고, 매번 새로 배워야 합니다. 언제나 힘이 들고, 벅차고, 지쳐 있을 겁니다. 저는 벌써부터 목이 말라 오거든요.