Wednesday, March 6, 2019

Flutter iOS 개발 환경 완벽 구축: VSCode에서 시뮬레이터가 안 보일 때 최종 해결책
  /   No comments   

Flutter는 구글이 개발한 오픈소스 UI 소프트웨어 개발 키트로, 단일 코드베이스를 사용하여 모바일(iOS, Android), 웹, 데스크톱(Windows, macOS, Linux)용 네이티브 컴파일 애플리케이션을 개발할 수 있는 강력한 프레임워크입니다. 특히 '핫 리로드(Hot Reload)' 기능이 제공하는 압도적인 개발 속도와 아름다운 UI를 손쉽게 구현할 수 있다는 장점 덕분에 전 세계 수많은 개발자로부터 사랑받고 있습니다. 하지만 이 강력한 프레임워크를 사용하기 위한 첫걸음, 바로 개발 환경 설정에서 많은 초보 개발자들이 어려움을 겪곤 합니다. 특히 macOS 환경에서 Visual Studio Code(이하 VSCode)를 사용하여 iOS 개발 환경을 구축할 때, 'iOS 시뮬레이터'가 인식되지 않는 문제는 매우 흔하게 발생하는 대표적인 난관입니다.

이 글에서는 Flutter 개발을 위해 macOS에 VSCode를 설치하는 과정부터 시작하여, 많은 개발자들을 좌절시키는 iOS 시뮬레이터 인식 문제를 근본적으로 해결하는 방법까지, A부터 Z까지 모든 과정을 상세하고 체계적으로 안내합니다. 단순히 문제 해결 명령어 하나를 제시하는 것을 넘어, 각 단계가 왜 필요하며 어떤 역할을 하는지 깊이 있게 설명하여 독자 여러분이 개발 환경 설정의 원리를 이해하고 미래에 발생할 수 있는 다른 문제들에도 능동적으로 대처할 수 있는 역량을 갖추도록 돕는 것을 목표로 합니다.

1장: 왜 Flutter와 VSCode 조합을 선택해야 하는가?

개발 환경 구축을 시작하기에 앞서, 우리가 왜 'Flutter'와 'VSCode'라는 조합을 선택하는지에 대한 이해는 매우 중요합니다. 이 선택이 제공하는 장점들을 알면 앞으로의 학습 과정에 더욱 확신을 가질 수 있습니다.

1.1. Flutter: 크로스플랫폼 개발의 새로운 기준

  • 단일 코드베이스: iOS와 Android 앱을 별도로 개발할 필요 없이, Dart 언어로 작성된 하나의 코드로 양쪽 플랫폼 모두에서 동작하는 고성능 네이티브 앱을 만들 수 있습니다. 이는 개발 시간과 비용을 획기적으로 절감해 줍니다.
  • 압도적인 개발 속도: Flutter의 '핫 리로드' 기능은 코드 변경 사항을 단 몇 초 만에 실행 중인 앱에 반영해 줍니다. UI를 수정하고, 로직을 변경하고, 버그를 수정하는 모든 과정에서 앱을 재시작할 필요가 없어 개발 흐름이 끊기지 않고 몰입도 높은 개발이 가능합니다.
  • 아름답고 일관된 UI: Flutter는 자체 렌더링 엔진(Skia)을 사용하여 위젯을 그리기 때문에, 플랫폼에 종속되지 않고 어떤 기기에서든 일관되고 아름다운 UI를 보장합니다. 머티리얼 디자인과 쿠퍼티노(iOS 스타일) 위젯을 풍부하게 제공하며, 커스텀 디자인 구현 또한 매우 자유롭습니다.
  • 네이티브 성능: Flutter 코드는 각 플랫폼의 네이티브 코드(ARM, x86)로 직접 컴파일됩니다. 이로 인해 웹뷰를 사용하거나 자바스크립트 브릿지를 거치는 다른 크로스플랫폼 솔루션들과 달리, 네이티브 앱에 버금가는 부드러운 애니메이션과 높은 성능을 자랑합니다.

1.2. VSCode: 개발자를 위한 경량의 강력한 편집기

