[Flutter] M1 맥북에서 Flutter 세팅하기(feat. VSCode)Develop/Flutter2024. 1. 16. 16:18@노근

Table of Contents

개요

게임 개발을 공부하다가 슬럼프인지 뭔지 공부 속도가 너무나도 늦어지기도 하고 의욕도 안나고 프로젝트도 망하고 해서 다시 앱 개발로 돌아왔다. 위의 실패로 느낀것은 뭐든 정말 빠르게 만들고 봐야 의욕이 나는구나였고, 네이티브보다 더 빠르게 개발이 가능한 크로스 플랫폼 개발환경인 Flutter를 공부하게 되었다. (GDSC들어가서 하게 된 것도 있다.)

네이티브 개발환경이 성능상으로는 훨씬 좋은건 사실이지만, 안드로이드와 iOS 모두를 개발하는 입장에서는 정말 곤란 그 자체다.

그럼에도 iOS 네이티브 개발이 더 끌리는 것은 사실이지만, UIKit과 SwiftUI의 세대 교체중인 과도기라서 SwiftUI나 UIKit이나 둘 중 하나가 완벽하게 자리를 잡는 때에 돌아가도 늦지 않다고 결론을 내렸다.

플러터 외에도 유명한 크로스 플랫폼 개발 툴로 리액트 네이티브가 있긴 한데, GDSC에서 하게 된 것도 있고 해서 플러터로 정했다.

둘 중 뭐가 더 좋다… 그거는 사실 가늠하기가 힘들다. 상황마다 다르기도 하고 버전이 바뀌면서 이것 저것 바뀌면 또 이야기가 달라지는거니까 그냥 손에 잡히는 걸로 개발하기로 했다. 사실 뭐가 더 좋다를 가릴 정도의 실력도 아니라고 생각해서 일단 해보기로 한거다.

그럼 지겨운 개요는 뒤로하고 Flutter 세팅을 해보자.

설치

(약 30분 ~ 1시간 소요됩니다.)

1. Android Studio와 Xcode, VScode 설치

우선 Android Studio와 XCODE를 설치해줘야한다.

앱을 돌려볼 에뮬레이터가 필요하기 때문이다.

Andorid Studio 설치

우선 아래의 링크로 들어가서 Android Studio를 설치하자.▼

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자 | Android Developers

Android 스튜디오는 Android 앱에 최적화된 통합 개발 환경(IDE)을 앱 빌더에게 제공합니다. 지금 Android 스튜디오를 다운로드하세요.

developer.android.com

링크로 들어가면 처음 보이는 화면에 다운로드 버튼이 있다.▼

사용약관에 동의를 한 후, 우리는 지금 M1 맥북에 설치를 하려고 하는 것이니까 Mac with Apple chip 버튼을 눌러 애플 실리콘용 Android Studio를 다운받아준다.▼

다운 받은 파일을 열어서 해당 아이콘을 드래그 앤 드랍해주면 일단 앱 자체의 설치는 끝났다.▼

Android Studio를 실행시키면 아래와 같이 화면이 나올 것이다.

우리는 저장한 세팅들이 없으니 그냥 넘어간다.▼

이건 구글에 정보 보낼거냐는건데 그냥 원하는대로 선택하면 된다.▼

쭉 쭉 넘겨준다.▼

넘기다가 두 개의 라이센스에 동의해주고 Finish 버튼을 누르면 설치가 된다.▼

다 설치가 됐다면 아래의 화면이 나올 것이다.▼

여기서 왼쪽에 Plugins에서 Flutter를 설치해주면 된다.▼

수락을 눌러주고, Flutter는 Dart기반이므로 Dart도 같이 설치해준다.▼

이제 다시 홈으로 와서 More Actions에 있는 SDK Manager로 가준다.▼

SDK Tools 탭에 있는 Android SDK Command-line Tools를 설치해주면 된다.▼

여기까지 설치가 되면 Android Studio의 설정은 끝났다. ▼

Xcode 설치

Xcode는 애플에서 제작한 IDE라서 Android Studio보다 그 설치가 쉽다.

