iPhone에서 Flutter 빌드하기

개요

MacBook 이 있어야 iOS 빌드가 가능합니다. 저는 개인용 MacBook으로 진행했습니다.

회사에서 Flutter, React 를 사용한 WebView(웹뷰) 로 날씨 앱 을 만들고 있습니다.

android 에뮬레이터나 갤럭시 기기는 비교적 쉽게 빌드가 되는 반면, 실제 아이폰 에서 빌드하는 데 삽질을 많이 해서 내용을 공유해봅니다. Flutter Project를 아이폰에 빌드하려면 다음과 같은 단계 를 따라야 합니다.

1. Apple Developer 계정 등록

• Apple Developer 사이트에 방문합니다.
• Apple ID로 로그인 하거나 새로운 Apple ID 를 생성합니다.
• 로컬 환경에서 진행 시 필요 없지만, 추후 Apple Developer Program ($99/year)에 가입

2. Macbook setting

Xcode 설치

• App Store 를 열고 Xcode 를 검색하여 설치합니다. (악명높은 별점 1.8점의 그 것 맞습니다...)
• 설치 후, Xcode를 열고 Preferences > Locations 로 이동하여 Command Line Tools가 설치되어 있는지 확인합니다.

Homebrew 설치

Homebrew는 macOS용 패키지 관리자 입니다.

터미널에서 다음 명령어를 입력 하여 Homebrew를 설치하고, 버전을 확인 합니다. 잘 설치가 되었다면 버전이 출력됩니다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

brew --version

Homebrew 4.3.6

Ruby 설치 (2.7버전 이상)

CocoaPods 설치를 위해 Ruby를 설치합니다. (2.7 버전 이상 으로 깔아야 합니다. 기존에 버전이 낮다면 업데이트 하세요)

터미널에서 다음 명령어를 입력 하여 Ruby를 설치하고, 버전을 확인 합니다. 잘 설치가 되었다면 버전이 출력됩니다.

brew install ruby

ruby --version

ruby 3.3.3

CocoaPods 설치

CocoaPods는 iOS 프로젝트의 종속성을 관리 하는 도구입니다.

터미널에서 다음 명령어를 입력 하여 CocoaPods를 설치하고, 버전을 확인 합니다. 잘 설치가 되었다면 버전이 출력됩니다.

sudo gem install cocoapods

pod --version

1.15.2

3. Flutter 설치

Flutter SDK 다운로드 및 설치

Flutter는 Google 에서 만든 모바일 앱 개발 프레임워크 입니다. 공식 사이트에서 Flutter SDK를 다운로드 합니다.

혹은 Homebrew로 설치할 수 있습니다.

brew install --cask flutter

cask 명령어로 설치하면 환경변수 설정까지 자동 으로 해줍니다. 설치 시 자동으로 Dart(Flutter 언어) 까지 설치됩니다.

Flutter SDK 설정

• 다운로드 된 SDK의 경로에 들어가서 bin 파일의 경로 를 복사합니다. (예, User/tools/flutter/bin )
• PATH를 추가합니다.

# cd [flutter-sdk-path]
 
cd User/tools/flutter/bin

• .zshrc 파일을 열어서 PATH를 추가 합니다. 저는 nano를 사용했지만, vim 과 같은 다른 에디터를 사용해도 됩니다.

nano ~/.zshrc

• 맨 아래 에 다음과 같이 PATH를 추가 합니다.

# export PATH="$PATH:[flutter-sdk-path]"
 
export PATH="$PATH:/User/tools/flutter/bin"

• 변경사항을 적용합니다.

source ~/.zshrc

4. Flutter doctor 실행

Flutter가 잘 설치되었다면, Flutter의 버전이 잘 출력됩니다.

flutter --version

• 이제 Flutter 의존성을 확인 하기 위해 flutter doctor 를 실행합니다. 이 과정은 Flutter 개발 환경을 설정 하기 위한 필수 단계 입니다.

flutter doctor

Android는 회사 Windows로 개발할 예정이라, iOS 전용인 Xcode관련 환경 만 확인했습니다. (Android toolchain 도 설치하고 싶으시다면 블로그 글을 참고하세요.)

Xcode에 [x]표가 돼 있다면, 오류메세지를 잘 읽어보고 2번(Macbook setting)을 다시 잘 세팅해줍니다.

• Xcode 경로 문제 해결

sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'

sudo xcodebuild -runFirstLaunch

sudo xcodebuild -license

5. Simulator에서 실행하기

이제 거의 다 왔습니다. Flutter를 실행시키기만 하면 됩니다.

• Flutter 프로젝트 root에서 다음 명령을 실행시킵니다.

flutter pub get

• iOS 종속성을 설치합니다.

cd ios

pod install

• 프로젝트 빌드 (cd...로 root로 이동 후)

flutter build ios

open -a Simulator

flutter run

만약 뭔가 알 수 없는 에러가 생긴다면, 캐시 정리 및 재빌드 를 해보세요.

flutter clean

6. iPhone에서 실행하기

좋은 블로그 글이 있습니다.

• iPhone을 Macbook과 같은 와이파이에 연결합니다.
• Xcode 상단에 본인 아이폰의 이름이 설정되어 있는지 확인합니다. (Runner -> Signing & Capabilities 탭 -> Team -> 본인 팀 설정)
• 아이폰을 설정합니다. (설정 -> 개인정보 보호 및 보안 -> 개발자 모드를 '끔'에서 '켬'으로 변경 -> 재부팅 -> flutter build iOS, flutter run 혹은 Xcode 상단 플레이버튼(Start the active scheme) 클릭 -> 설정 -> 일반 -> VPN 및 기기 관리 -> 해당 탭에 연결 버튼 클릭)

잘 안 된다면, 해당 Wifi를 삭제 후 다시 연결 하거나 Xcode도 껐다 켜 보세요. (캐시도 지워보세요!)