Mobile resolution issue 대응 solution

(GPT 생성 결과물을 기반으로 정밀하게 편집하였으며, 등장하는 모든 컨텐츠는 필자가 과거 소속되었거나 관련한 조직의 디자인 시안을 바탕으로 직접 만들었습니다.)

Frontend 개발자라면 누구나 한 번쯤은 겪었을 mobile resolution 문제. 특히 다양한 device 환경에서 발생하는 layout 깨짐은 정말 골칫거리입니다. Design시안은 가장 흔하게 사용되는 resolution 1개를 기준으로 나오는 것이 일반적이어서, 그보다 좁은 resolution을 대응하느라 디자이너와 개발자 모두 비생산적인 시간을 낭비하게 됩니다.

이번 글에서는 iOS (iPhone 16 Pro Max, iPhone 16e) 및 Android Fold 기기의 outer display를 놓고, resolution 관련 문제 해결을 위한 실험내용을 공유합니다.

• Sample App: Flutter로 제작, 상단 AppBar와 그 아래 나머지 공간은 모두 WebView 입니다.

1️⃣ 문제 상황: Device 폭에 따라 레이아웃 붕괴

첫째 screenshot은 기존 구현 방식입니다. WebView의 content는 device의 폭에 따라 다르게 보입니다.

• iPhone 두 기기에서는 다행히 적절하게 대응되고 있지만
• Android Fold의 좁은 outer display에서는 상단의 <Daily/weekly 선택> Button Group과 <순위표> text, cell layout이 깨지는 현상이 명확히 확인됩니다.

이는 viewport 설정이 고정되거나 device 폭을 고려하지 않은 % 기반 width, 혹은 px/dp 기반 style로 인해 발생하는 전형적인 문제입니다.

2️⃣ WebView 개선: Viewport unit으로 반응형 설정

둘째 screenshot에서는 WebView 내의 CSS에 vw 등의 viewport unit을 적극적으로 활용하여 device 폭에 관계없이 비율 유지가 되도록 조정했습니다.

• layout은 더 이상 깨지지 않고
• 작은 화면에서도 font size, card 간격, button 너비 등 모든 요소가 비율에 맞게 축소되며 안정적으로 표현됩니다.

이제 WebView만큼은 원래 Design의 의도가 항상 존중되며, 어떤 device에서든 예측 가능한 출력을 보장할 수 있게 되었죠.

3️⃣ AppBar도 통일된 반응형 적용

마지막 screenshot에서는 한 걸음 더 나아가 WebView 뿐 아니라 상단의 AppBar에도 동일한 비율 기반 설계 철학을 적용했습니다.

• MediaQuery.of(context).size.width를 기준으로 AppBar 내 test(icon), spacing 등을 재설계했으며
• 그 결과, device 종류에 관계없이 완전히 일관된 layout을 달성할 수 있었습니다.

⚠️ 보충 의견: 모든 화면에 같은 비율을 적용할 때의 한계

이번 방식은 Mobile 기기, 특히 portrait 비율을 가진 환경에서는 강력한 효과를 발휘하지만, tablet 이상의 desktop, TV급 해상도로 넘어가면 다른 접근이 필요할 수 있습니다.

이유는 단순합니다:

• 큰 화면에서 동일한 비율을 유지하면 당연히 넓어진 폭에 따라 모든 요소의 크기가 지나치게 커지므로
• 정보량이 지나치게 제한되는 까닭에 사용자 입장에서 낭비된 공간에 대한 불만이 생길 수 있습니다.

따라서 대안으로는:

• 특정 resolution 이상에서는 비율 기반에서 해제하고,
• Grid layout(breakpoints), column 확장, 추가 정보 영역 노출 등을 통해 가로 공간을 적극 활용하는 방식이 필요합니다.

간단히 말해, mobile에서는 ‘일관성’, 대형 device에서는 ‘정보의 밀도’를 중심으로 설계 전략을 달리하는 것이 이상적입니다.