Flutter 튜토리얼 77편: SDK와 pubspec.yaml

Why#

NOTE

Flutter 앱을 개발하려면 Flutter SDK가 필요합니다. SDK에는 Dart 언어, 프레임워크, 도구들이 포함되어 있습니다.

SDK가 무엇을 제공하는지 알면 어떤 도구를 언제 사용해야 하는지 이해할 수 있습니다.

What#

NOTE

Flutter SDK에는 다음이 포함됩니다.

구성 요소	설명
Dart SDK	Dart 언어와 런타임
렌더링 엔진	모바일 최적화 2D 렌더링 엔진
프레임워크	React 스타일의 선언적 UI 프레임워크
위젯 라이브러리	Material Design, Cupertino 스타일 위젯
테스트 API	유닛, 위젯, 통합 테스트 도구
DevTools	디버깅, 프로파일링 도구
CLI 도구	flutter, dart 명령어 도구

How#

TIP

flutter CLI 도구

flutter 명령어는 Flutter 앱 개발의 핵심 도구입니다.

1
# 새 프로젝트 생성
2
flutter create my_app
3

4
# 앱 실행
5
flutter run
6

7
# 앱 빌드
8
flutter build apk
9
flutter build ios
10

11
# 테스트 실행
12
flutter test
13

14
# 의존성 설치
15
flutter pub get
16

17
# 환경 확인
18
flutter doctor

dart CLI 도구

dart 명령어는 Dart 언어 관련 작업에 사용됩니다.

1
# 코드 포맷팅
2
dart format .
3

4
# 정적 분석
5
dart analyze
6

7
# deprecated API 자동 수정
8
dart fix --apply
9

10
# 패키지 관리
11
dart pub get
12
dart pub add http

SDK 위치

Flutter SDK는 설치 시 지정한 경로에 있습니다.

1
# SDK 위치 확인
2
flutter sdk-path
3

4
# 환경 변수 설정 (macOS/Linux)
5
export PATH="$PATH:$HOME/development/flutter/bin"

Watch out#

WARNING

IDE 도구(VS Code 확장, Android Studio 플러그인)는 최근 2년간의 Flutter SDK 버전만 지원합니다. 너무 오래된 SDK를 사용하면 IDE 기능이 제대로 작동하지 않을 수 있습니다.

1
# SDK 버전 확인
2
flutter --version
3

4
# SDK 업그레이드
5
flutter upgrade

결론: Flutter SDK는 앱 개발에 필요한 모든 도구와 라이브러리를 포함합니다.

Why#

NOTE

pubspec.yaml은 Flutter 프로젝트의 핵심 설정 파일입니다. 프로젝트 메타데이터, 의존성, 에셋 등 모든 설정이 이 파일에 있습니다.

패키지를 추가하거나 에셋을 포함할 때 반드시 이 파일을 수정해야 합니다.

What#

NOTE

pubspec.yaml은 YAML 형식으로 작성됩니다. Dart 공통 필드와 Flutter 전용 필드가 있습니다.

Dart 공통 필드:

• name: 프로젝트 이름
• description: 프로젝트 설명
• version: 버전 번호
• environment: SDK 버전 제약
• dependencies: 런타임 의존성
• dev_dependencies: 개발용 의존성

Flutter 전용 필드:

• flutter: Flutter 관련 설정
• assets: 에셋 파일 목록
• fonts: 커스텀 폰트 설정
• uses-material-design: Material 아이콘 사용 여부

How#

TIP

기본 pubspec.yaml 예제

1
name: my_flutter_app
2
description: A new Flutter project.
3

4
publish_to: none  # pub.dev에 공개하지 않음
5

6
version: 1.0.0+1
7

8
environment:
9
  sdk: ^3.10.0
10

11
dependencies:
12
  flutter:
13
    sdk: flutter  # Flutter SDK 의존성
14

15
  cupertino_icons: ^1.0.8  # iOS 스타일 아이콘
16

17
dev_dependencies:
18
  flutter_test:
19
    sdk: flutter
20

