[Flutter/플러터] 앱개발 환경설정 - Flutter 설치(Mac OS)

1. Flutter 설치 방법

환경설정은 Flutter 공식 홈페이지 권장 방법을 따른다.

Flutter 팀에서는 Visual Studio Code 1.75 이상과 VS Code용 Flutter 확장 프로그램을 설치할 것을 권장합니다.
이 조합을 사용하면 Flutter SDK 설치가 단순화됩니다. - Flutter 공식 홈페이지 

 

여기서 VScode(Visual Studio Code)는 Microsoft에서 개발한 통합 개발 환경(IDE)이다.

(IDE가 궁금한 사람을 위해 하단에 설명을 추가했다.)

 

앱 개발을 위해서는 Windows, Mac OS 모두 IDE가 필요하다.

 

따라서, Flutter 설치 순서는 다음과 같다.

1). IDE인 VScode(Visual Studio Code)를 설치

2). Flutter 설치

 

2.  Mac OS 환경

2-1. VScode 설치

https://code.visualstudio.com/

1). 홈페이지에 접속하여 '다운로드' 버튼을 눌러 프로그램을 다운로드 한다.(24.1.1일 기준, 1.85.1버전)

• CPU가 intel 칩이라면 'intel chip', Apple의 M Series 칩이라면 'Apple silicon'을 다운로드 한다. 

2). 다운로드 폴더에 들어가서 VSCode~.zip 파일을 실행시켜, 압축파일을 풀어준다.

3). 압축이 해제된 Visual Studio Code 파일을 실행시킨다.

4). '열기'를 누른다.

 

2-2. Flutter 설치

1). VScode 왼쪽 탭에서 'Extension' 버튼을 클릭한다.

2). 'flutter'를 검색한다.

3). 하단에 검색 된 항목들이 보이는데, 'flutter'를 클릭한다.

4). 오른쪽에 파란색 'install' 버튼을 클릭한다.(이때 Dart도 같이 설치된다.)

5). 'Shift' + 'Command' + 'P' 키를 누르면 중앙 상단에 팔렛트 검색창이 활성화 된다.

6). 'flutter'를 검색한다.

7). 'Flutter: New Project' 항목을 클릭한다.

 

8). Flutter SDK용 폴더 선택

• 처음이기 때문에 아래와 같은 오류가 생긴다.

Could not find a Flutter SDK. Please download, or, if already downloaded, click 'Locate SDK'.

• 'Download SDK 버튼'을 클릭한다.
• 폴더 선택창이 뜨는데, '새로운 폴더' 버튼을 클릭한다.
• 폴더 이름을 'development'로 생성한다.
• development 폴더를 선택하고 'Clone Flutter' 버튼을 클릭한다.

• 

  하단에 표시되는 설치 중 화면

• Flutter SDK를 초기화 하는데 몇분 소요된다. 

9). 5~7).번 과정을 다시 수행한다.

10). 'Application'을 클릭한다.

11). 'development' 폴더를 클릭한다.

12). 'Select a folder~'버튼을 클릭한다.

13). Application의 이름을 만들어줘야 한다. 연습이기 때문에, 기본으로 생성되는 'flutter_application_1'을 사용한다.

14). 만약 경고창이 뜬다면 'Yes' 버튼을 누른다.

15). 위 그림과 같이 application이 만들어졌다면 성공이다.

 

2-3. Rosseta 설치

Apple Silicon Mac 에 설치할 때 Rosetta 번역 환경을 설치하세요. 일부 구성요소에는 Rosetta가 필요합니다. - Flutter 공식 홈페이지

 

• 터미널을 키고 아래 코드를 입력한다.

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

• Passward에는 맥북의 비밀번호를 입력한다.
• Rosetta 2 finished successfully 가 나오면 설치가 완료된 것이다.

 

2-4. Xcode 설치

1). 'App Store'를 실행시킨다.

2). 'xcode'를 검색한다.

3). 다운로드 한다.

4). 'Agree'를 클릭한다.

5). 맥북 비밀번호를 입력한다.

6). 확인을 클릭한다.

7). 'Install', 'Continue'를 클릭하면 설치가 된다.

8). 설치 된 'Xcode'를 실행시킨다.

9). 상단 탭의 'Xcode', 'Open Developer Tool', 'Simulator' 를 순서대로 클릭하면  Simulator 가 실행된다.

 

10). 터미널을 실행시킨다.

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

11). 위 코드를 입력하고 맥북 비밀번호를 입력한다.

sudo xcodebuild -license

12). 위 코드를 입력한 후 항목을 확인하고, 'agree'를 입력하면 Xcode 셋팅이 완료된다.

2-5. Homebrew 설치

Homebrew는 macOS용 패키지 관리자로, Homebrew를 사용하면 다양한 오픈 소스 소프트웨어를 쉽게 관리할 수 있습니다.

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

1). 터미널에서 위 코드를 입력한 후 맥북 비밀번호를 입력하고, 엔터 키를 누르면 설치가 된다.

 

2-6. Ruby 설치

Ruby는 객체 지향적이고 동적인 프로그래밍 언어로, 여러 애플리케이션 및 도구에서 사용됩니다. CocoaPods와 Homebrew는 Ruby로 작성된 스크립트를 실행하여 동작하므로, Ruby의 설치가 필요합니다.

brew install ruby

1). 위 코드를 입력한다.

만약 zsh: command not found: brew 이런 오류가 발생한다면,

eval $(/opt/homebrew/bin/brew shellenv)

2). 위 코드를 입력한 후 ruby 설치를 다시 시도한다.

 

2-6. Cocoapods 설치

CocoaPods는 macOS 및 iOS 앱 개발에 주로 사용되는 의존성 관리 도구로, 특히 Xcode 프로젝트에서 쉽게 외부 라이브러리 및 프레임워크를 통합하는 데 도움을 줍니다. CocoaPods를 사용하면 앱 개발에 필요한 라이브러리를 효과적으로 관리하고 쉽게 업데이트할 수 있습니다.

brew install cocoapods

1). 이어서 위 코드를 입력하면 cocoapods가 설치된다.

2). 여기까지 하면 설치는 끝난다. '맥북 재부팅'을 한다.

2-7. Simulator 실행

1). VScode, Simulator를 실행시킨다.

2). 하단의 'Device' 버튼을 클릭하면 팔렛트 창이 활성화 되며, 선택 가능한 Device 목록이 나타난다.

3). 'iPhone'을 클릭한다.

4). 상단 탭에서 'Run', 'Start Debugging'을 클릭하면 simulator에서 앱이 실행된다.