플로터 프로젝트 생성 방법

Flutter 영화 구문 검색 앱 완벽 매뉴얼

1단계: Flutter 개발환경 설정

Windows 사용자

1. Flutter SDK 다운로드

   • Flutter 공식 사이트에서 Flutter SDK 다운로드
   • 압축을 해제하여 C:\flutter 경로에 설치

2. 환경 변수 설정

   • 시스템 환경 변수 편집에서 Path에 C:\flutter\bin 추가
   • 명령 프롬프트에서 flutter --version 입력하여 설치 확인

3. Android Studio 설치

   • Android Studio 다운로드 및 설치
   • Flutter 플러그인 설치: File → Settings → Plugins → Flutter 검색 후 설치

macOS 사용자

1. Flutter SDK 다운로드

   git clone https://github.com/flutter/flutter.git -b stable

2. PATH 설정

   export PATH="$PATH:`pwd`/flutter/bin"

3. 개발 도구 설치

   • Xcode (iOS 개발용)
   • Android Studio (Android 개발용)

개발환경 검증

터미널에서 다음 명령어 실행:

flutter doctor

모든 항목이 체크되면 준비 완료!

2단계: 프로젝트 생성

1. 프로젝트 생성

flutter create movie_phrase_app
cd movie_phrase_app

2. 의존성 추가

pubspec.yaml 파일을 열고 dependencies 섹션을 다음과 같이 수정:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  video_player: ^2.8.1
  cached_network_image: ^3.3.0
  url_launcher: ^6.2.1

3. 의존성 설치

flutter pub get

3단계: 코드 구현

1. 기본 코드 교체

lib/main.dart 파일의 모든 내용을 삭제하고 제공된 코드를 복사하여 붙여넣기

2. 권한 설정 (선택사항)

Android 권한 설정

android/app/src/main/AndroidManifest.xml에 다음 권한 추가:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

iOS 권한 설정

ios/Runner/Info.plist에 다음 설정 추가:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

4단계: 앱 실행

1. 에뮬레이터 실행

• Android Studio에서 AVD Manager를 통해 Android 에뮬레이터 실행
• 또는 iOS 시뮬레이터 실행 (macOS만 가능)

2. 앱 실행

flutter run

3. 핫 리로드 사용

• 코드 수정 후 터미널에서 r 키를 눌러 핫 리로드
• 완전한 재시작은 R 키

5단계: 주요 기능 설명

앱 구조

• 검색 기능: 영어 구문 입력 후 검색
• 영화 결과 표시: 더미 데이터로 5개 영화 결과 표시
• 비디오 모달: 영화 카드 클릭 시 비디오 플레이어 모달 표시
• 외부 링크: 플레이프레이즈미, IMDB, 매뉴얼 링크

현재 구현 상태

• UI/UX 완성
• 더미 데이터 사용
• 비디오 플레이어는 플레이스홀더 상태
• 실제 API 연동 필요

6단계: 트러블슈팅

자주 발생하는 문제들

1. 의존성 설치 오류

flutter clean
flutter pub get

2. 에뮬레이터 연결 문제

flutter devices

연결된 기기 목록 확인

3. 빌드 오류

flutter doctor

환경 설정 재확인

4. 핫 리로드 안 됨

flutter run --hot

핫 리로드 모드로 강제 실행

7단계: 추가 개발 가이드

실제 API 연동 방법

1. _searchMovies() 함수에서 실제 API 호출 구현
2. http 패키지 추가하여 네트워크 요청 처리
3. JSON 데이터 파싱 및 MovieResult 객체 생성

비디오 플레이어 구현

1. video_player 패키지 활용
2. _showVideoModal() 함수에서 실제 비디오 플레이어 구현
3. 비디오 URL로 동영상 스트리밍

상태 관리 개선

1. Provider 또는 Riverpod 사용
2. 검색 기록 저장 기능
3. 즐겨찾기 기능 추가

8단계: 빌드 및 배포

Android APK 빌드

flutter build apk

iOS 빌드 (macOS만 가능)

flutter build ios

릴리즈 빌드

flutter build apk --release

완료! 🎉

이제 Flutter 영화 구문 검색 앱이 성공적으로 실행되었습니다. 코드를 수정하고 핫 리로드를 활용하여 원하는 기능을 추가해보세요!

다음 단계

1. 실제 API 연동
2. 비디오 플레이어 구현
3. 사용자 경험 개선
4. 앱 스토어 배포 준비

문제가 발생하면 flutter doctor 명령어로 환경을 점검하고, 공식 Flutter 문서를 참고하세요.