모바일웹

모바일웹 이미지

모바일웹(mobile web 또는 mobile internet)이란 스마트폰 등 모바일기기에 설치된 웹브라우저에서 작동할 수 있도록 만든 인터넷 웹사이트를 말한다. 기능상 웹앱(web app)과 유사하다.

개요

모바일웹은 스마트폰이나 태블릿PC 등과 같은 모바일 장비를 이용해 이동 중에도 커뮤니케이션, 정보 검색, 간편 거래 등을 할 수 있는 인터넷 서비스이다. 이러한 정의는 무선 랜을 갖춘 노트북을 이용해 인터넷에 접근하는 고정형 서비스는 배제하고, 스마트폰이나 태블릿PC와 같은 전형적인 모바일 장비를 전제로 제공되는 특화된 서비스를 의미한다. 모바일 인터넷에 접근하기 위한 방식은 브라우저 기반과 앱 기반으로 나누어지는데 2007년 이후, 스마트폰이 도입되면서 전환되고 있다. 브라우저 기반이 다양한 정보와 서비스를 포괄하는 범용 방식이라면, 앱 기반은 특정한 정보와 기능만을 제공하는 특화 방식이다.

특징

• HTML, CSS, 자바스크립트 기반의 웹 기술을 똑같이 사용한다.
• 스마트폰 운영체제 혹은 플랫폼에서 제공하는 API를 사용할 수 없다.
• 모바일 기기의 하드웨어에서 제공하는 자이로센서, 카메라 등을 사용할 수 없다.
• 운영체제 혹은 플랫폼 브라우저에서 사용할 수 있도록 제공하는 API만 사용한다.

모바일웹과 PC의 차이점은 기존 PC 사이트에서 URL을 표기할 때 www.abcdef.com 이라고 표현하는데, 모바일웹에서는 'www'라는 호스트 네임을 제외한 mobile의 약칭인 'm'을 넣어서 m.abcdef.com이라고 표현한다. 또한, 다양한 디바이스에 맞춘 해상도를 큰 차이점으로 볼수가 있는데, 모바일웹의 기본 해상도는 480픽셀x640픽셀을 기준으로 하여 태블릿 버전까지 고려하여 800 픽셀x1024 픽셀까지를 기본 해상도로 개발하여 PC보다 다양한 해상도를 가지고 있다.

하지만, PC 사이트의 글자 폰트와 이미지, 터치 아이콘 등 데스크탑 브라우저에서 실행되는 기능을 모바일에 맞추어 표현한 것으로 PC용 홈페이지를 모바일 스크린 크기로 줄여놓은 풀 브라우징 방식으로 페이지를 이동해 앱에 비해 속도가 느리다는 단점을 가지고 있다.

기술

모바일웹에서 사용되는 기술에는 다음과 같다.

• HTML5 : 인터넷 웹사이트 등 하이퍼텍스트를 편집하기 위한 코딩 언어이다.
• CSS : 캐스캐이딩 스타일 시트(Cascading Style Sheets)의 약자로서, 웹 문서의 색상, 폰트, 레이아웃 등을 표현하기 위해 사용하는 스타일 시트 언어이다.
• 자바스크립트(Javascript) : 자바스크립트(JavaScript)는 미국 넷스케이프(Netscape)의 브렌든 아이크(Brendan Eich)가 개발한 스크립트 프로그래밍 언어이다. 약칭 JS라고도 쓴다. 자바스크립트는 표준 HTML 문서 내에 삽입되어 사용되며, 인터랙티브한 웹페이지를 만들 수 있게 한다.
• 제이쿼리 모바일(jQuery Mobile) : HTML 문서에 삽입하여 사용할 수 있는 자바스크립트 라이브러리를 말한다.
• 센차터치(Sencha Touch) : 2010년 7월 17일부터 0.90 베타 버전을 시작으로 제공된 모바일 웹용으로 제작된 사용자 인터페이스 웹프레임워크이다. 자바스크립트(JavaScript) 라이브러리가 제공된다. 스마트폰 운영체제 iOS나 안드로이드의 애플리케이션 컴포넌트가 HTML5, CSS3, JavaScript를 활용해서 구현된 형태를 제공한다.
• 아파치 코도바(Apache Cordova) : 니토비(Nitobi)가 만들고 어도비 시스템즈가 인수한 모바일 개발 프레임워크이다. 소프트웨어 프로그래머들이 오브젝티브-C 처럼 기기에 특화된 언어들 대신 자바스크립트, HTML5, CSS3를 이용하여 모바일 기기를 위한 응용 프로그램들을 만들 수 있게 한다. 이전 명칭은 폰갭(PhoneGap)이다.
• 티타늄(Titanium) : 웹사이트 및 웹시스템의 서버 및 클라이언트를 개발하게 해주는 소프트웨어이다. 모든 유형의 웹사이트, 콘텐츠 관리 시스템, 전자상거래 시스템 및 웹 기반 시스템을 구축하게 해준다.
• 아이오닉(Ionic) : 표준 웹 기술을 기반으로 크로스 플랫폼 하이브리드 및 프로그레시브 웹앱을 쉽게 구축하게 해주는 소프트웨어이다.
• 프레임워크7(Framework 7) : 동적인 웹페이지나, 웹애플리케이션, 웹서비스 개발 보조용으로 만들어지는 애플리케이션 프레임워크의 일종이다. 웹페이지를 개발하는 과정에서 겪는 어려움을 줄이는 것이 주 목적으로 통상 데이터베이스 연동, 템플릿 형태의 표준, 세션 관리, 코드 재사용 등의 기능을 포함하고 있다.
• 온센 UI(Onsen UI) : 아파치 코도바 기반 HTML5 하이브리드 모바일 앱 개발을위한 오픈 소스 UI 프레임워크 및 구성 요소이다.
• 머티리얼 디자인(Material Design) : 미니멀리즘을 추구하여 기존의 플랫한 디자인에 입체감과 원근감을 주는 방식의 디자인을 말한다.

