Capacitor & React Native Desktop

이 문서가 답하는 질문: “이미 React Native 또는 Capacitor 모바일 앱이 있다면, 데스크톱은 어떻게 추가하는가?” 한 줄 답 (Pyramid Top): “Capacitor는 모바일 우선의 PWA-네이티브 다리고, React Native Desktop은 RN 컴포넌트를 macOS/Windows에 렌더링한다 — 둘 다 데스크톱은 사이드 옵션이지 1순위가 아니다.”

Why — 왜 존재하는가

Electron은 데스크톱 우선이라 웹 코드 재사용은 잘하지만 모바일 재사용은 어렵다. 반대 방향 — 모바일 코드를 데스크톱으로 — 도 시도되어 왔다.

How — 어떻게 동작하는가

Capacitor

React Native Desktop (Microsoft)

What — 구체 사양·수치·예시

Capacitor 데스크톱 시도

# @capacitor-community/electron — 커뮤니티 플러그인
npm install @capacitor-community/electron
npx cap add @capacitor-community/electron
npx cap open @capacitor-community/electron

공식 지원은 아니다. Capacitor는 모바일이 1순위이며 데스크톱은 PWA + Electron wrapper를 권한다.

Capacitor vs Electron 비교

React Native Windows (Microsoft 공식)

npx react-native init MyApp --template react-native@0.74
cd MyApp
npx react-native-windows-init --overwrite
npx react-native run-windows

• Microsoft가 직접 유지보수 (Office의 일부 모듈에 사용).
• WinUI 3 / UWP / Win32 백엔드.
• *JSI(JavaScript Interface)*로 C++/C# 직접 호출.

React Native macOS (Microsoft fork)

npx react-native init MyApp --version 0.74
cd MyApp
npx react-native-macos-init
npx react-native run-macos

• AppKit 컴포넌트로 매핑.
• 모바일과 동일 컴포넌트가 다른 OS API로 렌더.

코드 공유 매트릭스 (현실)

What-if — 잘못 쓰면

• 함정 1: Capacitor로 데스크톱 1순위 시작 → 모바일 표준에 맞춰 디자인된 컴포넌트가 데스크톱에서 어색. 시장 진입 후 후회.
• 함정 2: React Native Desktop이 Office 외에는 사례가 적다 → 라이브러리 생태계 빈약. 트레이드오프 명확.
• 함정 3: “RN으로 모바일 + 데스크톱 한 번에” 기대 → RN macOS/Windows는 기능 갭이 크고 별도 빌드 파이프라인 필요.
• 함정 4: Flutter Desktop도 Microsoft Office가 안 쓴다 — 검증된 대규모 데스크톱 사례가 아직 많지 않다.

Insight — 흥미로운 이야기

“Microsoft가 가장 큰 데스크톱 React Native 사용자다”

Microsoft Office의 일부 모듈, Skype Desktop, Xbox companion app은 React Native Windows로 만들어졌다. Microsoft는 모바일과 데스크톱을 같은 React 코드로라는 큰 베팅을 했고 — 그 베팅의 유지보수자가 자기 자신이라는 점이 RN Windows의 운명을 결정한다.

그러나 같은 Microsoft가 VS Code는 Electron으로 만들었다. 왜?
답은 단순: **“VS Code는 웹 개발자가 쓰는 도구”**라는 시장 신호다. Monaco 에디터 같은 웹 기반 컴포넌트의 깊은 재사용이 필요했고, Office는 그렇지 않았다.

즉, Capacitor·RN Desktop·Flutter Desktop은 “이미 모바일 코드가 있을 때”의 답이고, 처음부터 데스크톱을 노리면 Electron 또는 Tauri가 정공법이다. 사용자의 출발점이 어디인지가 곧 정답을 가린다.

요약

• Capacitor = 모바일 1순위 + 데스크톱 보너스.
• RN Desktop = Microsoft가 가장 큰 사용자, Office 외 사례는 빈약.
• Flutter Desktop = 한 코드 다 OS, 단 대규모 사례 아직 적음.
• 사용자 출발점(모바일 → 데스크톱) vs (데스크톱 → ?)이 정답을 가린다.