본문 바로가기
C++ 200제/코딩 IT 정보

모바일 웹 핵심 정리2 [WURFL, HTML5, jQuery, W3C Widget, 웹 위젯 등]

by vicddory 2017. 2. 27.

모바일웹 핵심 정리2 [WURFL, HTML5, jQuery, W3C Widget, 웹 위젯 등]


5장 그룹으로 만들기

. WURFL(Wireless Universal Resource FiLe) 같은 장치 데이터 저장소를 이용하면 수많은 장치에 대한 자세한 정보를 구할 수 있습니다.

. WURFL 데이터는 장치에 대한 500가지가 넘은 기능 정보를 가지고 있으며, 수십 가지의 그룹으로 정보를 분류합니다.


. 모바일웹 장치 데이터베이스를 이용하면 장치의 기능에 대한 값을 구해서 활용할 수 있습니다.

. WURFL의 PHP API는 WURFL 데이터를 처리하는 API입니다. 서로 다른 API는 조금씩 다르게 데이터를 처리합니다.


. WURFL을 만든 사람들이 2011년에 ScientiaMobile을 설립했습니다. 이 회사는 WURFL에 대한 공개 소스와 상업 라이선스를 제공합니다. WURFL 외에도 다른 장치 데이터베이스들이 있습니다.

. 커다란 프로젝트를 한다면 관련 기능끼리 모으는 장치 클래스 개념을 이용하는 것이 도움됩니다.

. 장치 클래스는 공통된 기능을 기반으로 장치들을 모은 추상적인 개념입니다.


. 장치 클래스로 장치를 분류하면 각 장치의 상세한 기능을 신경 쓰지 않고 향상된 작업(클래스에 맞게 콘텐츠 출력)을 진행할 수 있습니다.

. 장치 데이터베이스를 이용하여 장치가 무엇인지 찾는 코드에는 디폴트 장치 클래스, 오류 검사, generic 장치 처리 부분이 매우 중요합니다.


. 모바일웹과 관련된 다른 기술과 마찬가지로, 서버 쪽 장치 추적 기능도 100% 완벽한 정답은 아닙니다.

. 서버 쪽 장치 추적과 장치에 따른 콘텐츠 출력은 클라이언트 쪽 기능과 조합될 수 있습니다. 이 두 가지는 서로 별개가 아닙니다.


W3C mediaCapture API 예제W3C mediaCapture API 예제


6장 타탄 만들기

. 사람들은 앱을 원합니다! 웹사이트가 웹앱인지 정확하게 정의 내리기는 힘듭니다. 앱 같은 웹사이트는 단순한 콘텐츠 페이지보다는 사용자와의 상호 작용이 필요한 부분이 더 많습니다. 때대로 콘텐츠와 데이터는 비동기적으로 전송되어 DOM에 추가되므로 전체 페이지 로드 횟수를 줄여 줍니다.


. HTML5는 특별합니다. 이것은 매우 혁명적인 하이퍼텍스트 마크업 언어(HTML) 명세입니다. 그렇지만 HTML5라는 용어가 대로는 앱 같은 웹을 만드는 기술의 조합을 의미하기도 합니다.


. 모바일웹앱을 처음부터 개발하려면 매우 힘들지만 한 번 시도해 보는 것도 좋은 겁니다. 그렇지만 우리의 프로젝트에서는 개발의 편의성을 위해 모바일 사용자 인터페이스 개발 프레임워크를 사용했습니다.


. 다양한 기능과 종류의 수많은 모바일웹 프레임워크가 있습니다.

. jQuery Mobile은 유명한 모바일웹 프레임워크입니다. 이것은 HTML5 마크업과 밀접한 관계가 있으며, 기본적인 코드로 모바일 인터페이스를 쉽게 만들 수 있습니다.

. 네이티브 앱 같은 웹앱을 만드는 것은 신중한 판단이 필요한 작업입니다.

. 타탄 만들기에서는 폼 프로토타입을 만드는 데 HTML5 폼 요소를 사용했습니다. jQuery Mobile은 폼 요소가 모바일 브라우저 간에 호환되게 하여 주며, 기능을 지원하지 않는 브라우저에서도 최소한의 기능을 수행하도록 도와줍니다.


7장 슈퍼 모바일 웹앱

. 모바일 웹앱은 점진적 향상 방법, 오프라인 모드, 위치 추적 기능 등과 같은 모바일 장치의 특성을 살린 기능이 잘 어울립니다.


HTML5 nihao~!HTML5 nihao~!


