서론

웹 개발을 할 때 HTML4의 selectors는 좀처럼 불편한게 아니다. document.getElementById와 document.getElementsByClassName 또는 document.getElementsByName 등으로 DOM element에 접근해서 데이터를 가져오거나 변경을 하는 것이 꽤 귀찮은 작업이기 때문에 대부분 jQuery나 다른 DOM selector를 지원하는 라이브러리를 사용하여 개발을 한다. 물론 jQuery는 selector 말고도 많은 강력한 기능이 있지만 이 포스팅에서는 HTML5의 selectors API를 비교 설명하기 위해서 jQuery의 selectors만 좁혀서 비교한다. (HTML5의 selector로 jQuery selector를 다 할 수 없을지 모르겠지만 HTML4에 비해서 매우 강력해졌다.)

이 포스팅으로 HTML5에 추가된 API들로 HTML5을 단순히 Markup이라고만 생각한다면 도대체 왜 HTML4 보다 좋은지 모르겠다. 라는 질문을 조금은 해소할 수 있지 않을까 생각한다. (사실 연구실에 HTML5가 도대체 왜 좋은지에 대한 논의가 많이 진행되고 있다.)

서론

웹 기술은 시간이 지나면서 점점 발전의 가속도가 빨라지고 있다. HTML5와 CSS3의 등장으로 단순하게 정보를 표현하던 정적인 웹을 사용자에게 효과적이고 고급스럽게 비정적인 데이터를 표현을 할 수 있게 해주는 환경을 제공할 수 있게 되었다. PC에서 브라우저로 속에서 표현되던 웹은 디바이스의 발전과 통신망의 발달로 모바일이나 타블릿 등 다양한 디바이스의 브라우저 속에서 표현하는 시대가 도래되었다. 이러한 결과로 사용자들은 더이상 PC에서 보던 브라우저속의 웹 환경을 원하지 않게 되었다. 모바일에 최적된 웹, 태블릿에 최적화 된 웹을 원하게 되었고 서비스 제공자들은 디바이스에 맞는 웹을 개발하기 시작한다. 그래서 서비스 제공자들은 디바이스에 맞는 웹 서비스를 제공하기 위해서, 각각 디바이스에 표현할 수 있는 최적의 환경을 만들기 위해서, 정보를 다르게 표현하기 위해서 각기 다른 뷰어를 만들어서 제공했다.(여기서 말하는 최초의 뷰어는 각각 디바이스에 맞는 최적의 웹 페이지를 만들거나, 다른 도메인 서비스를 하는 등을 말한다.) 하지만 디바이스 크기는 점점 더 다양해져가고 있고 일명 N-screen에 대응하는 개발을 하기 위해서 다른 뷰어들을 만드는 비용이 부담스러워지기 시작했다.

There is no Mobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web. Thank you. - Stephen Hay

우리가 흔히 모바일로 웹을 사용할 때 모바일 웹을 사용한다라고 말한다. 하지만 모바일 웹이라는 것은 없다. 단지 웹만이 있다. 테스크탑 웹이나 태블릿 웹이란 것도 없다. 우리는 디바이스라는 함정에 빠져있는 것일 수 있다. 웹은 단지 웹일 뿐이다. 모바일에 들어가는 웹이라고 모바일 웹, 태블릿에 들아간다고 태블릿 웹, 그리고 PC에 들어간다고 PC 웹이라고 생각해서는 안된다는 것이다. 즉, 모바일 웹은 다른 종류의 웹이 아니라 다른 디바이스로 웹을 사용하는 행위를 말하는 것이다.

우리는 m. 으로 시작하거나 mobile. 으로 시작하는 도메인을 호출하는 모바일 웹 서비스들을 흔히 볼 수 있다. 이러한 서비스는 PC에 최적화된 웹 서비스를 모바일에 맞게 완전히 다른 구성으로 데이터를 표현하기 위해서 모바일에 최적화된 웹 서비스를 구축한 것이다. 웹을 표현하는 방법이 아니라 웹 자체를 모바일용으로 만든 것이다. 실제 이러한 도메인을 PC 브라우저에서 열게되면 당황하게 된다. 모바일에서만 보여지는 화면이 PC에서 보니 당연히 그 구성이 이상하게 나타날 수 밖에 없다. 이러한 서비스의 가장큰 문제는 Twitter나 Facebook을 모바일에서 사용하다가 링크를 공유하게 되면 m. 또는 mobile. 으로 시작하는 링크가 공유되기 때문에, PC 를 사용하는 사용자가 그 링크를 열게되면 모바일 환경에 최적화된 웹 뷰가 나타나게 되는 것이다. (물론 웹 서버나 프로그램상으로 agent를 판단해서 다른 뷰로 redirect 시키거나 하기도 하지만 근본적으로 다른 웹뷰를 만들어서 하나의 웹을 다른 웹으로 표현하는 것이 위 의견에 다른 것이다.) 즉, 다시말하면 웹이 하나가 아니라 두가지가 존재한다는 것이다. 모바일 전용 웹 서비스와 PC용 웹 서비스가 존재해서 두가지가 같은 문서임에도 불구하고 다른 URI를 갖는 문제가 발생한다.

그럼 하나의 웹을 사용하자고 생각하는 순간 하나의 웹을 사용자가 어떤 디바이스를 사용하던지 그 환경에 맞게 자동적으로 반응해서 그 디바이스에 최적화된 데이터를 표현할 방법을 생각해야한다. 웹은 screen에 나타나는 document 이다. screen의 크기에 따라 document의 내용과 정보를 일정 크기의 screen에 가장 최적화 된 구성으로 표현되어 진다면 사용자들은 PC를 사용하던지 모바일이나 태블릿을 사용하던지 사용자가 가장 보기 좋은 구성으로 볼 수 있게 될 것이다. 이러한 연구는 오래전 부터 계속되어져 왔다.