Flutter는 공식적으로 Android Studio, IntelliJ, 그리고 VSCode를 지원합니다. Android Studio도 훌륭한 도구이지만, VSCode는 다음과 같은 장점으로 인해 많은 Flutter 개발자들에게 사랑받고 있습니다.

  • 가벼움과 빠른 속도: VSCode는 무거운 IDE(통합 개발 환경)에 비해 훨씬 가볍고 빠르게 실행됩니다. 저사양 컴퓨터에서도 쾌적한 개발 경험을 제공합니다.
  • 강력한 확장 프로그램 생태계: VSCode의 가장 큰 장점은 바로 '확장 프로그램(Extensions)'입니다. Flutter와 Dart 공식 확장 프로그램을 설치하는 것만으로도 코드 자동 완성, 구문 강조, 디버깅, 핫 리로드 등 IDE에 버금가는 강력한 기능들을 사용할 수 있습니다. 그 외에도 Git 연동, 테마, 코드 포맷터 등 생산성을 높여주는 수많은 확장 프로그램이 존재합니다.
  • 높은 자유도와 커스터마이징: 사용자는 자신만의 단축키, 설정, 테마를 통해 VSCode를 자신에게 완전히 최적화된 개발 환경으로 만들 수 있습니다.
  • 통합 터미널: VSCode 내에 터미널이 내장되어 있어, 코드 편집과 명령어 실행을 위해 창을 전환할 필요가 없습니다. 이는 Flutter 명령어(`flutter run`, `flutter doctor` 등)를 실행할 때 매우 편리합니다.

이러한 이유로 Flutter의 빠른 개발 사이클과 VSCode의 가볍고 유연한 특징은 환상적인 시너지를 발휘합니다. 이제 이 강력한 조합을 우리의 Mac에 설치해 보겠습니다.

2장: Flutter SDK 설치 및 환경 변수 설정 (macOS 기준)

Flutter 개발을 시작하기 위한 첫 번째 단계는 Flutter SDK(소프트웨어 개발 키트)를 설치하는 것입니다. SDK는 Flutter 앱을 개발, 빌드, 실행하는 데 필요한 모든 도구와 라이브러리를 포함하고 있습니다. macOS에서는 Homebrew를 이용하거나 직접 다운로드하여 설치할 수 있습니다.

2.1. Homebrew를 이용한 간편 설치 (권장)

Homebrew는 macOS용 패키지 관리자로, 복잡한 설치 과정을 간단한 명령어로 처리해 줍니다. 아직 Homebrew가 설치되어 있지 않다면, 터미널을 열고 다음 명령어를 실행하여 설치하세요.

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

Homebrew 설치가 완료되었다면, 다음 명령어를 통해 Flutter를 간단하게 설치할 수 있습니다.

brew install --cask flutter

Homebrew는 Flutter SDK를 `/opt/homebrew/Caskroom/flutter/` (Apple Silicon Mac 기준) 또는 `/usr/local/Caskroom/flutter/` (Intel Mac 기준)와 같은 경로에 설치하고, 환경 변수 설정까지 자동으로 처리해 주는 경우가 많아 매우 편리합니다.

2.2. 수동 설치 방법

