당근마켓, 토스, 우아한형제들... 등 주로 모바일 어플리케이션 기반으로 서비스를 제공하는 회사들의 채용 공고를 보면 web frontend 개발자를 채용하고 있다는 걸 알 수 있다. 채용 공고를 보다 생긴 궁금증들을 조합하고 조합해 간단하게 정리해두고자 한다.
🤔 그래서 왜 뽑는데?
(▲ 당근마켓 중고거래 채용 공고 中)
업무 내용에 웹뷰라는 단어가 많이 등장하는 게 보인다. 앱 개발자가 아니라 웹 개발자도 이 웹뷰라는 걸 통해서 개발을 진행할 수 있기 때문인 것 같다. 이 웹뷰를 왜 쓰는지를 알기 위해 앱 개발 방식을 알아보자!
앱을 개발하는 다양한 방법!
1. 웹앱 (Web App)
: 일단 웹앱은 우리가 흔히 생각하는 설치하는 어플리케이션이 아니다! 웹앱은 웹 기술(HTML, CSS, JavaScript 등)을 사용해 개발된 어플리케이션으로, 모바일 기기에서 앱과 유사한 경험을 제공하면서도 웹 브라우저를 통해 접속하는 웹 페이지이다.
※ 그럼 웹앱(Web App) = 모바일 웹인가?
큰 차이가 있지는 않지만, 겉으로 보이는 모습이나 구동방식을 (흔히 생각하는 설치형) "앱처럼" 보이도록 만들어두면 웹앱이라고 부른다.
따라서 웹앱 ≠ 모바일 웹 이지만, 웹앱 ⊂ 모바일 웹 정도로는 볼 수 있겠다.
장점:
- 플랫폼에 독립적으로 개발하므로 개발 비용이 저렴하다.
- 업데이트가 용이하고 쉽게 배포할 수 있다.
- 모든 기기와 운영체제에서 동일한 사용자 경험을 제공할 수 있다.
단점:
- 네이티브 앱보다 성능과 접근성에서 제한이 있을 수 있다.
- 오프라인 환경에서 기능이 제한될 수 있다.
2. 네이티브 앱 (Native App)
: 네이티브 앱은 특정 플랫폼(예: iOS, Android, Windows)에 맞게 개발된 앱이다. 네이티브 앱은 해당 플랫폼의 언어와 기술을 사용하여 제작되기 때문에 최적화되며, 운영체제와 하드웨어의 기능을 모두 활용할 수 있다. 네이티브 앱은 앱 스토어를 통해 다운로드하고 설치하여 사용할 수 있다.
장점:
- 최적화된 성능과 사용자 경험을 제공한다.
- 모바일 장치의 기능을 모두 활용할 수 있다.
- 오프라인에서도 작동할 수 있는 기능을 제공할 수 있다.
단점:
- 플랫폼별로 별도로 개발해야 하므로 개발 비용과 시간이 늘어난다.
- 각 플랫폼에 대한 별도의 코드를 유지해야 한다.
3. 하이브리드 앱 (Hybrid App)
: 위의 두 방식을 보며 느껴지겠지만 장점만 합치고 싶어하지 않겠는가. 하이브리드 앱은 웹 기술로 개발된 웹뷰를 네이티브 앱과 결합한 앱 형태다. 네이티브 앱의 일부 기능을 웹 기술을 통해 구현하면서, 웹뷰를 사용하여 웹 기술로 작성된 콘텐츠를 표시한다.
※ 어라 그럼 웹뷰 = 웹앱(Web App)인가?
아니다!
웹뷰(WebView)는 네이티브 앱 내부에 포함된 웹 브라우저 컴포넌트다. 네이티브 앱에서 웹뷰를 사용하면 웹 페이지를 앱 내에서 로드하여 표시할 수 있다.
장점:
- 플랫폼에 독립적으로 개발 가능하며, 일부 기능은 웹 기술로 구현하면서 네이티브 기능과 통합할 수 있다.
- 개발 비용과 시간을 줄일 수 있다.
- 모든 기기와 운영체제에서 동일한 사용자 경험을 제공할 수 있다.
단점:
- 네이티브 앱에 비해 성능과 접근성에서 약간의 제한이 있을 수 있다.
- 웹뷰를 통해 네이티브 기능을 사용하려면 추가적인 작업이 필요할 수 있다.
🤓 아하!
우리가 흔히 사용하는 많은 어플리케이션들은 각각의 장점을 최대한 활용하기 위해 하이브리드 형태로 제작되고 있기 때문에, 웹 프론트엔드 개발자들도 모바일 앱 개발에 함께 할 수 있는 것이다! 야호!
그럼 웹뷰 어떻게 앱에 적용할까?
URL, 파일 등 다양한 방식이 있는데 각각의 간략한 흐름들만 살펴보자!
1. URL
- 먼저 안드로이드 혹은 iOS 프로젝트를 생성한다.
- 웹뷰를 추가한다.
- 웹뷰가 표시할 URL을 지정하여 웹 페이지를 로드한다.
- 필요할 경우 웹뷰와 네이티브 코드 사이 통신을 구현한다.
(위의 흐름을 코드로 잘 작성해주신 분들이 많이 계시다! 그 중, 안드로이드 웹뷰 만들기가 궁금하다면 : https://stir.tistory.com/329)
파일을 로드하거나, HTML 코드를 바로 작성하고 싶다면 다음과 같이 할 수 있다고 한다..! gpt야 고마워!
2. 로컬 파일 로드
- 안드로이드
webView.loadUrl("file:///android_asset/index.html");- iOS
if let path = Bundle.main.path(forResource: "index", ofType: "html") {
let url = URL(fileURLWithPath: path)
let request = URLRequest(url: url)
webView.loadRequest(request)
}3. HTML 코드 삽입
- 안드로이드
String htmlData = "<html><body><h1>Hello, WebView!</h1></body></html>";
webView.loadData(htmlData, "text/html", "UTF-8");- iOS
let htmlString = "<html><body><h1>Hello, WebView!</h1></body></html>"
webView.loadHTMLString(htmlString, baseURL: nil)앱 개발 과정에 참여해본 적이 없어 바로바로 이해하기에는 다소 어려움이 있었다. 그리고 회사마다 웹뷰를 어느 정도 영역에, 어떤 방식으로 적용하는 지도 명확하지 않다. 깃허브를 뒤져서라도 예시를 찾아보리~!
감사합니다. 이런 정보를 나눠주셔서 좋아요.