다음은 IT 신기술을 가장 빠르게 적용하는 포털로 스마트폰 보급과 동시에 모바일 최적화 서비스 향상에 힘쓰고 있다. 최초 다음은 모바일 버전을 빠르게 대응하면서 사용자에게 많은 관심을 받게 되었다. 다음 화면은 다음에서 최초 모바일 버전으로 만든 다음 웹 서비스의 화면을 PC에서 열었을때 모습이다. 아래 링크들은 모두 m. 으로 시작하는 모바일에 화면으로만 볼 수 있는 링크를 모두 가지고 있다.

서론

CSS3 @media query를 이용하여 반응형 웹 스크린 크기 대응하기 글을 포스팅하고 다음과 같은 트윗을 보았다.

요즘 유행(?)하는 반응형웹의 기반이 되는 미디어쿼리… 물리적인 화면 크기(인치)를 고려하지 않은 해상도(픽셀)만으로 뭘 구분하지? 1280x800의 해상도를 가진 스마트폰에 데스크탑웹 보여줘도 됨?

이전글 포스팅후 장동수(@iolothebard) 님(KTH의 앱스프레소 초기 개발자로 존경하는 개발자 중에 한분입니다.)께서 올리신 이 트윗을 보고 코드를 다시 확인해보니, 확실히 이 말을 이해할 수 있을것 같아서 다시 자료를 찾아보고 수정을 했습니다. 감사합니다~

언제나 포스팅에 관련된 조언(피드백)을 감사히 받고 제가 더 많이 공부하고 수정할 수 있게 되는 것 같다. 이 블로그는 개인 블로그이면서 제가 연구하고 있는 연구소의 자료 공유 목적으로 글을 작성하고 있습니다. 그래서 여러가지 자료를 참고하고 최대한 간단하고 이해하기 쉽게 만들려고 하다보니 이런저런 문제로 자료를 놓치는 일이 많다. 하지만 위키피디아처럼 진정한 지식 공유가 되는것 같아서 포스팅에 대한 여러가지 의견을 받아서 다시 좀더 보완된 글을 공유하게 되는 것 같다.

서론

Rhino를 소개하면서 Javascript를 브라우저 없이 개발하는 방법을 소개했는데 이번 포스팅은 브라우저에서 동작하는 Javascript 코드가 아니라 서버에서 동작하는 Javascript를 소개한다. 뿐만아니라 브라우저 없이 서버에서 개발한 Javascript 코드를 웹 어플리케이션에서 동작하는 Javascript로 사용할 수 있는 것을 소개할 것이다. 브라우저가 아닌 곳에서 Javascript를 개발한다… 어쩌면 이것은 말이 안되는 이야기일 수도 있지만 V8 엔진이 등장하면서 그 이야기는 현실이 되었다. 뿐만아니라 nodejs 등장은 이미 개발자 사이에서 개발 방법론에 대한 변경이 일어날 정도로 큰 이슈가 되었다. nodejs에 대한 설명은 한 포스팅에 해결할 수 있을만큼의 분량이 아니다. nodejs는 점점 개발자들이 많아지고 있고 다양한 모듈들이 만들어지고 있기 때문에 앞으로 nodejs라는 주제로 포스팅을 계속 이어 갈 예정이다. 이 포스팅은 javascript 코드를 브라우저 없이 개발해서 서버와 웹 페이지에서 동일하게 사용할 수 있다는 것이 요점이기 때문에 nodejs에 대한 간략한 소개만 한다. 위키에서는 nodeJS에 대해서 다음과 같이 정의하고 있다.

Node.js는 V8 (자바스크립트 엔진) 위에서 동작하는 이벤트 처리 I/O 프레임워크이다. 웹 서버와 같이 확장성 있는 네트워크 프로그램 제작을 위해 고안되었다.

위의 정의는 많은 기술이 포함되어 있지만 이번 포스팅에서는 V8 엔진 위에서 웹 서버 프로그램을 만들 수 있다는 것만 알고 설명한다. V8 엔진은 구글에서 개발한 오픈소스 JIT(Just In Time) 가상머신 형식의 자바스크립트 엔진이며 구글 브라우저와 안드로이드 브라우저에 포함이 되어 있다. V8 엔진은 ECMAScript-3의 규약으로 C++로 개발이 되어져 있는데 독립적으로 실행이 가능하다. nodejs는 이러한 V8 엔진위에서 동작을 하고 nodejs는 서버 프로그램을 작성할 수 있기 때문에 V8 위에 동작하는 Javascript 코드를 가지고 서버와 웹 어플리케이션에 돌아가는 코드를 동일하게 사용할 수 있는 것이다.

서론

Rhino에 대해서는 이전 포스팅을 읽어보면 Java기반의 Javascript Runtime 환경을 제공해 주기 때문에 브라우저 없이 Javascript 코드를 개발할 수 있다는 것을 알수 있다. Rhino는 생각보다 편리한 기능을 많이 포함하고 있고 Javascript 라이브러리를 개발하는데 매우 유용하다. 하지만 이런 Rhino에게 현재 버전에 치명적인 단점이 있다. 지금 Rhino1.7R4 버전에서 64K 이상크기의 Javascript를 로드하지 못하는 문제가 있다.