React Native 에서 반응형 스타일 적용하기

Jongwon Park·2024년 8월 19일

React-Native/expo

목록 보기

1/1

0. 웹에서는 이런 일이 없었는데..

웹에서는 mobile, tablet, desktop으로 나눠서 3단계 정도만 스케일링 해주면 됐는데, 모바일은 정말 다양한 크기의 디바이스를 모두 대응해줘야 했고, 피그마의 디자인을 최대한 일관되게 보여주고 싶었던 욕심으로 해결하게 된 과정을 적어봤습니다.
첫 RN 개발이고, 아직도 프로젝트를 진행하고 있고, 갈 길이 많이 남았지만 개발하면서 겪은 문제나 어떻게 구현 했는지에 대해서 올리면 좋지 않을까 싶은 마음에 블로그로 글을 남기게 되었습니다.

1. 피그마 디자인이 끝났으니 이제 개발만 하면 되겠군!

... 이라고 생각을 했지만, 세상은 내가 생각한대로 되지 않았습니다.
RN에서 크기 값은 화면 비율이 아닌, 고정 픽셀 값으로 크기가 설정되어 크기가 서로 다른 디바이스에서는 서로 다른 디자인이 적용됩니다.

하지만 검색을 해보니 flex, viewport, dimensions를 이용한 방법이 있었는데 저는 피그마의 디자인에 최대한 근접하게 만들고 싶었기에 dimensions를 이용해 스케일링 하기로 했습니다.

2. 디자인을 하고보니 너무 많은 고정값 픽셀들이 있었다.

위 동그라미는 가로, 세로 38px로 고정되어 있는데, 이 38px의 값을 모바일 디바이스에서 일관된 크기로 보여주기에는 목업에서 예로 든 디바이스 크기와 해당 컴포넌트의 비율을 알아와야 했는데 그 과정이 너무 번거로워 아래의 코드와 같이 함수에 기준 크기를 기입하면 자동으로 계산되게 만들어줬습니다.

import { Dimensions } from "react-native";

/**
 * 디자인 기준 화면 사이즈 (가로 기준)
 */
const baseDesignScreenSize = 390;
const { width } = Dimensions.get("window");

/**
 * 모바일 화면 크기에 맞게 조절된 사이즈를 반환 해주는 함수
 * @param baseDesignElementSize 디자인 기준 개체 사이즈
 * @returns 화면 비율에 맞게 조절된 크기를 반환
 */
export default function responsive(baseDesignElementSize: number): number {
  const screenRatio = width / baseDesignScreenSize;

  return baseDesignElementSize * screenRatio;
}

baseDesignElementSize에 피그마의 컴포넌트 크기를 입력 받도록 합니다.
baseDesignScreenSize에서 피그마에서 기준이 된 디아비스 혹은 템플릿의 가로 크기를 적어줍니다.
screenScale에서 디바이스의 가로 길이(width)와, baseDesignScreenSize의 크기를 나눠주고 비율을 계산합니다.
- 430(iPhone 15 Pro Max) / 390(Figma) = 1.1025641026 약 1.1배 더 크게 스케일링 합니다.
return에서 피그마의 컴포넌트 크기와 계산된 화면 비율를 나누어 반환합니다.

적용 전

function main() {
  const squalList = Array(10).fill(0);

  return (
    <SafeAreaView style={{ gap: 2, flexDirection: "row" }}>
      {squalList.map(() => (
        <View style={{ width: 38, height: 38, backgroundColor: "orange" }} />
      ))}
    </SafeAreaView>
  );
}

export default main;

적용 후

function main() {
  const squalList = Array(10).fill(0);

  return (
    <SafeAreaView style={{ gap: 2, flexDirection: "row" }}>
      {squalList.map(() => (
        <View
          style={{
            width: responsive(38),
            height: responsive(38),
            backgroundColor: "orange",
          }}
        />
      ))}
    </SafeAreaView>
  );
}

export default main;

style에 responsive 함수로 넣어주게 되면 피그마에서 최대한 의도한 대로 레이아웃을 만들 수 있게 됩니다.

3. 적용된 모습

Jongwon Park