Flutter 튜토리얼 71편: IDE 설정 가이드

Why#

NOTE

Android Studio는 Google이 공식 지원하는 IDE로, Flutter 개발에 최적화된 기능을 제공합니다. IntelliJ IDEA도 같은 플러그인을 사용하므로 거의 동일한 경험을 제공합니다.

Android 개발 경험이 있다면 익숙한 환경에서 Flutter를 시작할 수 있습니다.

What#

NOTE

Flutter 플러그인은 다음 핵심 기능을 제공합니다.

기능	설명
코드 완성	위젯, 메서드, 변수 자동 완성
문법 하이라이팅	Dart 코드 색상 구분
위젯 편집 보조	위젯 감싸기, 제거, 추출
Hot Reload	코드 변경 즉시 반영
디버거 통합	중단점, 스텝 실행, 변수 검사
DevTools 연동	성능 분석 도구 접근

How#

TIP

플러그인 설치하기

macOS:

1. Android Studio를 실행합니다.
2. Android Studio > Settings (또는 Cmd + ,)를 엽니다.
3. 왼쪽 패널에서 Plugins를 선택합니다.
4. Marketplace 탭에서 “Flutter”를 검색합니다.
5. Install 버튼을 클릭합니다.
6. Dart 플러그인 설치 여부를 묻는 창이 나타나면 Yes를 클릭합니다.
7. IDE를 재시작합니다.

Windows / Linux:

1. Android Studio를 실행합니다.
2. File > Settings (또는 Ctrl + Alt + S)를 엽니다.
3. 이후 과정은 macOS와 동일합니다.

새 Flutter 프로젝트 생성하기

1. File > New > New Flutter Project를 선택합니다.
2. 왼쪽 패널에서 Flutter를 선택합니다.
3. Flutter SDK 경로를 지정합니다 (예: /Users/user/flutter).
4. Next를 클릭합니다.
5. 프로젝트 이름, 위치, 플랫폼을 설정합니다.
6. Create를 클릭합니다.

graph LR A[File > New] --> B[New Flutter Project] B --> C[Flutter SDK 선택] C --> D[프로젝트 설정] D --> E[Create]

기존 프로젝트 열기

1. File > Open을 선택합니다.
2. Flutter 프로젝트의 루트 폴더를 선택합니다.
3. pubspec.yaml 파일이 있는 폴더인지 확인합니다.
4. OK를 클릭합니다.

앱 실행하기

1. 툴바에서 타겟 디바이스를 선택합니다.
2. 실행 버튼(녹색 삼각형)을 클릭하거나 Shift + F10을 누릅니다.
3. 디버그 모드로 실행하려면 Shift + F9를 누릅니다.

단축키	동작	설명
Shift + F10	Run	앱 실행
Shift + F9	Debug	디버그 모드 실행
Ctrl + \	Hot Reload	코드 변경 반영
Ctrl + Shift + \	Hot Restart	앱 상태 리셋 후 재시작

Watch out#

WARNING

플러그인 설치 후 문제가 발생하면 다음을 확인하세요.

Flutter SDK 경로 오류:

1
Settings > Languages & Frameworks > Flutter

에서 SDK 경로가 올바른지 확인합니다.

플러그인 버전 호환성:

• Flutter 플러그인과 Dart 플러그인 버전이 호환되어야 합니다.
• 둘 다 최신 버전으로 업데이트하세요.

캐시 문제:

1
File > Invalidate Caches > Invalidate and Restart

로 IDE 캐시를 초기화하면 해결되는 경우가 많습니다.

결론: Android Studio에 Flutter 플러그인을 설치하면 강력한 개발 환경을 구축할 수 있습니다.

Why#

NOTE

VS Code는 가볍고 빠른 에디터로, 확장 프로그램을 통해 Flutter 개발 환경을 구축할 수 있습니다. 시스템 리소스를 적게 사용하면서도 필요한 기능을 모두 제공합니다.

웹 개발 경험이 있다면 익숙한 에디터에서 Flutter를 시작할 수 있습니다.

What#

NOTE

Flutter 확장 프로그램은 다음 기능을 제공합니다.

기능	설명
Dart 지원	문법 하이라이팅, 코드 완성
Flutter 명령어	명령 팔레트에서 Flutter 명령 실행
Hot Reload	저장 시 자동 리로드
디버깅	중단점, 변수 검사, 콜 스택
DevTools	내장 DevTools 지원
코드 액션	위젯 감싸기, 리팩토링

