테블릿 기기에서의 반응형

Question

개발을 진행하면서 ios, 안드로이드 휴대폰크기로는 확인을 하면서 진행했는데 테블릿 크기에서 확인해보니 많이 작아지는 현상이 있습니다. 혹시 현업에서는 이런 처리를 어떻게 고려하시는지 궁금합니다 !

Kyo · Answer

supportsTablet 설정 해보시겠어요? https://docs.expo.dev/versions/latest/config/app/#supportstablet

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. zoezoe님! 모바일 앱 개발 시 태블릿과 같은 큰 화면에서도 UI가 잘 작동하도록 개발하는 것은 매우 중요합니다. 일반적인 방법으로, 반응형 디자인을 고려하여 다음과 같은 접근 방식을 사용할 수 있습니다: 미디어 쿼리를 통한 반응형 디자인 적용 : 웹 개발에서 자주 사용하는 미디어 쿼리와 비슷한 개념으로, React Native에서도 화면 크기에 따라 스타일을 다르게 적용할 수 있습니다. Dimensions API를 활용하여 디바이스의 너비와 높이를 가져와 판단할 수 있습니다. 플렉스박스(Flexbox) 이용하기 : 플렉스박스는 다양한 화면 크기에서 레이아웃을 동적으로 관리하는 데 유용합니다. 특히 flexDirection , alignItems , justifyContent 등의 속성을 사용하여 레이아웃을 최적화할 수 있습니다. 모든 요소 크기 비율로 계산 : 화면에 표시되는 각 요소의 크기를 고정된 값이 아닌 퍼센트나 반응형 단위로 설정함으로써, 디바이스 화면 크기에 상관없이 요소가 동적으로 조정될 수 있도록 합니다. 디자인 패턴 및 라이브러리 활용 : Tailwind CSS, Styled-components, Emotion과 같은 사용되는 라이브러리들도 반응형 디자인의 구현을 돕는 데 효과적입니다. 태블릿 등 큰 화면에 대한 스타일 규칙을 적용할 때 유리합니다. 이와 관련하여 더 자세한 내용을 알고 싶으시다면, 아래의 유사한 질문과 답변을 참조하시기를 권장드립니다. 리액트 네이티브 스타일 라이브러리 사용에 대한 궁금증 이 게시물에서는 리액트 네이티브 스타일링 라이브러리에 대한 정보를 얻을 수 있습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.