우선 기본으로 제공되는 App Store 앱에 들어가서 Xcode를 검색해준다.▼

Xcode를 받기 해주면 설치가 끝난다.

설치가 굉장히 쉽지만 굉장히 오래걸리므로 인내심을 갖고 기다리자. ▼

Xcode가 설치되면 동의서를 받는데 동의 안하면 못쓰니까 동의해준다.▼

지금은 watchOS나 tvOS에 대해 다루지 않으므로, 어차피 Swift공부도 아니므로 위의 Built-In 되어있는 둘만 설치해준다.▼

설치가 다 끝나고 다시 Xcode를 구동하면 새로운 기능을 알려주면서 Xcode설치가 끝난다.🎉🎉 ▼

VScode 설치

이제 마지막인 VScode.

우리는 Flutter를 통한 앱 개발을 할 때 IDE로 VScode를 사용할 것이다.

아래의 의문이 생길 수 있어서 묶어서 정리해두었다.

아래의 링크에 들어가서 VScode를 다운받자.▼

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

인텔 맥과 M1맥 모두를 커버해주는 Universal버전으로 설치해주자.▼

VScode를 실행하면 뭐 이것저것 설정하라고 하는데, 적당히 무시해주고(?) 왼쪽의 Extension 아이콘을 눌러준다.▼

그리고 Flutter를 검색해주면 아래와 같이 Extension이 나온다. 설치해주자. ▼

아래의 Flutter Widget Snippets도 같이 설치해주면 좋다.▼

VScode 설치및 설정은 여기서 끝이다.🎉🎉

여기까지 하면 필요한 앱들의 설치와 설정이 전부 끝났다!

2. Flutter SDK 다운로드

이제 다음으로 해야할 것은 Flutter SDK를 다운 받는 것이다.

Flutter가 운영체제 기본으로 내장되어있는 것이 아니기에 당연한 수순이다.

아래 링크에 들어가보자.▼

Choose your first type of app

Configure your system to develop Flutter on macOS.

docs.flutter.dev

링크에 들어가서 조금만 내리면 아래의 사진과 같이 Flutter SDK를 다운로드 할 수 있게 해주는 링크를 찾을 수 있을 것이다.

여기서 우리는 M1 맥북에 맞게 Apple Sillicon 버전을 다운로드 해주면 된다.▼

sudo softwareupdate --install-rosetta --agree-to-license

3. SDK 압축해제

위의 파일을 다운로드 했다면, 원하는 위치에 압축을 풀어주자.

위의 사이트에서 보여주는 이 코드를 치면 development라는 폴더에 flutter sdk파일을 압축해제 해준다.

경로만 제대로 알고 있다면 어디에 풀어도 괜찮지만, 경로가 어딘지 잘 기억못할 거 같다면 이 코드를 쳐서 권장하는데에 압축을 풀면 된다. ▼

(필자는 홈 디렉토리에 flutter라는 이름으로 풀었다.) ▼

4. 환경변수 설정

필요한 파일은 모두 다운을 받았다.

하지만 시스템이 이 파일이 어디있는지 모르기 때문에 환경변수를 등록해줘야한다.

공식 문서에서 말하는대로 코드를 치면 환경변수가 등록되긴 하지만, 저렇게 등록하게 되면 일시적인 등록이라 터미널을 끄면 등록했던 환경변수가 사라지게 된다.▼

환경변수를 영구적으로 추가하기 위해 아래의 작업을 수행한다.▼

oh-my-zsh를 사용중이라면 첫번째 명령어를, 그냥 터미널을 사용중이라면 두번째 명령어를 수행한다.

open ~/.zshrc

open ~/.bash\_profile

이후 다른 명령어들과 꼬이지 않게 가장 하단에 위의 명령을 넣어준다.▼

export PATH="$PATH:`pwd`/flutter/bin"

제대로 설치되었는지 터미널에서 아래의 명령어를 수행해보자.▼

flutter doctor

아래와 같이 길게 명세가 나오는데, 아마 아래와 같이 [!] 나 [x]로 오류가 있다고 나오는 사람들이 있을 것이다.

