아토믹데브_5_취업 준비생을 위한 모바일 게임 개발 여정

제5강: 첫 번째 화면 - 게임의 메인 화면 구현

---

학습 목표:

이번 강의에서는 "BrainBox Delivery" 게임의 메인 화면을 구현하는 방법을 학습합니다. 여러분은 기본 레이아웃을 구성하고, 화면 전환(Navigation)을 설정하며, 메인 메뉴와 게임 시작 버튼을 구현하는 과정을 거치게 됩니다. 이 과정에서 Flexbox 또는 Column/Row 위젯을 사용하여 화면을 구성하고, 사용자 경험을 개선할 수 있는 UI 요소를 추가하게 됩니다.

---

1. 기본 레이아웃 구성: Flexbox 또는 Column/Row 위젯 사용

게임의 메인 화면을 구성하기 위해서는 먼저 레이아웃을 설계해야 합니다. React Native에서는 Flexbox를, Flutter에서는 Column/Row 위젯을 사용하여 레이아웃을 구성할 수 있습니다.

1.1 React Native - Flexbox를 사용한 레이아웃 구성

React Native에서 Flexbox는 레이아웃을 설계하는 강력한 도구입니다. Flexbox는 레이아웃을 가로와 세로 축으로 유연하게 배치할 수 있게 해줍니다.

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

const MainMenu = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>BrainBox Delivery</Text>
      <Button title="Start Game" onPress={() => navigation.navigate('GameScreen')} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
  },
});

export default MainMenu;

 

위의 코드에서 flex: 1은 View가 화면 전체를 차지하도록 하고, justifyContent: 'center'와 alignItems: 'center'는 컨텐츠를 중앙에 배치합니다.

1.2 Flutter - Column/Row 위젯을 사용한 레이아웃 구성

Flutter에서는 Column과 Row 위젯을 사용하여 화면을 구성할 수 있습니다. Column은 수직으로 위젯을 배치하고, Row는 수평으로 배치합니다.

import 'package:flutter/material.dart';

class MainMenu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'BrainBox Delivery',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/game');
              },
              child: Text('Start Game'),
            ),
          ],
        ),
      ),
    );
  }
}

 

위의 Flutter 코드에서 Column 위젯을 사용해 텍스트와 버튼을 수직으로 배치하고, mainAxisAlignment: MainAxisAlignment.center를 사용해 중앙에 배치합니다.

---

2. 화면 전환(Navigation) 설정

메인 메뉴에서 게임 화면으로 이동하려면 화면 전환(Navigation) 기능을 설정해야 합니다. React Native와 Flutter 모두 간단하게 화면 전환을 구현할 수 있는 도구를 제공합니다.

2.1 React Native - React Navigation 사용

React Native에서 화면 전환을 구현하려면 React Navigation 라이브러리를 사용합니다. 이 라이브러리를 통해 쉽게 여러 화면 간의 전환을 구현할 수 있습니다.

1. React Navigation 설치:

   npm install @react-navigation/native
   npm install @react-navigation/stack

    

React Navigation 설정:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import MainMenu from './MainMenu';
import GameScreen from './GameScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="MainMenu">
        <Stack.Screen name="MainMenu" component={MainMenu} />
        <Stack.Screen name="GameScreen" component={GameScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

이 코드를 통해 메인 메뉴와 게임 화면 간의 전환이 가능합니다.

2.2 Flutter - Navigator 사용

Flutter에서는 Navigator 위젯을 사용하여 화면 간 전환을 쉽게 구현할 수 있습니다.

import 'package:flutter/material.dart';
import 'main_menu.dart';
import 'game_screen.dart';

void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => MainMenu(),
      '/game': (context) => GameScreen(),
    },
  ));
}

 

위의 코드에서 routes를 통해 각 화면을 등록하고, Navigator.pushNamed를 통해 화면 전환을 구현합니다.

---

3. 메인 메뉴 및 게임 시작 버튼 구현

게임의 메인 메뉴는 사용자에게 첫 인상을 주는 중요한 요소입니다. 사용자가 게임을 시작할 수 있는 버튼과 메뉴를 잘 구성하는 것이 중요합니다.

3.1 React Native - 메인 메뉴와 게임 시작 버튼 구현

React Native에서는 Button 컴포넌트를 사용하여 게임 시작 버튼을 구현할 수 있습니다.

javascript

코드 복사

<Button title="Start Game" onPress={() => navigation.navigate('GameScreen')} />

이 버튼을 누르면 GameScreen으로 이동합니다.

3.2 Flutter - 메인 메뉴와 게임 시작 버튼 구현

Flutter에서는 ElevatedButton 위젯을 사용하여 게임 시작 버튼을 구현할 수 있습니다.

dart

코드 복사

ElevatedButton(
  onPressed: () {
    Navigator.pushNamed(context, '/game');
  },
  child: Text('Start Game'),
)

이 버튼을 누르면 '/game' 경로로 이동하여 게임 화면이 표시됩니다.

---

이 강의를 통해 여러분은 "BrainBox Delivery" 게임의 메인 화면을 구현하는 데 필요한 기술을 습득하게 되었습니다. 앞으로의 강의에서는 더욱 복잡한 게임 기능을 구현해 나갈 것입니다.