How#

TIP

확장 프로그램 설치하기

1. VS Code를 실행합니다.
2. Cmd + Shift + X (macOS) 또는 Ctrl + Shift + X (Windows/Linux)로 확장 프로그램 뷰를 엽니다.
3. 검색창에 “Flutter”를 입력합니다.
4. Dart Code에서 만든 “Flutter” 확장 프로그램을 설치합니다.
5. Dart 확장 프로그램도 자동으로 설치됩니다.

Flutter SDK 위치 설정하기

기본적으로 확장 프로그램이 PATH에서 Flutter를 찾습니다. 수동으로 지정하려면:

1
{
2
  "dart.flutterSdkPath": "/Users/user/flutter"
3
}

새 Flutter 프로젝트 생성하기

1. Cmd + Shift + P로 명령 팔레트를 엽니다.
2. “Flutter: New Project”를 입력하고 선택합니다.
3. 프로젝트 타입을 선택합니다 (Application, Package, Plugin 등).
4. 프로젝트를 저장할 폴더를 선택합니다.
5. 프로젝트 이름을 입력합니다.

graph LR A[Cmd+Shift+P] --> B[Flutter: New Project] B --> C[타입 선택] C --> D[폴더 선택] D --> E[이름 입력]

앱 실행하기

1. 상태 바에서 타겟 디바이스를 선택합니다.
2. F5를 눌러 디버그 모드로 실행합니다.
3. 또는 Ctrl + F5로 디버그 없이 실행합니다.

유용한 단축키

단축키	동작	설명
F5	Start Debugging	디버그 모드 실행
Ctrl + F5	Run Without Debugging	디버그 없이 실행
Cmd + S	Save & Hot Reload	저장 시 자동 리로드
Cmd + Shift + F5	Hot Restart	앱 상태 리셋
Cmd + .	Quick Fix	빠른 수정 제안
Ctrl + Shift + R	Refactor	리팩토링 메뉴

settings.json 추천 설정

1
{
2
  // 저장 시 Hot Reload
3
  "dart.flutterHotReloadOnSave": "all",
4

5
  // 저장 시 자동 포맷팅
6
  "editor.formatOnSave": true,
7

8
  // Dart 전용 설정
9
  "[dart]": {
10
    "editor.tabSize": 2,
11
    "editor.insertSpaces": true,
12
    "editor.rulers": [80],
13
    "editor.selectionHighlight": false,
14
    "editor.suggestSelection": "first",
15
    "editor.wordBasedSuggestions": "off"
16
  },
17

18
  // 닫는 태그 자동 표시
19
  "dart.closingLabels": true,
20

21
  // 미리보기 기능 활성화
22
  "dart.previewFlutterUiGuides": true
23
}

Watch out#

WARNING

VS Code 사용 시 다음 사항에 주의하세요.

확장 프로그램 충돌:

• 다른 Dart 관련 확장 프로그램이 설치되어 있으면 충돌할 수 있습니다.
• 공식 “Flutter” 확장 프로그램만 사용하세요.

PATH 설정 문제: 터미널에서 flutter doctor가 실행되는데 VS Code에서 Flutter를 찾지 못하면:

1
{
2
  "dart.flutterSdkPath": "/full/path/to/flutter"
3
}

디버그 콘솔 vs 터미널:

• 디버그 콘솔은 앱 로그를 표시합니다.
• 터미널은 Flutter 명령어를 실행합니다.
• 둘을 혼동하지 마세요.

결론: VS Code는 가볍고 빠른 Flutter 개발 환경을 제공합니다.

Why#

NOTE

IDE의 기본 기능만 사용해도 개발이 가능하지만, 고급 기능을 활용하면 생산성이 크게 향상됩니다. 코드 작성, 리팩토링, 디버깅 시간을 단축할 수 있습니다.

What#

NOTE

세 가지 핵심 영역에서 IDE 기능을 활용할 수 있습니다.

graph TD A[IDE 핵심 기능] --> B[코드 편집 보조] A --> C[위젯 작업 도구] A --> D[디버깅 기능] B --> B1[코드 완성] B --> B2[빠른 수정] C --> C1[위젯 감싸기] C --> C2[위젯 추출] D --> D1[중단점] D --> D2[변수 검사]

How#

TIP

코드 완성 활용하기