21
  flutter_lints: ^6.0.0  # 권장 린트 규칙
22

23
flutter:
24
  uses-material-design: true  # Material 아이콘 사용

버전 지정 방법

표현	의미
^1.0.0	1.0.0 이상, 2.0.0 미만 (권장)
>=1.0.0 <2.0.0	명시적 범위
any	모든 버전
1.0.0	정확히 이 버전만

의존성 추가하기

1
# 명령어로 추가 (권장)
2
flutter pub add http
3

4
# pubspec.yaml에 직접 추가 후 설치
5
flutter pub get

pubspec.lock

첫 빌드 시 pubspec.lock 파일이 생성됩니다. 이 파일은 설치된 패키지의 정확한 버전을 기록합니다.

1
# pubspec.lock (자동 생성, 수정하지 않음)
2
packages:
3
  http:
4
    dependency: "direct main"
5
    version: "1.2.0"

Watch out#

WARNING

YAML은 들여쓰기에 민감합니다. 탭 대신 공백 2칸을 사용해야 합니다.

1
# 잘못된 예 (탭 사용)
2
flutter:
3
  uses-material-design: true  # 오류!
4

5
# 올바른 예 (공백 2칸)
6
flutter:
7
  uses-material-design: true

들여쓰기가 잘못되면 파싱 오류가 발생합니다.

결론: pubspec.yaml은 YAML 형식으로 프로젝트 설정을 관리하며, 들여쓰기에 주의해야 합니다.

Why#

NOTE

이미지, JSON 파일, 아이콘 등을 앱에 포함하려면 에셋으로 등록해야 합니다. pubspec.yaml에 에셋 경로를 명시하면 앱 번들에 포함됩니다.

What#

NOTE

assets 필드는 앱에 포함할 파일이나 폴더를 지정합니다.

지원되는 파일 유형:

• 이미지: JPEG, PNG, GIF, WebP, BMP
• 데이터: JSON, XML, 텍스트
• 기타: 설정 파일, 라이선스 파일

How#

TIP

개별 파일 등록

1
flutter:
2
  assets:
3
    - assets/images/logo.png
4
    - assets/images/background.jpg
5
    - assets/data/config.json

폴더 전체 등록

폴더 경로 끝에 /를 붙이면 해당 폴더의 모든 파일이 포함됩니다.

1
flutter:
2
  assets:
3
    - assets/images/  # images 폴더의 모든 파일
4
    - assets/icons/   # icons 폴더의 모든 파일

해상도별 이미지

Flutter는 해상도별 이미지를 자동으로 선택합니다.

1
assets/
2
  images/
3
    logo.png        # 1x (기본)
4
    2.0x/
5
      logo.png      # 2x
6
    3.0x/
7
      logo.png      # 3x

pubspec.yaml에는 기본 경로만 등록합니다.

1
flutter:
2
  assets:
3
    - assets/images/logo.png

Flavor별 에셋

빌드 Flavor에 따라 다른 에셋을 사용할 수 있습니다.

1
flutter:
2
  assets:
3
    - path: assets/production/images
4
      flavors:
5
        - production
6
    - path: assets/staging/images
7
      flavors:
8
        - staging

코드에서 에셋 사용

1
// 이미지 위젯
2
Image.asset('assets/images/logo.png')
3

4
// JSON 파일 로드
5
final jsonString = await rootBundle.loadString('assets/data/config.json');

Watch out#

WARNING

에셋 경로는 pubspec.yaml 기준 상대 경로입니다. 경로가 잘못되면 빌드 시 오류가 발생하거나 런타임에 파일을 찾을 수 없습니다.

1
# 프로젝트 구조
2
my_app/
3
  pubspec.yaml
4
  assets/
5
    images/
6
      logo.png
7

8
# pubspec.yaml
9
flutter:
10
  assets:
11
    - assets/images/logo.png  # 올바른 경로
12
    # - images/logo.png       # 잘못된 경로

결론: assets 필드로 이미지, 데이터 파일 등을 앱에 포함할 수 있습니다.

Why#

NOTE

