[Flutter] VS Code에서 Flutter 실행하기 (터미널 없이, Android & iOS)

사전 점검

Flutter 프로젝트를 VS Code로 열어 두었고, 좌측 익스플로러에 lib/main.dart가 보이는 상태가 기본이다.

하단 상태 바(왼쪽)의 Dart/Flutter 플러그인 활성 표시와 오른쪽의 디바이스 선택 영역이 보이면 준비가 된 것이다.

참고: Android는 Android Emulator(AVD), iOS는 Xcode 시뮬레이터가 미리 설치되어 있어야 한다. 이 글에서는 설치 과정은 다루지 않았다.

디바이스 선택 및 에뮬레이터/시뮬레이터 실행

먼저 실행할 기기를 VS Code에서 선택했다. 터미널은 사용하지 않았다.

1) 방법 A: 상태 바에서 직접 선택했다.

사진 속에서는 'Pangil(wireless) (ios)가 디바이스 표시 영역이다.

우측 하단의 디바이스 표시 영역을 클릭하여, 실행하고 싶은 Android Emulator 또는 iOS Simulator를 선택했다.

선택 즉시 에뮬레이터/시뮬레이터가 뜨지 않으면, 같은 메뉴에서 Launch/Start 항목을 눌러 기기를 실행했다.

2) 방법 B: 커맨드 팔레트로 실행했다.

Cmd + Shift + P를 눌러 커맨드 팔레트를 열고,

• Flutter: Select Device로 기기를 선택하고 1번 방법으로 하거나,

• Flutter: Launch Emulator로 바로 에뮬레이터/시뮬레이터를 실행하였다.

이후 상태 바에 선택된 기기가 표시되는지 확인했다.

포인트: 반드시 이 단계에서 기기를 먼저 선택/실행해야 한다. 기기 선택 없이 곧바로 디버깅을 시작하면 VS Code가 대상 기기를 찾지 못하거나 엉뚱한 대상으로 시도할 수 있다.

VS Code에서 디버깅 실행

기기가 준비되었으면 VS Code에서 바로 실행하면 됐었고, 크게 두 가지 방법이 있었다.

1) 좌측 Run and Debug(재생 ▶ 아이콘) 패널

2) 우측 상단의 Start Debugging 버튼(F5)

두 가지 중 하나를 선택해서 실행하면, VS Code가 알아서 빌드와 설치 과정을 진행했고, 선택한 에뮬레이터/시뮬레이터에 앱이 실행되었다.

실행 중에는 VS Code Debug Console 탭에 로그가 출력되었다. 오류가 발생하면 이 콘솔에서 원인을 확인했다.

플랫폼별 메모

• Android

  • VS Code에서 기기를 선택했는데 목록에 보이지 않으면, Android Studio의 Device Manager에서 에뮬레이터가 생성되어 있는지 확인했다.

  • 에뮬레이터가 켜졌는데 VS Code에 반영이 안 되면, 디바이스 선택을 한 번 더 열어 재선택했다.

• iOS

  • 시뮬레이터는 코드 서명이 필요 없었다. 단, 실기기는 Xcode에서 Team 설정 등 코드 서명이 필요하므로 이 글의 범위를 벗어났다.

  • 시뮬레이터 버전이 너무 낮거나 없는 경우, Xcode의 Settings → Platforms에서 필요한 런타임을 설치한 뒤 VS Code에서 다시 선택했다.

자주 하는 실수와 해결

• “Run Code” 버튼(확장 기능)으로 실행했다.
  : Dart 단일 파일 실행으로 처리되어 Flutter 프레임워크가 로드되지 않았다. 반드시 Start Debugging(F5) 또는 커맨드 팔레트의 Flutter: Run/Debug 흐름을 사용했다.

• 기기 선택 없이 바로 실행했다.: 대상 기기를 찾지 못해 실패하거나 다른 타겟으로 시도했다. 항상 디바이스 선택/실행 → 디버깅 실행 순서를 지켰다.

• 에뮬레이터/시뮬레이터는 켜졌는데 VS Code에서 인식이 늦다.: 상태 바의 디바이스 영역을 다시 눌러 새로고침하듯 다시 선택했다. 필요하면 VS Code를 재시작했다.

마무리

이 과정대로 진행하니 터미널 없이도 VS Code만으로 Android/iOS에서 Flutter 앱을 문제없이 실행할 수 있었다.

핵심은 기기 선택/실행을 먼저 하고, 이어서 Start Debugging(F5) 으로 구동하는 순서를 지키는 것이었다.