[모바일] 모바일 웹, 웹 앱, 하이브리드 앱, 네이티브 앱 정리

[모바일 웹과 앱]

모바일 서비스 개발 정리 : 모바일 웹 / 웹 앱 / 하이브리드 앱 / 네이티브 앱

모바일 서비스 개발방식에는 크게 4가지로 나누어집니다.

1. 모바일 웹
2. 웹 앱
3. 하이브리드 앱
4. 네이티브 앱

---

1. 모바일 웹

모바일 화면에 맞게 구성한 웹

• PC 웹페이지를 모바일 크기에 맞게 만든것
  • 적응형, 반응형 작업이 진행됩니다.
  • 크기가 작은 웹 개발과 다를게 없습니다.
• URL 에 'm' 이 들어가는 것이 전형적인 모바일 웹 형태입니다.

 

---

2. 모바일 웹앱

PC가 아닌 모바일에 중점을 두고 개발을 하여 구동방식이 앱처럼 보이게 제작한 앱

• 앱처럼 보이게 만들었을 뿐 웹과 같습니다.
  • 모바일 기기의 하드웨어에 접근할 수없어 센서, 카메라의 기능을 쓰지 못합니다.

 

---

3. 하이브리드 앱

웹 앱과 네이티브 앱의 기능을 결합해서 개발된 앱

• 모바일 웹앱을 모바일 운영체제로 패키징 합니다.
  • 어플안에서 웹 페이지를 불러오는 형식
  • 내부의 모바일 웹앱의 형태를 외부의 네이티브 앱으로 감싼 형태를 가집니다.
    • 웹 앱인 만큼 브라우저 성능에 영향을 받는다.
    • 네이버 앱이 대표적인 예시이며 React Native, Flutter 가 대표적인 프레임워크입니다.
  • 모바일 API를 사용 가능해서 하드웨어를 제어할 수 있습니다.

• 하나의 코드로 iOS, 안드로이드 둘다 작동합니다.
• 네이티브 API와 브라우저 API를 활용해서 다양한 개발이 가능합니다.
• 네이티브 앱에 비해 기능과 성능면에서 부족하며 디자인에서 많은 취약점을 갖고 있습니다.

 

---

4. 네이티브 앱

모바일 기기에 최적화된 네이티브 언어로 개발된 앱

• 해당 운영체제에 최적화되어 있는 개발 도구로 제작합니다.
  • iOS : Swift / Objective-C
  • 안드로이드: Kotiln / JAVA

• 각 운영체제마다 개발 및 유지보수가 필요함
  • 매번 스토어에 업데이트를 해줘야하는 불편함이 있습니다.
• 모바일 환경에서는 가장 높은 성능을 발휘합니다.

---

수정

• 모바일 웹과 웹앱의 차이점으로 SPA와 풀브라우저 방식을 언급했으나 초기 모바일 개발에 있어서 고려사항이었지만 최근에 많은 웹들이 SPA로 구성되어 있어 차이점으로 보기 힘든거 같습니다.  (다른 의견있으면 댓글로 알려주시면 감사하겠습니다.)  

 

---

정리

모바일 서비스 개발 형태는 4가지로 모바일웹, 웹앱, 하이브리드 앱, 네이티브 앱이 있습니다.
모바일 웹은 기존 웹의 사이즈를 모바일 사이즈로 줄여놓은 방식이며 웹앱은 개발의 중점을 웹이 아닌 모바일을 두고 설계하고 진행하는 방식입니다. 하이브리드 앱은 웹앱을 모바일 형태로 패키징하여 개발합니다. 웹앱과 네이티브의 기능이 결합되어있습니다. 그렇기 때문에 모바일 기기에 대한 제어가 가능해집니다. 네이티브 앱은 모바일 기기에 최적화된 네이티브 언어로 개발하는 방식으로 대표적으로 Swift, 코틀린을 사용하여 개발이 진행합니다.

---

참조 URL

모바일 서비스 개발 방식 : https://brunch.co.kr/@rlatjrwn9086/61

모바일웹 / 웹앱 / 하이브리드앱 / 네이티브앱  

모바일 개발방식에 따른 장단점 : https://m.blog.naver.com/acornedu/221012420292

[모바일] 네이티브앱 vs 모바일웹앱 vs 하이브리드앱

웹과 앱의 개발 방식 : https://6u2ni.tistory.com/25

웹과 앱 개발 방식 종류