모바일 웹디자인 - Jquery Mobile을 이용한 웹디자인(티스토리 블로그도 가능할까요?)

어도비에서 작년에 크리에이티브 스위트(Creative Suite; CS)를 5.5로 업그레이드했는데 웹디자인 부분에서 바뀐 것이 드림위버입니다. CS5.5로 업그레이드 됐죠. 그동안 어도비는 점이 들어간 업그레이드가 없었는데 0.5 버전이 나온 것은 아주 이례적인 일입니다. 이것은 그동안 애플의 스마트폰을 시작으로한 모바일 디바이스 시장의 변화에 적극 대처하기 위한 것인데 주로 바뀐 것이 제이쿼리 모바일을 이용한 웹디자인 기능 추가입니다. 이에 더하여 웹 플랫폼의 애플리케이션을 네이티브 애플리케이션으로 변환이 가능하도록한 오픈소스 프로그램인 PhoneGap을 추가하여 애플리케이션의 개발이 쉽도록 했습니다. 

모바일 디바이스의 애플리케이션은 두가지로 나뉩니다. 자바, C#, C++등 컴파일 프로그래밍 언어에 의해 만들어진 애플리케이션은 모바일 디바이스의 다양한 기능을 운용하기 위한 프로그램이고 웹 애플리케이션은 HTML, CSS, Javascript 등 스크립트 언어로 만들어진 인터넷 접속을 위한 프로그램입니다. 

 
네이티브 애플리케이션은 사용되는 OS가 어떤 것이냐에 따라 개발되는 환경도 다르고 프로그램이 개발되면 그 운영체제 안에서만 사용이 가능한데 반하여 웹 애플리케이션은 어떤 운영체제라도 사용이 가능합니다. 웹 애플리케이션의 단점은 모바일 디바이스의 다양한 기능 즉 카메라, 마이크로폰 등과 연결하여 사용할 수 없다는 점이죠. PhoneGap은 웹 애플리케이션을 네이티브 애플리케이션으로 변환시키는 역할을 합니다.

웹앱의 하나인 제이쿼리 모바일은 모체인 제이쿼리 라이브러리를 기반으로 작동하고 HTML5, CSS3, 자바스크립트에 대부분 의존하여 사용되며, 웹앱이기 때문에 모든 운영체제안에서 일관된 모양으로 작동합니다. 어도비에서는 제이쿼리 모바일의 개발을 지원하기 위해서 전문 기술자 두명을 지원했고 드림위버 CS5.5 로 업그레이드하면서 알파버전을 포함시켰습니다. 지금은 정식버전이 출시되었고 최근에 1.0.1 버전을 내놓으면서 여러가지 버그를 수정했고 삼성의 바다플랫폼과 돌핀 브라우저를 지원가능하도록 했습니다.  

그러면 제이쿼리 모바일이 어떤 것인지 확인할 필요가 있죠. 제이쿼리의 여러가지 애니메이션을 경험하려면 애플 사파리나 쿨노보(구 크롬플러스)를 사용해야합니다. 이곳 을 클릭하면 위 화면이 나오는 제이쿼리 모바일 홈페이지로 이동합니다. 웹브라우저 상단의 탭바에서 탭을 클릭드래그하여 독립된 화면으로 분리시킨 다음  메뉴에서 좌측에 있는 Docs를 클릭하면 화면이 제이쿼리 모바일로 제작된 메뉴얼이 나옵니다.  3의 화면 축소버튼을 클릭합니다.

 
웹브라우저의 우측 사이드를 클릭 드래그하여 좌측으로 이동하면 화면내용이 줄어들면서 휴대폰 크기로 줄이게 되면 2의 컬럼이 3의 컬럼 아래로 내려가게 됩니다.

전형적인 모바일 웹디자인의 형태인데요. CSS3의 Media Query를 이용한 풀화면의 데스크탑 버전 스크린에서 작은 화면으로 전환시 모든 레이아웃이  모바일 디바이스 크기의 레이아웃으로 바뀌는 형태입니다. 그러면 위화면에서 메뉴 하나를 클릭합니다. 모바일에서 접속시는 탭합니다. 그러면 우측에서 좌측으로 애니메이션 되면서 화면 전환이 됩니다. 화면을 내려서 Components 패널에서 첫 메뉴인 Pages & dialogs를 선택하고 다음화면에서 Page Transition을 선택하면 다음의 여러가지 애니메이션 옵션이 나옵니다.

flip을 선택했을때 나오는 애니메이션입니다. 여러가지 옵션을 선택해서 시험해보세요. 웹페이지인데도 네이티브 애플리케이션처럼 다양한 애니메이션이 됩니다. 

제이쿼리 모바일을 이용한 웹페이지 제작은 앞으로 여러번의 포스팅으로 만들어보겠지만 의문시되는 것은, 그러면 기존의 웹페이지도 제이쿼리 모바일을 이용한 디자인 변경이 가능한가입니다. 지금 티스토리 블로그를 시험해보고 있는데 기존에 있던 블로그도 위처럼 제이쿼리 모바일을 이용해서 디자인 레이아웃 변경이 가능할 것 같습니다. 제일 문제되는 것은 모든 포털에서는 모바일로 접속시 모바일용 화면으로 일방적으로 수정해서 내보낸다는 것입니다. 

자신의 블로그가 모바일로 접속시 어떻게 나오는지를 확인하려면 블로그 주소에 /m을 치면 위처럼 나옵니다. 모바일용 스킨을 선택하지 않았어도 기본 모바일 스킨으로 나오게 됩니다. 아래로 스크롤하여 하단에서 2의 PC화면버튼을 클릭해야 정상적인 웹페이지가 나오죠. 그러니 기존의 블로그를 모바일용으로 디자인 변경하더라도 바로 접속은 안되겠죠. 디자인 변경이 가능한 티스토리 블로그에서 앞으로 어떻게 변경할지는 모르겠지만 모바일 스킨도 자신만의 디자인으로 변경할 수 있도록 하면 좋을 것입니다. 

테스트 블로그를 만들고 body 태그에 기존 블로그의 메뉴부분만 삽입해서 저장하고 웹에 띄워봤습니다. CSS는 적용을 시키지 않아서 메뉴가 위에서 아래로 기본적으로 나오지만 제이쿼리 모바일부분은 기본적인 CSS파일이 적용되므로 가로 바와 타이틀 제목이 제대로 나옵니다. 관리자 메뉴를 클릭했더니 애니메이션 되면서 아래처럼 관리자 메뉴로 나옵니다.
 

관리센터의 메뉴가 그대로 나옵니다. 시험삼아 HTML/CSS메뉴를 클릭했더니 다음과 같이 나옵니다.

제이쿼리 모바일용 CSS가 적용이 되는 것은 위처럼 둥근 모서리로 버튼 형식이 되어 나옵니다. 제목을 수정하고 저장했더니 잘 됩니다. 그렇다면 제이쿼리 모바일을 이용해서 기존의 블로그도 모바일용으로 레이아웃을 변경할 수 있다는 결론이 나옵니다. 글작성이나 다른 부분은 시험해봐야겠지만 어쨌든 가능성이 있을것 같습니다. 안되면 티스토리에서 뭔가 조치를 해주지 않을까 싶습니다. 향후 모바일이 데스크탑을 뛰어넘는다고 합니다. 그에 대비해야겠죠.