Flutter 설치 가이드 (Mac)

Flutter는 구글이 개발한 오픈소스 UI 툴킷으로, 단일 코드베이스로 모바일, 웹, 데스크탑 등 다양한 플랫폼에서 네이티브 앱 수준의 성능을 구현할 수 있는 개발 도구에요. 이 글에서는 Flutter의 개념부터 설치 및 개발 환경 설정까지, 초보자도 쉽게 따라할 수 있도록 단계별로 상세하게 알아볼게요.

---

1. Flutter란 무엇일까요?

Flutter는 Google이 만든 오픈소스 UI 툴킷이에요. 한 번의 코드 작성으로 모바일, 웹, 데스크탑 등 다양한 플랫폼의 앱을 만들 수 있는 크로스 플랫폼 솔루션인데요, 대표적인 특징은 핫 리로드(Hot Reload) 기능 덕분에 코드 수정 후 바로 결과를 확인할 수 있다는 점이에요. 또, Flutter는 Dart 언어를 사용해서 깔끔하고 배우기 쉬워요.

 

많은 분들이 Dart 언어를 배워야 한다는 점을 Flutter의 단점으로 말씀하시지만, 제 경험으로는 다른 객체지향언어 (JAVA, C#)을 사용해보신 분들은 거의 러닝커브없이 사용할 수 있을 정도라고 생각해요. Dart 언어에 대해서는 다른 글에서 한 번 자세히 다뤄볼게요.

Flutter의 주요 기능

• 핫 리로드(Hot Reload): 코드 변경 후 바로 결과를 확인할 수 있어 개발 속도가 빨라져요.
• 위젯 기반 아키텍처: 모든 UI 요소가 위젯으로 구성되어 있어 원하는 디자인을 쉽게 만들 수 있어요.
• Skia 엔진: Flutter 앱의 UI를 직접 그려주는 멋진 2D 그래픽 엔진이에요.

---

2. Flutter 설치 전 준비사항

Flutter를 설치하기 전에 몇 가지 준비할 사항들이 있어요.

• 운영체제 확인: Windows, macOS, Linux 어디서든 Flutter 앱을 개발할 수 있어요.
• 개발할 앱 플랫폼 선택: iOS 앱을 개발할지, Android 앱을 개발할지, Web 개발을 할지 요구사항을 확인해주세요. 모든 플랫폼 개발을 할 수 있도록 설정할 수도 있어요.
• 개발 도구 선택: Flutter SDK와 함께 VS Code나 Android Studio 같은 IDE를 설치하면 편리해요.

저는 MacBook에서 iOS, Android앱을 개발할 예정이고,  VS Code를 사용해서 실제 개발을 진행할 계획이에요.

---

3. Flutter SDK 다운로드 및 설치 방법

3.1 개발 운영체제 선택

먼저 Flutter 공식 홈페이지의 설치 페이지에 접속해요. 현재 사용하고 있는 운영체제를 선택하고나면, 어떤 플랫폼의 앱을 개발하고 싶은지 선택해야 하는데, 저는 일단 macOS / iOS를 골라줬어요. 

운영체제 선택(왼쪽) / 개발할 앱 선택(오른쪽)

---

3.2 선택한 옵션에 따른 개발 환경 설정 및 Flutter 설치

[💡 추가 Tip!]
- 3.2에서 설치하는 것들은 iOS/macOS 개발환경을 위한 추가 환경 설정이기 때문에 일단 Flutter만 설치하고 싶다면 3.3을 바로 진행하면 되요! 
- XCode가 용량이 크고 설치에 생각보다 시간이 오래 걸려요. 3.2와 3.3은 독립적으로 진행해도 설치하는데 문제가 전혀 없으니 XCode 다운로드를 눌러놓고 3.3을 진행해주세요.

macOS에서 iOS 앱 개발을 위한 환경설정에 대해서 설명되어 있어요.

 

iOS 앱 개발을 위해서는 Flutter 말고 해야하는 추가 설정이 있어서 가이드에 맞춰서 진행해주세요.

• XCode : iOS 개발에 가장 중요한 도구인 Xcode를 먼저 설치해 볼게요.
  1. AppStore에서 최신 버전의 XCode를 다운로드 받아서 설치해요. 설치가 완료되면 첫 실행시 나타나는 라이센스 동의 창에서 동의 해주세요. 이 과정이 완료되어야 XCode가 올바르게 작동합니다.
  2. Xcode를 실행한 후, 상단 메뉴의 Xcode > Preferences > Locations로 이동해 보세요.
     여기서 Command Line Tools 항목이 현재 설치된 Xcode 버전으로 설정되어 있는지 확인해 주세요. 이 설정은 터미널에서 Xcode 관련 명령어를 사용할 때 꼭 필요해요.
• CocoaPods : iOS 앱 개발 시, CocoaPods는 필수적인 의존성 관리 도구예요. Flutter 프로젝트에서 iOS 관련 라이브러리들을 관리하는 데 사용되죠.
  1. Spotlight 또는 앱 목록에서 Terminal을 검색해서 실행해요.
  2. 아래 명령어를 입력해서 CocoaPods를 설치해요.

sudo gem install cocoapods #CocoaPods 설치
pod setup #CocoaPods 환경 초기화

---

3.3 Flutter 설치

설치 페이지에서 아래로 스크롤하거나 오른쪽 컨텐츠 목록에서 "Install the Flutter SDK" 라는 섹션 제목을 확인할 수 있어요. VS Code를 사용해서 설치할 수도 있지만 저는 "Download and install" 방법으로 진행했어요.

1. 사용하고 있는 mac 프로세서 종류에 따라 맞는 버전을 다운로드 해주세요. 다운로드 받은 파일이 ~/Downloads 폴더에 다운로드 되었는지 확인해주세요.
2. Flutter를 설치할 폴더를 만들어주세요. 따로 설치파일을 모아두는 디렉토리가 없다면 가이드대로 ~/development 디렉토리를 만들어서 그대로 따라해줄게요.
3. 아래 명령어를 사용해서 원하는 곳에 압축을 풀어주세요.

mkdir ~/development #development 폴더 생성
unzip ~/Downloads/flutter_macos_arm64_3.29.0-stable.zip -d ~/development/ #압축 해제
#unzip {다운로드 파일 PATH} -d {설치를 원하는 디렉토리 PATH}

 

명령어를 사용하면 ~/development/flutter에 설치가 완료돼요.

---

3.4 환경 변수 설정

환경 변수는 개발 도구의 위치를 알려주는 "주소표" 같아요. 덕분에 터미널에서 복잡한 경로 대신 짧은 명령어로 프로그램을 쉽게 실행할 수 있답니다. 우리는 flutter라는 명령어를 사용하기 위해서 환경 변수 설정을 해야해요.

 

마지막으로 환경 변수만 설정하면 설치 과정은 끝! 터미널을 다시 실행해서 사용하는 shell에 따라 ~/.bashrc, ~/.zshrc 파일에 환경 변수를 추가해주세요.

export PATH="$PATH:{flutter 설치 PATH}/flutter/bin"

실제 .zshrc 파일. 다른 환경변수들도 설정되어 있어요.

 

 

변경 사항을 적용하려면 터미널을 다시 시작하거나 source ~/.zshrc 명령어를 터미널에 입력해 주세요. 변경사항이 잘 적용되었다면 flutter --version 을 입력했을 때 설치된 Flutter 버전이 표시돼요.

버전이 표시되지 않는다면, 환경변수 설정을 다시 하거나 터미널을 다시 시작해주세요.

---

4. Flutter Doctor로 환경 점검하기

설치가 끝나면 터미널이나 명령 프롬프트에서 아래 명령어를 입력해 보세요.

flutter doctor

Flutter 및 개발 환경이 다 설정되었다면 모두 초록색 체크 표시가 되어있어요.

• [✓] Flutter (Channel stable, 3.27.3, on macOS 14.4.1 23E224 darwin-arm64, locale ko-KR)
  • Flutter가 잘 설치되었는지?
• [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
  • Android 개발을 위한 설정이 잘 되었는지?
• [✓] Xcode - develop for iOS and macOS (Xcode 15.3)
  • iOS/macOS 개발을 위한 설정이 잘 되었는지?
• [✓] Chrome - develop for the web
  • Web 개발을 위한 설정이 잘 되었는지?
• [✓] Android Studio (version 2023.2)
  • Android 개발을 편하게 할 수 있는 IDE 설치가 되었는지?
• [✓] VS Code (version 1.87.2)
  • VS Code IDE 설치가 되었는지?
• [✓] Connected device (3 available) 
  • 연결된 기기들의 상태 

 

저는 flutter doctor로 확인해봤을 때 Flutter와 iOS/macOS 개발 환경 설정이 잘 되어있으니 설치가 모두 잘 되었어요. 원하는 개발에 필요한 환경 설정이 잘 됐는지 한 번 확인해보세요.

---

결론

이렇게 Flutter 설치 방법을 자세하게 살펴보았어요. Flutter는 Android, iOS, Web 등 다양한 플랫폼을 각각 따로 개발할 필요 없이, 단일 코드베이스로 다양한 플랫폼에서 빠르게 UI를 구현할 수 있는 최고의 도구라고 생각해요. 초보자도 쉽게 따라할 수 있으니, 이 가이드를 참고해서 설치해서 여러분만의 멋진 앱 개발에 도전해 보세요!

 

다음 포스트에서는 Flutter를 VS Code로 사용할때 필요한 환경 설정에 대해서 설명해보려고 해요.

여러분의 Flutter 앱 개발이 즐거운 경험이 되길 바라며, 궁금한 점은 언제든 댓글로 남겨 주세요!