🥲 완전히 해결되지 않은 방법입니다.
좋은 방법 있으면 댓글로 알려주세요!
문제
꾸준히 회사 CS로 들어오는 이슈 중 하나는, 갤럭시 폴드 / 태블릿과 같은 가로로 긴 기기에 대해 사용성이 떨어진다는 피드백이었다.
그도 그럴 것이, 디자인 단계에서 고려는 당연히 하지 않았고, 개발 단에서도 폴드 / 태블릿에 대한 대응을 전혀 생각하고 개발하지 않았기 때문이었다.
특히 width: '100%', aspectRatio: 0.5 과 같은 방법으로 개발한 경우, 가로로 긴 기기에서 너무 이미지가 커져서 사용성이 너무 떨어졌다.
iOS의 경우는 태블릿용 앱 자체를 배포를 하지 않아 문제가 생기지 않았지만, 안드로이드의 경우 문제가 생겼다.
해결법
양 옆 레터박스를 두어 비율을 고정함
태블릿용 UI를 새로 디자인 / 개발
- 앱을 디자인 리뉴얼한지 얼마 되지 않았고
- 새로 디자인하고 개발하는 건 공수가 너무 많이 든다고 생각해서
임시로 레터박스를 두는 식으로 문제를 해결하는 쪽으로 진행했다.
양 옆 레터박스를 두어 비율을 고정함
안드로이드의 maxAspectRatio 사용하는 방법
// AndroidManifest.xml
<activity
android:name=".MainActivity"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
android:label="@string/app_name"
android:launchMode="singleTask"
android:screenOrientation="portrait"
android:minAspectRatio="1.8"
android:resizeableActivity="false"
android:windowSoftInputMode="adjustPan">
...안드로이드 Manifest에서 액티비티 별 최소 / 최대 비율을 지정한다.
→ 우리는 새로로 긴 기기에 대응할 것으므로 최대 비율을 지정하면 된다.
resizableActivity='true' 일 경우에는 시스템이 관련 옵션을 무시하게 된다.
기본 값이 true이므로 명시적으로 false 값을 지정한다.
이렇게 하면 안드로이드 시스템에서 최대 / 최저 기기 비율을 판단하여 양 옆 레터박스를 만들어준다!
다만 문제는 Activity를 줄인 것이기 때문에 Dimensions에 의존하는 값들은 레터박스에 영향을 받지 않는다.
하단 TabLayout이 넘쳐 보이는 문제와, Dimensions에 의존하는 코드로 작성된 각종 컴포넌트들이 문제가 있었다.
Dimensions에 의존하는 값들을 하나로 관리하고 있었기 때문에,
const androidActivityMinAspectRatio = 1.8;
const isAndroidActivityMinAspectRatio =
Dimensions.get('screen').height / Dimensions.get('screen').width <
androidActivityMinAspectRatio && isAndroid;
export const dimesionWidth = isAndroidActivityMinAspectRatio
? DIMENSION_HEIGHT * (1 / androidActivityMinAspectRatio)
: Dimensions.get('screen').width;최소일 경우 해당되는 flag를 만들고, 이 값에 따라서 1/1.8을 높이에 곱해, dimesionWidth로 활용하였다.
→ RN 상에서 구현할 때보다 개발 공수도 적게 들고 네이티브 수준에서 개발을 끝낼 수 있었다.
하지만
이 방법의 어디가 문제인지는 모르겠지만, 일부 기기에서 레이아웃이 깨지는 문제가 있다는 제보를 받고 원래대로 롤백하게 됐다. 🥲
