[PM온보딩] 참고자료 2 : 앱의 종류
네이티브 앱, 웹 앱, 앱 패키징, 하이브리드 앱...
웹 개발 언어와 프레임 워크 / 앱 개발 언어와 프레임 워크
개발사에서 일하다 보니, “자바스크립트, 리액트, 파이썬, 장고, RN” 과 같은 단어들을 많이 접하게 됩니다. 관심 있게 찾아보거나 공부하지 않으면 사실 무엇을 의미하는지 자연스레 알기가 쉽지 않을 수 있습니다.
그래서
웹 개발을 위해서 어떤 언어와 프레임워크로 개발을 하고, 앱 개발을 위해서 어떤 언어와 프레임워크로 개발을 하는지 프론트엔드 쪽을 정리해 보았습니다.
먼저 프론트엔드와 백엔드에 대해서 짚어볼게요.
FE (Front End) 프론트엔드는
사용자가 직접 접하는 UI 영역을 말합니다. 프론트엔드 개발자는 사용자가 웹이나 앱을 통해 보는 화면을 개발한다고 생각하면 됩니다. 사용자와 상호작용하는 기능들을 구현합니다. 쉽게 앞단이라고 표현하기도 해요.
BE (Back End) 백엔드는
사용자에게 직접적으로 보이지 않는 서버 측의 시스템 영역을 말합니다. 백엔드 개발자는 사용자가 요청한 데이터를 처리하고 저장하며, 동작을 제어합니다. 보안, 성능 등의 품질을 유지하고 개선하는 역할도 함께 수행합니다. 쉽게 뒷단이라고 표현하기도 해요.
프론트엔드 개발을 위해서 어떤 언어와 프레임워크를 사용하는지, 웹과 앱을 나눠 정리하였습니다.
Web Front- end 개발을 위한 언어와 프레임 워크
[html, css, Javascript] 는 프론트엔드 개발을 하기 위해서는 필수적으로 사용되는 언어라고 이해하시면 좋아요.
html은 웹 페이지의 구조를 정의, css는 웹 페이지의 스타일을 정의하고, Javascript는 웹페이지의 동적인 기능을 담당하는 언어입니다.
웹 프론트엔드 개발에서 대표적인 프레임워크로는 React, Vue, Angular 가 있습니다.
React, Vue, Angular 모두 Javascript 기반의 프레임워크로, 프로그래밍 언어인 Javascript를 보완하고, 언어를 보다 쉽게 사용할 수 있도록 각 프레임워크가 가지고 있는 다양한 기능과 도구를 제공하여 개발의 생산성을 높여줘요.
각각의 프레임워크는 각기 다른 방식으로 개발을 진행해야 해요. 각자마다 다양한 기능과 라이브러리를 제공하므로, 개발자는 각 프레임워크의 특징을 파악하여 프레임워크를 선택하고, 해당 프레임워크에 대한 학습과 경험을 쌓을 필요가 있습니다.
APP Front- end 개발을 위한 언어와 프레임 워크
앱 개발에는 안드로이드 용과 IOS 용 각 플랫폼의 네이티브 언어가 존재합니다. 안드로이드 용 언어에는 Java, Kotlin | IOS 용 언어에는 Swift, Objective- C 가 있어요.
다만,
위와 같은 네이티브 언어를 사용하지 않고 Javascript, Dart와 같은 프로그래밍 언어로도 안드로이드 와 IOS 모두에서 작동하는 앱 개발을 할 수 있어요.
웹 개발과 같이 Javascript를 기반으로 한 앱용 프레임워크 React Native (RN)이 있으며, Flutter는 Dart라는 프로그래밍 언어를 기반으로 한 프레임워크입니다.
앱 종류에는 크게는 네이티브 앱과 크로스 플랫폼 앱으로 구분 짓게 되는데요.
여기에 추가로 웹 앱, 앱 패키징, 하이브리드 앱도 같이 적어볼게요.
네이티브 앱은 위에서 설명드린, AOS (안드로이드) 용 과 IOS (애플) 용 언어로 개발한 앱을 의미합니다.
AOS / IOS 각 플랫폼에 해당하는 특정 프로그래밍 언어로 만들어졌기 때문에 속도가 빠르고 안정적인 데다가 다양한 퍼포먼스를 구현할 수 있어요.
AOS 앱 개발자 / IOS 앱 개발자가 따로 있는 경우를 접하셨을 거예요.
네이티브 앱의 단점으로는
AOS 전용 언어와 IOS 전용 언어이기 때문에 서로 호환이 불가능해요. AOS 네이티브 언어로 AOS 앱을 만들어야 하고, IOS 네이티브 언어로 IOS 앱을 만들어야 하죠. 개발 비용, 시간, 유지보수 모두 따로 들 수밖에 없겠죠?
크로스 플랫폼 앱은 네이티브 앱의 이러한 단점을 보완하기 위해 등장한 방식으로, 하나의 코드로 AOS 앱, IOS 앱을 함께 개발할 수 있습니다.
네이티브 언어가 아닌 Javascript, Dart 등의 언어로 하나의 코드를 작성한 후, React Native, Flutter 등의 프레임워크를 통해 AOS와 iOS 앱을 동시에 개발하는 방식이에요.
한 가지의 코드로 AOS 앱, IOS 앱에 대응이 가능하기에 개발 시간과 비용을 줄일 수 있는 장점이 있어요.
하지만 성능이 네이티브 앱보다는 떨어질 수 있으며, 앱 고유 기능을 사용하는 데 제약이 있거나, 사용 가능한 라이브러리가 부족해 다양한 기능 구현이 제한될 수 있어요.
웹 앱(Web App) 은 겉보기에는 앱처럼 보이지만, 사실은 브라우저에서 실행되는 웹페이지예요.
홈 화면에 아이콘을 추가해 마치 앱처럼 사용할 수 있지만, 기기에 실제로 설치되는 것이 아니라 인터넷 주소(URL)를 통해 접속하는 방식이에요.
그래서 일반 앱에서 가능한 푸시 알림과 같은 기능은 대부분 제공되지 않아요.
장점은, 앱스토어나 플레이스토어에 등록하지 않아도 되기 때문에 배포가 빠르고 간편하며, 안드로이드나 아이폰처럼 운영체제를 구분하지 않고 동일하게 제공할 수 있어요.
다만 실제 앱이 아닌 웹 기반이라서, 속도나 기능 면에서 제한이 있을 수 있어요.
앱 패키징(App Packaging) 또는 웹뷰 앱(WebView App)은 웹사이트를 앱처럼 감싼 형태의 앱이에요.
기존 웹페이지를 앱 안에 담아 (포장하여) 실행되는 방식이라 개발 속도가 빠르고 비용도 낮은 편이에요.
하지만 앱처럼 보이긴 해도 실제로는 앱 안에서 웹페이지를 띄우는 구조라, 완전한 앱으로 보기는 어려워요.
이 방식은 앱스토어·플레이스토어 등록 및 심사 과정을 거쳐 실제 앱처럼 설치가 가능하지만, 내부 구조는 여전히 웹 기반이기에 속도나 사용자 경험(UX)에서는 한계가 있을 수 있어요.
하이브리드 앱(Hybrid App)은 이름 그대로, 웹 기술(HTML, CSS, JavaScript)과 앱의 기능을 결합한 형태의 앱이에요.
웹페이지를 앱 안에 담아 보여주면서도, 카메라나 GPS 같은 네이티브 기능도 어느 정도 활용할 수 있어요.
보통 Cordova, Ionic 같은 프레임워크를 사용해서 웹 콘텐츠를 앱 안에 넣고, 일부 네이티브 기능을 연동하는 방식으로 개발됩니다.
크로스 플랫폼 앱과 비슷하게 한 번의 개발로 안드로이드와 아이폰 모두에 대응할 수 있다는 장점이 있어요.
다만, 웹 기반 구조에 더 의존하기 때문에, 복잡하거나 고성능을 요구하는 앱 기능에는 제한이 있을 수 있어요.
web : html, css, Javascript
web_framework : React, Vue, Angular (Javascript)
app_AOS : Java, Kotlin
app_IOS : Swift, Objective- C
app_cross : Javascript, Dart
app_cross_framework : React Native (Javascript), Flutter (Dart)
제가 설명드리지 못한 다양한 언어와 프레임워크가 있으니 한번 찾아보시는 것도 추천을 드려요.
웹 개발 언어와 프레임 워크 / 앱 개발 언어와 프레임 워크에 대해 기존에 썼던 글을 옮겨 내용을 보충했습니다.
https://blog.naver.com/pm-note/223741143478
