앱 개발 방식 종류 - 네이티브 앱, 웹 앱, 모바일 웹, 하이브리드 앱

신혜린·2024년 8월 22일

목록 보기

27/27

참고자료 |
네이티브 앱, 하이브리드앱,웹 앱, 모바일 웹이 뭘까?
2024 앱개발 방식 한 눈에 비교하기 (네이티브앱, 웹앱, 하이브리드앱)
[FE] 모바일 app 기반 회사는 왜 웹 개발자를 채용할까?
[IT 노트] 앱 개발 유형 / 네이티브 앱 / 하이브리드 앱 / 크로스 플랫폼
Flutter(플러터)란?
모바일 앱 종류와 특징 – 네이티브 앱, 크로스 플랫폼, 웹 앱, 하이브리드 앱
모바일웹 / 웹앱 / 하이브리드앱 / 네이티브앱
웹과 앱, 컴퓨터와 스마트폰을 통해 고객에게 가닿는 길
앱의 종류 : 네이티브 앱 vs 웹 앱 vs 하이브리드 앱

각기 다른 앱 개발 방식, 헷갈리는 용어들을 정리하기 위해 쓰는 글

네이티브 앱

네이티브 앱은 우리가 흔히 '앱' 이라고 말하면 떠오르는 가장 보편적인 앱 개발 방식이다.
스마트폰이 탄생하면서 생겨난 가장 기본적인 형태의 앱을 뜻함.

Java, Kotiln, Swift, Objective-C를 비롯한 iOS 및 안드로이드OS가 요구하는 언어

안드로이드OS: 주로 안드로이드 스튜디오에 Kotlin으로 개발되어 플레이 스토어에 업로드 된다.
iOS: 주로 xcode에서 Swift로 개발되어 앱스토어에 업로드 된다.

이 외에도 안드로이드OS와 iOS에서 동시 개발이 가능한 Flutter, React-Native와 같이 크로스 플랫폼 모바일 앱 개발을 위한 프레임워크도 존재한다.

ex) Instagram, AirBnb, Facebook

웹 앱 (feat. 모바일 웹)

스마트폰의 기종이나 기기에 상관없이 모든 단말기에서 같은 콘텐츠를 볼 수 있는 웹사이트를 뜻한다.
웹사이트지만, 앱 크기에 맞춰 반응형이나 적응형 방식으로 개발했기 때문에 모바일 기기에서 사용하기 적합한 형태로 만들어진다.
웹이기 때문에 웹 기술 (HTML, CSS, JS)을 이용해서 개발된다.
이처럼 모바일 앱과 비슷한 UI/UX를 지원하는 웹사이트를 웹 앱이라고 한다.

네이티브앱처럼 스토어에 들어가서 설치하는 형태 ❌
크롬, 사파리 등의 브라우저에 접속해서 이용 ✅
구동 방식이 앱처럼 보이게한 웹 ✅

💡 모바일 웹?
모바일 웹 역시 웹 앱과 동일하게 웹 기술을 이용해서 개발되지만 구성 및 실행 방식에 차이가 있다.

웹 앱 : 좀 더 '앱처럼' 구현, 단일 페이지 방식(SPA, Single Page Application)

모바일 웹 : '모바일 화면에 맞게' 풀 브라우저 방식(Full Browsing)

단일 페이지 방식(SPA, Single Page Application)
브라우저 최초 한 번 페이지 전체를 받아오고, 화면의 일부분이 변경 혹은 요청될 때 해당 부분만 Ajax를 통해 데이터 바인딩을 하는 방식

풀 브라우저 방식(Full Browsing)
화면 일부분이 변경될 때 화면 전체 내용을 서버에서 새로 받아오는 방식 (페이지 리로드할 경우 속도가 느리며, 모바일 기기 특성상 이동 중 서버 접속 장애가 발생할 위험이 있음)

ex) 네이버, 다음, 구글 웹 앱

하이브리드 앱

네이티브 앱(혹은 크로스 플랫폼 방식)과 웹 앱 개발 방식으로 모두 사용하는 방식을 뜻한다.
앱의 화면이나 기능 등 콘텐츠 영역은 웹 기반으로 작성하고, 겉 모습은 앱 마켓 등록과 설치를 위해 네이티브 앱으로 포장한 형태라고 봐도 된다.
두가지 개발 방식을 이용하기 때문에 웹과 앱의 API를 모두 사용할 수 있다.

네이티브 또는 크로스 플랫폼 방식으로 앱을 만들되, 화면 안에 요소를 직접 만들지 않고 브라우저 역할을 하는 웹 뷰라는 요소를 만들어 대신 웹 화면을 띄운다.

웹 뷰는 지정된 주소로 접속해서 웹 앱 형태로 만들어진 웹사이트를 화면에 보여줌

사용자는 웹 뷰를 통해 웹사이트로 만들어진 기능을 앱 기능처럼 사용한다.

그렇다면, 웹 뷰 = 웹 앱인가? -> ❌
웹 뷰는 네이티브 앱 내부에 포함된 웹 프라우저 컴포넌트이다.
네이티브 앱에서 웹뷰를 사용하면, 웹 페이지를 앱 내에서 로드하여 표시하는 것.

ex) 네이버 앱, 다음 앱, 금융기관 앱

🖥️ 간단히 살펴보는 웹뷰 앱 적용 방식

1. URL

안드로이드 혹은 iOS 프로젝트 생성

웹뷰 추가

웹뷰가 표시할 URL을 지정하여 웹 페이지 로드

필요할 경우 웹뷰와 네이티브 코드 사이 통신 구현

2. 로컬 파일 로드

안드로이드

webVeiw.loadUrl('file:///android_asset/index.html');

if let path = Bundle.main.path(forResource: "index", ofType: "html") {
    let url = URL(fileURLWithPath: path)
    let request = URLRequest(url: url)
    webView.loadRequest(request)
}

HTML 코드 삽입

안드로이드

String htmlData = "<html><body><h1>Hello, WebView!</h1></body></html>";
webView.loadData(htmlData, "text/html", "UTF-8");

let htmlString = "<html><body><h1>Hello, WebView!</h1></body></html>"
webView.loadHTMLString(htmlString, baseURL: nil)

네이티브 앱, 웹 앱(모바일 웹), 하이브리드 앱 비교

신혜린

개 발자국 🐾

이전 포스트