[Flutter 트랙] 앱개발 종합반 1-7 - 프로젝트 열기 & 에뮬레이터 실행

플러터(Flutter) 프로젝트 설정 및 실습 – 프로젝트 열기 & 에뮬레이터 실행

이번 포스팅에서는 VS Code에서 플러터 프로젝트를 여는 방법과 실습을 진행하는 과정을 다룬다.
또한, 애뮬레이터를 활용하여 UI를 미리 확인하는 방법까지 정리하였으니, 플러터 개발을 시작하는 사람이라면 꼭 참고하자.

---

1. VS Code에서 플러터 프로젝트 열기

📌 1) 프로젝트 소스 코드 다운로드 및 압축 해제

플러터 프로젝트를 처음부터 새로 생성하는 방법도 있지만, 미리 준비된 예제 소스 코드를 활용하여 실습을 진행하는 것이 학습에 도움이 된다.

1️⃣ 예제 소스 코드를 다운로드
2️⃣ 본인이 원하는 워크스페이스(예: 바탕화면, C드라이브 등)에 압축 해제
3️⃣ VS Code 실행

📌 2) 프로젝트 열기

1️⃣ VS Code 실행 후 "Start" 화면에서 "Open" 버튼 클릭
2️⃣ 다운로드한 프로젝트 폴더 선택 후 "Open" 클릭
3️⃣ 프로젝트가 정상적으로 열렸는지 확인 (파일 탐색기에서 폴더 구조 확인 가능)

⚠ 주의:

• 프로젝트를 처음 열 때 오류 메시지 또는 언어팩 설치 권장 메시지가 뜰 수 있음 → 모두 무시하고 닫기
• 언어팩(한글화) 설치는 권장하지 않음, 대부분의 튜토리얼이 영어 기반이므로 혼동될 수 있음

---

2. 프로젝트 폴더 구조 이해하기

📌 주요 폴더 설명

✅ assets 폴더 – 프로젝트에서 사용하는 이미지, 아이콘, 폰트 파일 등이 저장됨
✅ lib 폴더 – 플러터 애플리케이션의 핵심 코드가 포함됨
✅ main.dart 파일 – 앱 실행의 시작점 (이곳에서 앱을 실행할 수 있음)

현재 프로젝트에서는 짝 맞추기 게임 UI가 구현된 상태이며,
다트(Dart) 문법을 학습하면서 해당 기능을 직접 추가하는 방식으로 진행될 예정이다.

---

3. 애뮬레이터(Emulator) 실행하기

애뮬레이터는 실제 물리적인 스마트폰 없이 PC에서 가상의 디바이스를 실행할 수 있도록 도와주는 프로그램이다.
이를 통해 UI 화면을 직접 확인하면서 개발을 진행할 수 있다.

📌 1) 애뮬레이터 실행 방법

1️⃣ VS Code 실행 후 우측 하단의 "No Device" 버튼 클릭
2️⃣ 사용 가능한 디바이스 목록에서 원하는 기기 선택

• Mac 사용자 → iOS & Android 에뮬레이터 모두 실행 가능
• Windows 사용자 → iOS 에뮬레이터 사용 불가 (Android 에뮬레이터만 실행 가능)
  3️⃣ "Start iOS Emulator" 또는 "Start Pixel Emulator" 클릭

💡 추가 TIP:
만약 애뮬레이터가 보이지 않는 경우, 다음 명령어를 터미널에서 실행

flutter devices

→ 사용 가능한 디바이스가 표시되는지 확인

---

4. 프로젝트 실행 및 UI 확인

📌 1) 프로젝트 실행하기

1️⃣ lib/main.dart 파일 열기
2️⃣ Run 또는 Debug 버튼 클릭하여 앱 실행
3️⃣ 에뮬레이터에서 앱이 실행되는지 확인

이 과정이 완료되면, 화면에 짝 맞추기 게임 UI가 표시될 것이다.

---

5. 실행 후 UI 및 동작 확인

현재 프로젝트는 UI만 구성된 상태이며, 게임의 실제 기능(카드 매칭, 점수 계산 등)은 아직 구현되지 않음.

✅ 현재 동작 상태

• 게임 화면이 정상적으로 보임
• 카드를 클릭해도 아무런 반응이 없음
• 스코어나 시도 횟수(트라이 카운트)도 변화 없음

✅ 다음 단계에서는?

• Dart 문법을 학습하면서 게임 로직을 직접 구현
• 카드 매칭, 점수 계산, UI 업데이트 기능 추가

---

6. 추가 TIP – 프로젝트 실행이 안될 때 해결 방법

📌 1) 에뮬레이터가 실행되지 않을 때

• Windows 사용자의 경우, HAXM(하드웨어 가속) 설정 필요
• Mac 사용자의 경우, Xcode가 정상적으로 설치되었는지 확인
• 터미널에서 아래 명령어 실행하여 연결된 디바이스 확인

flutter devices

→ 오류 메시지가 있다면 해결 후 다시 시도

📌 2) 프로젝트 실행 중 오류가 발생할 때

• Flutter 패키지를 다시 설치

flutter upgrade

 

VS Code를 재시작 후 다시 실행

• Flutter 버전 확인 후 최신 업데이트 적용

 

---

7. 결론 – 플러터 프로젝트를 시작하는 첫 단계

✔ VS Code에서 프로젝트 열고, 기본 폴더 구조 이해하기
✔ 애뮬레이터를 실행하여 UI를 직접 확인
✔ 현재는 UI만 존재, 기능 구현은 다음 단계에서 진행
✔ 오류 발생 시, Flutter Doctor 및 패키지 재설치로 해결 가능

💡 이제, 본격적으로 다트 문법을 배우면서 게임 로직을 하나씩 구현해보자! 🚀