2. Flutter vs React Native

Flutter vs React Native — 본질 비교 통합 정리

1️⃣ 아키텍처 (핵심 구조 차이)

1) Flutter — “렌더링 엔진 기반”

• 언어: Dart

• 구조:
• 자체 렌더링 엔진 Skia
• 모든 UI를 직접 그림 (Canvas 기반)

• 핵심 특징
• OS 위에 하나의 UI 엔진이 올라감
• 네이티브 UI를 “사용”하지 않음

• 본질
• UI를 직접 생성하는 구조 (완전 통제)

2) React Native — “브릿지 기반”

• 언어: JavaScript (React)

• 구조:
• JS → Bridge → Native
• 실제 UI는 네이티브 컴포넌트

• 핵심 특징
• JS가 네이티브를 호출해서 UI 구성

• 본질
• UI를 간접 제어하는 구조

2️⃣ 성능

1) 비교

2) 핵심 해석

• Flutter → 프레임 드랍 적음 / 애니메이션 강함

• React Native → Bridge에서 병목 발생 가능

3) 결론

➡️ Flutter = “직접 실행”

➡️ React Native = “중간 통역 있음”

3️⃣ UI / 디자인 철학

1) Flutter

• Material / Cupertino 자체 구현

• 디자인 완전 통제 가능

• 장점
• 픽셀 단위 커스터마이징 가능
• 디자인 일관성 유지 쉬움

• 단점
• 네이티브 감성이 부족할 수 있음

2) React Native

• 실제 네이티브 UI 사용

• 장점
• iOS / Android 각각 자연스러움
• 사용자 경험이 OS와 동일

• 단점
• 플랫폼별 대응 필요
• UI 일관성 유지 어려움

4️⃣ UI 구현 범위 (핵심 차이)

1) Flutter

• “제약 없이 그림”

• 게임 수준 UI 가능

2) React Native

• “OS 안에서 조립”

• 일반 앱(UI 리스트, 폼)에 강함

5️⃣ 개발 경험 (DX)

1) Flutter

• 공식 생태계 중심 → 안정성 높음

2) React Native

• 서드파티 의존 → 깨질 가능성 있음

6️⃣ 생태계 & 기업

1) Flutter

• 만든 곳: Google

• 특징
• 빠르게 성장 중
• 공식 지원 강함

2) React Native

• 만든 곳: Meta

• 특징:
• 오래된 생태계
• 레거시 많음

7️⃣ 플랫폼 지원 범위

1) Flutter

• “멀티 플랫폼 엔진”

2) React Native

• “모바일 중심 프레임워크”

8️⃣ 어디까지 구현 가능하냐 (현실 기준)

1) Flutter

• UI: 거의 무제한

• 디바이스: 모바일 + 웹 + 데스크탑

• 특징
• 엔진 기반 → 확장성 높음

2) React Native

• UI: 네이티브 범위 내에서 강함

• 디바이스: 모바일 중심

• 특징
• 플랫폼 의존

9️⃣ 선택 기준 (실무 기준)

1) Flutter가 맞는 경우

• UI 커스터마이징 많음

• 애니메이션 중요

• 디자인 통일 중요

• MVP 빠르게 안정적으로 개발

• 예
• 금융 앱
• 디자인 중심 서비스
• 스타트업 제품

2) React Native가 맞는 경우

• 기존 React 개발자 있음

• 웹 서비스 확장

• 네이티브 기능 많이 사용

• 예
• 웹 기반 서비스의 모바일 확장
• 내부 서비스 앱

🔥 최종 결론 (핵심만 압축)

구조 차이

• Flutter → 직접 렌더링

• React Native → 브릿지 기반 간접 제어

철학 차이

• Flutter → “플랫폼 위에 하나의 앱”

• React Native → “플랫폼을 활용하는 앱”