리액트 네이티브로 웹뷰 앱 만들기

2026-04-29

들어가며

혹시 진행하는 프로젝트에서 모바일 웹을 만들어 보신 적이 있나요?

웹을 완성하고 나면, 웹을 앱으로 보여줄 수는 없을까? 라는 생각이 들곤 합니다.

제가 진행하고 있는 여기닷 프로젝트에서는 실제로 모바일 웹을 앱으로 만들고 현재 출시 준비 중에 있습니다. 그래서 오늘은 출시 준비하면서 배웠던 점과 팁을 정리해 보았습니다.

전략

전략은 간단합니다.

바로 앱에 여러분이 만든 웹을 띄워서 보여주는 것입니다.

웹을 띄울려면 웹 브라우저가 있어야합니다. 다행이도 안드로이드와 ios 모두 앱에서 웹 브라우저를 띄울 수가 있는데요, 바로 이 웹 브라우저를 “WebView(웹뷰)“라고 합니다.

여러분이 만들 앱에 웹뷰를 추가하고, 웹뷰에서 웹 페이지를 보여주면 됩니다.

근데, 앱은 어떻게 만들어야 할까요?

리액트 네이티브 (with Expo)

전통적인 앱 개발에서는 안드로이드, ios 앱을 만들려면 각각 지원하는 플랫폼과 언어로 따로 앱을 만들어야 했습니다. 당연히 두 os를 커버하는 앱을 만들려면 단순하게 생각해도 하나의 os를 지원하는 앱을 만드는 것 보다 시간은 2배 이상이 걸립니다.

이런 문제로 인해 하나의 소스로 여러 os 플랫폼 앱을 만들 수 있게하는(크로스 플랫폼) 기술들이 등장했는데 대표적으로 리액트 네이티브가 있습니다.

자세한 원리는 생략하고, 리액트 네이티브는 리액트의 문법을 활용해서 네이티브 즉, 안드로이드나 ios 앱에서 사용하는 ui를 만들 수 있는 라이브러리입니다.

리액트 네이티브 공식 문서에는 리액트 네이티브를 활용하여 앱을 만드는 가장 좋은 방법을

Expo 같은 프레임워크를 사용하는 것이라고 설명하고 있는데요, Expo는 리액트 네이티브 앱을 빌드하고 실행할 때 많은 설정없이 쉽게 할 수 있게 해줍니다. 그리고 딥 링크에 사용하는 커스텀 스킴, 아래 영상과 같은 앱 아이콘 스플래시 화면 설정 등 여러 편리한 기능도 함께 제공 한답니다.

그래서 여기닷에서는 리액트 네이티브와 Expo로 웹뷰 기반 앱을 만들고 있습니다.

구현

빌드 및 개발환경 설정

보통 Expo로 앱을 개발할 때 크게 보면, 2가지 방법으로 시작할 수 있는데, 바로 Expo Go와 개발 빌드(Development Build)입니다.

Expo Go는 Expo에서 만든 앱으로 개발서버를 실행하면 나오는 QR 코드로 바로 본인이 만든 앱을 실행할 수 있게 해줍니다. 편하고 간단하게 개발을 시작할 수 있지만,

ExpoGo 앱에 번들된 라이브러리만 사용가능
샌드박스 형식으로 앱을 실행하기 때문에 실제기기와 다르게 동작할 수 있음

이라는 문제점이 있습니다. ExpoGo 사진

그 해 비해 개발 빌드는 Android Studio 및 Xcode 설정을 하나씩 해주어야하는 단점이 있지만, 실제 앱이 빌드되고 실행되는 방식으로 개발할 수 있습니다.

개발을 시작하기 전에 앱을 출시하기 위한 릴리즈 빌드에 대해서도 잠깐 이야기해보면 2가지 방법으로 Expo에서 앱을 빌드할 수 있습니다.

로컬에서 빌드
EAS

로컬에서 빌드는 문자 그대로 로컬(본인의 컴퓨팅 환경)에서 앱을 빌드하는 것으로 위에서 이야기 했던 개발 빌드에서 약간의 설정을 통해 릴리즈 빌드로 변경할 수 있습니다.

예를 들면 안드로이드의 경우 Android Studio 개발환경이 설정되어 있으면 expo에서 만들어주는 설정을 기반으로 실 기기나 에뮬레이터를 통해 빌드 된 앱을 실행할 수 있습니다. 또한 앱을 플레이 스토어에 출시하기 위해 필요한 .aab 형태의 앱 번들 파일도 생성 가능하고, bundletools를 사용해서 .apk 설치 파일 역시 추출가능 합니다.

반면에 EAS(Expo Application Services)는 Expo에서 제공하는 클라우드 서비스로 앱을 클라우드에서 쉽게 빌드할 수 있게 해줍니다. 대다수 서비스가 그렇듯 무료 플랜도 제공하고 있습니다.

다만 여기닷은 기본적으로 웹뷰 기반 앱이기도 하고, 기존 개발 빌드에서 확인 후에 릴리즈 빌드는 만드는 것이 더 괜찮은 선택이라 판단하여 EAS 대신 로컬에서 빌드를 진행하기로 결정했습니다.

자세한 개발환경 세팅은 Expo 공식문서를 참고하시면 좋을 것 같습니다.

프로젝트 시작

일단 아래 명령어로 타입스크립트가 적용된 빈 프로젝트 템플릿으로 expo 프로젝트를 생성하면,

npx create-expo-app@latest --template blank-typescript

