플러터 설치 가이드 ( macOS용 )

 

1. 서론

 

Flutter는 Google에서 개발한 오픈 소스 모바일 UI 프레임워크로, 하나의 코드베이스로 iOS 및 Android 앱을 개발할 수 있습니다.

높은 성능, 풍부한 기능, 사용자 친화적인 인터페이스 등을 제공하며, 빠르게 인기를 얻고 있습니다.

본 블로그에서는 macOS 환경에서 Visual Studio Code를 사용하여 Flutter를 설치하는 방법을 자세히 안내합니다.

 

2. 필수 조건

Flutter를 설치하기 전에 다음과 같은 필수 조건을 만족하여야 합니다.

• macOS 10.11 이상: 최신 버전의 macOS를 사용하는 것이 좋습니다.
• Xcode 10.2 이상: Xcode는 Apple에서 제공하는 개발 IDE이며, Flutter 설치에 필요합니다.
• Homebrew: Homebrew는 macOS 패키지 관리 시스템이며, Flutter 설치에 도움이 됩니다.

3. 노트북 필수사양 확인하기

1. 화면 좌상단의 Apple 로고 클릭
2. 이 Mac에 관하여 클릭
3. Mac OS 버전을 확인해보세요

 

4. 설치 단계

   1. 크롬을 설치하기

https://www.google.com/intl/ko/chrome/

- A. Flutter : Android와 iOS 앱을 하나의 코드로 구현할 수 있도록 도와주는 프레임워크

- B. VSCode : 코드를 작성할 때 사용하는 에디터

- C. Android Studio : Android 앱을 개발하기 위해 필요한 IDE. 에뮬레이터 포함

- D. Xcode : iOS 앱을 개발하기 위해 필요한 IDE. 에뮬레이터 포함

 

  A. 프레임워크 설치

     1) 먼저 flutter를 설치할 폴더를 만들겠습니다. Downloads 폴더를 먼저 열어줍니다

     2) 여기서 Cmd + ↑(화살표 위 버튼) 을 눌러주세요.

          상위 폴더로 이동하는 단축키입니다. 아래와 같이 유저명과 같은 이름의 폴더로 이동하면 됩니다.

     3) 이제 여기에 development 라는 이름의 폴더를 생성하겠습니다.

          우측 상단의 Actions (점 3개 아이콘) 를 클릭하고 New Folder 를 선택해주세요.

          development 라는 이름으로 폴더 생성해줍니다.

     4) 이제 생성한 폴더에 flutter 압축 파일을 다운로드하겠습니다.

          https://docs.flutter.dev/get-started/install/macos

     5) Intel 칩을 사용하는 맥북은 왼쪽을 Apple 칩을 사용하는 맥북은 오른쪽을 선택해 주세요.

     6) 바탕화면에서 휴지통 우측에 있는 다운로드 폴더를 선택한 뒤 방금 다운로드한 flutter zip 파일을 우리가 만들어준 development              폴더로 드래그 앤 드롭합니다.

          아래와 같이 zip 파일이 해당 폴더로 이동했는지 확인합니다.

     7) 다운받은 flutter 압축 파일을 실행해 주세요.

    8) 아래 사진과 같이 압축이 해제되고 flutter라는 폴더가 생성 됩니다.

만약 압축이 해제된 폴더 이름이 아래 사진과 다른 경우 flutter로 변경해 주시기 바랍니다.

    9) flutter → bin 폴더에 들어가볼까요? dart, dart.bat, flutter, flutter.bat 등의 파일이 있는 것을 볼 수 있습니다.

        이들이 flutter 실행 파일입니다.

3. 환경변수 설정 및 설치

     1) 바탕화면에서 사과 아이콘 → 이 Mac에 관하여를 클릭하여 macOS 버전을 확인해 주세요.

     2) macOS 버전을 확인한 뒤, 해당하는 명령어를 복사해 주세요.

-> macOS 카타리나(Catalina) 이상버전 명령어

echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.zshrc && source ~/.zshrc

-> macOS 모하비(Mojave) 이하 버전 명령어

echo 'export PATH="$PATH:$HOME/Developments/flutter/bin"' >> ~/.zshrc

설정 반영

source ~/.zshrc

     3) 터미널에 단축키 Cmd + v 또는 마우스 우클릭하여 붙여넣기를 눌러주세요.

          아래와 같이 붙여넣으면 아래와 같이 나오고, 엔터(enter)를 눌러 실행해 주세요.

     4) 다음 명령어는 flutter의 버전을 확인하는 명령어입니다. 아래 명령어를 복사해 주세요.

flutter --version

          터미널에 붙여넣고 실행해 주세요.

💡 Android 앱을 만드는데 필요

- Android Studio
- Android SDK

iOS 앱을 만드는데 필요

