[Flutter] Flutter 프로젝트 생성 및 테스트 코드 실행해보기

Flutter 프로젝트 생성부터 첫 앱 실행까지

이전 글에서 macOS 13.7.8 Intel Mac에 Flutter 3.22.0을 설치하고 PATH 설정까지 완료했다.

이번 글에서는 설치한 Flutter를 이용해 실제 Flutter 프로젝트를 생성하고 Chrome에서 첫 앱을 실행해본다.

---

1. Flutter 프로젝트 생성

Flutter 프로젝트를 저장할 디렉터리로 이동한다.

cd ~/Desktop/Dev

다음 명령어로 Flutter 프로젝트를 생성한다.

flutter create test_flutter

정상적으로 실행되면 다음과 같은 메시지가 출력된다.

Creating project test_flutter...
Resolving dependencies in `test_flutter`...
Downloading packages...
Got dependencies in `test_flutter`.
Wrote 129 files.

All done!

test_flutter이라는 Flutter 프로젝트가 생성되었다.

---

3. 생성된 프로젝트 구조 확인

프로젝트를 생성하면 기본적으로 다음과 같은 구조가 만들어진다.

test_flutter/
├── android/
├── ios/
├── lib/
│   └── main.dart
├── test/
├── web/
├── pubspec.yaml
└── ...

 

각 디렉터리의 역할은 대략 다음과 같다.

디렉터리 / 파일역할

android/	Android 프로젝트
ios/	iOS 프로젝트
lib/	Flutter 애플리케이션 코드
lib/main.dart	앱의 시작점
test/	테스트 코드
web/	Flutter Web 프로젝트
pubspec.yaml	패키지 및 프로젝트 설정

 

Flutter에서 실제 앱 코드를 작성하는 중심적인 공간은 lib/이다.

 

특히:

lib/main.dart

 

가 애플리케이션의 시작점이다.

---

4. 프로젝트 디렉터리로 이동

생성된 프로젝트로 이동한다.

cd ~/Desktop/Dev/test_flutter

현재 위치를 확인하려면:

pwd

다음과 같이 프로젝트 경로가 출력된다.

/Users/사용자명/Desktop/Dev/test_flutter

---

5. 실행 가능한 디바이스 확인

Flutter에서 현재 사용할 수 있는 디바이스를 확인한다.

flutter devices

환경에 따라 Chrome, macOS, 연결된 스마트폰이나 에뮬레이터 등이 표시된다.

현재 환경에서는 Chrome이 Flutter 개발용 디바이스로 인식되고 있다.

따라서 우선 별도의 모바일 에뮬레이터 없이 Chrome에서 Flutter 앱을 실행보았다.

---

6. Chrome에서 Flutter 앱 실행

다음 명령어를 실행한다.

flutter run -d chrome

Flutter가 프로젝트를 빌드한 뒤 Chrome을 실행한다.

정상적으로 실행되면 Flutter에서 기본으로 제공하는 Counter 앱이 브라우저에 나타난다.

기본 Counter 앱에서는 버튼을 누르면 숫자가 증가한다.

이를 통해 다음 과정을 확인할 수 있다.

Flutter SDK
    ↓
Flutter 프로젝트
    ↓
Dart 코드
    ↓
Flutter Build
    ↓
Chrome
    ↓
Flutter 앱 실행

 

단순히 Flutter SDK가 설치된 것뿐만 아니라 실제로 프로젝트를 생성하고 빌드하여 실행할 수 있는 환경이 만들어졌다는 의미다.

---

7. 정리

이번에 Flutter를 학습하게 된 가장 큰 이유는 다시 코딩을 공부하게 되었고, 친구와 함께 모바일 애플리케이션 프로젝트를 진행하면서 평소 관심이 있었던 Flutter를 직접 경험해보고 싶었기 때문이다.

이번 프로젝트의 목표는 중요한 사람과 사진을 간편하게 공유할 수 있는 모바일 애플리케이션을 만드는 것이다.

물론 모바일 애플리케이션을 개발한다면 Android는 Kotlin, iOS는 Swift를 사용하여 각각의 플랫폼에 맞는 애플리케이션을 개발할 수도 있다.

하지만 이번 프로젝트에서는 Flutter를 선택했다.

가장 큰 이유는 하나의 코드로 여러 플랫폼을 지원할 수 있다는 점이었다. Android와 iOS 애플리케이션을 각각 따로 개발하는 대신, Flutter를 이용하면 하나의 프로젝트를 기반으로 여러 플랫폼의 애플리케이션을 개발해 나갈 수 있다는 점이 매력적으로 느껴졌다.

이번 프로젝트를 통해 단순히 Flutter 문법만 공부하는 것이 아니라, 실제로 하나의 서비스를 만들어가면서 모바일 애플리케이션의 구조와 개발 과정을 직접 경험해보고 싶었다.

현재 프로젝트의 디렉터리 구조는 다음과 같다.

Photoshare/
├── flutter/
│   └── Flutter SDK
│
└── aida_mobile/
    ├── android/
    ├── ios/
    ├── lib/
    │   └── main.dart
    ├── test/
    ├── web/
    └── pubspec.yaml

앞으로 lib/ 아래에 실제 어플의 화면과 기능을 구현할 예정이다.

---

8. 현재까지 완료한 것

이번 단계에서는 다음 작업을 완료했다.

Flutter 프로젝트 생성	✅
프로젝트 생성	✅
프로젝트 구조 확인	✅
Chrome 디바이스 확인	✅
Flutter 기본 앱 실행	✅

Android Studio와 Xcode는 아직 설치하지 않았지만, Chrome을 이용한 Flutter 테스트 환경은 구축되었다.

---

9. 다음 단계

기본 Flutter 앱의 실행까지 확인했으므로 이제 실제 어플의 화면을 만들어볼 예정이다.

다음 단계에서는 기본 main.dart를 수정해서 어플의 첫 번째 화면을 만들어본다.

예를 들어:

와 같은 초기 화면을 만들고 이후 로그인, 사진 업로드, API 통신 등의 기능을 단계적으로 추가할 예정이다.

최종적으로는 다음과 같은 구조를 목표로 한다.

Flutter
   │
   ▼
 Mobile
   │
   ▼
API Gateway
   │
   ▼
AWS Lambda
   │
   ├── PostgreSQL
   │
   └── Cloudflare R2