표준

	모바일웹 1.0	모바일웹 2.0
네트워크	저속(0.5MB)	고속 - HSDPA,와이브로(Wibro)
프로토콜	WAP 프로토콜 기반의 WAP 브라우징	TCP/IP 기반의 풀브라우징
콘텐츠	JTML & WML	XML & XHTML
사업모델	폐쇄적	개방형, 유무선 통합 모델
기술모델	폐쇄적, 독자적	개별 표준 기반(Mobile OK)
브라우징 방법	WAP 사이트를 브라우징	RFID와 LBS 등과 연계한 유비쿼터스 브라우징, 실세계 태깅, RSS 리더 기능
단말기	휴대전화를 통한 접속	다양한 모바일 단말을 통한 접속
서비스	하이퍼링크만 가능	REST, SOAP, WSDL
인증	집중화된 인증 방식	분산인증, 아이덴티티 매니지먼트
접속	초기 URL을 손으로 입력	자동접속 방식(WINC, 모바일 RFID, 2D)
유저인터페이스	한 손/두 손/핸즈 프리	멀티모달/유비쿼터스 웹 액세스 기술
API 연동	하나의 서비스 외 일부 에이피아이(API)	개방형 API와 매시업 서비스
요금	종량제(고비용)	정액제(저비용)
광고	광고없음	모바일 광고에 기반한 새로운 비즈니스 모델
특징	브라우징 전용	플랫폼으로서의 모바일 웹

종류

모바일 웹브라우저의 종류는 다음과 같다.

