[React Native] aspectRatio

안녕하세요. 모리스 입니다.😀

지금은 iOS 개발을 해서 그런일은 없지만 예전에 RN개발을 할 때 AOS 기기에서 일어났던 이슈를 해결하며 알았던 내용을 작성해 보려해요.

그럼 시작해 보겠습니다.!

📱 갤럭시 폴드, 넌 대체 왜 그러는 거니…

React Native로 앱을 개발하던 중, 메인 화면에 공지사항 팝업을 띄우는 기능을 구현해야 했어요.

기능 구현은 금방 끝났고, 서버에서 내려주는 공지 이미지를 잘 렌더링하는 것까진 문제없었습니다.
일반적인 디바이스에선 이미지가 예쁘게 잘 나오더라고요.

하지만… 미처 생각하지 못한 한 디바이스가 있었으니…
바로 갤럭시 폴드…!

🤔 갤럭시 폴드는 뭐가 다른가요?

갤럭시 폴드는 특이한 구조를 가지고 있어요.

• 접었을 땐 일반 스마트폰보다 조금 더 좁은 화면
• 펼쳤을 땐 거의 태블릿에 가까운 넓은 화면(AOS는 이걸 테블릿으로 인지)

즉, 디바이스 크기에 따라 콘텐츠가 꽤 많이 달라 보일 수 있는 환경이라는 거죠.

🧪 초기 구현

처음에는 다음과 같이 레이아웃을 잡았어요.

• 팝업의 height는 디바이스의 screen 높이를 2.5로 나눈 값
• 좌우 여백은 marginHorizontal: 40

아이폰 11에서 테스트해보면 다음처럼 아주 잘 나옵니다.

❌ 문제 발생: 갤럭시 폴드

그런데 갤럭시 폴드에서 테스트해보니…

헉... 이미지 정보가 잘려버렸어요.

❓ 'contain' 쓰면 되는 거 아냐?

많은 분들이 "resizeMode: 'contain'"을 쓰면 되지 않냐고 하시지만…

이미지가 container 안에 비율을 맞춰 억지로 들어가서 생긴 공간이 붕 떠 버려요.
이건 UX적으로도 별로 좋지 않죠.

🔎 해결의 실마리: aspectRatio

그러던 중 오늘의 주인공인 aspectRatio 속성을 알게 되었어요.

📝 aspectRatio란?

aspectRatio는 React Native에서 요소의 가로/세로 비율을 강제할 때 사용하는 속성이에요.
가로 또는 세로 중 하나만 지정해두면, 나머지 하나는 비율에 맞춰 자동 계산돼요.

 

✅ 수정 방법

기존 방식

height: SCREEN_HEIGHT / 2.5,
marginHorizontal: 40,

수정 후

height: SCREEN_WIDTH - 80, // 좌우 margin 고려
aspectRatio: 1 / 1,        // 정사각형 비율 유지

즉, 화면 너비 기준으로 높이를 설정하고,
aspectRatio: 1로 설정해서 정사각형 비율을 강제했어요.

🎉 적용 결과

갤럭시 폴드에서도 정보가 잘리지 않고 꽉 차게 잘 나옵니다!

펼친 상태 (태블릿 모드)

접은 상태 (스마트폰 모드)

✅ 마무리

aspectRatio를 활용하면 화면 비율이 기기마다 다르더라도 안정적인 UI를 구현할 수 있어요.
이번 이슈를 통해 디바이스 대응은 역시 꼼꼼한 테스트와 유연한 레이아웃 처리가 필수라는 걸 다시 한 번 느꼈습니다.

갤럭시 폴드야… 다음엔 미리 테스트할게… 😮‍💨