리액트처럼 App.tsx가 있습니다. 내부를 한 번 살펴보면 역시 리액트 처럼 jsx 문법으로 작성되어져 있습니다.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style='auto' />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

리액트와 차이점은 리액트는 리액트 컴포넌트를 통해 html을 렌더링하지만, 리액트 네이티브는 위 코드 처럼 View 에 자식 리액트 네이티브 컴포넌트를 추가해서 네이티브 UI를 렌더링하게 됩니다.

`react-native-webview`

여기에 웹뷰 화면을 추가하기 위해서는 다른 리액트 프로젝트에서 하던 것 처럼, react-native-webview 의존성을 설치한다음

npm install react-native-webview

App.tsx를 아래와 같이 수정해주면 됩니다.

import { WebView } from 'react-native-webview'
// 이하생략...

export default function App() {
  return (
    <View style={styles.container}>
      <WebView source={{uri : '여러분이 만든 웹 주소'}}>
    </View>
  );
}

그럼 아마 실행했을 때 여러분이 만든 웹이 앱 화면에서 보일 것 입니다.

어때요 참 쉽죠?

뒤로가기 문제

이렇게 간단하게 앱을 만들고 프로젝트를 마무리하면 정말 좋겠지만, 아직 치명적인 문제가 있습니다.

보통 앱에서는 뒤로가기 시, 이전 화면으로 앱 화면이 변경되지만, 현재 상태에서는 앱 화면 상태 자체가 없기 때문에, 뒤로가기 시 아래 영상처럼 앱이 종료되어 버리는 문제가 있습니다.

그렇기에 기본적인 뒤로가기 버튼 ui와 함께 뒤로가기 동작 시, 웹뷰에서 뒤로가기가 동작되게 앱을 수정해야 합니다.

일단 기본적으로 ios는 터치 제스쳐를 통해서 뒤로가기가 동작하고, 안드로이드는 설정에 따라, 하드웨어 및 네비게이션 바의 뒤로가기 버튼과 제스쳐로 동작합니다. 그렇기에 각각 구현방식을 달리 할 필요가 있습니다.

ios의 경우 react-native-webview 의 WebView 컴포넌트의 allowsbackforwardnavigationgestures 속성을 true로 하면

뒤로가기 및 앞으로가기 제스쳐를 동작하게 할 수 있습니다.

하지만 안드로이드는 위 속성이 동작하지 않기 때문에 따로 BackHandler

를 통해 뒤로가기 이벤트가 발생하면 웹뷰에서 뒤로가기 처리를 하게하는 이벤트 핸들러를 등록하는 방식으로 처리합니다.

정말 끝인가?

다른 하드웨어와 운영체제 관련 기능이 없는 정말 간단한 앱일 경우, 여기에 앱 아이콘과 스플래시 화면 정도만 추가하고 (스토어 앱 심사를 통과할 수 있을지는 모르겠지만) 앱 출시를 노려볼 수 있습니다.

물론 실제 기기에서 정상적으로 동작하면 말이죠.

예를 들면 여기닷 프로젝트에서는 여행사진을 지도에 표시해야하기 때문에 사진에 저장된 GPS 데이터를 추출하는 것이 매우 중요합니다.

그런데 ios에서는 정상적으로 동작함에도 불구하고, 특정 버전의 안드로이드 웹뷰에서는 파일 업로드 시, 위치 데이터가 사라지는 문제가 발생했습니다.

결국 기존 html input[type="file"] 형식의 파일 업로드는 일반 웹 화면에서만 사용하고 네이티브 사진 피커(expo-photo-picker)로 사진을 선택하고 GPS 데이터를 추출하여 웹으로 보내는 방식으로 해결해야 했는데요.

위 사례가 말해주듯이 아무리 웹뷰 앱으로 개발한다고 해서 100% ios, 안드로이드에서 모두 정상적으로 동작한다는 보장이 없기에 실기기에서의 문제 대응도 필요할 수 있다는 것을 유념하시기 바랍니다.

출시

우여곡절을 마치고 앱을 완성하면 앱스토어에 출시도 생각할 수 있습니다.

다만 비용이 듭니다.

안드로이드 : 25$ 1회 결제

ios : 99$ (한국에서 129,000₩) 연간 결제

비용을 결제하고 앱에 대한 정보 및 설정을 하고 베타테스트를 하는 과정을 거치면 앱 심사를 받을 수 있게 됩니다. 앱 심사를 통과하면, 앱 출시가 완료 됩니다.

추가적으로 말씀드리자면 사실 비용 뿐만 아니라 시간과 노력도 들어갑니다. 현재 여기닷은 안드로이드 앱 출시를 진행중에 있습니다만, 안드로이드는 12명의 구글계정으로 베타테스트를 14일 동안 진행해야 앱 출시를 할 수가 있었습니다.

마치며

보통 모바일 웹을 완성하면, 앱으로도 출시하고 싶은 생각은 자연스럽습니다만, 여기닷 앱 출시를 준비하면서, 그 과정이 생각보다 간단하지 않다는 것을 알게 되었습니다. 그럼에도 불구하고, 리액트 네이티브 앱을 개발하고 출시하는 과정을 경험하면서 어쩌면 혼자서도 앱을 개발하고 출시하는 것도 충분히 가능하다는 생각이 들었던 것 같습니다.

아무튼 여기까지 읽어주셔서 감사드리며 더 좋은 글로 찾아오도록 하겠습니다.

감사합니다.