1번부터 하나씩 오류를 잡아보자.▼

5. 오류 제거

1번 오류

1번 오류는 M1의 경우 로제타2의 설치가 안돼서 일어나는 오류이다.

위에서도 이야기했지만, M1은 arm기반이라서 x64 기반으로 제작되어있는 Flutter SDK를 구동할 수 없다.

그럼에도 rosetta2가 x64 CPU instruction들을 arm 의 Instruction들로 번역해주는 작업을 해주기에 구동할 수 있다.

근데 그 핵심 축인 rosetta가 없으니 경고를 주는 것이다.

아래의 명령어를 실행시켜주면 쉽게 해결된다.▼

sudo softwareupdate --install-rosetta --agree-to-license

2번 오류

2번 오류는 android license에 동의하지 않아서 나오는 오류이다.

따라서 라이센스 동의만 하면 해결이 된다.

터미널에서 아래의 명령어를 실행시켜주자.▼

flutter doctor --android-licenses

아래의 화면과 같이 길게 라이센스들이 나올 건데, 전부 y를 눌러 동의해주면 된다.▼

3번 오류

3번 오류는 Xcode 오류다.

Flutter에도 Package라고 다른 개발자가 만든 툴들을 가져오는 기능이 있지만, 몇개는 Xcode의 CocoaPod이라는 패키지 기능을 필요로 하는 것들이 있어서 Cocoa Pod이 필요하다.

해당 오류메세지가 나오는 이유는 그 CocoaPod이 없다는 것이므로 CocoaPod을 설치해주면 된다.

아래의 사이트는 CocoaPods 공식 사이트이다.

들어가서 설치 가이드를 보고 따라해도 좋다.▼

CocoaPods Guides

CocoaPods is fully open-sourced, so it depends on community contributions to get better. If you're looking to start working on CocoaPods, this is the place to start.

guides.cocoapods.org

사이트에도 나와있지만 아래의 명령어를 터미널에 입력하면 설치가 된다.▼

sudo gem install cocoapods

sudo 명령어를 쳤기 때문에 맥의 비밀번호를 입력해줘야한다.▼

아래와 같이 설치가 완료됐다면 성공한 것이다.▼

4번 오류

4번 오류가 가장 심각해보이지만, 가장 간단한 오류다.

Chrome이 없다는 오류이다.

Flutter는 Chrome에서 시뮬레이팅을 하기 때문에 Chrome이 설치되어있어야 한다.

아래의 링크에서 다운로드 받아서 설치해주면 된다.▼

Chrome 웹브라우저

더욱 스마트해진 Google로 더 간편하고 안전하고 빠르게.

www.google.com

4번 오류까지 다 잡았다면 오류는 전부 잡히고 아래의 사진과 같이 문제 없다고 나온다.▼

여기까지 다 왔다면 설치는 끝난 것이다!

마치며

개발을 배우려고 할 때 가장 큰 진입장벽은 개발 세팅인거 같다.

공식문서에서 설치하는 법을 친절하게 설명해주기는 하지만 이게 맞는지 잘 모를때가 많아서 다른 블로그의 도움을 많이 받곤 한다.

시작도 전에 개발 설정에서 포기하게 되면 뭔가 안타깝다고 많이 느끼곤 한다.

그래서 나도 다른 이들에게 도움을 주기 위해 하나하나 친절하게 설명해주기로 했다.

이 글을 보고 설치에 도움이 되었길 바라며 다음에는 Flutter 개발 공부 글에서 봤으면 한다.

다들 화이팅!

'Develop > Flutter' 카테고리의 다른 글

[Flutter][Error] M1 맥 Flutter CocoaPod 설치 오류 (0)	2024.01.21
[Flutter] 동기와 비동기 개론 (0)	2024.01.20
[Flutter] 위젯을 메소드로 쪼개는 것이 왜 안좋은가? (0)	2024.01.18
[Flutter] Stateless & Stateful 알아보기 (0)	2024.01.18
[Flutter] Flutter 위젯 디자인에 관하여 (0)	2024.01.17

@노근 :: NOGUEN 블로그