모바일 앱 개발을 위한 UI 구성과 스타일링 - React Native #4

이번에는 React Native의 Flexbox에 대해 살펴보고, 기본적인 UI 요소와 CSS까지 정리해 보도록 하겠습니다.

모바일 앱 개발을 위한 UI 구성과 스타일링

 

 

React Native로 간단한 UI 만들기

  Flexbox와 CSS

React Native는 웹 기술과 유사한 스타일링 방식을 사용하지만, 핵심 레이아웃 시스템으로는 Flexbox를 채택합니다. Flexbox는 화면 크기가 달라져도 레이아웃이 유연하게 변하도록 돕는 체계입니다. 기존의 웹 CSS와 유사하지만, React Native에서는 div 대신 View라는 컴포넌트를 사용하고, 스타일은 객체 형태로 작성합니다.

• Flexbox인가: 모바일 환경에서는 다양한 기기 해상도와 화면 비율을 맞춰야 하므로 유연한 레이아웃 시스템이 필수적입니다. Flexbox는 아이템 크기 조절, 정렬, 배치를 직관적으로 처리할 수 있어 빠른 UI 구성이 가능합니다.

반응형

 

 

자주 쓰이는 스타일 속성

React Native에서 스타일을 작성할 때는 보통 아래와 같은 속성들을 자주 사용합니다.

• flexDirection: 아이템의 정렬 방향을 결정합니다.
• justifyContent: 가로 또는 세로 방향으로 공간을 어떻게 배분할 지를 정합니다.
• alignItems: 반대 축(교차 축)에서 아이템을 어떻게 정렬할지 결정합니다.
• flex: 남은 공간을 얼마나 차지할지를 비율로 설정합니다.
• padding, margin: 내부·외부 여백을 설정합니다.

 

콘테이너와 아이템 관계

Flexbox에서 가장 중요한 점은 “부모-자식 관계”입니다. 부모인 View 컴포넌트에 설정한 flexDirection, justifyContent, alignItems 등이 자식 요소 배치에 직접적인 영향을 줍니다. 예를 들어, 부모에 flexDirection: "row"를 설정하면 자식 요소들이 가로 방향으로 배치됩니다.

 

예시:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function FlexboxExample() {
  return (
    <View style={styles.container}>
      <View style={styles.box1}>
        <Text>Box 1</Text>
      </View>
      <View style={styles.box2}>
        <Text>Box 2</Text>
      </View>
      <View style={styles.box3}>
        <Text>Box 3</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#f0f0f0'
  },
  box1: {
    backgroundColor: 'tomato',
    padding: 10
  },
  box2: {
    backgroundColor: 'skyblue',
    padding: 10
  },
  box3: {
    backgroundColor: 'limegreen',
    padding: 10
  }
});

 

위 예시에서는 flexDirection: 'row' 덕분에 세 개의 박스가 가로로 나란히 배치되며, justifyContent: 'space-around'로 인해 각 박스 사이 간격이 적절히 나뉩니다.

 

 

  버튼, 텍스트, 이미지 추가하기

React Native는 화면에 요소를 표시하기 위한 다양한 기본 컴포넌트를 제공합니다. 이 중 자주 쓰이는 컴포넌트는 다음과 같습니다.

1. Button
   • 터치 이벤트를 처리하는 기본 버튼 컴포넌트
   • 매우 간단한 스타일 옵션을 제공 (플랫폼 별 기본 스타일로 렌더링)
   • 복잡한 디자인이 필요한 경우에는 TouchableOpacity나 Pressable을 활용해 직접 UI를 구성하기도 함
2. Text
   • 문자열을 화면에 표시하는 데 사용
   • 스타일 속성을 통해 폰트 크기(fontSize), 폰트 굵기(fontWeight), 색상(color) 등을 설정 가능
3. Image
   • 로컬 혹은 원격 이미지 파일을 보여주는 컴포넌트
   • source 속성에 이미지 경로를 지정하고, style을 통해 크기나 여백 등을 조절

 

 

 

속성과 스타일 설정 방법

컴포넌트를 어떻게 배치하느냐도 중요하지만, 속성을 제대로 이해하는 것이 UI 구성에 큰 도움이 됩니다.

• Button 예시:

<Button
  title="눌러주세요"
  onPress={() => alert("Button pressed!")}
  color="blue" // iOS, Android 간 일부 차이 존재
/>

버튼의 색상은 플랫폼에 따라 다르게 표현될 수 있으므로, 특정 디자인을 고집해야 한다면 TouchableOpacity를 활용해 직접 스타일을 주는 방법을 고려합니다.

• Text 예시:

<Text style={{ fontSize: 20, fontWeight: 'bold', color: '#333' }}>
  안녕하세요, React Native!
</Text>

 `Text` 컴포넌트 안에는 여러 줄의 텍스트를 작성할 수 있으며, 스타일링 옵션이 풍부합니다.

 

• Image 예시:

<Image
  source={{ uri: 'https://example.com/myImage.png' }}
  style={{ width: 100, height: 100, borderRadius: 50 }}
/>

원격 이미지를 불러올 경우 보통 uri 속성을 사용하며, 로컬 이미지를 사용할 때는 require() 함수를 씁니다.

 

 

  React Native에서의 레이아웃 구성

모바일 앱의 경우 화면이 협소하기 때문에, 상단에 헤더나 타이틀 바를 두고, 중간 부분에 본문을 배치한 뒤, 하단에 고정된 버튼 영역을 두는 식으로 구획을 나누면 UI가 한눈에 들어옵니다. 예를 들어, 하나의 View를 헤더로 사용하고, 다른 View를 본문으로, 또 다른 View를 푸터로 구분할 수 있습니다. 이를 Flexbox로 제어하면 간단히 구획이 나뉩니다.

<View style={{ flex: 1 }}>
  {/* 상단 헤더 */}
  <View style={{ flex: 0.2, backgroundColor: '#ececec' }}>
    <Text>헤더</Text>
  </View>
  
  {/* 본문 영역 */}
  <View style={{ flex: 0.6, backgroundColor: '#ffffff' }}>
    <Text>본문 내용</Text>
  </View>
  
  {/* 하단 푸터 */}
  <View style={{ flex: 0.2, backgroundColor: '#ececec' }}>
    <Text>푸터</Text>
  </View>
</View>

flex: 0.2, flex: 0.6와 같은 방식으로 영역을 배분하면, 화면 비율에 맞추어 각각의 뷰가 차지하는 공간이 달라집니다.