![width:500px height:500px bg right](https://media1.giphy.com/media/SQTSmiJl0uKoZNdv1T/giphy.webp?cid=d8f9e3b85qlm1lr0cu10p2dkfkbhxah65nl1kaglmcefkhfx&ep=v1_stickers_search&rid=giphy.webp&ct=s) # WebView를 활용한 모바일 앱 개발 ## [소플 (이인제)](https://www.soaple.io/) --- # 목차 - [모바일 앱](#모바일-앱) - [WebView](#webview) - [WebView를 활용한 모바일 앱 개발](#webview를-활용한br-모바일-앱-개발) - [WebView를 사용한 모바일 앱 예시](#webview를-사용한br-모바일-앱-예시) - [최근 모바일 앱 개발 트렌드](#최근-모바일-앱-개발br-트렌드) --- ![width:500px height:500px bg right](https://media1.giphy.com/media/SQTSmiJl0uKoZNdv1T/giphy.webp?cid=d8f9e3b85qlm1lr0cu10p2dkfkbhxah65nl1kaglmcefkhfx&ep=v1_stickers_search&rid=giphy.webp&ct=s) # 모바일 앱 --- # 모바일 앱(Mobile App)이란? 📱 **스마트폰, 태블릿 등 모바일 기기에서 실행되는 애플리케이션** - 사용자는 모바일 앱을 통해 검색, 게임, SNS, 인터넷 뱅킹 등을 수행할 수 있음 - 일반적으로 애플의 App Store나 구글의 Google Play 같은 앱 스토어에서 다운로드받아 설치 --- # 모바일 앱의 종류 📱 - Native App - iOS: Swift - Android: Java, Kotlin - Hybrid App - React Native - Flutter --- ![width:272px height:253px bg right](https://media4.giphy.com/media/t76pItTR9COGquzOMH/giphy.webp?cid=d8f9e3b86070bz0f2pcnfcvjgd854zxpnwtfbhndrzjd567n&ep=v1_stickers_search&rid=giphy.webp&ct=s) # WebView --- # WebView - 네이티브 앱에 내장되어 있는 웹 브라우저 - WebView는 웹 페이지를 로드하고 표시하는 역할 - 사용자는 앱 내에서 웹 콘텐츠를 확인할 수 있음 --- # WebView의 장점 👍 - 여러 플랫폼에서 사용할 수 있음 - 낮은 초기 개발 비용 - 편리한 유지 보수 - 추가적인 스토어 심사 없이 자유로운 업데이트 --- # WebView의 단점 👎 - 긴 로딩 시간, 느린 반응 속도 - 제한적인 UI - 스토어 심사가 어려울 수 있음 --- ![width:500px height:500px bg right](https://media1.giphy.com/media/SQTSmiJl0uKoZNdv1T/giphy.webp?cid=d8f9e3b85qlm1lr0cu10p2dkfkbhxah65nl1kaglmcefkhfx&ep=v1_stickers_search&rid=giphy.webp&ct=s) # WebView를 활용한
모바일 앱 개발 --- # WebView 기반의 모바일 앱 - 웹 콘텐츠를 모바일 애플리케이션 내에서 표시하기 위해 널리 사용되는 방법 - WebView는 웹 브라우저 엔진을 앱에 내장하여 HTML, CSS, JavaScript로 작성된 웹 페이지를 네이티브 앱처럼 보이게 함 - 웹 개발자는 기존 웹 기술을 이용해 모바일 앱을 쉽게 개발할 수 있음 --- # 하이브리드 모바일 앱 - 네이티브 앱에 일부 화면을 WebView를 사용하여 개발한 앱 - 단일 코드베이스로 여러 플랫폼에서 실행할 수 있는 장점이 있음 --- ![width:500px height:500px bg right](https://media1.giphy.com/media/SQTSmiJl0uKoZNdv1T/giphy.webp?cid=d8f9e3b85qlm1lr0cu10p2dkfkbhxah65nl1kaglmcefkhfx&ep=v1_stickers_search&rid=giphy.webp&ct=s) # WebView를 사용한
모바일 앱 예시 --- # 토스 - 최고의 사용자 경험이 필요한 곳은 Native - 매일매일 실험으로 개선해나가는 제품은 React Native/WebView로 구성 ![height:280px](https://static.toss.im/ipd-tcs/toss_core/live/d3082288-071f-4f91-a6af-c5d9da22265d/Untitled.png) --- # 당근마켓 - 오픈소스 웹뷰 프레임워크 [Stackflow](https://stackflow.so/)를 자체적으로 개발 및 적용 - 모바일 디바이스에서 주로 활용되는 Stack Navigation UX를 JavaScript 환경에서 구현

--- # 근처 스타벅스 - ReactNative에서 전체화면을 WebView를 사용하여 구현

--- ![width:480px height:480px bg right](https://media0.giphy.com/media/8f3nS1Gajtv70qNicE/giphy.webp?cid=d8f9e3b8camn9n80gxa66nynghoo6y5xi0m19s664qvqrblw&ep=v1_stickers_search&rid=giphy.webp&ct=s) # 최근 모바일 앱 개발
트렌드 --- # 네이티브 앱을 개발하는 비중은 줄어듦 📉 - iOS/Android 각각 따로 개발 필요 - 네이티브 앱 개발자를 구하기가 어렵고 인건비가 비쌈 - 유지보수 및 앱 업데이트에 시간이 오래 걸림 --- # 하이브리드 앱으로 개발하는 경우가 많아짐 📈 - 전체 또는 일부 화면에 WebView를 사용하여 개발 - 웹 개발자를 구해서 개발을 시킬 수 있음 - 적은 개발 비용과 빠른 유지보수 및 업데이트 가능 - 돈이 많지 않은 초기 스타트업들은 대부분 하이브리드 앱으로 개발하는 추세 - React Native 또는 Flutter를 주로 사용 --- # ![h:32](https://reactnative.dev/img/header_logo.svg) React Native (https://reactnative.dev) > A framework for building native applications using React - Meta(구 Facebook)에서 만든 오픈소스 프레임워크 - 하나의 코드베이스로 iOS와 Android 앱을 동시에 개발할 수 있음 - JavaScript 또는 TypeScript, 리액트를 사용하여 개발 - 네이티브 컴포넌트를 사용하여 빠르고 반응성 높은 사용자 경험을 제공 - 코드 변경 사항을 즉시 반영하여 빠른 개발 사이클을 지원 (Hot Reload) --- # ![h:32](https://reactnative.dev/img/header_logo.svg) React Native WebView https://github.com/react-native-webview/react-native-webview ```ts import React, { Component } from 'react'; import { View } from 'react-native'; import { WebView } from 'react-native-webview'; function MainScreen(): JSX.Element { return ( ); } export default MainScreen; ``` --- # ![h:32](https://storage.googleapis.com/cms-storage-bucket/4fd5520fe28ebf839174.svg) Flutter (https://flutter.dev) > Flutter makes it easy and fast to build beautiful apps for mobile and beyond - Google에서 만든 오픈소스 UI 툴킷 - 하나의 코드베이스로 iOS, Android, 웹, 데스크톱용 애플리케이션을 빠르고 쉽게 만들 수 있음 - Google에서 만든 [Dart](https://dart.dev/)라는 프로그래밍 언어를 사용하여 개발 --- # ![h:32](https://storage.googleapis.com/cms-storage-bucket/4fd5520fe28ebf839174.svg) Flutter WebView https://pub.dev/packages/webview_flutter ```dart class WebViewExampleState extends State { late WebViewController _controller; @override Widget build(BuildContext context) { return Scaffold( ... body: WebView( initialUrl: 'https://flutter.dev', // 표시할 웹 페이지 URL javascriptMode: JavascriptMode.unrestricted, // 자바스크립트 사용 허용 onWebViewCreated: (WebViewController webViewController) { _controller = webViewController; }, ), ); } } ``` --- # References - https://github.com/facebook/react-native - https://github.com/react-native-webview/react-native-webview - https://github.com/flutter/flutter - https://pub.dev/packages/webview_flutter - https://toss.tech/article/react-native-2024 - https://stackflow.so/ --- # Thank you! ## Made with ♥ by [Soaple](https://www.soaple.io/)