- Xcode
- CocoaPods
</aside>

 

 B. VSCode

     1. VSCode 설치

        1) https://code.visualstudio.com/download 링크를 접속해 다운로드해주세요

        2) 다운받은 VSCode-darwin-universal.zip 파일을 실행해 압축을 풀어주세요.

        3) 압축이 풀리고 생성된 Visual Studio Code 파일을 드래그해서 왼쪽 응용 프로그램에 떨어뜨려 주세요

        4) 화면 우측 상단 돋보기 🔍 아이콘을 클릭한 뒤 visual 이라고 검색해 주세요. 그리고 하단에 Visual Studio Code가 보이면

            엔터를 눌러 실행해 주세요.

        5) 아래와 같은 팝업이 뜨면 열기 버튼을 눌러주세요.

        6) 그러면 아래와 같이 VSCode가 실행되면 설치 완료!

     2. Extension 설치

        1) 좌측에 extension 아이콘(동그라미)을 선택해 주세요.

        2) flutter 라고 검색한 뒤, 해당 익스텐션을 선택하고 install 버튼을 눌러 설치해주세요.

         3) 위 flutter 익스텐션을 설치하면서 dart 익스텐션도 일반적으로 함께 설치가 됩니다.

              dart 라고 검색하신 뒤 혹시 설치가 안되었다면 해당 익스텐션도 같이 설치해주세요.

              uninstall이라고 뜨신다면 이미 설치가 된 것이니 넘어가시면 됩니다.

 

 C. Android Studio

    1.Android Studio 설치

      1) 링크에 접속한 뒤, Download Android Studio 버튼을 눌러주세요.

       2) 약관이 뜨면 아래로 쭉 스크롤 해주세요.

       3) Intel 칩을 사용하는 맥북은 왼쪽 Mac with Intel chip을 Apple 칩을 사용하는 맥북은 오른쪽 Mac with Apple chip을

           선택해 주세요.

       4) 다운로드가 완료된 android-studio~~.dmg 파일을 실행해 주세요.

       5) 창이 뜨면 왼쪽에 Android Studio를 드래그해서 Applications에 떨어뜨려주세요.

       6) 설치가 완료되면 좌측 상단에 빨간 X를 눌러서 아래 화면을 종료해 주세요.

       7) Import Android Studio Settings 팝업이 뜨면 Do not import settings를 선택하신 뒤 OK 버튼을 눌러주세요.

       8) 안드로이드 스튜디오 사용 데이터를 구글에 전달하여 사용성 개선에 참여하고 싶다면 Send usage statistics to Google을

            선택해주시고, 그렇지 않은 경우 Don't send를 선택해 주세요.

       9) License Agreement 화면이 나온다면 왼쪽 밑줄 친 부분을 클릭해 모두 Accept 를 눌러주세요

      10) Accept 를 모두 누르고 나면 Finish 버튼이 활성화됩니다. 눌러주세요.

      11) 설치가 완료되면 Finish 버튼을 눌러주세요.

      12) 아래와 같은 화면이 뜨면 Android Studio 설치 완료!

 

D. Xcode

  1) App Store에서 "Xcode" 검색후 설치

  2) 설치가 완료되면 AppStore와 Xcode를 종료해 주세요.

        하단에 App Store를 우클릭하여 종료를 선택해 주세요.

        하단에 Xcode를 우클릭하여 종료를 선택해 주세요.

  3) 이제 Homebrew 를 설치하도록 하겠습니다.

Homebrew 는 맥에서 소프트웨어를 설치 삭제할 수 있는 패키지 관리자입니다.
아래에서 brew install 명령어를 쓰기 위해 미리 설치해줍니다.

아래 명령어를 복사해 터미널에 붙여넣고 엔터를 눌러주세요.

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

  4) 다음으로 CocoaPods을 설치해 보도록 하겠습니다.

CocoaPods은 다른 사람이 만든 코드를 가져올 때 필요한 프로그램으로 Xcode와 함께 iOS 앱 개발시 필요합니다.

아래 명령어를 복사해 터미널에서 붙여넣고 엔터를 눌러주세요.

brew install cocoapods
sudo gem install cocoapods

아래와 같이 비밀번호를 입력하는 창이 나오면, 컴퓨터 시작시 입력하는 비밀번호를 입력한 뒤 엔터를 눌러주세요.

명령이 정상적으로 실행되면 아래와 같이 뜹니다.

아래 명령어를 복사해 터미널에서 실행해 주세요.

flutter doctor

그러면 아래와 같이 Xcode 설치가 완료된 것을 보실 수 있습니다.

프로그램 개발의 첫번째 난이도를 통과하셨습니다.

개발도구를 설치는 하는 것으로 개발의 절반이 끝났다는 말이 있는것과 같이 힘든과정입니다.

설치하느라 고생 많으셨습니다!