플러터 강좌: 13.5 로또 앱 UI 완성하기

안녕하세요! 이번 강좌에서는 플러터를 이용하여 로또 앱의 사용자 인터페이스(UI)를 완성하는 방법에 대해 자세히 살펴보겠습니다. 이 강좌는 플러터를 처음 접하는 분들부터, 이미 경험이 있는 분들까지 모두에게 유익할 것입니다. 물론, 이전 강좌들을 통해 플러터의 기본 개념과 구성 요소에 대해 학습한 분들이라면 더욱 쉽게 따라오실 수 있을 것입니다.

1. 개요

우리는 로또 앱을 통해 사용자가 쉽게 번호를 생성하고 확인할 수 있는 기능을 구현할 것입니다. 로또 앱은 단순한 UI와 사용자 친화적인 디자인을 필요로 합니다. 이를 통해 사용자들은 로또 번호를 생성하고, 쉽게 확인할 수 있게 됩니다. 이번 강좌에서는 로또 앱의 UI를 완성하고, 기본적인 로또 번호 생성 기능을 추가할 예정입니다.

2. 환경 설정

플러터를 설치하고 설정하는 과정은 다음과 같습니다:

플러터 SDK를 다운로드하여 설치합니다.
IDE로는 VS Code 또는 Android Studio를 사용할 수 있습니다. 본 강좌에서는 Android Studio를 기준으로 설명하겠습니다.
Android Studio에서 emulator를 설정합니다.
플러터의 프로젝트를 생성하고, 필수 플러그인을 설치합니다.

3. 프로젝트 생성

이제 새로운 플러터 프로젝트를 생성해보겠습니다. Android Studio를 열고, 다음 단계를 따라 주세요:

File 메뉴에서 New > New Flutter Project를 선택합니다.
Flutter Application을 선택한 후, 다음을 클릭합니다.
Project Name, Project Location 등을 입력하고 Finish를 클릭합니다.

이제 Flutter 프로젝트의 기본 구조가 만들어졌습니다. main.dart 파일을 열어주세요.

4. UI 구성 요소

로또 앱의 UI는 다음과 같은 주요 구성 요소로 이루어져 있습니다:

앱 바 (App Bar): 앱의 제목과 메뉴를 포함합니다.
번호 선택 영역: 랜덤으로 생성된 로또 번호를 보여주는 영역입니다.
버튼: 번호를 생성하는 버튼이 필요합니다.

이제 UI를 구성하는 코드를 작성해보겠습니다. 다음은 기본적인 UI 레이아웃입니다:


import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '로또 번호 생성기',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LottoHome(),
    );
  }
}

class LottoHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('로또 번호 생성기'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '생성된 번호:',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            // 번호 출력 부분
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {},
              child: Text('번호 생성'),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드는 기본적인 앱 구조를 잡아주며, 앱 바와 버튼을 배치했습니다.

5. 디자인 원칙

UI 디자인에서 가장 중요한 점은 사용자 경험을 고려하는 것입니다. 사용자들이 쉽게 이해하고 사용할 수 있도록 직관적인 UI를 만들어야 합니다. 다음과 같은 디자인 원칙을 준수해야 합니다:

일관성: 모든 화면에서 사용되는 색상, 버튼 스타일 등이 일관되게 유지되어야 합니다.
접근성: 모든 사용자들이 쉽게 사용할 수 있도록 접근성을 고려해야 합니다.
명확성: 앱의 모든 요소는 명확하게 표시되어야 하며 사용자에게 혼란을 주지 않아야 합니다.

6. 필요한 패키지

로또 번호를 생성하기 위해 몇 가지 패키지를 사용할 수 있습니다. 예를 들어, random_number와 같은 패키지를 사용할 수 있습니다. 이를 위해 pubspec.yaml 파일에 다음을 추가합니다:


dependencies:
  flutter:
    sdk: flutter
  random_number: ^1.0.0

이 패키지를 통해 랜덤한 숫자를 생성할 수 있습니다. 패키지를 추가한 후 flutter pub get 명령어를 통해 패키지를 설치합니다.

7. 로또 번호 생성기 구현

이제 로또 번호를 랜덤으로 생성하는 기능을 구현하겠습니다. 버튼 클릭 시 번호가 생성되도록 코드를 수정하겠습니다:


import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '로또 번호 생성기',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LottoHome(),
    );
  }
}

class LottoHome extends StatefulWidget {
  @override
  _LottoHomeState createState() => _LottoHomeState();
}

class _LottoHomeState extends State {
  List _lottoNumbers = [];

  void _generateLottoNumbers() {
    final Random random = Random();
    _lottoNumbers = List.generate(6, (index) => random.nextInt(45) + 1)
      ..sort();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('로또 번호 생성기'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '생성된 번호: ${_lottoNumbers.join(', ')}',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _generateLottoNumbers,
              child: Text('번호 생성'),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드는 버튼 클릭 시 랜덤으로 로또 번호를 생성하여 화면에 출력합니다.

8. 최종 코드

지금까지 작성한 코드를 통합하여 최종 코드를 완성합니다:


import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '로또 번호 생성기',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LottoHome(),
    );
  }
}

class LottoHome extends StatefulWidget {
  @override
  _LottoHomeState createState() => _LottoHomeState();
}

class _LottoHomeState extends State {
  List _lottoNumbers = [];

  void _generateLottoNumbers() {
    final Random random = Random();
    _lottoNumbers = List.generate(6, (index) => random.nextInt(45) + 1)
      ..sort();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('로또 번호 생성기'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '생성된 번호: ${_lottoNumbers.join(', ')}',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _generateLottoNumbers,
              child: Text('번호 생성'),
            ),
          ],
        ),
      ),
    );
  }
}

9. 마무리

이번 강좌에서는 플러터를 사용하여 로또 앱의 사용자 인터페이스(UI)를 완성하는 방법을 단계별로 살펴보았습니다. 우리는 UI를 구성하고, 버튼 클릭 시 로또 번호를 생성하는 기능을 구현했습니다. 이 강좌를 통해 플러터의 기본적인 UI 구성 방법과 상태 관리에 대해 배울 수 있었습니다.

앞으로 더 복잡한 기능을 추가하거나, 사용자 경험을 향상시키는 방법을 탐구해보세요. 플러터는 매우 강력한 프레임워크로, 다양한 앱을 개발할 수 있는 가능성을 제공합니다. 감사합니다!