앱에 커스텀 폰트를 사용하면 브랜드 아이덴티티를 강화하고 가독성을 높일 수 있습니다. pubspec.yaml에서 폰트 파일을 등록하고 스타일(굵기, 기울임)을 지정합니다.

What#

NOTE

fonts 필드는 커스텀 폰트를 등록합니다.

속성	설명
family	폰트 패밀리 이름
asset	폰트 파일 경로
weight	굵기 (100-900)
style	스타일 (italic)

How#

TIP

기본 폰트 등록

1
flutter:
2
  fonts:
3
    - family: Roboto
4
      fonts:
5
        - asset: fonts/Roboto-Regular.ttf
6
        - asset: fonts/Roboto-Bold.ttf
7
          weight: 700
8
        - asset: fonts/Roboto-Italic.ttf
9
          style: italic

여러 폰트 패밀리

1
flutter:
2
  fonts:
3
    - family: Roboto
4
      fonts:
5
        - asset: fonts/Roboto-Regular.ttf
6
        - asset: fonts/Roboto-Bold.ttf
7
          weight: 700
8
    - family: NotoSansKR
9
      fonts:
10
        - asset: fonts/NotoSansKR-Regular.ttf
11
        - asset: fonts/NotoSansKR-Bold.ttf
12
          weight: 700

코드에서 폰트 사용

1
// TextStyle에서 직접 사용
2
Text(
3
  'Hello',
4
  style: TextStyle(fontFamily: 'Roboto'),
5
)
6

7
// ThemeData에서 기본 폰트 설정
8
MaterialApp(
9
  theme: ThemeData(
10
    fontFamily: 'NotoSansKR',
11
  ),
12
)
13

14
// 굵기와 스타일 지정
15
Text(
16
  'Bold Italic',
17
  style: TextStyle(
18
    fontFamily: 'Roboto',
19
    fontWeight: FontWeight.w700,
20
    fontStyle: FontStyle.italic,
21
  ),
22
)

가변 폰트 (Variable Fonts)

가변 폰트는 하나의 파일로 여러 굵기를 지원합니다.

1
flutter:
2
  fonts:
3
    - family: RobotoFlex
4
      fonts:
5
        - asset: fonts/RobotoFlex-VariableFont.ttf

1
// 가변 폰트에서 원하는 굵기 사용
2
Text(
3
  'Variable Weight',
4
  style: TextStyle(
5
    fontFamily: 'RobotoFlex',
6
    fontWeight: FontWeight.w450,  // 100-900 사이 값
7
  ),
8
)

Watch out#

WARNING

폰트 weight 값은 정해진 값만 사용할 수 있습니다. 100, 200, 300, 400, 500, 600, 700, 800, 900 중 하나여야 합니다.

1
# 잘못된 예
2
- asset: fonts/Roboto-Medium.ttf
3
  weight: 550  # 오류!
4

5
# 올바른 예
6
- asset: fonts/Roboto-Medium.ttf
7
  weight: 500

폰트 파일이 없거나 경로가 잘못되면 기본 시스템 폰트가 사용됩니다.

결론: fonts 필드로 커스텀 폰트를 등록하고 굵기, 스타일을 지정할 수 있습니다.

Why#

NOTE

pubspec.yaml에는 에셋과 폰트 외에도 여러 Flutter 전용 필드가 있습니다. 이 필드들을 활용하면 앱 빌드와 동작을 세밀하게 제어할 수 있습니다.

What#

NOTE

주요 Flutter 전용 필드:

필드	설명
uses-material-design	Material 아이콘 포함 여부
generate	로컬라이제이션 코드 생성
plugin	플러그인 설정
shaders	GLSL 셰이더 파일
deferred-components	지연 로딩 컴포넌트 (Android)
config	CLI 설정 플래그

How#

TIP

uses-material-design

Material 아이콘을 사용하려면 true로 설정합니다.

1
flutter:
2
  uses-material-design: true

1
// Material 아이콘 사용
2
Icon(Icons.home)
3
Icon(Icons.settings)

generate (로컬라이제이션)

