플러터 강좌, 6.1 VS Code 세팅하기

안녕하세요! 이번 강좌에서는 플러터 개발을 위한 VS Code(비주얼 스튜디오 코드) 설정 방법에 대해 다루겠습니다. VS Code는 다양한 확장성과 기능으로 인해 많은 개발자들에게 사랑받는 코드 편집기입니다. 이 강좌에서는 VS Code의 설치부터 플러터 환경 구축까지 단계별로 알아보겠습니다.

1. VS Code 설치하기

VS Code는 다양한 운영 체제에서 사용할 수 있습니다. 먼저 아래의 절차에 따라 VS Code를 설치하겠습니다.

  1. VS Code 공식 웹사이트(https://code.visualstudio.com/)에 방문합니다.
  2. 홈페이지에서 ‘Download’ 버튼을 클릭하고 자신의 운영 체제에 맞는 설치 파일을 다운로드합니다.
  3. 다운로드한 파일을 실행하여 설치 마법사의 지시에 따라 설치를 진행합니다.
  4. 설치가 완료되면 VS Code를 실행합니다.

2. Flutter SDK 설치하기

플러터 개발을 하기 위해서는 Flutter SDK를 먼저 설치해야 합니다. Flutter SDK는 여러 플랫폼에 대응하는 애플리케이션을 개발할 수 있도록 돕는 도구입니다.

  1. 플러터 공식 웹사이트(https://flutter.dev/docs/get-started/install)에 방문합니다.
  2. 운영 체제에 맞는 Flutter SDK를 다운로드합니다.
  3. 다운로드한 파일을 압축 해제하고, 원하는 위치(예: C:\src\flutter)로 이동합니다.
  4. Flutter의 위치를 시스템 PATH에 추가합니다. 이를 위해 환경 변수를 수정해야 합니다.
  5. 명령 프롬프트(Windows) 또는 터미널(Mac/Linux)을 열고 아래의 명령어를 입력하여 설치가 정상적으로 완료되었는지 확인합니다.
flutter doctor

이 명령어는 Flutter SDK의 설치 상태를 체크하고, 필요한 구성 요소(예: Android SDK, Xcode 등)의 설치 여부를 알려줍니다.

3. Dart 플러그인 설치하기

플러터는 Dart라는 언어를 기반으로 하므로, VS Code에서 Dart 플러그인을 설치해야 합니다.

  1. VS Code를 실행한 후, 좌측 사이드바의 ‘Extensions'(확장자) 아이콘을 클릭합니다.
  2. 검색창에 ‘Dart’를 입력하고, 공식 Dart 플러그인을 찾아 설치합니다.

설치가 완료되면 VS Code가 Dart 언어를 인식하게 됩니다.

4. Flutter 확장자 설치하기

플러터 개발을 보다 효율적으로 진행하기 위해 Flutter 관련 확장자도 설치합니다.

  1. 마찬가지로 VS Code의 ‘Extensions’ 메뉴에서 ‘Flutter’를 검색합니다.
  2. Flutter 공식 확장자를 찾아 설치합니다.

Flutter 확장자를 설치하면, Flutter 프로젝트를 생성하고 관리하는 데 여러 가지 유용한 기능을 사용할 수 있습니다.

5. 새로운 Flutter 프로젝트 생성하기

이제 모든 설정이 완료되었습니다! 새로운 Flutter 프로젝트를 생성해 보겠습니다.

  1. VS Code에서 ‘View’ 메뉴를 선택한 뒤 ‘Command Palette’를 클릭합니다. (또는 Ctrl + Shift + P를 눌러도 됩니다.)
  2. Command Palette에서 ‘Flutter: New Project’를 입력합니다.
  3. 프로젝트의 유형을 선택합니다. 여기서는 ‘Flutter Application’을 선택합니다.
  4. 프로젝트에 대한 이름을 입력하고, 저장할 위치를 선택합니다.

VS Code가 자동으로 Flutter 프로젝트 파일 구조를 생성해 줄 것입니다.

6. 에뮬레이터 및 디바이스 설정하기

Flutter 앱을 테스트하기 위해 물리적 디바이스나 에뮬레이터를 설정해야 합니다. 아래의 절차에 따라 진행하겠습니다.

  1. Android Studio를 설치하여 Android 에뮬레이터를 사용할 수 있습니다. Android Studio를 설치한 후, AVD(안드로이드 가상 장치) 관리자를 사용하여 원하는 에뮬레이터를 생성합니다.
  2. 또는 실제 iOS 또는 Android 디바이스를 USB로 연결합니다. 이 경우 디바이스에서 USB 디버깅을 활성화해야 합니다.
  3. VS Code의 ‘Debug’ 메뉴에서 ‘Start Debugging’ 또는 F5 키를 눌러 앱을 실행합니다.

7. Flutter 프로젝트 실행하기

프로젝트를 생성한 후, 아래 명령어를 입력하여 에뮬레이터 또는 연결된 디바이스에서 Flutter 프로젝트를 실행할 수 있습니다.

flutter run

이 과정에서 프로젝트가 빌드되고 에뮬레이터에 애플리케이션이 실행됩니다. 만약 에러가 발생하면, ‘flutter doctor’ 명령어를 통해 문제를 해결하세요.

8. 코드 작성 및 수정하기

이제 Flutter 프로젝트가 세팅되었으니, 코드를 작성하고 수정해 보세요. VS Code는 코드 자동 완성, 오류 강조, 디버깅 도구 등과 같은 다양한 기능을 제공합니다. 이를 통해 보다 효율적으로 개발 작업을 할 수 있습니다.

9. 마무리 및 추가 리소스

이번 강좌에서 VS Code를 통한 플러터 개발 환경 구축 방법을 살펴보았습니다. 이외에도 플러터 공식 문서와 커뮤니티, GitHub 리포지토리에서 추가적인 정보와 학습 자료를 찾아보세요.

다음 강좌에서는 플러터의 기본 위젯과 레이아웃에 대해 알아보겠습니다. 행복한 코딩 되시길 바랍니다!