Flutter를 공부하려고 마음먹었다. 먼저 Flutter 공식 홈페이지에서 문서(Flutter Docs) 페이지를 들어가 보니, 생각보다 문서화가 잘 되어 있다. 앞으로 이 문서를 참고하면서 하나씩 차근차근 익혀보고, 이해한 내용을 정리해서 적어보려고 한다.

Get Started 섹션에는 아래 세 가지 단계가 안내되어 있다. 이번 글에서는 첫 번째 항목인 환경 설정에 대한 내용을 정리하였다.

1. Flutter를 사용하기 위한 개발 환경 설정하기 (Set up Flutter)
2. Flutter 설치하기 (Install Flutter)
3. Flutter 배우기 (Learn Flutter)


소프트웨어 요구사항

1. 운영체제

  • MacOS 12(Monterey) 이상의 버전
  • Default shell로 zsh을 사용 (설정 방법)
  • M1/M2/M3/M4/M5가 아니라 Apple Silicon (ARM) Mac을 사용한다면 아래 명령어로 Rosetta 2를 설치
    $ sudo softwareupdate --install-rosetta --agree-to-license

2. 개발 툴

아래의 2개 패키지 설치가 필요하다. 각각의 설치 방법은 이 문서 하단에 자세하게 기술해 두었다.

  • Xcode: iOS 앱을 만들 때 사용하는 애플의 공식 개발 도구
  • CocoaPods: iOS 앱에서 외부 라이브러리를 쉽게 설치하고 관리해주는 도구로, Xcode로 앱을 빌드할 때 Flutter 플러그인이 iOS 앱에 연결되어 사용할 수 있게 해주는 도구

3. 텍스트 에디터 or 통합 개발 환경(IDE)

소스코드를 작성할 수 있는 텍스트 에디터나 통합 개발 환경(IDE)을 마련해야 한다. 공식 문서에서는 어떤 것을 써도 무방하지만 Visual Studio Code(VS Code)을 설치하는 것을 추천한다.

설치 방법은 아래 문서를 참고하면 된다.

  1. Visual Studio Code(VS Code)
  2. VS Code용 Flutter extension

Extention까지 설치를 완료하고 나면, VS Code에서 아래의 화면이 보여진다!


4. Flutter SDK 설치

SDK란 Software Development Kit의 약자로 앱을 개발할 때 필요한 도구, 라이브러리, 설명서, 샘플코드를 한데 모아 제공하는 개발 도구 세트이다. Flutter SDK는 Flutter로 앱을 개발하고 빌드(실행파일로 만드는 것) 할 수 있게 해주는 핵심 도구 세트라 설치가 필요하다.

VS Code에서 Flutter 설치하기

  1. VS Code 실행
  2. 명령어 팔레트(Command Palette) 실행: 단축키 [Command]+[Shift]+[P]
  3. 팔레트에 'flutter'를 입력하고, 'Flutter: New Project'를 선택
  4. 이번 단계에서는 개발환경만 설정하는 것이 목적이므로 'Which Flutter template?'이라는 메세지를 무시하고 [Esc]키를 누른다. 추후에 테스트 프로젝트를 만들 예정이다.

개발 툴 설치 & 환경 설정

iOS 용 앱을 개발하기 위해서는 XcodeCocoaPods 2 개의 패키지 설치가 필요하다.

1. Xcode

Flutter 코드를 iOS가 이해하는 네이티브 코드(바이트코드)로 변환(컴파일)하기 위해 Xcode가 필요하다.

  1. App Store에서 Xcode를 찾아 설치 (6GB+ 공간 필요)

  2. MacOS에서 터미널을 열어 Flutter에서 사용할 Xcode의 경로를 지정

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

    (Flutter에서는 앱을 실행하거나 빌드할 때 flutter run과 같은 명령어를 사용하는데 이 명령어는 내부적으로 Xcode의 빌드 도구를 호출한다. Flutter가 iOS 앱을 빌드할 때 사용할 Xcode의 경로를 지정해주는 명령어이다.)

  3. Xcode로 Flutter 앱을 실행시키기 위한 시뮬레이터 설치

    $ xcodebuild -downloadPlatform iOS
  4. 시뮬레이터 실행 (잘 설치되었는지 확인)
    터미널에서 아래의 명령어를 통해 시뮬레이터가 잘 설치되고 열리는 지 확인한다. 실행하면 아래와 같이 아이폰 모양의 시뮬레이터 창이 열린다.

    $ open -a Simulator

2. CocoaPod

터미널에서 아래의 명령어를 입력하면 Cocoapods이 설치된다.(공식 설치 가이드)

# sudo gem install cocoapods

개발 환경 확인

Flutter doctor 실행

macOS에서 Flutter 개발 환경의 모든 구성 요소가 제대로 설치되었는지는 flutter doctor 명령어를 통해 확인할 수 있다. iOS 앱만 개발할 것이기 때문에 Android 관련항목을 제외하고 아래와 같이 나오면 개발 준비 완료이다!


자료 출처: Flutter Docs 공식문서

profile
기획, 개발, 디자인. 그 사이를 넘나드는 유목민

0개의 댓글