플러터(Flutter) | Tutorial 02 | 개발환경 구성하기 (MacOS)

안녕하세요 오늘은 플러터 개발 환경을 MacOS 에서 구성하는 방법에 대해 소개드립니다. 

 

 

Homebrew 를 이용한 간단한 설치

플러터를 설치할 때 MacOS 의 환경이라면 간단하게 homebrew 를 이용합니다. 패스 설정 및 프로그램 의존성 설치 등의 부분을 간략하게 해주어 편리합니다. --cask 옵션을 제공해야 설치되니 유의해주세요! 

• https://formulae.brew.sh/cask/flutter

brew install --cask flutter
flutter doctor

보통 플러터를 homebrew 로 설치하고 위치를 찾지 못하는 경우가 많습니다. 그리고 스택오버플로우에 검색을 하기 마련입니다. 

별도의 옵션 없이 설치한 경우는 아래의 경로에 놓이게됩니다. 핵심은 /opt/homebrew/Caskroom/flutter 폴더입니다! 

 

/opt/homebrew/bin/flutter -> /opt/homebrew/Caskroom/flutter/3.3.4/flutter/bin/flutter

 

플러터 SDK 설치 확인

flutter doctor 명령어를 통해서 설치 현황을 체크해야 합니다. cocoapods 및 xcode 설치가 필요할 수 있으니 항상 확인해주세요! 

 

최근에 MacOS Ventura 로 OS 를 업그레이드하였다면 xcode 를 실행시켜서 MacOS 개발도구를 업데이트 해주어야 합니다! 

built-in 설치라 빠르게 설치되니 걱정마세요! 

 

IntelliJ IDEA 를 이용한 프로젝트 시작

IntelliJ IDE 를 사용한다면 아주 편리하게 프로젝트를 세팅할 수 있습니다. 

 

간단하게 IntelliJ 플러그인에서 flutter 를 검색해주세요. Dart 플러그인도 같이 설치해줍니다!

 

새 프로젝트 팝업 및 옵션 설정

IntelliJ 는 아주 단순하게 프로젝트를 구성할 수 있도록 세팅을 도와줍니다. 그것도 대화형 마법사 스타일로 말이죠! 

여러분과 저는 MacOS 에서 개발을 하기 때문에 불필요한 플랫폼 지원은 접어두어도 좋습니다. 

과감하게 iOS, MacOS, Web 만 선택해주고 나머지는 제외해주세요! 나중에 필요할 때 얼마든지 추가가 가능하니 걱정 안해도 됩니다! 

플러터 프로젝트 설정 팝업 (IntelliJ)

 

프로젝트 초기 화면 및 빌드 실행하기 

수초 이내에 프로젝트가 만들어지네요! 역시 갓 구글일까요? 프로젝트가 생성되면 IntelliJ 는 아래와 같이 초기화면을 보여줍니다. 폴더가 너무 많고 영어라서 불편한가요? 걱정없습니다. 오늘 저희의 목표는 앱을 빌드해보는 거니까요!

플러터 프로젝트 초기화면 (IntelliJ)

프로젝트 화면에서 오른쪽 상단에 <no device selected> 라는 드롭다운 컨트롤이 있을거에요. 클릭하면 프로젝트 세팅때 설정한 web, macOS, iOS 가 모두 있습니다. iOS 는 시뮬레이터가 필요합니다. 가상 iOS 기기에 연결을 하고 앱 빌드 및 실행을 해야 하니까요! 

 

플러터 빌드 및 실행을 위한 디바이스 목록 (IntelliJ)

 

혹시!! 코드를 보고 있나요? 코드를 보기전에 정상적으로 빌드 및 실행이 되어야 합니다. 코드는 천천히 살펴보아도 충분합니다. 저만 따라오세요 

웹 환경으로 빌드 및 실행 

일단 만만한 WEB 환경으로 빌드를 해봅시다. 빌드에 몇초면 충분합니다. 참고로 이전 글에서 Flutter 는 다트 언어로 개발한다고 하였습니다. 그런데 웹에서도 잘만 실행됩니다. 

 

플러터의 특징에 대해서 기억이 안나신다구요? 그러면 아래의 글을 한번 정독해주세요! 여러분의 미래를 플러터와 함께할지에 대해 판단할 수 있도록 장단점을 분석해 놓았으니까요! 

 

플러터(Flutter) | Tutorial 01 | Flutter 란 무엇? - 장점/단점 따져보기