• 사파리(Safari) : 애플이 개발한 웹 브라우저이다. 사파리는 아이튠즈와 유사한 북마크 관리 체계를 가지고 있고, 애플의 퀵타임 멀티미디어 기술과 통합되어 있으며, 탭 브라우징 인터페이스를 사용한다. 또한, 웹페이지 렌더링 및 자바스크립트 실행에 웹키트를 사용한다. 웹키트는 웹코어와 자바스크립트코어로 구성되어 있다.케이에이치티엠엘(KHTML)과 케이제이에스(kjs)와 마찬가지로 웹코어와 자바스크립트코어는 자유 소프트웨어이며, 엘지피엘(LGPL,약소 일반 공중 사용 허가서) 라이선스로 배포된다.케이에이치티엠엘 코드로부터 애플이 개선한 일부 코드는 컹커러 프로젝트에 합쳐진다. 애플은 또한 2절로 된 비에스디(BSD) 라이선스와 유사한 오픈 소스로 추가 코드를 공개한다. 사파리가 지원하는 운영체제는 아이오에스(iOS)와 윈도우(Windows)를 지원하였지만, 2018년 9월 28일 부로 윈도우에 대한 지원을 종료한다.
• 크롬(Chrome) : 구글에서 개발한 프리웨어 웹브라우저이다. 버전 27 까지는 웹키트 레이아웃 엔진을 이용했으나 버전 28 이후부터는 웹키트의 포크인 블링크를 사용한다. 구글 크롬은 간단하고 효율적인 인터페이스를 제공하고, 브라우저 틀을 최소화하여 가독범위를 늘렸다. 탭 브라우징 기능이 있으며, 새 탭을 열 때마다 즐겨찾기나 최근에 방문한 홈페이지 등을 표시해주는 것이 특징이다.하지만, 탭이 많으면 많을수록 이용량 차이가 커져 컴퓨터 자체의 사양이 좋지 않으면 속도가 느려지게 된다. 반면에 한 탭이 다운먹더라도 다른 탭에는 영향이 없으며 탭을 닫을 때마다 프로세스가 종료되기 때문에 메모리 누수가 없고 관리가 쉬운 것이 장점이다.
• 오페라(Opera) : 오페라 소프트웨어가 개발한 웹브라우저이다. 엔진은 자체엔진인 프레스토를 사용했으나 2013년 7월 2일 부로 블링크로 교체되었다. 기존에 쓰던 자체 엔진인 프레스토는 오페라 미니의 서버에서 쓰이고, 안드로이드용 및 PC용 브라우저에선 블링크가 탑재된 오페라를 사용하고 있다. 오페라는 열약한 환경에서도 브라우징이 가능하다는 특징이 있는데, 이는 크롬 엔진을 기반으로 하는 브라우저이지만 크롬에 붙어있던 각종 부가기능을 다 떼버리고 최적화 작업을 거친 덕에 크롬보다 가볍고 빠르다.
• 엣지(Edge)  : 마이크로소프트에서 인터넷 익스플로러를 대체하기 위하여 개발한 웹브라우저이다. 윈도우 10 개발 초기에 본격적인 브라우저 현대화를 위해 트라이던트에서 비표준적이고 도태된 기능을 최대한 배제하고 좀 더 표준에 가까운 엣지에치티엠엘(EdgeHTML) 엔진을 개발한 것이 본래의 엣지이며, 이후 엣지에치티엠엘(EdgeHTML)이 윈도우 커널에 묶인 부분이 많아 업데이트 주기가 연 2회로 제한되고 많은 개발자들이 구글 크롬에만 최적화된 웹사이트를 개발하면서 아예 기존 개발 인력을 [[크로뮴](Chromium)으로 전부 옮기고 크로뮴 기반으로 브라우저를 새로 개발하고 있다.
• 웨일(Wale)  : 네이버에서 크로뮴 기반으로 개발한 웹브라우저이다. DEVIEW 2016에서 공개된 웨일은 간편 검색, 팝업 정리, 이미지 번역 등의 기능을 내세웠고, 특히 한 탭 안에서 모든 작업을 해결할 수 있도록 검색을 간편화했다고 한다. 주요 기능에는 하나의 창 안에서 검색 인덱스와 이용자가 선택한 콘텐츠를 한 번에 보여주는 옴니태스킹 기능과 검색 결과물 안에서 모르는 용어나 번역이 필요할 때 단어를 드래그하면 간단한 검색결과를 보여주는 기능인 퀵서치 등이 있다.
• 삼성인터넷(Samsung Internet) : 삼성전자에서 개발한 웹브라우저이다. 엔진은 블링크 엔진을 쓰고 있는데, 크롬과는 렌더링의 차이가 있다.2013년 갤럭시 S4 출시와 더불어 처음 선보인 이후 한동안 선탑재 형식으로만 제공되고 있었으나, 2017년 8월부터 모든 스마트폰에서 사용이 가능해졌다. 대표적인 기능은 삼성 패스를 사용하여 웹사이트에 로그인을 할 수 있는 기능인 보안 웹 자동로그인 기능과 삼성 클라우드,파이어폭스 계정을 통해 다른 장치와 열기 탭 및 즐겨찾기를 동기화 할 수있는 기능인 열려있는 탭 및 북마크 동기화 기능이 있다.
• 파이어폭스(Firefox) : 모질라재단에서 개발한 게코 엔진 기반의 오픈소스 웹브라우저이다. 파이어폭스는 편리한 사용보다 오히려 극한상황의 사용성에 초점이 맞춰진듯한 웹브라우저이다. 낮은 사양의 컴퓨터에 설치한다거나 탭을 수백 개를 열어쓰고, 오류가 튀어나오는 스파게티 코드 자바스크립트로 이루어진 페이지에 들어가는 등 열약한 환경 속에서도 정상 작동하는 기능이 있고 특히, 문제가 심해서 완전히 망가져도 안전모드를 통해 손쉽게 복구할 수 있는 기능도 있다.

참고자료

• 위키백과, 〈사파리 웹 브라우저〉, 《위키백과》
• 나무위키, 〈크롬 웹 브라우저〉, 《나무위키》
• 나무위키, 〈오페라 웹 브라우저〉, 《나무위키》
• 나무위키, 〈엣지 웹 브라우저〉, 《나무위키》
• 나무위키, 〈웨일 웹 브라우저〉, 《나무위키》
• 나무위키, 〈삼성인터넷 웹 브라우저〉, 《나무위키》
• 나무위키, 〈파이어폭스 웹 브라우저〉, 《나무위키》
• 이예근 기자, 〈웹의 새로운 역사를 쓰다〉, 《Di Today》, 2010-03-29
• 재희, 〈모바일 웹#2 - CSS,tech for Mobile Web〉, 《티스토리》

같이 보기

• 모바일
• 웹
• 웹앱
• 모바일앱

이 모바일웹 문서는 모바일에 관한 글로서 검토가 필요합니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 문서 내용을 검토·수정해 주세요.

개발 : 프로그래밍, 소프트웨어, 데이터, 솔루션, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷, 모바일 □■⊕, 사물인터넷, 게임, 메타버스, 디자인 모바일 기술 N스크린 • 네이티브앱 • 모바일 • 모바일앱 • 모바일 온리 • 모바일웹 • 모바일 퍼스트 • 미디어쿼리 • 반응형웹 • 백엔드 서비스 • 웹앱 • 적응형웹 • 하이브리드앱 앱스토어 구글 플레이 • 아마존 앱스토어 • 애플 앱스토어 • 앱스토어 • 원스토어 모바일기기 IC카드 • 갤럭시 • 갤럭시노트 • 스마트워치 • 스마트폰 • 아이팟 • 아이패드 • 아이폰 • 유심(USIM) • 태블릿PC • 피디에이(PDA) 모바일 서비스 골프메신저 • 네이버 밴드 • 딩톡 • 라이즈 • 라인 • 라인택시 • 리멤버 • 마셔바 • 메이퇀 • 바이트댄스 • 배달의민족 • 뱅크샐러드 • 샤잠 • 소다플레이 • 슬랙 • 시럽테이블 • 아자르 • 에코트리 • 원투 • 위챗 • 직톡 • 카카오T(카카오택시) • 카카오지하철 • 카카오톡 • 캐시리플렛 • 쿠브 • 클럽하우스 • 틱톡 • 패밀리링크 • 페이스북 메신저 • 하이퍼커넥트 • 하쿠나라이브 위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반

산업 : 산업, 산업혁명, 기술, 제조, 기계, 전자제품, 정보통신 □■⊕, 반도체, 화학, 바이오, 건설, 유통, 서비스, 에너지, 전기, 소재, 원소, 환경, 직업, 화폐, 금융, 금융사, 부동산, 부동산 거래, 부동산 정책, 아파트, 건물, 토지 정보통신 ICT • IT • 정보 • 정보기술 • 정보통신 • 통신 • 통신기술 정보통신기술 CPU • GPU • MP3 • OTP • P2P • PC • QR코드 • SI • SNS • 검색 • 검색엔진 • 검색포털 • 결제 • 공동인증서 • 네트워크 • 노트북 • 다운로드 • 단말기 • 데이터 • 데이터베이스(DB) • 데이터센터 • 도메인 • 동영상 • 디지털 • 로그 • 로그아웃 • 로그인 • 로봇 • 메모리 • 메신저 • 모바일 • 모바일앱 • 모바일웹 • 문자메시지 • 반도체 • 블로그 • 블록체인 • 사무자동화(OA) • 서버 • 소프트웨어 • 스마트폰 • 스트리밍 • 시스템통합(SI) • 아날로그 • 아이디 • 아이피(IP) • 암호 • 앱 • 업로드 • 운영체제(OS) • 웹 • 웹메일 • 웹브라우저 • 웹사이트 • 웹페이지 • 위키 • 이메일 • 인공지능(AI) • 인공지능 로봇 • 인터넷 • 인터넷게임 • 인터넷서비스 • 인터넷쇼핑 • 인터넷주소 • 전신 • 전자상거래 • 전화 • 채팅 • 챗봇 • 카페 • 컴퓨터 • 컴퓨터 프로그램 • 클라우드 • 클라이언트 • 태블릿 • 터미널 • 패스워드 • 패킷 • 포털 • 프로토콜 • 하드디스크 • 하드웨어 • 호스팅 • 홈페이지 • 휴대전화 한국 IT 회사 CJ올리브네트웍스 • GS ITM • SK C&C • 네이버 • ㈜당근마켓 • 대신정보통신㈜ • 라인㈜ • 롯데정보통신 • 메가존㈜ • 메가존클라우드 • 메타넷디지털 • 미라콤아이앤씨 • 배달의민족 • 삼성SDS • 신세계아이앤씨 • 쌍용정보통신 • 아이티센 • 야놀자 • 엔디에스(NDS) • 엔씨소프트 • 엘지CNS • 우아한형제들 • 이테크시스템 • 카카오 • 쿠팡 • 토스 • 포스코DX • ㈜한글과컴퓨터 • 한화시스템 • 현대IT&E • 현대오토에버 세계 IT 회사 AMD • ASML • IBM • SAP • TSMC • 구글 • 넷플릭스 • 마이크로소프트 • 메타 • 브로드컴 • 삼성전자 • 세일즈포스 • 아마존 • 알파벳 • 애플 • 야후 • 어도비 • 엔비디아(NVIDIA) • 오라클 • 오픈AI • 인텔 • 퀄컴 • 테슬라 • 텐센트 • 페이스북 위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반