플러터는 구글에서 개발한 오픈소스 UI 프레임워크로, 모바일 앱, 웹 앱, 그리고 데스크톱 애플리케이션을 위한 고성능 애플리케이션을 쉽게 개발할 수 있게 해줍니다. 오늘은 비주얼 스튜디오 코드를 이용하여 플러터 개발 환경을 설정하는 방법에 대해 알아보겠습니다. 이 강좌는 플러터를 처음 접하시는 분들을 위한 단계별 설명을 제공합니다.
필수 준비물
- 윈도우, macOS 또는 리눅스 운영체제
- 인터넷 연결
- 비주얼 스튜디오 코드 (VSCode)
- 플러터 SDK
- 다양한 플러그인
1. 비주얼 스튜디오 코드 다운로드 및 설치
먼저 비주얼 스튜디오 코드를 다운로드해야 합니다. 비주얼 스튜디오는 무료이며 다양한 운영체제를 지원합니다.
단계 1: 아래 링크를 클릭하여 비주얼 스튜디오 코드 공식 웹사이트로 이동합니다.
단계 2: 운영체제에 맞는 설치 파일을 다운로드합니다. Windows, macOS, Linux 중 하나를 선택하고 다운로드하십시오.
단계 3: 다운로드한 설치 파일을 실행하여 설치 마법사의 지시에 따라 설치를 완료합니다. 설치할 때 “Add to PATH” 옵션을 선택하는 것이 좋습니다.
2. 플러터 SDK 다운로드 및 설치
비주얼 스튜디오 코드가 설치되면 이제 플러터 SDK를 설치해야 합니다.
단계 1: 아래 링크를 클릭하여 플러터 SDK 공식 웹사이트로 이동합니다.
단계 2: 운영체제에 맞는 zip 파일을 다운로드하고, 원하는 위치에 압축을 해제합니다.
단계 3: 플러터 SDK의 파스를 시스템 환경 변수에 추가해야 합니다.
- Windows: 시스템 환경 변수에서 ‘Path’에 Flutter의 bin 폴더 경로를 추가합니다.
- macOS/Linux: 터미널에서
export PATH="$PATH:/path/to/flutter/bin"명령어를 실행하거나,~/.bash_profile또는~/.bashrc파일에 추가합니다.
설치가 완료되면 터미널을 열고 flutter doctor 명령어를 실행하여 설치된 플러터 환경을 확인할 수 있습니다.
3. 비주얼 스튜디오 코드에서 플러터 및 다트 플러그인 설치
플러터로 개발을 하기 위해서는 다트(Dart) 언어와 관련된 플러그인을 설치해야 합니다.
단계 1: 비주얼 스튜디오 코드를 열고, 왼쪽 사이드바에서 ‘Extensions’ 아이콘을 클릭합니다.
단계 2: 검색창에 ‘Flutter’를 입력하고, ‘Flutter – Dart Team’이라는 플러그인을 찾습니다. Install 버튼을 클릭하여 설치합니다.
단계 3: ‘Dart’라는 이름의 플러그인도 함께 설치하는 것이 좋습니다. 이 플러그인은 다트 언어에 대한 지원을 추가합니다.
4. 새로운 플러터 프로젝트 생성하기
플러터 프로젝트를 생성하기 위해 VSCode에서 Command Palette를 사용합니다.
단계 1: (Windows: Ctrl + Shift + P, macOS: Cmd + Shift + P)를 눌러 Command Palette를 엽니다.
단계 2: ‘Flutter: New Project’를 입력하고 선택합니다.
단계 3: 프로젝트의 이름을 입력하고, 저장할 위치를 선택합니다.
단계 4: 프로젝트가 생성되면, VSCode에서 자동으로 해당 프로젝트로 이동합니다.
5. 프로젝트 실행하기
이제 프로젝트를 실행하여 플러터 애플리케이션이 잘 만들어졌는지 확인합니다.
단계 1: 터미널을 열고 flutter run 명령어를 입력합니다. 웹이나 에뮬레이터에서 애플리케이션을 실행할 수 있습니다.
단계 2: 물리적 장치를 연결했거나, Android Studio에 있는 에뮬레이터를 사용할 수도 있습니다. VSCode의 하단 바에서 디바이스를 선택한 후 다시 flutter run을 입력하십시오.
6. 플러터 앱 구성하기
플러터 앱을 구성하는 방법에 대해 알아보겠습니다. 기본적으로 생성된 ‘lib/main.dart’ 파일이 애플리케이션의 진입점입니다. 이 파일에 코드를 작성하여 UI와 기능을 추가할 수 있습니다.
아래는 간단한 플러터 애플리케이션의 구조입니다:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter!'),
),
body: Center(
child: Text('Hello, world!'),
),
),
);
}
}
위 예제에서 MaterialApp은 플러터의 머티리얼 디자인을 기반으로 하는 앱을 생성하는데 사용됩니다. 이 앱은 간단한 텍스트를 보여주는 UI를 가지고 있습니다.
7. 플러터 강좌 마무리
이번 강좌에서는 비주얼 스튜디오 코드를 이용하여 플러터 개발 환경을 설정하는 방법을 배웠습니다. 기본적인 플러터 프로젝트를 생성하고, 간단한 코드를 작성하여 실행하는 방법에 대해 설명드렸습니다. 이 강좌를 바탕으로 여러분은 더욱 복잡한 플러터 애플리케이션을 만들기 위한 기초를 다질 수 있을 것입니다.
더 많은 정보와 리소스는 플러터 공식 문서(https://flutter.dev/docs)를 참조하십시오. 앞으로의 플러터 강좌에서 더 많은 내용을 다룰 예정이니 많은 기대 바랍니다!
질문과 피드백
이 강좌에 대한 질문이나 피드백이 있으시면 아래 댓글란에 남겨주세요. 함께 플러터를 배우고 성장해 나갑시다!