[플러터] 새 앱 생성하기

소요 시간: 5분 조회수: 90

플러터는 현대 모바일 애플리케이션 개발에서 필수적인 도구로 자리잡고 있습니다. 이번 글에서는 VS Code를 사용하여 플러터 샘플 앱을 만드는 방법을 단계별로 설명하겠습니다. 이 가이드는 플러터 개발을 처음 접하는 분들을 위해 작성되었으며, 플러터 DevTools를 사용하여 디버깅하는 방법도 포함하고 있습니다.


플러터 개발 환경 설정

플러터로 개발하기 위해서는 먼저 VS Code에 플러터 확장을 설치해야 합니다. 이 확장은 플러터 DevTools를 사용할 수 있게 해주며, 자동으로 다트(Dart) 확장도 설치됩니다. 이를 통해 애플리케이션을 디버그할 수 있습니다.

명령 팔레트 열기

VS Code에서 명령 팔레트를 열기 위해서는 다음 단계를 따릅니다:

  1. 상단 메뉴에서 View > Command Palette를 클릭하거나 Control + Shift + P를 누릅니다.
  2. 명령 팔레트가 열리면, "flutter"를 입력합니다.
  3. 목록에서 Flutter: New Project를 선택합니다.

새로운 플러터 프로젝트 생성

새 프로젝트를 생성하기 위한 다음 단계는 다음과 같습니다:

  1. "Which Flutter Project"라는 메시지가 나타나면 Application을 선택합니다.
  2. 새 프로젝트 폴더의 부모 디렉터리를 생성하거나 선택합니다.
  3. 프로젝트 이름을 묻는 메시지가 나타나면 test_drive를 입력하고 Enter 키를 누릅니다.
  4. 프로젝트 생성이 완료될 때까지 기다립니다.


프로젝트 구조 이해하기

새로 생성된 플러터 프로젝트는 특정한 디렉터리 구조를 가지고 있습니다. 주요 디렉터리와 파일들을 이해하는 것은 효율적인 개발의 첫 걸음입니다.

pubspec.yaml 파일은 프로젝트의 메타데이터와 의존성을 관리합니다. 여기서 애플리케이션의 이름, 버전, 사용된 패키지 등을 정의합니다. 필요에 따라 의존성을 추가하거나 업데이트할 수 있습니다.

lib 디렉터리에는 Dart 언어로 작성된 코드가 위치하며, main.dart 파일이 애플리케이션의 진입점입니다.

메인 다트 파일 열기

프로젝트가 생성되면, lib 디렉터리 아래의 main.dart 파일을 엽니다. 이 파일에는 기본적인 플러터 애플리케이션 코드가 포함되어 있습니다. 코드의 각 블록이 하는 일을 이해하기 위해, Dart 파일에 포함된 주석을 확인할 수 있습니다.

첫 번째 코드 작성 및 실행

플러터는 위젯 기반의 프레임워크입니다. 위젯은 화면의 각 요소를 정의하며, 모든 것은 위젯으로 구성됩니다. main.dart 파일을 열어 기본적인 'Hello, World!' 애플리케이션을 작성해 보겠습니다:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello, World!'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

이 코드는 기본적인 플러터 애플리케이션을 설정합니다. MyApp 클래스는 최상위 위젯이며, MaterialApp을 사용하여 앱의 테마와 라우트를 설정합니다. Scaffold 위젯은 앱의 기본 레이아웃 구조를 제공하며, AppBar와 Center 위젯을 포함하여 간단한 텍스트를 표시합니다.

프로젝트 실행

코드를 작성한 후, 프로젝트를 실행하여 결과를 확인할 수 있습니다. 명령어 창에서 flutter run을 입력하면 에뮬레이터 또는 실제 디바이스에서 애플리케이션이 실행됩니다. 이 과정에서 발생할 수 있는 오류를 해결하며, 앱이 의도한 대로 작동하는지 확인합니다.


결론

이번 가이드를 통해 VS Code를 사용하여 플러터 샘플 앱을 생성하는 방법을 배웠습니다. 플러터와 다트 확장을 설치하고, 명령 팔레트를 사용하여 새 프로젝트를 생성하는 과정은 매우 간단합니다. 프로젝트 생성 후 main.dart 파일을 열어 코드를 확인하고 이해하면, 플러터의 기본적인 구조와 사용법을 익힐 수 있습니다. 앞으로의 개발 여정에 있어 이 가이드가 유용하게 사용되기를 바랍니다.

인기글

플러터 리스트