Dart 코드를 입력하면 자동으로 완성 제안이 나타납니다.

1
// 'Container'를 입력하면
2
Conta|  // 자동 완성 제안 표시
3
       Container
4
       ContainerTransform
5
       ContainerTransformAlignment

빠른 수정 (Quick Fix) 사용하기

노란색 경고나 빨간색 에러 위에서:

• VS Code: Cmd + .
• Android Studio: Alt + Enter

1
// 예: 사용하지 않는 import가 있을 때
2
import 'package:flutter/material.dart';
3
import 'package:flutter/cupertino.dart';  // 미사용
4

5
// Quick Fix → Remove unused import

위젯 감싸기 (Wrap with Widget)

위젯을 다른 위젯으로 감쌀 때 유용합니다.

1. 감싸려는 위젯에 커서를 놓습니다.
2. VS Code: Cmd + . → “Wrap with…” Android Studio: Alt + Enter → “Wrap with…”
3. 원하는 위젯을 선택합니다.

1
// 변경 전
2
Text('Hello')
3

4
// Wrap with Center 적용 후
5
Center(
6
  child: Text('Hello'),
7
)
8

9
// Wrap with Padding 적용 후
10
Padding(
11
  padding: const EdgeInsets.all(8.0),
12
  child: Text('Hello'),
13
)

위젯 추출 (Extract Widget)

반복되는 위젯 코드를 별도의 위젯으로 분리합니다.

1. 추출할 위젯 코드를 선택합니다.
2. VS Code: Ctrl + Shift + R → “Extract Widget” Android Studio: Ctrl + Alt + W
3. 새 위젯 이름을 입력합니다.

1
// 변경 전: build 메서드 안의 복잡한 코드
2
Container(
3
  padding: const EdgeInsets.all(16),
4
  decoration: BoxDecoration(
5
    color: Colors.blue,
6
    borderRadius: BorderRadius.circular(8),
7
  ),
8
  child: const Text('Hello'),
9
)
10

11
// 추출 후: 별도의 위젯 클래스
12
class MyCustomBox extends StatelessWidget {
13
  const MyCustomBox({super.key});
14

15
  @override
16
  Widget build(BuildContext context) {
17
    return Container(
18
      padding: const EdgeInsets.all(16),
19
      decoration: BoxDecoration(
20
        color: Colors.blue,
21
        borderRadius: BorderRadius.circular(8),
22
      ),
23
      child: const Text('Hello'),
24
    );
25
  }
26
}

디버거 사용하기

중단점(Breakpoint)²을 설정하고 코드 실행을 분석합니다.

1. 코드 왼쪽 여백을 클릭하여 중단점을 설정합니다.
2. 디버그 모드로 앱을 실행합니다 (F5).
3. 중단점에서 실행이 멈추면 변수 값을 검사합니다.

디버그 동작	VS Code	Android Studio
계속 실행	F5	F9
스텝 오버	F10	F8
스텝 인투	F11	F7
스텝 아웃	Shift + F11	Shift + F8

1
void calculateTotal(List<int> items) {
2
  int sum = 0;  // 여기에 중단점 설정
3
  for (var item in items) {
4
    sum += item;  // 스텝 오버로 한 줄씩 실행
5
  }
6
  print('Total: $sum');
7
}

위젯 가이드라인 표시하기

VS Code에서 위젯 계층 구조를 시각화합니다.

1
{
2
  "dart.previewFlutterUiGuides": true
3
}

이 설정을 활성화하면 중첩된 위젯 사이에 가이드라인이 표시됩니다.

Watch out#

WARNING

IDE 기능 사용 시 주의사항입니다.

자동 import 주의:

• 같은 이름의 클래스가 여러 패키지에 있을 수 있습니다.
• material.dart의 Icon과 cupertino.dart의 Icon은 다릅니다.
• import 자동 완성 시 올바른 패키지를 선택했는지 확인하세요.

리팩토링 범위 확인:

• “Rename” 기능은 프로젝트 전체에 영향을 줍니다.
• 변경 전 미리보기에서 영향받는 파일을 확인하세요.

디버그 성능:

• 중단점이 많으면 앱이 느려질 수 있습니다.
• 사용하지 않는 중단점은 비활성화하거나 제거하세요.

결론: IDE의 고급 기능을 활용하면 코드 작성과 디버깅 시간을 크게 단축할 수 있습니다.