피그마 스타일링 질문

작성한 질문수 25

0

안녕하세요. 가로는 width 퍼센트 또는 flex, 세로는 고정값으로 하는것이 일반적인것 같습니다. 또는 minHeight를 지정하거나, 좀더 세세한 조정을 하는 방법도 있는데요, Dimension 이라는 것을 이용하면 기기의 높이나 넓이를 구할수있어서 이걸로 대응하셔도 됩니다.

ex)

import { Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');

// 화면 폭의 90% 카드
const styles = StyleSheet.create({
  card: {
    width: width * 0.9,
    height: height * 0.3,
  },
});


//ex) 또는 기기별로 대응 
const isSmall = width < 375;   // SE나 미니같은 작은기기

<View style={{ paddingHorizontal: isSmall ? 12 : 20, gap: isSmall ? 8 : 16 }}>
  <Text style={{ fontSize: isSmall ? 14 : 16 }}>{title}</Text>
</View>

또는 Dimension 대신 useWindowDimensions 훅을 이용해서 사용해도됩니다!

ex)

import { useWindowDimensions } from 'react-native';

function Sheet() {
  const { width, height, fontScale } = useWindowDimensions();  

  return <View style={{ maxHeight: height * 0.8 }} />;
}

그리고 RN의 Text컴포넌트는 allowFontScaling 이라는 속성이 있는데, 시스템 텍스트 크기를 무시하려면 이걸 사용하시면 됩니다.

ex) 이걸 false로 주게 되면 시스템 자체에서 글씨를 크게 하더라도, 폰트가 커지지않습니다.

// 아이콘 라벨, 뱃지 숫자 등 깨지면 안 되는 곳을 선택적으로 대응 하실 수 있습니다.
<Text allowFontScaling={false}>99+</Text>

0

안녕하세요, 인프런 AI 인턴입니다. 나마스테님.

질문해 주신 내용에 대해 답변을 드리겠습니다. React Native에서는 스타일을 적용할 때, 화면 크기와 해상도에 대한 여러 가지 대응 방법이 있습니다.

1. 디스플레이 독립적인 픽셀(DIP): React Native는 실제 픽셀 대신 DIP를 사용하여 화면에 요소를 렌더링합니다. 이는 다양한 화면 해상도에서 유연하게 작동하도록 설계되어 있습니다. width: 100%로 지정하면, 부모 요소의 가로(width)에 맞춰서 전환되어 디스플레이 크기와 상관없이 요소가 다 대응됩니다.

2. flexBox 사용: 개발자는 보통 flexBox를 사용하여 LCD와 OLED 디스플레이 사이에서의 일관성을 유지하려고 합니다. flexBox를 사용하면 다양한 디바이스 화면 크기에 대해 더 유연하게 레이아웃을 설정할 수 있습니다. 특히, 요소 사이의 비율을 유지하고 싶을 때 유용합니다.

3. 폰트 크기와 텍스트 크기 조절: 폰트 사이즈의 경우, 사용자가 텍스트 크기를 조정할 수 있기 때문에, 사용자가 설정한 시스템 폰트 크기에 맞춰 UI가 조정되도록 설계하는 것이 좋습니다. 그렇지 않을 경우, 텍스트가 UI를 넘어서거나 잘리는 문제가 발생할 수 있습니다.

실무에서는 이러한 요소들이 조합되어 적절한 사용자 경험을 보장할 수 있도록 설계하고 있으며, 기기에 따른 다양한 테스트가 진행됩니다. 기본적으로 flexBox를 통한 레이아웃 설정과 시스템 폰트 크기를 고려한 텍스트 조정 방법을 통해 여러 환경에서 UI가 균일하게 보이도록 합니다.

관련하여 도움이 될 수 있는 게시물은 다음과 같습니다:
- Dimensions 이용해서 디바이스마다 다르게 스타일링 하는 부분

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.