[앱 개발 방식] 네이티브 앱, 모바일 웹, 모바일 웹앱, 하이브리드 앱, 웹앱이란?
하수도키
·2021. 9. 19. 13:04
웹 개발을 하다 보면 웹앱, 하이브리드 앱, 웹뷰 등 여러 가지 용어를 듣는다.
단순히 웹만 하면 될 줄 알았는데 웹을 모바일에서 가져가는 순간 용어도 웹앱, 웹뷰, 하이브리드 등 그때 부르고 싶은 대로 부르는 경향이 있었다.
'아 웹을 모바일앱에서 볼 수 있게 해주는거구나'하고 이해하고 지나갔다.
이번에 UI/UX 디자인 책을 보면서 관련 설명이 있길래 보면서 정리해보겠다.
네이티브 앱(Native app)
간단하게 모바일에서 설치되어 있는 앱이라고 생각하면 쉽다.
iOS는 app store, Android는 google play에서 앱을 검색해서 다운로드하여 설치하면 우선 네이티브 앱이라고 생각하자.
(하이브리드 앱있을 수도 있는데 이건 뒤에 설명하겠다.)
웹 개발자 없이 앱 개발자가 만든 거라고 생각하자.
iOS 개발자, Android 개발자들이 각각 만든다.
장점
- 각 운영체제에서 지원하는 다양한 기능을 수행할 수 있다.
- 스마트폰의 다양한 기능이나 센서를 활용할 수 있다.
- 업데이트를 통해 기능을 향상시킬 수 있다.
- 정보보다 기능 위주의 앱 제작에 용이하다.
단점
- 같은 서비스라도 운영체제별로 개별 제작해야 한다.
- 스마트폰 성능에 따라 기능이 제한적일 수 있다.
- 운영체제별로 제작 방식이 다르다.
- 제작 비용 및 시간이 오래 걸린다.
모바일 웹앱(Mobile WebApp)
모바일 웹앱은 HTML로 만든 웹페이지(모바일 웹)를 네이티브 앱에서 보여준다고 이해하자.
후라이드 반, 양념 반이라고 생각하자.(앱 반, 웹 반)
네이티브앱 기반으로 작업된 환경에 웹 페이지를 불러온다.
보통 앱을 쓰다 보면 공유하기 버튼이 있고 이 버튼을 클릭 시에 URL 공유(위 이미지 참고)가 되면 모바일 웹앱이라고 생각하면 된다.
앱 개발자들과 협업한다면 이런 작업일 확률이 높다.
장점
- HTML 언어로 하나의 서비스만 제작할 수 있다.
- 네이티브 앱에 비해 제작 난이도가 쉽다.
- 스마트폰의 성능에 많은 영향을 받지 않는다.
- 기능보다는 정보 위주의 서비스 제작에 용이하다.
단점
- 스마트폰의 다양한 센서와 기능의 활용이 제한적이다.
- 반응 속도가 느리고 인터넷 속도의 영향을 받는다.
- HTML, CSS, Javascript로 디자인되기 때문에 디자인 코딩 과정이 어렵다.
하이브리드 앱(Hybrid App)
- 모바일 웹앱과 같이 HTML 기반으로 하나의 서비스만 제작하고 네이티브 앱처럼 단말기에 설치되는 방식
- React Native, Flutter 등이 있다.
- 네이티브 앱과 모바일 웹앱의 장점을 모은 앱
- 한 번의 모바일 앱 개발로 iOS, Android 및 Windows와 같은 다양한 운영체제에서 효율적으로 수행
기타 : 모바일웹, 반응형 웹, 적응형 웹
모바일 웹(Mobile Web)
HTML 기반으로 작업된 사이트를 모바일 뷰포트에 맞게 표현되고 보이는 웹이다.
한마디로, PC에서 보여지는 웹을 Mobile에 맞게 보인다고 생각하자.
반응형 웹(Responsive Web Design)
하나의 HTML 코드 기반으로 뷰포트에 맞게 보이는 웹이다.
보통 CSS 미디어 쿼리를 이용해 화면 뷰포트에 맞게 보인다.
www.apple.com 사이트를 참고
적응형 웹(Adaptive Web Design)
서버, 클라이언트에서 사용자 기기를 체크해서 PC, MOBILE을 구분하여 PC용, MOBILE 용 소스를 보여준다.
네이버를 통해 예를 들자면.
www.naver.com 는 PC용
m.naver.com 는 모바일용 이렇게 구분한다.
더 깔끔하게 작업이 가능하지만(PC와 MOBILE 고려하지 않고 각각 디자인을 할 수 있다.) 반응형 웹보다 작업 시간이 더 많이 드는 게 단점이다.
결론
웹만 작업하면 될 줄 알았는데 요새는 모바일을 많이 사용하니 모바일 쪽도 대응하면 될 줄 알았다.(사파리, 크롬 모바일 브라우저 등)
근데 앱에다가 웹을 넣는 모바일 웹앱까지 신경 써야 되다보니 iOS, Android 기기에 대한 이해도 있어야 하고 버그도 신경써야 한다.
한마디로 고려할 사항이 너무 많다. 기존에는 IE만 신경 쓰면 되었는데 이제는 iOS, Android 버전까지 챙겨야 한다.
Html, CSS 최신 명세에 따른 코드를 작성하기에는 테스트를 꼭 거쳐야 한다.
따라서, 기획단계에서 지원할 브라우저, 앱 버전 등을 정확히 정의해야 어떤 코드를 작성할지 정확하게 알 수 있다.
