📱 React Native(Expo)에서 쓸만한 UI Framework 정리

🎯 전제

• 스타일은 직접 제어해야 함 → Headless / 커스터마이징 친화도 중요
• DOM 기반 라이브러리는 배제
• Expo 호환성 고려

---

🔑 주요 후보 비교

후보	성격	헤드리스/접근성	테마/스타일 체계	Expo 호환	RN/Web 공유	비고
React Native Aria	Headless 프리미티브	⭐⭐⭐⭐	스타일 없음 (직접 입힘)	✅	△	접근성·포커스 로직 제공
gluestack-ui	Aria 기반 UI 킷	⭐⭐⭐⭐	Styled System + Tokens	✅	△	커스터마이징 유연
NativeWind	Tailwind 유틸리티	—	Tailwind 유틸	✅	△	빠른 스타일링, 토큰화 용이
Shopify Restyle	타입 안전 스타일링	—	Theme + Variant	✅	△	토큰/Variant 설계 최적
Tamagui	RN/Web 통합 UI/스타일	⭐⭐⭐	Variants + Tokens	✅	✅	RN/Web 크로스, 최적화
Moti	애니메이션 레이어	—	—	✅	✅	Reanimated 기반
@gorhom/bottom-sheet	바텀시트 전용	—	—	✅	△	성능/제스처 표준
React Native Paper	Material UI 킷	⭐⭐	테마 내장	✅	△	빠른 구축, 머티리얼 고정
React Native Elements	범용 컴포넌트	⭐⭐	테마 내장	✅	△	스타일 간섭 있음
UI Kitten	Eva Design 기반	⭐⭐	테마/스키마	✅	△	테마 강력, 유연성 낮음
Dripsy	styled-system 계열	—	Theme + sx	✅	△	가볍고 단순

---

🚀 권장 스택 (상황별)

1) 디자인 완전 소유 + 접근성 보장

• React Native Aria + Shopify Restyle + NativeWind
• @gorhom/bottom-sheet, Moti로 보강
• ✅ 자유도 최고, ❌ 초기 공수 높음

2) 헤드리스에 가까운 킷

• gluestack-ui + (NativeWind or 자체 스타일)
• ✅ 프리미티브/변형 구조 잘 설계됨

3) RN + Web 코드 공유 필요

• Tamagui + Moti
• ✅ RN/Web 동시 지원, ❌ 러닝커브 있음

4) 타임투마켓 최우선

• React Native Paper 또는 Elements로 빠른 구축
• 핵심만 헤드리스 재작성
• ✅ 속도, ❌ 디자인 유연성 한계

---

🧩 조합 예시 (의사코드)

import { useButton } from '@react-native-aria/button';
import { createTheme, createBox, createText } from '@shopify/restyle';

const theme = createTheme({
  colors: { primary: '#3b82f6', text: '#111827', bg: '#fff' },
  spacing: { s: 8, m: 12, l: 16 },
  radii: { s: 8, m: 12, l: 16 },
});
const Box = createBox<typeof theme>();
const Text = createText<typeof theme>();

function Button(props) {
  const ref = React.useRef(null);
  const { buttonProps, isPressed } = useButton(props, ref);
  return (
    <Box
      {...buttonProps}
      ref={ref}
      bg={isPressed ? 'primary' : 'bg'}
      padding="m"
      borderRadius="m"
      className="shadow" // NativeWind 유틸 적용
    >
      <Text color="text">{props.children}</Text>
    </Box>
  );
}

---

🛠️ 추가 고려 요소

1. 스타일링 전략

• NativeWind: Tailwind 유틸리티 기반 → 팀이 웹에서 Tailwind 경험 있다면 가장 빠른 적응
• Restyle: 타입 안전한 토큰 관리 → 디자인 시스템을 코드로 강제할 수 있음
• Tamagui: RN/Web을 모두 지원하면서도 빌드 시 최적화 → 크로스플랫폼 지향 시 강점

2. 접근성 (A11y)

• React Native Aria: 웹 ARIA 패턴을 RN에 이식한 프리미티브 → 스크린리더, 포커스, 키보드 내비게이션까지 지원
• gluestack-ui: Aria 위에 얹은 구성요소 모음 → 빠르게 접근성 보장 가능

3. 애니메이션

• Moti: Reanimated 2/3 기반, 선언적 API → Skeleton, Presence, Transition 등에 유용
• Reanimated + Gesture Handler: 로우레벨 제어 필요할 때 필수

4. 네이티브 확장

• @gorhom/bottom-sheet, @gorhom/portal → 커뮤니티 표준 수준의 안정성과 성능
• react-native-skia → 커스텀 드로잉/애니메이션

---

📚 추천 조합 (실전 예)

💡 커스텀·디자인시스템 구축 팀

• 스타일: Restyle (토큰/타입 안전) + NativeWind (유틸 속도)
• UI 로직: React Native Aria
• 애니메이션: Moti
• 특화 컴포넌트: @gorhom/bottom-sheet

⚡ MVP/프로토타입

• 스타일 & UI: gluestack-ui
• 애니메이션: Moti
• 추가: 필요 시 NativeWind로 보완

🌐 RN + Web 공유

• UI & 스타일: Tamagui
• 애니메이션: Moti
• 공유 전략: Variants + Tokens 기반 → RN/Web 동시에 관리

---

✅ 결론

• 디자인 자유도가 최우선이면 → RN Aria + Restyle + NativeWind
• 구축 속도와 접근성 보장이 필요하면 → gluestack-ui
• RN과 Web 코드 공유가 필수면 → Tamagui
• 초기 출시 속도가 중요하면 → React Native Paper/Elements

👉 장기적으로는 Headless(Aria) + Token 기반(Restyle/NativeWind) 조합이 가장 유연하고 유지보수성이 높음.

@startuml
start

:React Native UI 선택 플로우;

if ("출시 속도가 가장 중요?") then (예)
  :React Native Paper 또는 Elements;
  stop
else (아니오)
  if ("RN & Web 코드 공유가 필수?") then (예)
    :Tamagui + Moti;
    stop
  else (아니오)
    if ("디자인 자유도/브랜딩 통제가 최우선?") then (예)
      :Headless 조합 사용;
      :React Native Aria (로직/접근성);
      :Shopify Restyle (토큰/타입 안전);
      :NativeWind (유틸리티 스타일);
      :보강: @gorhom/bottom-sheet, Moti;
      stop
    else (아니오)
      if ("적당한 생산성과 커스터마이징 필요?") then (예)
        :gluestack-ui;
        :필요시 NativeWind 병행;
        stop
      else (아니오)
        :요구사항 재평가(상충 가능);
        stop
      endif
    endif
  endif
endif

@enduml