다국어 지원을 위한 코드를 자동 생성합니다.

1
flutter:
2
  generate: true

l10n.yaml 파일과 함께 사용합니다.

licenses (추가 라이선스)

앱에 추가 라이선스 파일을 포함합니다.

1
flutter:
2
  licenses:
3
    - assets/licenses/third_party_license.txt

shaders (GLSL 셰이더)

커스텀 셰이더를 앱에 포함합니다.

1
flutter:
2
  shaders:
3
    - assets/shaders/blur.frag
4
    - assets/shaders/glow.frag

default-flavor

기본 빌드 Flavor를 지정합니다.

1
flutter:
2
  default-flavor: production

1
# 기본 flavor 실행 (production)
2
flutter run
3

4
# 다른 flavor 실행
5
flutter run --flavor staging

config (CLI 설정)

flutter CLI 동작을 설정합니다.

1
flutter:
2
  config:
3
    enable-swift-package-manager: true
4
    cli-animations: false

plugin (플러그인 개발용)

Flutter 플러그인을 개발할 때 플랫폼별 설정을 지정합니다.

1
flutter:
2
  plugin:
3
    platforms:
4
      android:
5
        package: com.example.my_plugin
6
        pluginClass: MyPlugin
7
      ios:
8
        pluginClass: MyPlugin

Watch out#

WARNING

uses-material-design: true를 설정하지 않으면 Material 아이콘이 표시되지 않습니다.

1
// uses-material-design: false면 아이콘이 안 보임
2
Icon(Icons.home)  // 빈 공간 또는 오류

새 프로젝트를 생성하면 기본적으로 true로 설정됩니다.

결론: Flutter 전용 필드를 활용하면 Material 디자인, 로컬라이제이션, 셰이더 등 다양한 기능을 설정할 수 있습니다.

Why#

NOTE

Flutter 앱 개발에는 몇 가지 필수 패키지가 있습니다. 이 패키지들은 Flutter SDK의 일부이거나 거의 모든 프로젝트에서 사용됩니다.

What#

NOTE

필수 패키지:

패키지	용도
flutter	Flutter SDK
flutter_test	테스트 도구
flutter_localizations	다국어 지원
flutter_lints	코드 린트 규칙
cupertino_icons	iOS 스타일 아이콘

How#

TIP

flutter 패키지

모든 Flutter 프로젝트에 필수입니다.

1
dependencies:
2
  flutter:
3
    sdk: flutter

flutter_test 패키지

테스트 코드 작성에 필요합니다.

1
dev_dependencies:
2
  flutter_test:
3
    sdk: flutter

flutter_localizations 패키지

다국어 지원(i18n)에 필요합니다.

1
dependencies:
2
  flutter_localizations:
3
    sdk: flutter
4
  intl: any  # 함께 사용

1
MaterialApp(
2
  localizationsDelegates: [
3
    GlobalMaterialLocalizations.delegate,
4
    GlobalWidgetsLocalizations.delegate,
5
    GlobalCupertinoLocalizations.delegate,
6
  ],
7
  supportedLocales: [
8
    Locale('en'),
9
    Locale('ko'),
10
  ],
11
)

flutter_lints 패키지

권장 린트 규칙을 제공합니다.

1
dev_dependencies:
2
  flutter_lints: ^6.0.0

analysis_options.yaml에서 사용합니다.

1
include: package:flutter_lints/flutter.yaml

cupertino_icons 패키지

iOS 스타일 아이콘을 제공합니다.

1
dependencies:
2
  cupertino_icons: ^1.0.8

1
Icon(CupertinoIcons.heart)
2
Icon(CupertinoIcons.settings)

Watch out#

WARNING

패키지를 추가한 후에는 반드시 flutter pub get을 실행해야 합니다.

1
# pubspec.yaml 수정 후
2
flutter pub get

IDE에서 자동으로 실행되기도 하지만, 문제가 생기면 수동으로 실행해 보세요.

결론: Flutter SDK 패키지들은 테스트, 로컬라이제이션, 린트 등 핵심 기능을 제공합니다.