Expo 인앱 브라우저 열기 (expo-web-browser)Expo In-app Browser (expo-web-browser)
📅
🚀
들어가기 전에🔗
모바일 앱에서 외부 링크를 열어야 할 때가 종종 있습니다. 이때 앱을 완전히 벗어나지 않고도 링크를 열 수 있다면 사용자 경험을 더 좋게 만들 수 있습니다. Expo에서는 이를 위해
expo-web-browser라는 모듈을 제공합니다. 이 글에서는 WebBrowser를 사용하는 방법과, 비슷한 기능을 제공하는 WebView와의 차이점도 함께 알아보겠습니다.🚀
WebBrowser란 무엇인가요?🔗
expo-web-browser는 Expo에서 제공하는 라이브러리로, 외부 웹 페이지를 인앱 브라우저
형식으로 열어주는 기능을 합니다. 간단히 말하면, 앱을 닫지 않고도 사용자가 웹 페이지를 볼 수 있도록 도와주는 도구입니다.
이 브라우저는 iOS의 Safari View Controller
또는 Android의 Chrome Custom Tabs
를 기반으로 동작하기 때문에, 기본 브라우저처럼 빠르고 안전한 UI를 유지하면서도 앱 안에서 동작하는 느낌을 줍니다.🚀
WebBrowser 사용 방법🔗
먼저
expo-web-browser 패키지를 설치해야 합니다.npx expo install expo-web-browser설치가 끝났다면 아래와 같이 사용할 수 있습니다.
import * as WebBrowser from 'expo-web-browser';
import { Button } from 'react-native';
export default function App() {
const openLink = async () => {
await WebBrowser.openBrowserAsync('https://example.com');
};
return <Button title="링크 열기" onPress={openLink} />;
}위 예제에서는 버튼을 누르면
https://example.com 주소가 인앱 브라우저
로 열리게 됩니다. 사용자는 앱을 떠나지 않고 웹 페이지를 보고, 완료되면 앱으로 돌아올 수 있습니다.🚀
WebView와의 차이점은?🔗
많은 분들이
WebBrowser
와 WebView
를 혼동하기 쉬운데요, 아래와 같이 기능과 용도가 조금 다릅니다.| 구분 | WebBrowser | WebView |
|---|---|---|
| UI | 시스템 기본 브라우저 UI (Safari / Chrome) | 앱 내부의 브라우저 구성요소 |
| 보안성 | 높은 편 (시스템 브라우저 기능 활용) | 앱에서 직접 렌더링, 보안 설정 필요 |
| 사용 목적 | 외부 링크 열기 | 웹 앱을 앱 내부에 통합하기 |
| 사용자 경험 | 브라우저 느낌 (주소창 있음) | 앱에 완전히 통합된 느낌 (주소창 없음) |
| 복잡도 | 매우 간단 | 설정 및 관리 필요 |
예를 들어, 로그인 링크를 열거나, 약관 페이지를 보여줄 때는 WebBrowser가 더 적절합니다. 반대로, 웹으로 만든 UI를 앱 내부에서 꾸준히 보여줘야 한다면 WebView를 사용하는 게 좋습니다.
🚀
문제 발생 및 해결🔗
WebBrowser를 사용할 때 주의할 점은 다음과 같습니다.
- iOS 시뮬레이터에서는 Safari View Controller가 동작하지 않을 수 있습니다.실기기에서 테스트해 보는 것이 좋습니다.
openBrowserAsync는 Promise를 반환하므로, 사용 후에는 닫힘 이벤트 등을 처리할 수도 있습니다. 예를 들어, 브라우저가 닫힌 뒤 어떤 동작을 하게 만들 수 있습니다.
const result = await WebBrowser.openBrowserAsync('https://example.com');
if (result.type === 'dismiss') {
console.log('브라우저가 닫혔습니다.');
}🚀
결론🔗
Expo의
WebBrowser는 외부 링크를 앱 안에서 간편하게 보여줄 수 있는 매우 유용한 기능입니다. WebView보다 설정이 훨씬 간단하고 보안성도 높기 때문에, 단순한 링크 열기에는 WebBrowser를 사용하는 것이 좋습니다.✅
더 생각해 보기🔗
- WebBrowser를 통해 로그인 페이지를 열고, 인증 완료 후 앱으로 돌아오는 흐름을 구현해볼 수 있습니다.
openAuthSessionAsync함수를 사용하면 OAuth 로그인에 특화된 방식도 구현 가능합니다.
✅