SDK의 위치를 직접 제어하고 싶거나 Homebrew를 사용하지 않는 경우, 수동으로 설치할 수 있습니다.

  1. Flutter SDK 다운로드: Flutter 공식 웹사이트에 접속하여 최신 버전의 Stable 채널 SDK 압축 파일을 다운로드합니다. 일반적으로 'flutter_macos_x.x.x-stable.zip'과 같은 이름의 파일입니다.
  2. 압축 해제 및 위치 지정: 다운로드한 zip 파일의 압축을 풉니다. 압축을 풀면 'flutter'라는 이름의 폴더가 생성됩니다. 이 폴더를 앞으로 계속 사용할 위치로 옮깁니다. 일반적으로 사용자 홈 디렉토리 아래에 `development`나 `SDKs`와 같은 폴더를 만들어 관리하는 것이 좋습니다. 예를 들어, `~/development/flutter` 와 같이 위치시킵니다.
  3. 환경 변수(PATH) 설정: 터미널에서 `flutter` 명령어를 어디서든 사용할 수 있도록 시스템에 Flutter SDK의 위치를 알려줘야 합니다. 이것이 바로 환경 변수(PATH) 설정입니다.

    macOS는 기본 셸로 Zsh를 사용하므로, 홈 디렉토리의 `.zshrc` 파일을 수정합니다. (만약 Bash 셸을 사용한다면 `.bash_profile` 또는 `.bashrc` 파일을 수정합니다.)

    터미널에서 다음 명령어를 실행하여 `.zshrc` 파일을 엽니다.

    open -e ~/.zshrc

    파일이 열리면, 파일의 가장 마지막 줄에 다음 내용을 추가합니다. 여기서 `[PATH_TO_FLUTTER_DIRECTORY]` 부분은 실제 `flutter` 폴더가 위치한 절대 경로로 변경해야 합니다. 예를 들어, `~/development/flutter`에 위치시켰다면 `/Users/[Your_Username]/development/flutter`가 됩니다.

    export PATH="$PATH:[PATH_TO_FLUTTER_DIRECTORY]/bin"

    예시:

    export PATH="$PATH:/Users/myuser/development/flutter/bin"

    파일을 저장하고 닫은 뒤, 터미널에 다음 명령어를 실행하여 변경사항을 즉시 적용합니다.

    source ~/.zshrc

    만약 `open` 명령어로 파일이 열리지 않거나, `nano`나 `vim`과 같은 터미널 편집기를 사용하고 싶다면 다음 명령어를 사용할 수 있습니다.

    nano ~/.zshrc

2.3. 설치 확인

설치가 올바르게 완료되었는지 확인하기 위해, 새 터미널 창을 열고 다음 명령어를 실행합니다.

flutter --version

아래와 같이 Flutter의 버전 정보와 Dart 언어의 버전 정보가 표시된다면 성공적으로 설치된 것입니다.

Flutter 3.x.x • channel stable • https://github.com/flutter/flutter.git
Framework • revision xxxxxxxxxx (3 days ago) • 2023-xx-xx xx:xx:xx -xxxx
Engine • revision xxxxxxxxxx
Tools • Dart 3.x.x • DevTools 2.x.x

이제 Flutter 개발의 기본 도구는 준비되었습니다. 다음 단계는 iOS 앱을 빌드하고 테스트하기 위한 핵심 도구인 Xcode를 설치하는 것입니다.

3장: iOS 개발의 심장, Xcode 설치 및 핵심 설정

Flutter로 iOS 앱을 개발하기 위해서는 Apple의 공식 개발 도구인 Xcode가 반드시 필요합니다. Xcode는 iOS SDK, 시뮬레이터, 컴파일러, 그리고 앱 빌드에 필요한 모든 도구를 포함하고 있는 거대한 패키지입니다. Xcode 설치와 설정 과정에서의 작은 실수가 바로 VSCode에서 iOS 시뮬레이터를 찾을 수 없는 문제의 직접적인 원인이 되므로, 각 단계를 주의 깊게 따라오시기 바랍니다.

3.1. Xcode 설치

Xcode는 macOS의 App Store를 통해 가장 쉽게 설치할 수 있습니다.

  1. App Store를 열고 'Xcode'를 검색합니다.
  2. [받기] 또는 [설치] 버튼을 클릭하여 설치를 시작합니다.
  3. Xcode는 용량이 수십 기가바이트에 달하므로 다운로드와 설치에 상당한 시간이 소요될 수 있습니다. 안정적인 네트워크 환경에서 진행하는 것을 권장합니다.

3.2. Xcode 최초 실행 및 추가 구성 요소 설치

설치가 완료되었다고 해서 끝이 아닙니다. 이 단계는 매우 중요하며 많은 사용자가 건너뛰는 부분입니다.

