모바일웹 편집하기

[[파일:모바일웹.jpg|썸네일|300픽셀|모바일웹 이미지]]

'''모바일웹'''<!--모바일 웹-->(mobile web 또는 mobile internet)은 [[스마트폰]]이나 [[노트북]]과 같은 모바일 장비를 이용해 이동 중에도 커뮤니케이션, 정보 검색, 간편 거래 등을 할 수 있는 인터넷 서비스이다.

==개요==
모바일웹이란, 스마트폰을 비롯한 모바일 장치에서 접속하는 브라우저 기반의 인터넷을 의미한다. 이러한 정의는 무선 랜을 갖춘 노트북을 이용해 인터넷에 접근하는 고정형 서비스는 배제하고, 스마트폰이나 태블릿 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용 홈페이지를 모바일 스크린 크기로 줄여놓은 풀 브라우징 방식으로 페이지를 이동해 앱에 비해 속도가 느리다는 단점을 가지고 있다.

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

* [[에이치티엠엘]]5 (HTML5) : 하이퍼 텍스트 마크업 랭귀지(Hyper text Markup Language)의 약자로서, 인터넷 웹사이트 등 하이퍼텍스트를 편집하기 위한 코딩 언어이다.
* [[씨에스에스]] (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,이전 명칭:폰갭,PhoneGap) : 니토비(Nitobi)가 만들고 어도비 시스템즈가 인수한 모바일 개발 프레임워크이다. 소프트웨어 프로그래머들이 오브젝티브-C 처럼 기기에 특화된 언어들 대신 자바스크립트, HTML5, CSS3를 이용하여 모바일 기기를 위한 응용 프로그램들을 만들 수 있게 한다.
* [[티타늄]](Titanium) : 웹사이트 및 웹시스템의 서버 및 클라이언트를 개발하게 해주는 소프트웨어이다. 모든 유형의 웹사이트,콘텐츠 관리 시스템,전자 상거래 시스템 및 웹 기반 시스템을 구축하게 해준다.
* [[아이오닉]](Ionic) : 표준 웹 기술을 기반으로 크로스 플랫폼 하이브리드 및 프로그레시브 [[웹앱]]을 쉽게 구축하게 해주는 소프트웨어이다.
* [[프레임워크]]7(Framework 7) : 동적인 웹페이지나, 웹애플리케이션, 웹서비스 개발 보조용으로 만들어지는 애플리케이션 프레임워크의 일종이다. 웹페이지를 개발하는 과정에서 겪는 어려움을 줄이는 것이 주 목적으로 통상 데이터베이스 연동, 템플릿 형태의 표준, 세션 관리, 코드 재사용 등의 기능을 포함하고 있다.
* [[온센]] UI(Onsen UI) :  아파치 코도바 기반 HTML5 하이브리드 모바일 앱 개발을위한 오픈 소스 UI 프레임워크 및 구성 요소이다.
* [[머티리얼 디자인]](Material Design) :  미니멀리즘을 추구하여 기존의 플랫한 디자인에 입체감과 원근감을 주는 방식의 디자인을 말한다.

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

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

* '''[[사파리]]'''(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) : [[모질라재단]]에서 개발한 게코 엔진 기반의 오픈소스 웹브라우저이다. 파이어폭스는 편리한 사용보다 오히려 극한상황의 사용성에 초점이 맞춰진듯한 웹브라우저이다. 낮은 사양의 컴퓨터에 설치한다거나 탭을 수백 개를 열어쓰고, 오류가 튀어나오는 [[스파게티 코드]] 자바스크립트로 이루어진 페이지에 들어가는 등 열약한 환경 속에서도 정상 작동하는 기능이 있고 특히, 문제가 심해서 완전히 망가져도 [[안전모드]]를 통해 손쉽게 복구할 수 있는 기능도 있다.

==참고자료==
* 위키백과, 〈[https://ko.wikipedia.org/wiki/%EC%82%AC%ED%8C%8C%EB%A6%AC_(%EC%9B%B9_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80) 사파리 웹 브라우저]〉, 《위키백과》
* 나무위키, 〈[https://namu.wiki/w/%ED%81%AC%EB%A1%AC(%EC%9B%B9%20%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80) 크롬 웹 브라우저]〉, 《나무위키》
* 나무위키, 〈[https://namu.wiki/w/%EC%98%A4%ED%8E%98%EB%9D%BC(%EC%9B%B9%20%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80) 오페라 웹 브라우저]〉, 《나무위키》
* 나무위키, 〈[https://namu.wiki/w/%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C%EC%86%8C%ED%94%84%ED%8A%B8%20%EC%97%A3%EC%A7%80 엣지 웹 브라우저]〉, 《나무위키》
* 나무위키, 〈[https://namu.wiki/w/%EC%9B%A8%EC%9D%BC(%EC%9B%B9%20%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80) 웨일 웹 브라우저]〉, 《나무위키》
* 나무위키, 〈[https://namu.wiki/w/%EC%82%BC%EC%84%B1%20%EC%9D%B8%ED%84%B0%EB%84%B7 삼성인터넷 웹 브라우저]〉, 《나무위키》
* 나무위키, 〈[https://namu.wiki/w/%ED%8C%8C%EC%9D%B4%EC%96%B4%ED%8F%AD%EC%8A%A4(%EC%9B%B9%20%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80) 파이어폭스 웹 브라우저]〉, 《나무위키》
* 이예근 기자, 〈[http://www.ditoday.com/articles/articles_view.html?idno=11163 웹의 새로운 역사를 쓰다]〉, 《Di Today》, 2010-03-29
* 재희, 〈[https://webclub.tistory.com/493?category=541913 모바일 웹#2 - CSS,tech for Mobile Web]〉, 《티스토리》

==같이 보기==
* [[모바일]]
* [[웹]]
* [[웹앱]]
* [[모바일앱]]

{{모바일|검토 필요}}