🧾 72. React Native에서 PDF 및 문서 뷰어 구현 전략 — react-native-pdf, 웹뷰, 다운로드까지

---

앱을 만들다 보면 PDF 파일이나 문서를 앱 안에서 보여줘야 하는 상황이 자주 생긴다.
예를 들어 서비스 이용약관, 전자명세서, 계약서, 정책 변경 안내 같은 것들이다.
처음에는 그냥 링크로 웹에 연결하면 되지 않을까 싶었는데,
막상 그렇게 하면 UX도 안 좋고, 외부 브라우저로 빠져나가서 흐름도 끊기게 된다.

그래서 React Native에서 앱 안에서 직접 PDF를 보여주는 방식을 정리해봤다.

---

✅ 문서 뷰어가 필요한 이유

항목	이유
UX 유지	문서를 보더라도 앱 안에서 전체 흐름을 유지할 수 있다
오프라인 대응	다운로드 기능을 붙이면 네트워크 없이도 접근 가능하다
사용자 신뢰	웹 연결보다 앱 내 뷰어는 신뢰도를 높여준다
다양성	약관, 공지, 보고서, 계약서 등 문서 형태는 다양하게 존재한다

---

📦 react-native-pdf로 PDF 뷰어 만들기

가장 많이 쓰이는 라이브러리는 react-native-pdf다.
PDF 파일을 앱 안에서 로딩하고, 확대/축소, 페이지 넘김 등을 지원한다.

설치

npm install react-native-pdf react-native-webview
npx pod-install

기본 사용 예시

import Pdf from 'react-native-pdf';

<Pdf
  source={{ uri: 'https://example.com/sample.pdf', cache: true }}
  onLoadComplete={(pages) => console.log(`총 ${pages} 페이지 로드됨`)}
  onError={(error) => console.log('PDF 에러:', error)}
  style={{ flex: 1 }}
/>

• uri, base64, file:// 등 다양한 소스를 지원한다.
• cache: true 옵션으로 캐싱 가능

---

🌐 WebView를 활용한 문서 뷰잉

PDF 외에도 HTML, Word, Excel 같은 문서를 보여주려면 WebView를 활용하는 게 낫다.
Google Docs 뷰어를 이용해서 처리하는 방식도 있다.

import { WebView } from 'react-native-webview';

<WebView
  source={{ uri: 'https://docs.google.com/gview?embedded=true&url=https://example.com/doc.pdf' }}
  style={{ flex: 1 }}
/>

• 일부 문서 포맷은 WebView에서만 제대로 보여진다.
• 다만 iOS에서는 WKWebView 설정을 따로 할 수도 있다.

---

💾 PDF 다운로드 및 저장 기능

PDF를 보여줄 뿐 아니라 저장 기능까지 제공하면 더 편리하다.
사용자는 나중에 다시 보기 위해 저장해두거나 공유하고 싶어하기 때문이다.

import * as FileSystem from 'expo-file-system';
import * as Sharing from 'expo-sharing';

const downloadAndShare = async (url: string) => {
  const fileUri = FileSystem.documentDirectory + 'sample.pdf';
  const downloaded = await FileSystem.downloadAsync(url, fileUri);
  await Sharing.shareAsync(downloaded.uri);
};

• expo-file-system, expo-sharing을 쓰면 간단하게 구현할 수 있다.
• 이 기능은 Expo 환경에서 특히 편리하게 적용된다.

---

🧩 UX 개선 포인트

기능	이유
로딩 스피너	PDF가 클 경우 빈 화면이 보일 수 있어서 불안감을 줄여야 한다
페이지 수 표시	현재 페이지와 전체 페이지 수를 보여주는 게 UX에 좋다
확대/축소 제한	너무 확대되거나 축소되면 뷰가 깨질 수 있다
에러 메시지	로딩 실패 시 안내 메시지를 명확히 넣어야 한다

---

🧠 실전에서 겪었던 일

이용약관을 PDF로 만들어서 보여줘야 했던 일이 있었다.
처음엔 그냥 웹페이지 링크로 열었는데,

• 로딩이 느리고
• 터치 확대도 안 되고
• 웹 브라우저가 갑자기 열려서 흐름이 완전히 끊겼다.

그래서 react-native-pdf를 도입해서 뷰어를 만들고,
문서 링크를 전달받아 다운로드 후 바로 보여주는 흐름으로 바꿨다.
캐싱도 적용했고, 저장해서 공유할 수 있게 만들었다.

그렇게 바꾸고 나니 사용자 만족도도 올라가고,
UX 피드백도 “자연스럽다”, “보기 편하다”라는 말이 나왔다.

---

🧾 문서는 단순한 파일이 아니라 사용자와의 신뢰를 만드는 수단이기도 하다.

---