설치된 Xcode를 최소 한 번 이상 실행해야 합니다. `응용 프로그램` 폴더에서 Xcode 아이콘을 클릭하여 실행하세요. 처음 실행하면 라이선스 동의 창이 나타날 수 있습니다. 내용을 확인하고 동의(Agree) 버튼을 누르세요. 그 후 Xcode가 추가적으로 필요한 구성 요소(additional required components)를 자동으로 설치합니다. 이 과정이 완료될 때까지 기다려야 합니다. 이 과정이 완료되지 않으면 Flutter가 Xcode의 도구를 제대로 사용할 수 없습니다.

3.3. Xcode Command Line Tools (명령줄 도구) 설치

Xcode Command Line Tools는 컴파일러, 디버거 등 터미널(명령줄) 환경에서 개발 작업을 수행하는 데 필요한 중요한 도구들을 포함하고 있습니다. Flutter는 내부적으로 이 도구들을 사용하여 앱을 빌드합니다.

터미널을 열고 다음 명령어를 입력하세요.

xcode-select --install

이 명령어를 실행하면 Command Line Tools를 설치할지 묻는 팝업창이 나타납니다. [설치]를 클릭하고 라이선스에 동의하면 설치가 진행됩니다. 이미 설치되어 있다면, "command line tools are already installed"와 같은 메시지가 나타날 것입니다. 그렇다면 이 단계는 정상적으로 완료된 것입니다.

3.4. 문제의 핵심: Xcode 활성 개발자 디렉토리 설정

바로 이 부분이 VSCode에서 iOS 시뮬레이터를 찾지 못하는 문제의 가장 핵심적인 원인입니다. 시스템은 여러 버전의 Xcode를 설치할 수 있도록 허용하는데, 이 때문에 Flutter와 같은 외부 도구가 어떤 Xcode를 사용해야 할지 명확하게 알려주어야 합니다. `xcode-select`라는 명령어가 바로 이 역할을 수행합니다.

`xcode-select`는 시스템의 기본 Xcode 경로를 설정하거나 확인하는 유틸리티입니다. Flutter가 빌드 도구와 시뮬레이터를 찾기 위해서는 이 경로가 올바르게 설정되어 있어야 합니다.

설정을 위해 터미널에서 다음 명령어를 실행하세요. 이 명령어는 시스템에게 `/Applications/Xcode.app` 경로에 있는 Xcode를 기본 개발 도구로 사용하라고 명시적으로 지정하는 역할을 합니다. 관리자 권한이 필요하므로 `sudo`를 사용하며, 컴퓨터의 암호를 입력해야 할 수 있습니다.

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

이 명령어에 대한 상세 설명은 다음과 같습니다.

  • `sudo`: Super User Do의 약자로, 명령어를 관리자 권한으로 실행합니다. 시스템 설정을 변경하는 것이므로 필수적입니다.
  • `xcode-select`: Xcode 경로를 관리하는 명령어입니다.
  • `--switch`: 사용할 Xcode의 경로를 지정하는 옵션입니다.
  • `/Applications/Xcode.app/Contents/Developer`: App Store를 통해 Xcode를 설치했을 때의 표준 경로입니다. 이 경로 안에 컴파일러, SDK, 기타 개발 도구들이 들어 있습니다.

왜 이 명령어가 필요한가? Xcode를 막 설치했거나 업데이트한 후에는 시스템이 이 경로를 제대로 인식하지 못하는 경우가 종종 발생합니다. 이 명령어를 실행함으로써 우리는 시스템의 혼란을 막고, Flutter를 포함한 모든 커맨드 라인 기반 도구들이 "아, Xcode는 여기에 있구나!"라고 명확하게 인지하게 만들어주는 것입니다. 이 한 줄의 명령어가 누락되어 수많은 개발자들이 "시뮬레이터가 보이지 않아요"라는 문제를 겪게 됩니다.

3.5. Xcode 라이선스 동의 확인

드물게 라이선스 동의가 커맨드 라인 레벨에서 완료되지 않는 경우가 있습니다. `flutter doctor`를 실행했을 때 라이선스 관련 오류가 표시된다면 다음 명령어를 실행하여 라이선스 동의를 완료해주세요.

sudo xcodebuild -license

실행하면 긴 라이선스 내용이 표시됩니다. 스페이스 바를 눌러 끝까지 내린 후, `agree`를 타이핑하고 엔터를 누르면 동의가 완료됩니다.

