모바일 웹의 종류

모바일 웹의 종류

모바일 웹은 일반 PC용 웹페이지에 비해서 간단한 UI(User Interface)를 가지고 있으며, 휴대성이 있는 모바일 기기의 특성을 살린 LBS(Location-Based Service)등 다양한 기술도 접목 할 수 있다는 특징이 있습니다.

또한 모바일 웹 기숭을 접목하여 운영체제 혹은 플랫폼에서 제공하는 개발 프레임워크를 통하지 않고도 모바일 앱을 만들 수 있습니다. 지금부터 자세히 살펴보겠습니다.

모바일 웹

여러분이 스마트폰에서 검색하는 웹페이지가 바로 일반적인 모바일 웹이며, 여러분이 PC포털에서 보는 웹 페이지와는 다르게 모바일 기기의 화면에 최적화된 UI와 UX를 염두에 두고 제작되고 있습니다.

웹 앱

웹 앱(Web App)을 설명하기 전에 여러분이 이해하고 있으야 할 것은 바로 네이티브 앱(Native App)이라는 용어입니다. 네이티브 앱은 운영체제 혹은 플랫폼에서 제공하는 SDK를 기반으로 개발된 애플리케이션을 말하는 것으로, 여러분이 아이폰 앱스토어 혹은 구글 안드로이드 마켓에서 다운로드해서 사용하는 앱이 바로 네이티브 앱입니다. 이에 반해 웹 앱은 말 그대로 웹 기술로 구현하는 앱을 말합니다. 즉, 기존의 엡 개발 기술을 사용하되 모든 UX와 UI를 앱과 유사하게 제작하는 것을 말합니다.

모바일 웹의 특징

- HTML, CSS, 자바스크립트 기반의 웹 기술을 똑같이 사용합니다.

- 스마트폰 운영체제 혹은 플랫폼에서 제공하는 API를 사용할 수 없습니다.

- 모바일 기기의 하드웨어에서 제공하는 자이로 센서, 카메라 등을 사용할 수 없습니다.

- 운영체제 혹은 플랫폼에서 브라우저에서 사용할 수 있도록 제공하는 API 만을 사용합니다.

Tip. 모바일 웹에서 사용하는 메타 태그

웹 앱과 모바일 웹에서는 모바일 기기에서의 확대/축소 가능 여부와 기기마다 액정 크기가 다르다는 것을 고려 해야 합니다. 따라서 이를 인식할 수 있는 메타 태그를 사용해야 합니다. 기기별로 크기를 맞추기 위해서는 다음과 같이 마크업해야 합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,"/>

이 외에도 모바일 웹에서 사용하는 여러 가지 메타 태그가 존재합니다. 또한 아이폰, 안드로이드라는 플랫폼 혹은 기기에 맞는 메타 태그도 따로 존재하니 구분해서 사용하는 것도 중요한 포인트입니다.

하이브리드 앱

최근 들어 하이브리드 앱(Hybrid App)이라는 단어를 꽤 자주 들을 수 있을 것입니다. 단어 그대로 네이티브 앱과 웹 앱 기반의 기술을 함께 사용한다는 의미입니다. 네이티브 앱을 개발할 경우는 아이폰이든 블랙베리든 안드로이드든 각 운영체제 혹은 플랫폼에서 제공하는 프로그래밍 언어로 제작해야 합니다. 이는 해당 운영체제나 모바일 기기에 최적화된 기능을 제공한다는 장점이 있으나 운영체제나 플랫폼이 다르면 많은 시간과 비용을 감수하면서 새롭게 개발해야 한다는 단점도 있습니다.

하지만 하이브리드 형태의 앱을 만들게 되면 이는 달라집니다. 앱의 기반이 되는 콘텐츠 영역은 HTML 기반의 웹 앱으로 제작을 하고 최종 앱 배포에 필요한 패키징 처리만 아이폰, 블랙베리, 안드로이드 플랫폼 안에서 하는 것입니다. 이는 프로그래밍 언어가 다르다는 사실과 관계없이 매우 편리하게 다양한 앱을 제작할 수 있는 환경을 제공합니다. 즉, 웹 퍼블리셔라면 자기 스스로 앱을 디자인하고 개발해서 앱스토어, Y스토어 등에 배포할 수 있다는 의미입니다.

이러한 하이브리드 앱을 지원하기 위해서는 별도의 하이브리드 앱 프레임워크가 필요합니다. 대표적인 것으로는 외국에서 개발한 폰갭(PhoneGap), 티타니움(Titanium)이 있고 국내에는 KTH가 제공하는 앱스프레소(Appspresso)가 있습니다.