요즘 여러 iOS 관련 지식을 얻기 위해 콘퍼런스 영상과 블로그 영상을 열심히 찾아보고 있는데
오늘은 카카오 컨퍼런스인 if(kakao) dev “카카오페이 WebView에 관한 이슈와 리팩토링에 관한 발표” 영상을 봤다.
아직 취준생인 나에겐 어려운 내용이었는데 그래도 열심히 들으면서 정리했었다.
카카오페이는 Native와 WebView를 적절히 함께 사용해서 사용자의 경험을 높인다고 했다.
그런데 여기서 WebView는 대체 뭐지?라는 의문이 생겼다.
전혀 몰랐다..ㅋㅋㅋ 당연히 Native일줄!
찾아보니까 페이스북, 인스타그램, 트위터도 Webview를 사용한다고 한다! 와~~
그러면 대체 Webview라는 게 뭘까?? 그리고 왜 WebView를 사용할까? browser와 뭐가 다를까?
그전에, Native App에 대해 먼저 정리해 보자.
- native app은 모바일 디바이스를 위해 특별히 만들어진 소프트웨어 애플리케이션이다.
- 안드로이드 또는 iOS 운영체제에서 실행된다. (물론 Windows OS, Blackberry OS도 있다)
- native app는 애플 컴퓨터에 미리 설치되고 구성된 사진, 메일 또는 연락처와 같은 응용프로그램, Mac 및 PC와 같은 플랫폼을 의미한다.
- 그러나, 모바일 웹 앱의 관점에서 native app은 특정 디바이스 플랫폼에서 작동하도록 만들어진 앱을 의미한다.
- native app은 특정한 프로그래밍어를 사용한다. 즉, 네이티브 앱은 오직 코드화된 환경에서만 작동할 수 있다는 것이다.
안드로이드 운영체제는 안드로이드 디바이스에서만 iOS는 아이폰에서만 작동할 수 있다는 것이다.
- 개발자는 특정 디바이스와 OS에서 사용하기 위해 native app을 개발하기 때문에, 장치별 하드웨어와 소프트웨어를 사용할 수 있다.
- native 앱은 최근 기술을 사용할 수 있고 최적화된 성능을 제공한다.
native 앱은 디바이스의 운영체제에서 작업할 수 있어 더 빠르고 유연하게 동작한다. 만약 다양한 디바이스의 사용자가 앱을 사용한다면, 개발자는 각 디바이스에 대한 다른 앱 버전을 만들어야 한다. 예를 들어, Facebook은 iOS와 안드로이드, 모바일 웹에 HTML5 동일한 코드로 작성된 적이 있었는데, iOS에게 너무 느려서 따로 다시 작성해야 했다. 이렇게 native app으로 개발하면서 UI를 구동하는 main thread 또는 네트워킹을 진행하는 background thread와 같은 복잡한 작업의 균형을 재조정할 수 있다.
+ 예외적으로, React Native와 같은 프레임워크는 운영체제 전반으로 많은 부분의 코드의 재사용이 가능하다.
- 기존의 웹 브라우저를 사용하지 않고(!) 웹 콘텐츠를 앱에 보여줄 수 있는 기술
- 주소바와 브라우저 탭을 없애고 실시간으로 웹 페이지를 보여줄 수 있는 임베디드 브라우저
Webview는 하이브리드 앱의 한 종류다. 실질적으로, webview 앱과 native 앱은 거의 차이가 없다. webview 앱은 일반적인 native app처럼 사용자의 디바이스에서 다운로드할 수 있고, 런칭 아이콘을 제공한다. 그러나 native 모바일 프로그래밍어의 새로 나온 코드를 필요로 하는 대신에, web 코드로 많은 부분의 기능을 도출할 수 있도록 한다!
그렇다면 webview와 browser의 차이점이 뭘까? browser에는 아래와 같이 두 가지 부분으로 나눌 수 있다.
- 코드 부분인 엔진(HTML, CSS, Javascript)
- UI (주소바, 탭, 북마크, 확장, 등)
여기서 webview는 browser의 엔진 부분이다. (UI를 제거한 것!)
브라우저의 UI는 모바일 UI로 바꿔서 모바일 앱처럼 보이도록 한다!
위의 사진을 보면 한눈에 잘 이해할 수 있다.
Native: UI 부분으로 브라우저의 UI를 대체한 것이다. Web: Webview로 웹의 콘텐츠를 가져와서 뿌린 것이다!
여기서 추가적으로 하이브리드 앱도 간단히 알아보자!
- native 앱과 web app을 혼합한 것이다. web app과 유사하게 작업되지만 native app처럼 설치된다.
- 하이브리드 앱은 내부적으로 디바이스 API에 접근한다 (GPS, 저장소, 카메라와 같은 자원을 사용할 수 있다)
- 하이브리드 앱은 대체로 컨테이너나 web view를 통해 웹 앱을 실행시킨다.
- 하이브리드 앱은 오프라인이 안된다. 오직 인터넷 연결이 된 상태에서만 작업이 가능하다.
- HTML와 CSS로 하이브리드 앱을 빌드한다. 하나의 코드를 만들면 각 플랫폼에 맞게 조정한다.
그러므로 native app을 만들 때보다는 하이브리드 앱이 있는 각 플랫폼을 만드는 것은 개발자가 적게 든다.
이제 Webview를 대체 왜? 사용하는지 알아보자.
Webview와 하이브리드 앱은 거의 더 싸고 빌드 비용이 더 싸다.
관리 작업이 덜 들고, 모바일 앱 경험을 제공하면서 웹앱이나 웹사이트의 UX를 재현하기 쉽기 때문이다.
1. 관리하기 위한 단일 코드 기반
Native 앱과 달리 Webview를 사용하면 어떤 OS에서든 사용 가능하다! 그러므로 Native를 사용할 경우 iOS와 Android 두 가지 버전의 코드를 작성해야 하는데, web code를 작성하면 하나의 코드를 작성하면 된다.
이 때문에 유지하기도 좋다. 웹 콘텐츠를 업데이트할 때마다, 앱 콘텐츠도 업데이트된다!!
→ 장기적으로 훨씬 적은 작업을 할 수 있고, 복잡성도 적어진다.
2. 런칭 기간
코드 재사용은 앱을 간단하고 빠르게 런칭할 수 있다는 것을 의미한다.
모바일 앱 개발은 많은 시간이 소모된다. 게다가 개발팀이 협력해서 iOS, 안드로이드 두 가지 버전을 만든다.
하이브리드 앱은 그 시간을 줄인다. 웹 앱 코드가 이미 작업된 상태면 90%는 이미 완료된 것이다!
3. 비용
훨~씬 저렴하다.
일단 유지보수 비용이 저렴하고, 필요한 인력과 전문 지식도 적기 때문이다.
게다가 iOS, 안드로이드에 모두 적용할 수 있으니.
4. 웹사이트의 기능을 통합시키기 쉽다.
만약 웹사이트 또는 웹앱의 모바일 앱 버전으로 만들려고 한다면, 웹에서 앱으로 가져와야 할 특정 기능들이 있다. (플러그인, 통합, themes, 커스텀 기능 등) Native app으로 바꾸려면 꽤 골치 아프다. 그런데 Webview app이라면 website 또는 web app을 모바일 앱에서 같은 방법으로 작업할 수 있다.
이렇게만 보면… 대체 왜 Native 앱을 개발하는 거지 싶다. 이번엔 Native 앱의 장점을 살펴보자!
예산과 시간이 많다면… Native App을 선택하는 게 낫다고 한다. 흠.. 그럼 회사 입장에서는 Webview가 나은 거 아닌가요??
과연 그럴까?
1. 유연성
native 앱이 web view보다는 할 수 있는 게 많다.
- 앱의 모든 픽셀을 조절할 수 있다.
- 모든 상호작용과 모든 화면을 원하는 대로 커스텀할 수 있다
- 각 플랫폼에 맞는 UI를 만들 수 있다.
- 보기도 좋다
2. 속도 & 성능
- 더 좋은 성능을 제공한다! 설치된 OS에서만 작동하도록 제작되었고 앱 실행에 필요한 파일이 locally 하게 저장되기 때문이다.
- 성능이 좋으니, 대부분 더 빠르고 부드럽게 작동한다.
- 인터넷 연결 없이 작동할 수 있다. (webview는 web에서 가져오니까 인터넷 연결이 있어야 한다!)
- Native 앱은 모바일 폰에서 작동하도록 만들어졌으니, 터치스크린과 같은 특정 액션을 가능하게 한다!(swiping)
3. 하드웨어 호환성
Native 앱은 모바일 디바이스를 위해 만들어지는 것이므로, 하드웨어 기능에 더 쉽게 접근할 수 있다.
예를 들어, 카메라, 마이크, GPS 등 web view 나 하이브리드 앱도 디바이스 기능을 사용할 순 있지만, native로 하지 않으려면 좀 어렵다.
4. 앱 스토어 승인이 더 쉽다
제대로 만들어진 web view app이 아니라면 리젝 당하기 쉽다. 그러나 하이브리드 앱도 잘 만들어지면 승인된다.
5. 푸시 알림
웹에서 못하는 건 아닌데 좀 더 어렵다고 한다
위의 장단점을 보니 사실 어떤 것이 가장 낫다고 말하기 어려운 것 같다.
앱이 비즈니스 모델의 중심이 될 경우, Native 앱을 고려해 보자.
예를 들어 Uber(우버), Tinder(틴더) 등 거의 앱만 사용해서 서비스가 제공되는 사업이다.
Native app을 사용하면 좀 더 좋은 모바일 UX를 제공할 수 있을 것이다. (빠르고 더 좋은 성능!)
Web view의 경우는 이미 존재하는 웹 사이트나 웹앱을 모바일 앱으로 변환할 때 좋다.
위에서 말했듯이 웹 사이트의 기능을 통합시키기 쉽기 때문이다. (비용절감, 코드 단일화)
오늘 살펴본 장단점을 생각하며 정하는 게 좋을 거 같다!
컨퍼런스 덕분에 새로운 지식을 알아간다!
Web view를 넣은 하이브리드 앱을 한번 만들어보고 싶다^^!
'iOS' 카테고리의 다른 글
| [iOS/SwiftUI] MVVM에 대해 알아보자! (0) | 2023.02.09 |
|---|---|
| [SwiftUI] Layout (공부편) (0) | 2023.01.18 |
| [SwiftUI] .listRowBackground(_:) : List의 전체/특정 row 커스텀하기 (0) | 2022.09.29 |
| [SwiftUI] View Modifier - customize your object! (1) | 2022.09.29 |
| [SwiftUI] Weather API 사용하기 (0) | 2022.08.22 |
