SafeAreaView — 이것은 뭉니까, React Native에서 Safe Area로 레이아웃

SafeAreaView란 무엇인가?

SafeAreaView는 시스템 인터페이스 요소(상태분, Notch, Dynamic Island, 시스템 내비게이션 바)가 컨텐츠를 가리지 않도록 자동으로 내부 패딩을 추가하는 React Native 컴포넌트입니다. 이 컴포넌트는 React Native 0.50에서 iOS를 위해 처음 등장하였고 나중에 Android로 확장되었습니다.

iOS에서 SafeAreaView는 iOS 11(2017)에서 도입된 네이티브 UIView.safeAreaInsets를 사용합니다. Android에서 컴포넌트는 WindowInsets — Android 5.0(API 21) 이후 사용 가능한 시스템 인셋을 고려합니다. Apple(2026)에 따르면 활성 iPhone의 92%가 노치 또는 Dynamic Island를 갖추고 있습니다.

Safe Area가 필요한 이유

Safe Area 개념은 Apple HIG(Human Interface Guidelines) 권고의 일부입니다. iPhone X(2017) 이전에는 전체 화면 공간이 안전했습니다. Notch의 등장으로 Apple은 컨텐츠를 배치하지 말아야 할 영역(카메라 컷아웃, 시간 및 배터리 표시, 홈 인디케이터)을 정의했습니다. Android는 2018년 노치 디스플레이의 등장으로 유사한 개념을 도입했습니다.

iOS 및 Android에서 Safe Area 작동 방식

iOS에서 SafeAreaView는 네이티브 레이아웃-가이드에서 safeAreaInsets를 읽습니다. 상단 인셋에는 상태분 높이(노치가 있는 iPhone의 경우 보통 44 또는 50 포인트)가 포함됩니다. 하단 인셋은 홈 인디케이터에 대해 34 포인트입니다. Android는 WindowInsets — 상태분의 상단 인셋과 시스템 내비게이션의 하단 인셋을 사용합니다.

중요: SafeAreaView는 자동으로 패딩을 적용하지만 루트 컨테이너에만 해당됩니다. 중첩된 컴포넌트는 보호를 받지 못합니다 — 각 화면에 자체 SafeAreaView가 있어야 합니다. 모달 창 및 BottomSheet의 경우 인셋을 별도로 고려하세요.

Notch, Dynamic Island 및 시스템 바

Notch는 카메라와 센서가 있는 화면 상단의 하드웨어 컷아웃입니다. iPhone X(2017)에서 처음 등장했습니다. Dynamic Island는 iPhone 14 Pro 이후 모델의 소프트웨어-하드웨어 영역으로, Notch를 대화형 요소로 대체합니다. 두 경우 모두 50-56 pt의 상단 인셋이 필요합니다.

Android에서 컷아웃은 다양한 형태로 제공됩니다: 돈방울 형태, 펌치-홀, 카메라 아래 스트립입니다. Android에서 SafeAreaView는 컷아웃 형태를 고려하는 WindowInsets을 사용합니다. 가로 모드 앱의 경우 컨텐츠가 시스템 요소를 검치지 않도록 족면 인셋이 추가됩니다.

import React from 'react';
import { SafeAreaView, View, Text } from 'react-native';

const App = () => (
  <SafeAreaView style={{ flex: 1 }}>
    <View style={styles.content}>
      <Text>Content is safe from Notch and system bars</Text>
    </View>
  </SafeAreaView>
);

Edge-to-edge 접근 방식(Android 15+)은 시스템 바 아래에 컨텐츠를 그릴 것을 권장하지만 대화형 요소에 대한 인셋은 고려합니다. SafeAreaView는 이 균형을 유지하는 데 도움이 됩니다: 배경은 바 아래에 그려지고 버튼과 텍스트는 안전 영역에 남아 있습니다.

SafeAreaView 사용 및 대체 방안

SafeAreaView는 컨텐츠를 보호하는 가장 간단한 방법이지만 험상 유연하지는 않습니다. 컴포넌트는 모든 측면에 동일한 패딩을 적용하며, 이는 다른 모서리에 다른 패딩이 필요할 때 불편합니다. 예를 들어 족면 패딩은 필요 없을 수 있는 반면 하단 패딩은 버튼을 위해만 필요할 수 있습니다.

주요 대체 방안: react-native-safe-area-context의 useSafeAreaInsets(가장 유연한 해결 책), Android의 StatusBar.currentHeight, 기기 모델을 수동 확인하는 Platform.OS입니다. 복잡한 경우 전체 컨테이너에 SafeAreaView를, 개별 요소에 useSafeAreaInsets를 조합하여 사용하세요.

import { useSafeAreaInsets } from 'react-native-safe-area-context';

const CustomHeader = () => {
  const insets = useSafeAreaInsets();

  return (
    <View style={{ paddingTop: insets.top }}>
      <Header />
    </View>
  );
};

react-native-safe-area-context 라이브러리는 React Native에서 Safe Area로 작업하기 위한 사실상의 표준입니다. Expo, React Navigation 및 대부분의 UI 킷에서 지원됩니다. 함수형 및 클래스 기반 접근 방식 모두를 위해 hook과 Consumer 컴포넌트를 모두 제공합니다.

완전한 제어를 위한 react-native-safe-area-context

react-native-safe-area-context는 빌트인 SafeAreaView보다 더 유연한 API를 제공하는 라이브러리입니다. 주요 장점은 useSafeAreaInsets hook을 통한 개별 인셋 값(top, bottom, left, right)에 액세스할 수 있다는 점으로 선택적인 인셋 적용이 가능합니다.

또한 라이브러리는 SafeAreaProvider — 애플리케이션의 최상위 레벨에서 필수적인 컴포넌트를 제공합니다. 화면을 회전하거나 키보드를 열 때 시스템 인셋 변경에 음성으로 반응합니다. React Navigation은 기본적으로 이 라이브러리를 사용합니다.

react-native-safe-area-context의 SafeAreaView는 빌트인과 다릅니다: 더 많은 기기에서 작동하고 인셋 변경 애니메이션을 지원합니다. 새 프로젝트에서는 이 라이브러리를 종속성으로 설치하고 빌트인 대신 이 것의 SafeAreaView를 사용할 것을 권장합니다.

SafeAreaView 사용 시 발생하는 일반적인 실수

SafeAreaView는 종종 잘못 사용됩니다. 첫 번째 실수는 모든 컴포넌트를 SafeAreaView로 감싸는 것으로, 이로 인해 이중 패딩이 발생합니다. 규칙: 화면의 루트 View맹 한 SafeAreaView입니다. 중첩된 컴포넌트는 Flex 레이아웃을 통해 인셋을 상속받습니다.

둘째 실수는 Android를 무시하는 것입니다. Android에서 SafeAreaView는 OS 버전에 따라 다른 WindowInsets을 사용합니다. Android 15+에서 시스템 바가 투명해지고 인셋이 변경될 수 있습니다. 허수 없이 실제 기기에서 SafeAreaView를 테스트하세요.

셈째 실수는 하드코딩된 패딩입니다. Platform.OS === 'ios' ? 44 : 24를 사용하지 마세요 — 인셋 값은 모델과 OS 버전에 따라 다릅니다. 험상 시스템 API를 사용하세요: safeAreaInsets 또는 useSafeAreaInsets입니다. iPhone 15 Pro의 Dynamic Island는 iPhone X의 Notch와 다른 인셋을 갖습니다.