모바일(유동형) 웹/앱 이론

Web App

Native App

- ios (iphone operated system), android(google),윈도우즈 폰7(MS) 와 같은 모바일 기기에 직접 설치되고 운용되는 전용 어플리케이션이다.

• ios → object C (mac에서만 작업 가능) → .ipa
• android → java (mac/window) → .apk
• 앱스토어에 등록하고 판매

Mobile Web

- 모바일 웹은 일반적인 웹 기술로 개발되고 모바일 브라우저에 의해 실행되는 웹 애플리케이션을 통칭 하지만 모바일 웹앱과 조금은 구분되는 개념으로 일반적인 웹 사이트의 느낌을 모바일로 그대로 옮긴 형태라 할 수 있다. == Mobile Web App

• 모바일 브라우저에서 URL을 통해 접근하는 웹 사이트
• html,css,js.. 를 사용해서 개발
• 앱스토어에 등록 불가능
• 웹 호스팅,서버에 등록

Mobile Web App

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

• html,css,js.. 를 사용해서 개발
• 앱스토어에 등록 불가능
• 웹 호스팅,서버에 등록

Hybrid App - ex) naver / daum 앱

• html,css,js.. 를 사용해서 개발
• 앱스토어에 등록하고 판매(.ipa , .apk )
• PhoneGap, Titanium 플랫폼을 이용하여 웹파일을 앱파일로 만들어 내부는 웹 외부는 앱으로 보이게 끔 할 수 있다.

PWA - ( Progressive Web App )

 

해상도

- device-pixel-ratio : 픽셀 밀도

 

기기별 대표 해상도

• 320 x 480 → Ipone3 ( 모바일 해상도의 기준 )
• 640 x 960 → Ipone4
• 960 x 1440 → 픽셀밀도 => 3
• 1280 x 1920 → 픽셀밀도 => 4
• 해상도 정리 사이트 https://screensiz.es/galaxy-siv

Vendor object Galaxy SIV | Viewport Sizes and Pixel Densities for Popular Devices

Viewport

모바일 기기에서 Media Query가 예상한대로 작동하기 위해서는
웹 브라우저의 가상 해상도를 물리적 해상도와 일치시킬 필요가 있습니다.
모바일 웹브라우저들은 웹브라우저의 가상 해상도를 조절할 수 있는 viewport메타 태그를 지원합니다.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=yes , target-densitydpi=medium-dpi">

                                                                                            ↓

<meta name="viewport" content="width=device-width, initial-scale=1">

iPhone Splash Screen

스플래시 스크린이란 웹 페이지를 홈 화면에 추가한 후 실행할때 잠깐동안 로고나 이미지를 보여주고 사라지는 화면입니다. 

<link rel="apple-touch-startup-image" href="startup.png">

기준 - 320 x 480 px

iPhone 폰트사이즈 고정하기 ( 아이폰만 사용 )

모바일 디바이스의 경우 화면을 가로/세로로 전환할 수 있습니다. 웹킷 기반의 웹 브라우저는 뷰포트의 크기에 따라 폰트 사이즈가  변경되는데 보통 그러한 기능이 레이아웃을 깨트리는 경우가 발생하여 CSS를 이용해 폰트 사이즈를 고정시키기도 합니다.
폰트 사이즈를 고정시키려면 고정시킬 곳에 다음 CSS를 추가하면 됩니다.

-webkit-text-size-adjust:none; // 약식
-webkit-text-size-adjust - auto | none | N% (default auto)

iPhone 상단 바 컬러 설정 ( 모바일 웹앱 )

아이폰 상단의 상태 Bar의 경우 3가지 테마를 Meta 태그로 설정할 수 있습니다. 특별한 기능이 있는건 아니지만 디자인을 
좀 더 통일성 있게 만들수 있다는 점에서 원하는 색상으로 적용하시면 됩니다.

<meta name="apple-mobile-web-app-status-bar-style" content="default">

※ content 값 = > default (기본) / black (검정) / black-translucent (반투명 검정)

iPhone 홈 화면 아이콘 등록

-아이폰의 홈화면 등록하기에 사용될 아이콘을 저장한다.

-png 파일 크기 기준 114 x 114 px

// 반사광 효과를 주는 경우 
<link rel="apple-touch-icon" href="home-icon-name.png">

// 반사광 효과가 없는 경우 
<link rel="apple-touch-icon-precomposed" href="home-icon-name.png">

iPhone 홈 화면 전체 화면 모드

웹 페이지를 홈 화면으로 추가하면 특정 Meta 태그를 통해 웹 브라우저의 상단의 주소 표시줄과 하단의 버튼 Bar를 없앨 수 있습니다. 
단 홈 화면에 추가한 후 홈 화면의 아이콘을 통해 접속 했을 경우에만 적용이 됩니다.

iPhone

<meta name="apple-mobile-web-app-capable" content="yes">

작동하지 않을 시(android) JS code

<script type="text/javascript"> 
window.addEventListener("load",function(){ 
setTimeout(scrollTo,0,0,1); 
},false); 
</script>

기본 어플 호출하기

<a href="tel:1588-2120 ">블루웹 고객센터</a>  //전화걸기
<a href="sms:010-0000-0000">문자보내기</a>  //문자보내기
<a href="mailto:aaa@nate.com">메일보내기</a>  //메일보내기

아이폰의 경우 전화번호 형식으로 된 Number 를 자동으로 <a href="tel:Number"> 태그 처리 하는 경우가 존재한다.

<meta name = "format-detection" content = "telephone=no"/> //자동 a 처리 막기

터치 영역 설정

사용자가 터치하는 영역은 44px*44px 이 기준이다.

스마트폰 접속시 모바일페이지로 접속

어떻게하면 기존에 웹페이지에서 pc로 접했을때와 스마트폰으로 접했을때 보여지는 페이지를 분류하냐는 겁니다. 
이 문제또한 자바스크립트를 통해 스마트폰의 종류를 구별한다음 알맞게 페이지 브라우징 처리를 할수있습니다.

<script>
var uAgent = navigator.userAgent.toLowerCase();
var mobilePhones = new Array('iphone','ipod','android','blackberry','windows ce',
'nokia','webos','opera mini','sonyericsson','opera mobi','iemobile');
for(var i=0;i<mobilePhones.length;i++)
if(uAgent.indexOf(mobilePhones[i]) != -1)
	document.location="링크될 주소" ex) https://m.naver.com;
</script>