#앱 #하이브리드앱 #IOS #Android #숫자키패드 #설정 #input #type #숫자 #네이티브앱 #웹앱 #하이브리드앱

input에 대한 설명 전에 앱에 대한 내용을 알고 넘어가야 할것 같다. 

앱에는 크게 네이티브앱, 웹앱, 하이브리앱 이라고 카테고리를 지어 구분할수 있다. 

하나씩 차근차근히 알아보자 

 

먼저 네이티브앱 ( Native App ) 

네이티브앱이란 각 OS(안드로이드, IOS)의 특정 플랫폼에 맞춰 개발되는 앱으로 각 OS가 제공하는 기본기능을 사용할수 있다. 대표적으로 카메라, 마이크, GPS등에 대한 접근 권한을 요구하여 사용할수 있다. 

이는 앱에 대한 자유도가 높아지지만 개발에 대한 시간 비용이 높고 시장성이 낮은 한계가 있다. 

 

네이티브 앱에 대한 장접으로는 

1. 각 OS에 맞춰 최적하 방식으로 구현을 하기 때문에 앱에 대한 속도가 빠르고 안정적이다. 
2. 높은 사양의 그래픽 디자인 구현이 가능하다. 
3. 각 OS가 제공하는 기본기능을 통해 디바이스에 대한 전체 권한을 사용할수 있다. ( 카메라, 마이크, GPS )

 

네이티브 앱의 단점으로는 

1. 시장성이다. 각 OS별 개발언어가 상당히 다르다. 네이티브앱으로만 작업시 작업시장이 작은점은 비용과 시간이 많이 든다. 
2. 앱 수정시 즉시 대응이 불가하다. 이전에는 1주일이 넘게 각 스토어에서 심사를 하기도 했던 적이 있다. 
요즘은 안드로이드 1일 IOS 3일 이내에 심사가 이뤄 지는 것으로 알고 있다.

두번째로 알아볼 방식은 웹앱( Web App )이다. 

통상 앱스토어에 배포를 하게 되는데 이때 사용하는 방법이 웹뷰를 통해 모바일 홈페이지를 표현하는 구조이다. 

한마디로 보여지는 프레임은 앱에서 제공하는 웹뷰를 통해 모바일 홈페이지를 화면에 표현한다라고 생각하면 좋다. 

 

웹앱(Web App)에 장접으로는 

1. 인터넷 브라우저를 기반으로 작동을 하기 때문에 앱에 대한 의존도가 적다. 
2. 표준 웹 언어로 만들기 때문에 앱 개발비용에 비해 제작 비용이 저렴하고 구축 기간도 짧다. 
3. 수정사항 발생시 앱 배포를 통해 수정이 아닌 웹에 페이지 수정을 통해 즉각 수정이 가능하다.

웹앱(Web App)에 단점으로는 

1. 디바이스 접근 권한이 없어 카메라, 마이크, Gps 기능 사용이 불가하다. 
2. 네이티브 앱에 비해 구동속도와 안정성이 떨어진다.

 

이러한 단점을 극복하고자 웹과 앱의 장점을 하나로 합친 하이브리드 앱(Hybrid App)을 소개한다. 

하이브리드 앱(Hybrid App)이란? 

네이티브 앱과 웹앱의 개발방식을 모두 사용하는것을 하이브리드 앱이라고 할수 있다. 

 

하이브리드 앱(Hybrid App)의 장점으로는 

1. 웹기술 기반으로 제작하지만 모바일 API및 디바이스 기능(카메라, 마이크, GPS)등을 사용할수 있다. 

2. 네이티브에 비해 개발비용이 적고 수정사항에 대한 유연성이 좋다. 

 

하이브리드 앱(Hybrid App)의 단점으로는

1. 네이티브 앱 개발지식이 필요하다. 

2. 웹을 표현하기때문에 브라우저 성능에 대한 영향도가 크다. 

출처 : https://blog.codef.io/app_kinds/

하이브리드 앱을 사용시에 웹과 앱은 서로 기능을 통신을 통해 사용하는데 

통상 브릿지 함수라고 한다. 

 

브릿지란?

안드로이드와 웹뷰의 통신을 위해 만들어진 JavaScript인터페이스이다. 웹뷰에서는 각 앱에 대한 함수 호출을 직접할수 없어 브릿지라는 통로를 통해 호출한다. 브릿지는 웹뷰와 앱에 대한 인터페이스 구현체라고 할수 있다. 

 

간단히 개발내용을 알아보면 

1. 웹뷰(앱)에서 웹에서 호출할 함수를 정의 해둔다. (NativeAppFunction)

2. 웹에서 해당 함수를 Javascript형태로 호출하면 웹뷰에있는 해당 함수를 호출하여 웹뷰 안에 정의되어있는 함수를 호출하여 값을 가져올수 있다. 

 

이렇듯 요즘 추세는 네이티브 앱 보다는 하이브리드앱을 사용하게 된다. 이때 웹개발을 진행하면서 키패드 창을 조작하고 싶을때가 있다. 각 OS별로 차이가 있으니 알고 넘어가면 좋을것 같다. 

 

 Android 같은경우는 Input에 대한 Type을 number로 하면 안드로이드 키패드를 호출한다. 

but IOS는 아래와 같이 input mode에 대한 선언을 해줘야 키패드 형태로 표현이 가능하며 IOS에서는 숫자만 나올때는 위와 같이 사용하면 되지만 - * #을 사용할때는 type을 tel로 지정하면 해당 키패드가 출력된다.  

 

1. Android 

<input type="number" />

2. IOS 

<input type="number"  inputmode="numeric" pattern="[0-9]*" />

왼쪽은 Type number와 input mode를 추가한 내역이며 오른쪽은 type을 tel로 지정하였을때 표시되는 키패드이다.