. 가능한 한 많은 사용자가 볼 수 있는 기본 기능부터 시작하는 점진적 향상 방법을 이용하면 향상된 기능의 모바일 브라우저에서는 아주 멋진 기능을 즐길 수 있습니다.


. 오프라인 모드에서도 동작하는 앱을 만드는 것은 중요합니다. 모바일 장치가 언제나 인터넷에 연결되어 있다는 보장이 없기 때문입니다.


. 캐시 매니페스트 파일을 만들어서 브라우저의 앱 캐시 기능을 이용하면 브라우저가 필요한 파일을 캐시에 저장해서 오프라인 모드에서도 동작할 수 있습니다.

. 캐시 매니페스트를 만드는 것은 겉보기에는 간단해 보이지만 주의해야 할 부분이 많습니다.


jQuery Mobile 1.2jQuery Mobile 1.2


. 모바일웹 오프라인 모드를 위해 캐시 매니페스트 파일로 어떤 파일을 다운로드 받아 캐시에 저장할지(CACHE 섹션) 그리고 인터넷 연결이 회복되면 무엇을 다시 요청할지(NETWORK 섹션) 지정할 수 있습니다.


. 대부분의 최신 스마트폰은 브라우저의 지오로케이션 기능을 지원합니다. W3C 지오로케이션 API를 지원한다면 자바스크립트로 navigator.geolocation 객체를 이용할 수 있습니다.

. 최신 기능의 브라우저를 위해 타탄 만들기 폼을 향상했던 것처럼, 지오로케이션 기능을 지원하는 브라우저를 위해 Find Events 폼에 지오로케이션 기능을 넣었습니다.


. 일부 약간 오래된 스마트폰의 모바일 브라우저는 W3C 표준이 아닌 지오로케이션 기능을 가지고 있습니다. 이 문제를 해결하기 위해서는 geo-location-javascript라는 지오로케이션 라이브러리를 이용합니다.


. geo-location-javascript 라이브러리는 W3C API로서 원래의 W3C 자바스크립트 코드에서 최소한의 변경만 필요합니다.


W3C WidgetW3C Widget


8장 타탄 찾기: 네이티브 이용

. 모바일웹이 그동안 많이 발전했지만, 아직 브라우저로 엑세스하지 못하는 부분이 많습니다.


. 하이브리드 애플리케이션 기술을 이용하면 HTML5, CSS, 자바스크립트 표준으로 작성한 코드로 네이티브 앱을 만들 수 있습니다. 하이브리드 앱은 플랫폼 간에 호환되는 코드를 사용하기 때문에 네이티브 개발의 복잡함을 피할 수 있고 비용도 줄일 수 있습니다.


. 폰갭은 네이티브 앱을 빌드하기 위한 HTML5 플랫폼으로서, 밴쿠버에 본사를 둔 니토비라는 회사에서 만들었습니다. 니토비는 2011년 가을에 어도비에 인수되었습니다.


WURFL Explorer scientiamobileWURFL Explorer scientiamobile


. 폰갭 빌드는 편리한 웹 인터페이스로 폰갭 프로젝트를 빌드하는 서비스입니다.

. 폰갭 빌드 프로젝트는 W3C 웹 위젯과 비슷하며, 최소한 시작 파일(index.html)과 설정 파일(config.xml)이 있어야 합니다.


. W3C 로컬스토리지 API는 키-값으로 이루어진 문자열 타입의 데이터를 이용하는 간단한 클라이언트 쪽 스토리지입니다. 타탄 찾기 참가자가 어느 타탄을 찾았는지 나타내는 데 이것을 사용했습니다.


. 모바일웹 phonegap.js는 폰갭 빌드 프로젝트에 자동으로 추가되며, 이를 통해 폰갭 자바스크립트 API를 사용할 수 있습니다. 폰갭의 deviceready 이벤트를 이용하면 사용하려는 장치의 기능이 준비되었는지 알아낼 수 있습니다.


. 앱에 카메라 기능을 추가하려면 폰갭의 mediaCapture API를 사용해야 합니다. 이 API는 W3C mediaCapture API를 본떠서 만들었습니다.


. 네이티브 카메라 앱을 이용하여 한 장의 사진을 찍는 데 navigator.device.capture.captureImage 메서드를 이용했습니다.


출처 - 헤드퍼스트 모바일 웹, 이수진, 이성희, 한빛

모바일웹 핵심 정리2 [WURFL, HTML5, jQuery, W3C Widget, 웹 위젯 등]

댓글