mobile web

mobile web

모바일 웹은 스마트폰, 피처폰, 태블릿 PC를 비롯한 모바일 장치에서 접속하는 브라우저 기반의 인터넷을 의미한다.

모바일 OS (Operating System)에는 안드로이드(구글), IOS(애플), MS(마이크로소프트) 3가지가 있다.

 

 

Native App

아이폰과 같은 모바일 기기에 직접 설치되고 운용되는 전용 애플리케이션이다. 각 프로그래밍 언어와 SDK로 개발해야 하며 기기의 고유정보에 직접 접근이 가능하다. 기기의 하드웨어, 메모리 등과 밀접하게 상호작용 할 수 있어 모바일에 고성능 애플리케이션을 개발할 수 있으며 앱스토어에 등록하고 판매할 수 있다.

 

Native App 개발 프로그램

모바일 os	구글 안드로이드 app	애플 IOS app
개발 프로그램	java	object-c
설치파일 (확장자)	.apk	.ipa

 

 

 

Mobile Web

최신 모바일 기기는 풀 브라우징을 지원한다. 모바일 웹은 일반적인 웹 기술로 개발되고 모바일 브라우저에 의해 실행되는 웹 애플리케이션을 통 칭. 하지만 모바일 웹앱과 조금은 구분되는 개념 으로 일반적인 웹 사이트의 느낌을 모바일로 그대 로 옮긴 형태라 할 수 있다. 앱스토어에 등록·판매할 수 없다.

Mobile web 개발 프로그램
html5 + css3 + javascript(jQuery) + php/asp/jsp + DB

 

 

 

Mobile Web App

일반적인 웹사이트보다 모바일에 더 최적화 되고 네이티브 애플리케이션화된 형태를 한정하는 표현. 모바일 웹앱은 웹 기술만 사용해서 풀 스크린모드, 애니메이션 효과, 터치 상호작용, 비동기통신, 로 컬 저장소, 오프라인 지원, 향상된 스타일 등을 구 현하여 모바일 환경에서 네이티브 애플리케이션과 비슷한 실행환경, 사용자 경험을 제공하는 한 형태.

모바일 브라우저에서 실행된다. Mobile Web에 Native App 한스푼

Mobile web 개발 프로그램
html5 + css3 + javascript(jQuery) + php/asp/jsp + DB

 

 

 

Hybrid App

이름에서도 유추할 수 있듯이 모바일웹과 네이티브앱의 특징을 조합한 형태를 말한다. 일반적인 웹 기술로 도 모바일 기기의 고유 정보와 상호작용할 수 있 게 하고 앱 스토어에 올리고 판매도 할 수 있는 형태의 애플리케이션이다. 모바일 기기의 고유 기능 을 웹 기술로 호출할 수 있는 추상화된 API가 필요 하다. PhoneGap, Titanium을 이용하여 내부는 웹 으로 외부는 앱으로 보이게 끔 할 수 있다.

Mobile web 개발 프로그램
html5 + css3 + javascript(jQuery) + php/asp/jsp + DB

PhoneGap (코르도바)
설치가 가능한 파일 (.apk / .ipa)로 만들어준다. 앱스토어에 등록·판매할 수 있다.

 

가장 대표적인 하이브리드 앱

좌 네이버 웹 / 우 네이버 앱

 

---

 

기기별 해상도

모바일 디바이스 해상도는 크게 물리적(Pysical) 해상도와 논리적(Local) 해상도로 나눌 수 있는데,

모바일 웹 개발/퍼블리싱 시에는 논리적 해상도를 사용하며, 이미지는 픽셀 비율만큼 곱한 사이즈를 사용해야 선명한 이미지가 표출된다.

 

 

Apple iPhone 12 Pro Specifications

물리적인 사이즈 (Pysical)	논리적인 사이즈 (Local, device-size)	픽셀 밀도 (device-pixel-ratio)
1170px × 2532px	390p × 844px	3 xxhdpi

위와 같다면 HTML/CSS는 390px 기준으로 작업하며 각 이미지는 3배 사이즈로 작업해야 선명한 이미지가 표출된다.

 

 

주요 기기별 해상도

해상도	기종	픽셀밀도
320 × 480	아이폰3G(S), 안드로원, 레전드 (최저 해상도, 모든 해상도의 기준)	1
480 × 800	넥서스원, 넥서스S, 디자이어(HD), HD2, 갤럭시S/A, 시리우스, 베가, 옵티머스Q, 올레패드
640 × 960	아이폰4, 4S	2
1280 × 720	갤럭시노트2, 갤럭시s3, 베가r3

＊아이폰 3G의 경우 실제 가로 해상도는 320px이지만 아이폰의 사파리 웹 브라우저는 기본적으로 980px인 것처럼 작동한다.

 

 

 

아래 사이트에서 모바일 해상도를 확인할 수 있다.

 

http://uhb.kr/book/wiki/rwd/resolution/

UhBee's RESOLUTION LAB

 

https://viewportsizer.com/devices/

Viewport Size by Device / Phone Screen Dimensions | Viewport Sizer Tool

 

https://yesviz.com/mobiles.php

Screen sizes, viewport size and CSS media queries for popular Smart Phones | YesViz