플러터(Flutter) | Tutorial 01 | Flutter 란 무엇? - 장점/단점 따져보기

플러터를 실행하면 좌측 패널에 "Flutter Inspector", "Flutter Performance", "Flutter Outline" 등의 추가 설정 창이 생성됩니다. 

맞습니다. 바로 디버깅 환경을 제공해줍니다. 아직 우리는 디버깅까지 갈 단계는 아니므로 아래의 샘플 화면만 보아도 충분합니다.

모든 것은 단계가 있으니까요! 

웹 플랫폼 타깃 플러터 빌드 및 실행 화면 (IntelliJ)

 

macOS 환경으로 빌드 및 실행 

macOS 환경으로 빌드를 한번 해볼까요? 여전히 실행이 잘되는 것을 확인할 수 있습니다. 그리고 한 소스로 데스크탑 UI 를 만들 수 있다는 사실이 너무 마음에 드네요! 

 

 

iOS 시뮬레이터 연결 및 빌드 실행 

Open iOS Simulator 를 클릭하면 iPhone 14 Pro Max 시뮬레이터가 생성됩니다. 성능에 따라 시뮬레이터 생성이 완료되는 시간에 차이가 있으니 기다리시면 정상적으로 실행됩니다. 무려 14 Pro Max 라니 가슴이 설레네요. (참고로 저는 13 Pro 를 사용하고 있습니다. TMI)

 

혹시! 아이폰 빌드와 웹 빌드 상에 차이점을 느끼셨나요? 아마도 못 느끼셨을 겁니다. 차이점이 없으니까요! 플러터는 멀티 플랫폼을 지향하고 있고 렌더링 엔진이 중간에 딱 버티고 있습니다! 동일한 코드베이스와 디버깅 환경에서 개발이 가능하니 걱정마세요! 

iOS Simulator 맥북프로 M1 (iPhone 14 Pro Max)

 

맥북 M1 유의 사항

맥북 M1 을 사용하고 있다면, 분명 아래와 같이 에러를 만나게될 것입니다. 그러나, MacOS 플랫폼 환경에 대한 앱의 빌드 및 실행에는 아무 문제가 없습니다. Warning 메시가 거슬린다면 가벼운 마음으로 아래의 절차를 진행하면 됩니다. 

--- xcodebuild: WARNING: Using the first of multiple matching destinations:
{ platform:macOS, arch:arm64, id:00006000-000009102E92401E }
{ platform:macOS, arch:x86_64, id:00006000-000009102E92401E }

Step 1. 플러터 업데이트

• flutter clean 명렁어 실행
• flutter channel stable 로 채널 별경하기 
• flutter upgrade 명령어로 플러터 업데이트하기 

Step 2. Xcode 업데이트

혹시 Xcode 버전을 OS 업데이트를 하면서 구버전으로 두진 않았나요? 메이저 버전의 OS 업그레이드를 한 경우, App Store 에서 Xcode 업데이트를 기다리고 있을 수 있습니다. Xcode 를 업데이트 해주세요! 

 

Step 3. Xcode 개발 환경의 Signing 설정 

iOS 및 MacOS 환경에서 개발을 위해서는 App Store 계정을 기반으로 프로그램에 서명(Signing)을 하게됩니다.  플러터를 사용하더라도 이부분은 피해갈 수 없지요! 

 

xcode 앱을 실행시켜서 여러분의 App Store 계정을 인증해주세요! 인증 방법은 아래의 사이트를 참고해주세요! 

 

https://help.apple.com/xcode/mac/current/#/devaf282080a

https://help.apple.com/xcode/mac/current/#/devaf282080a

 

맺음말

이상으로 플러터 개발 환경을 구성하고 프로젝트를 생성해보는 시간을 가졌습니다. 

또한, iOS, macOS, Web 환경에서 각각 소스코드를 실행해보고 개발 환경이 잘 꾸려졌는지 확인하는 시간도 가졌네요. 

 

조사를 한 결과 일부 M1 칩셋을 사용하시는 분들에 있어 Warnning 메시지가 뜰수 있다는 사실을 면밀한 조사결과 알아냈습니다! 

이 경우, 위에서 설명드린 방법을 간단히 적용하여 Warnning 메시지를 없애는 것을 추천드립니다! 

 

그런데, 플러터는 정상적으로 빌드되고 테스트되니 너무 걱정하지마세요! 

 

그럼 오늘도 평안한 하루되세요! 

K-IN 드림.