react native 화면 scale 처리 ( 모바일 설정 무시 방법 )

서론

RN 뿐만아니라 네이티브앱이나 하이브리드 웹을 개발해 본 사람이라면, 화면 해상도나 크기의 차이에서 발생하는 스케일 문제를 한번씩 경험 했을 것이다. 

해상도나 기본 화면 크기에 영향없도록 개발하는 방법은 안드로이드의 경우 dp를 주거나 %로 적절히 레이아웃 크기가 비율대로 유지되도록 하는 방법이 있으나, 이러한 방법조차 스마트폰 자체의 설정에는 영향을 받는다.

 

 

해당 글은 

 

모바일 설정 -> 글자크기 및 디스플레이 크기 설정을 변경하여도 일관된 사이즈 비율의 앱이 필요한 사람에게 도움이 될 것같다.

 

아래 왼쪽처럼 설정을 놓고 라인을 켜면 오른쪽처럼 글자 크기에 이빠이 커진다는 소리...

글자크기 뿐만아니라 설정/ 화면크게작게 에서 크게 해놓으면 더 소름돋는 화면을 볼수있다는 것.

 

 

물론 극단적으로 크게 해놓은 경우는 많이 없겠지만

 

부득이하게 모든 설정을 무시하고 일정한 크기의 화면을 유지할 앱이 필요할 수도 있다. 

예를들어 대표적인 게시판형태의 블라인드나 네이버까페 앱을 보면 텍스트나 콘텐츠가 많은 앱들은 전부 일관된 크기의 텍스트 + 컨텐츠를 유지하는 것을 볼수 있다.

 

 

 

react native도 일반 안드로이드나 IOS 네이티브 앱처럼, 스마트폰 자체의 설정을 무시하는 옵션은 없다. ( 신나게 찾아봤는데 없었으니, 있으면 댓글좀 부탁) 

 

따라서 style에 height, width 옵션 및 scale 설정을 일일이 해줘야 한다.

 

그래서 나는 설정을 통합할 하나의 파일을 만들었다.

 

 

scailing.js

import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');

// 내가 개발 테스트 한 모바일의 실제 가로 세로 상수값 기입
const guidelineBaseWidth = 411.42857142857144;
const guidelineBaseHeight = 797.7142857142857;
const guideScale = Math.sqrt(guidelineBaseWidth * guidelineBaseHeight)

const scale = Math.sqrt(width * height) / guideScale;
const horiPer = width / guidelineBaseWidth;
const vertiPer = height / guidelineBaseHeight;


const verticalScale = size => horiPer * size;
const horizontalScale = size => vertiPer * size;
const moderateScale = size => scale * size;

export {moderateScale, verticalScale, horizontalScale};

 

위의 scailing.js 의미하는 바는

1. 내가 개발하면서 테스트 한 스마트폰의 가로 세로값을 아래 변수에 넣어주고

const guidelineBaseWidth = 411.42857142857144;
const guidelineBaseHeight = 797.7142857142857;

 

2. 내가 테스트 한폰에서 신나게 이쁘게 멋지고 아름답게 만든다.

 

3. 실제 구동될 스마트폰과의 오차 scale을 계산

const scale = Math.sqrt(width * height) / guideScale;
const horiPer = width / guidelineBaseWidth;
const vertiPer = height / guidelineBaseHeight;

 

 

4. 위 scale 적용

- scaling.js 를 import 

- 아래처럼 style 값 자체에 verticalScale, horizontalScale, moderateScale 세가지의 함수를 옵션으로 처리해주면 된다.

 

verticalScale : 세로 길이에만 영향을 주는 값

horizontalScale : 가로 길이에만 영향을 주는 값

moderateScale : 글자 크기나, 여튼 대각선으로 가로세로 동일한 비율로 변화하는 값

import {verticalScale, horizontalScale, moderateScale} from '../util/scaling';


const styles = StyleSheet.create({
    all: {
        flex: 1,
        paddingTop: verticalScale(20),
        backgroundColor: "#E5E5E5"
    },
    settingButton: {
        height: verticalScale(50),
        width: horizontalScale(50)
    },
    titleText: {
        fontFamily: "NanumMyeongjo",
        fontSize: moderateScale(40),
    },
});

 

 

 

문제 및 결론

처음에 위처럼 모든 style에 연산을 넣었을때의 문제는 예상 가능하다. 

한화면에 아주아주, 느므느므 많은 글자들과 콘텐츠가 있을때는 문제가 발생할 수도 있겠다. 

 

따라서 나는 위의 설정을 모든 컴포넌트에 적용하지는 않고, 어쩔수 없이 absolute의 값이 들어가서? 전체적인 균형이 유지되어야 할때? 그정도의 component에서 위 설정을 먹이는 것을 추천한다.

 

혹은, 나의 앱을 너무도 잘 대표해주는 디자인과 콘텐츠 배치가 있어서 !  그 페이지는 심미적으로 너무도 딱딱딱 맞아떨어져야만 한다! 하는 경우에 위의 설정을 이용해 주자.

 

 

어떤 설정에서도 크게 모나지 않으면 통과! 할만한 페이지는 굳이 저럴 필요가 있나 싶다.