​React Native 디스플레이 대응

​RN 공부를 하다가 ios or 안드로이드의 상태바, 화면 비율등으로 레이아웃이 약간씩 달라진다는 것을 알게 되었습니다. 두 플랫폼에서의 미묘한 차이가 성가시게 하길래 찾아보니 생각보다는(?) 복잡한 대응으로 요구하는데.. 물론 더 다양한 방법들이 있겠지만 제가 알아본 대응전략들을 써보겠습니다.

1. SafeAreaView가 노치에 깔리는 것을 막자

iPhone X 이후의 디바이스나 일부 안드로이드 폰은 노치나 홈 인디케이터로 인해 콘텐츠가 잘릴 수 있습니다. 이때 SafeAreaView를 사용하면 시스템 UI를 피해 안전한 영역에 콘텐츠를 배치할 수 있습니다.
SafeAreaView는 말 그대로 "시스템 UI를 피해 안전한 영역" 안에 콘텐츠를 그릴 수 있게 해주는 컴포넌트입니다.
iOS에서는 필수, 안드로이드에서도 사용하면 나쁠 건 없다고 생각합니다.

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

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Text>안전한 영역에 표시되는 텍스트입니다.</Text>
    </SafeAreaView>
  );
}

또한, 안드로이드에서는 StatusBar의 translucent 속성을 true로 설정하여 전체 화면을 활용할 수 있습니다.​

import { StatusBar } from 'react-native';

<StatusBar translucent={true} backgroundColor="transparent" />

2. Dimensions와 useWindowDimensions로 화면 크기 대응

Dimensions.get('window')를 사용하면 디바이스의 초기 화면 크기를 가져올 수 있습니다. 하지만 화면 회전이나 리사이즈에 자동으로 대응하지 않기 때문에, useWindowDimensions 훅을 사용하는 것이 더 유리합니다.

import { useWindowDimensions, Text } from 'react-native';

export default function MyComponent() {
  const { width, height } = useWindowDimensions();

  return (
    <Text>{`현재 화면 크기: ${width} x ${height}`}</Text>
  );
}

이 훅은 실시간으로 화면 크기를 추적해서, 회전 대응이 쉬워집니다.
(반응형 레이아웃 짤 때 매우 유용해요.)
화면 회전 시에도 자동으로 크기가 업데이트되어 반응형 레이아웃을 구현할 수 있습니다.

3. Flexbox + % 단위로 유연한 레이아웃 구성

웹에서 Flex를 써봤다면 아주 익숙한 개념입니다. 여기에 퍼센트 단위를 곁들이면 다양한 디바이스에서도 자연스럽게 동작하는 레이아웃을 만들 수 있습니다. flexDirection, justifyContent, alignItems 등의 속성을 활용하면 다양한 화면 크기에서도 유연한 배치가 가능합니다.

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

export default function Layout() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>안녕하세요!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    width: '80%',
    textAlign: 'center'
  }
});

4. Platform 모듈로 플랫폼별 스타일 분기하기

iOS와 안드로이드는 그림자 처리, 버튼 스타일 등에서 차이가 있습니다. Platform.select()를 사용하면 플랫폼별로 다른 스타일을 적용할 수 있습니다.

import { StyleSheet, Platform } from 'react-native';

const styles = StyleSheet.create({
  box: {
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.3,
        shadowRadius: 4,
      },
      android: {
        elevation: 5,
      },
    }),
  },
});

이렇게 하면 각 플랫폼의 디자인 가이드라인에 맞는 UI를 구현할 수 있습니다.

5. 반응형 레이아웃을 위한 라이브러리 활용하기

직접 수치 계산하기 귀찮다면? 화면 크기에 따라 자동으로 반응형 레이아웃을 구현가능한 react-native-responsive-screen과 같은 라이브러리를 사용할 수 있습니다.

import { wp, hp } from 'react-native-responsive-screen';

const styles = StyleSheet.create({
  button: {
    width: wp('80%'),
    height: hp('7%'),
  },
});

화면 크기에 따라 요소의 크기를 자동으로 조절할 수 있어 다양한 디바이스에서 일관된 UI를 유지할 수 있습니다.