4장: 마법의 진단 도구, `flutter doctor` 완벽 분석

지금까지의 모든 과정을 마쳤다면, 이제 우리의 개발 환경이 제대로 설정되었는지 종합적으로 검진할 차례입니다. Flutter는 `flutter doctor`라는 매우 강력하고 친절한 진단 도구를 제공합니다. 이 도구는 현재 시스템의 Flutter 개발 환경을 스캔하여 각 항목의 상태를 알려주고, 문제가 있을 경우 해결 방법까지 제시해 줍니다.

터미널을 열고 다음 명령어를 실행해 봅시다.

flutter doctor -v

`-v` (verbose) 옵션을 추가하면 각 항목에 대한 더 상세한 정보를 볼 수 있습니다. `flutter doctor`의 결과는 일반적으로 다음과 같은 항목들로 구성됩니다. 각 항목이 무엇을 의미하며 어떤 상태여야 하는지 자세히 살펴보겠습니다.


[✓] Flutter (Channel stable, 3.16.5, on macOS 14.1.2 23B92 darwin-arm64, locale ko-KR)
    • Flutter version 3.16.5 at /Users/myuser/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 78666c8dc5 (4 weeks ago), 2023-12-19 16:14:14 -0800
    • Engine revision 3f3e560236
    • Dart version 3.2.3
    • DevTools version 2.28.4

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/myuser/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/myuser/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C65
    • CocoaPods version 1.14.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Visual Studio Code (version 1.85.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.78.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64  • macOS 14.1.2 23B92 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 120.0.6099.199

[✓] Network resources
    • All expected network resources are available.

위 결과는 모든 설정이 완벽하게 끝난 '이상적인' 상태입니다. 각 항목의 아이콘이 의미하는 바는 다음과 같습니다.

  • `[✓]` : 체크 표시. 해당 항목은 문제가 없으며 완벽하게 설정되었습니다.
  • `[!]` : 느낌표. 해당 항목에 경고가 있습니다. 개발은 가능할 수 있지만, 해결해야 할 부수적인 문제가 남아있습니다.
  • `[✗]` : 엑스 표시. 해당 항목에 심각한 오류가 있습니다. 이 문제가 해결되기 전까지 해당 플랫폼으로의 개발은 불가능합니다.
  • `[?]` : 물음표. 해당 항목의 정보를 수집할 수 없습니다.

`flutter doctor` 결과 상세 분석 및 해결 방법

[✓] Flutter (...)
이 항목은 Flutter SDK 자체가 잘 설치되었는지를 나타냅니다. 만약 여기에 `[✗]` 표시가 있다면 2장에서 진행한 SDK 설치 및 환경 변수 설정 과정에 문제가 있는 것이므로 다시 확인해야 합니다.
[!] Xcode - develop for iOS and macOS
가장 문제가 많이 발생하는 부분입니다. 이 항목 앞에 `[!]`나 `[✗]`가 있다면 아래의 경우들을 확인해야 합니다.
  • `✗ Xcode installation is incomplete; a full installation is necessary for iOS development.`
    : Xcode가 제대로 설치되지 않았거나, 최초 실행 시 필요한 구성 요소 설치를 하지 않은 경우입니다. 응용 프로그램 폴더에서 Xcode를 실행하여 추가 설치를 완료하세요.
  • `✗ Xcode's command line tools are not installed;`
    : Xcode 명령줄 도구가 설치되지 않았습니다. 터미널에서 `xcode-select --install`을 실행하여 설치하세요.
  • `! Xcode is not configured for command-line use. To configure Xcode, run: sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer`
    : 바로 이 글의 핵심 문제점입니다. `flutter doctor`가 친절하게 해결 방법까지 알려주고 있습니다. 제시된 `sudo xcode-select --switch ...` 명령어를 그대로 복사하여 터미널에 실행하면 이 문제는 즉시 해결됩니다.
  • `! CocoaPods not installed. ... To install: sudo gem install cocoapods`
    : CocoaPods는 iOS 및 macOS 개발에서 사용되는 라이브러리 의존성 관리자입니다. Flutter가 iOS 프로젝트를 빌드할 때 필요합니다. 제시된 대로 `sudo gem install cocoapods` 명령어를 실행하여 설치합니다.
  • `✗ Agree to Xcode license`
    : Xcode 라이선스에 동의하지 않은 경우입니다. 터미널에서 `sudo xcodebuild -license`를 실행하여 동의 절차를 완료하세요.
[!] Connected device
이 부분은 현재 PC에 연결되어 개발에 사용할 수 있는 기기나 에뮬레이터 목록을 보여줍니다. 처음에는 아무것도 연결하지 않았으므로 'No devices available'이라고 뜨는 것이 정상입니다. 하지만 iOS 시뮬레이터를 실행했는데도 이 목록에 나타나지 않는다면, 이는 `Xcode` 항목의 문제가 해결되지 않았음을 의미합니다. 즉, `xcode-select --switch` 설정이 올바르지 않으면 Flutter는 시스템에서 시뮬레이터를 찾을 방법이 없어 이 목록에 표시하지 못하는 것입니다.

모든 항목, 특히 `Xcode` 항목 앞에 `[✓]` 녹색 체크 표시가 나타날 때까지 위의 문제 해결 방법들을 적용하세요. `flutter doctor` 결과가 모두 녹색 체크가 되면, 비로소 VSCode에서 iOS 시뮬레이터를 정상적으로 사용할 준비가 된 것입니다.

5장: VSCode 설정 및 감격의 iOS 시뮬레이터 실행

이제 모든 준비는 끝났습니다. VSCode를 설정하고, 그토록 원했던 iOS 시뮬레이터를 실행하여 Flutter 앱을 띄워볼 차례입니다.

5.1. VSCode에 Flutter 확장 프로그램 설치

  1. VSCode를 실행합니다.
  2. 왼쪽 액티비티 바에서 네모난 블록 모양의 '확장 프로그램(Extensions)' 아이콘을 클릭합니다. (단축키: `Cmd+Shift+X`)
  3. 검색창에 `Flutter`를 입력합니다.
  4. 검색 결과 목록에서 'Dart-Code'가 제작한 공식 'Flutter' 확장 프로그램을 찾아 [설치(Install)] 버튼을 클릭합니다.

Flutter 확장 프로그램을 설치하면, Flutter 개발에 필수적인 Dart 언어 확장 프로그램도 자동으로 함께 설치됩니다. 이 확장 프로그램은 코드 자동 완성, 문법 검사, 디버깅, 위젯 가이드라인 표시 등 Flutter 개발을 위한 강력한 기능들을 VSCode에 추가해 줍니다.

5.2. iOS 시뮬레이터 실행 및 확인

이제 VSCode에서 Flutter 프로젝트를 열거나, 없다면 새 프로젝트를 생성해 봅시다.

  • 새 프로젝트 생성: `Cmd+Shift+P`를 눌러 커맨드 팔레트를 열고 `Flutter: New Project`를 검색하여 선택합니다. Application 템플릿을 선택하고, 프로젝트를 저장할 폴더를 지정한 후, 프로젝트 이름을 입력합니다. (예: `my_first_app`)
  • 기존 프로젝트 열기: `File > Open Folder...` 메뉴를 통해 기존 Flutter 프로젝트 폴더를 엽니다.

프로젝트가 열리면 VSCode의 오른쪽 하단 상태 표시줄을 주목하세요. 여기에 여러 정보가 표시되는데, 그중 `No Device` 또는 `{}` 아이콘이 있는 부분이 바로 기기 선택 메뉴입니다.

자, 이제 대망의 순간입니다.

  1. 오른쪽 하단의 **'No Device'**라고 표시된 부분을 클릭합니다.
  2. 모든 설정이 올바르게 완료되었다면, 클릭 시 나타나는 목록 상단에 **'Start iOS Simulator'**라는 옵션이 보일 것입니다. 이 옵션을 선택합니다.
    (만약 'Start iOS Simulator'가 보이지 않는다면, 이는 3장과 4장에서 다룬 Xcode 관련 설정, 특히 `sudo xcode-select --switch ...` 명령어가 제대로 실행되지 않았다는 강력한 증거입니다. 이전 단계들을 다시 한번 꼼꼼히 확인해주세요.)
  3. 잠시 후 익숙한 iPhone 모양의 iOS 시뮬레이터가 화면에 나타납니다.
  4. 시뮬레이터가 완전히 부팅되고 나면, VSCode 오른쪽 하단의 기기 표시 부분이 'iPhone 15 Pro (ios)'와 같이 현재 실행된 시뮬레이터의 이름으로 변경된 것을 확인할 수 있습니다.
  5. 터미널에서 `flutter doctor`를 다시 실행해보면, `Connected device` 항목에 실행된 시뮬레이터가 목록에 추가된 것을 볼 수 있습니다.

만약 그래도 시뮬레이터가 보이지 않는다면?

극히 드문 경우지만 모든 설정을 마쳤는데도 목록에 뜨지 않는다면, 다음 방법들을 시도해 볼 수 있습니다.

  • VSCode 재시작: 가장 간단하지만 효과적인 방법입니다. VSCode를 완전히 종료했다가 다시 실행해 보세요.
  • 터미널에서 직접 시뮬레이터 실행: VSCode를 통하지 않고 터미널에서 직접 시뮬레이터를 실행할 수도 있습니다. 
    open -a Simulator
    위 명령어를 실행하면 시뮬레이터 앱이 직접 실행됩니다. 시뮬레이터가 실행된 상태에서 VSCode의 기기 선택 메뉴를 다시 클릭하면, 실행 중인 시뮬레이터가 목록에 나타날 것입니다.

5.3. Flutter 앱 실행

이제 시뮬레이터도 준비되었으니, 샘플 앱을 실행해 봅시다.

  1. VSCode에서 `main.dart` 파일을 엽니다.
  2. 상단 메뉴에서 `Run > Start Debugging`을 클릭하거나, 키보드에서 `F5` 키를 누릅니다.
  3. VSCode 하단의 '디버그 콘솔(DEBUG CONSOLE)'에 빌드 과정이 출력되기 시작합니다. 처음 빌드할 때는 다소 시간이 걸릴 수 있습니다.
  4. "Launching lib/main.dart on iPhone 15 Pro in debug mode..."와 같은 메시지가 보이고 잠시 후 iOS 시뮬레이터 화면에 파란색 배경의 카운터 앱이 나타난다면, 당신은 성공적으로 Flutter iOS 개발 환경 구축을 완료한 것입니다!

이제 코드(`main.dart`)를 수정하고 저장(`Cmd+S`)해 보세요. 번개 모양 아이콘(핫 리로드)을 클릭하거나 저장하는 것만으로 변경사항이 즉시 시뮬레이터에 반영되는 놀라운 경험을 할 수 있습니다.

6장: 더 나은 개발 경험을 위한 추가 팁 및 문제 해결

기본적인 개발 환경 구축은 끝났지만, 실제 개발 과정에서는 예상치 못한 다른 문제들을 마주칠 수 있습니다. 몇 가지 흔한 사례와 해결 팁을 알아두면 더욱 원활한 개발이 가능합니다.

6.1. CocoaPods 관련 문제

CocoaPods는 Flutter가 iOS 네이티브 기능을 사용하거나 외부 라이브러리(패키지)를 프로젝트에 통합할 때 필요한 의존성 관리 도구입니다. `flutter create`로 프로젝트를 생성하면 `ios` 폴더 내에 `Podfile`이라는 파일이 생성되며, `flutter run`을 실행할 때 Flutter가 자동으로 `pod install`을 실행하여 필요한 라이브러리들을 설치합니다.

  • 오류: `pod install` 또는 `pod setup`이 매우 느리거나 실패하는 경우
    CocoaPods는 중앙 저장소(master repo)의 정보를 가져와야 하는데, 이 과정이 매우 느릴 수 있습니다. 다음과 같은 명령어를 순서대로 시도해 볼 수 있습니다. 
    
# 저장소 정보 업데이트
pod repo update

# 그래도 문제가 해결되지 않는다면 캐시를 삭제 후 재설치
rm -rf ~/.cocoapods/repos
pod setup
  • M1/M2/M3 Apple Silicon Mac에서의 CocoaPods 문제
    과거에는 Apple Silicon Mac에서 CocoaPods를 Rosetta 2를 통해 실행해야 하는 경우가 있었습니다. 하지만 최근 버전의 CocoaPods와 Flutter는 arm64 아키텍처를 네이티브로 잘 지원하므로 대부분 문제가 없습니다. 만약 오래된 프로젝트에서 CocoaPods 관련 아키텍처 오류가 발생한다면, 다음 명령어로 ffi 관련 문제를 해결할 수 있습니다. 
    sudo gem uninstall ffi && sudo gem install ffi -- --enable-libffi-alloc
    또한, iOS 프로젝트를 Xcode에서 직접 열고 빌드 아키텍처 설정을 확인해야 할 수도 있습니다.

6.2. 권한(Permission) 문제

macOS의 보안 정책이 강화되면서 파일 시스템의 특정 영역에 접근할 때 권한 문제가 발생할 수 있습니다. `sudo`는 많은 문제를 해결해주는 마법의 명령어처럼 보이지만, 항상 신중하게 사용해야 합니다. 개발 환경 설정 과정(`gem install`, `xcode-select`) 외에 프로젝트 폴더 내부의 파일을 수정하거나 빌드할 때 지속적으로 권한 오류가 발생한다면, 프로젝트 폴더 자체의 소유 권한이 잘못 설정되었을 수 있습니다. 다음 명령어로 폴더의 소유자를 현재 사용자로 변경할 수 있습니다.

sudo chown -R $(whoami) /path/to/your/project/folder

6.3. 개발 환경 최신 상태 유지하기

Flutter와 관련 도구들은 매우 빠르게 업데이트됩니다. 주기적으로 환경을 최신 상태로 유지하는 것이 새로운 기능 사용과 버그 수정을 위해 중요합니다.

  • Flutter SDK 업데이트:
    flutter upgrade
  • CocoaPods 업데이트:
    sudo gem update cocoapods
  • Homebrew 패키지 업데이트:
    brew upgrade

마치며: 체계적인 접근의 중요성

지금까지 Flutter와 VSCode를 사용하여 macOS에서 iOS 개발 환경을 구축하는 전 과정을 상세히 살펴보았습니다. 많은 개발자들이 "VSCode에서 iOS 시뮬레이터가 보이지 않아요"라는 단편적인 문제에 부딪혔을 때, 해결책을 찾기 위해 인터넷을 헤매곤 합니다. 하지만 이 문제의 근본 원인은 대부분 Xcode 설치 후 시스템에 그 위치를 명확히 알려주는 `sudo xcode-select --switch ...` 과정이 누락되었기 때문이라는 것을 우리는 확인했습니다.

개발 환경 설정은 단순히 명령어를 순서대로 입력하는 행위가 아닙니다. 각 도구(Flutter SDK, Xcode, VSCode, CocoaPods)가 어떤 역할을 하고, 서로 어떻게 상호작용하는지를 이해하는 과정입니다. `flutter doctor`가 어떤 항목들을 왜 검사하는지, `xcode-select` 명령어가 시스템에 어떤 영향을 미치는지 이해하면, 예상치 못한 문제가 발생했을 때 당황하지 않고 원인을 추적하여 논리적으로 해결할 수 있는 힘이 생깁니다.

이 가이드가 여러분의 Flutter 개발 여정의 첫 단추를 성공적으로 꿰는 데 도움이 되었기를 바랍니다. 이제 완벽하게 준비된 개발 환경 위에서, 여러분의 아이디어를 Flutter의 다채로운 위젯들로 마음껏 구현해 보세요. 쾌적한 개발 환경이 선사하는 '핫 리로드'의 마법과 함께라면, 앱 개발은 고된 작업이 아닌 즐거운 창작 활동이 될 것입니다.


0 개의 댓글:

Post a Comment