플러터 강좌: 3.5 맥 OS에서 비주얼 스튜디오 코드 설치하기

최근 몇 년 간 모바일 애플리케이션 개발에서 가장 주목받는 프레임워크 중 하나인 플러터(Flutter)는 구글에서 개발한 오픈소스 UI 툴킷입니다. 플러터를 사용하면 한 번의 코드 작성으로 iOS 및 Android 플랫폼에서 모두 동작하는 애플리케이션을 만들 수 있습니다. 이번 강좌에서는 맥 OS에서 비주얼 스튜디오 코드(Visual Studio Code)를 설치하고, 플러터 개발 환경을 설정하는 방법에 대해 알아보겠습니다.

1. 필요한 시스템 요구 사항 확인하기

비주얼 스튜디오 코드를 설치하기 전에, 귀하의 맥 OS가 아래의 시스템 요구 사항을 충족하는지 확인해야 합니다.

  • macOS 10.11 (El Capitan) 이상
  • 2GB 이상의 RAM
  • 무선 또는 유선 인터넷 연결 (다운로드 및 업데이트를 위해 필요)
  • 플러터 SDK를 다운로드하기 위한 디스크 공간

2. 비주얼 스튜디오 코드 다운로드하기

비주얼 스튜디오 코드는 무료로 제공되며, 다음의 단계에 따라 쉽게 다운로드 할 수 있습니다.

  1. 웹 브라우저를 열고 비주얼 스튜디오 코드 공식 웹사이트로 이동합니다.
  2. 웹사이트의 메인 페이지에서 Download for macOS 버튼을 클릭합니다.
  3. 다운로드가 완료되면, 다운로드한 .dmg 파일을 클릭하여 엽니다.
  4. 비주얼 스튜디오 코드 아이콘을 Applications 폴더로 드래그하여 설치합니다.

3. 비주얼 스튜디오 코드 실행하기

비주얼 스튜디오 코드를 설치한 후, 다음 단계에서 애플리케이션을 실행하는 방법을 배워보겠습니다.

  1. Finder를 열고 Applications 폴더를 선택하여 비주얼 스튜디오 코드 아이콘을 찾습니다.
  2. 비주얼 스튜디오 코드 아이콘을 더블 클릭하여 애플리케이션을 실행합니다.
  3. 처음 실행 시 경고 메시지가 표시될 수 있습니다. 이 경우 열기 버튼을 클릭하여 계속 진행합니다.

4. 플러터 SDK 설치하기

비주얼 스튜디오 코드를 설치한 후, 이제 플러터 SDK를 설치해야 합니다. 플러터 SDK는 플러터 애플리케이션을 개발하기 위한 도구 모음입니다.

  1. 다시 웹 브라우저를 열고 플러터 설치 페이지로 이동합니다.
  2. “Get Started” 섹션에서 “macOS”를 선택하여 설치 지침을 확인합니다.
  3. 플러터 SDK 파일을 다운로드합니다.
  4. 다운로드한 파일을 ~/development 폴더에 압축 해제합니다.
    5. mkdir ~/development
        cd ~/development
        unzip ~/Downloads/flutter_macos_*.zip

5. 환경 변수 설정하기

플러터와 관련된 명령어를 터미널에서 사용하려면, PATH 환경 변수를 설정해야 합니다. 이를 통해 터미널에서 플러터 명령어를 쉽게 사용할 수 있습니다. 다음의 단계를 따라주세요:

  1. 터미널을 엽니다.
  2. 다음 명령어를 입력하여 환경 설정 파일을 편집합니다:
    3. nano ~/.zshrc
  3. 파일이 열리면, 파일의 마지막에 다음 라인을 추가합니다:
    4. export PATH="$PATH:/Users/[USERNAME]/development/flutter/bin"
  4. [USERNAME]을 자신의 사용자 이름으로 바꿉니다.
  5. 변경 사항을 저장하고 나오기 위해 Control + X를 누른 후, Y를 눌러 저장합니다.
  6. 변경 사항을 적용하기 위해 다음 명령어를 입력합니다:
    7. source ~/.zshrc
  7. 설치가 완료되었는지 확인하기 위해, 다음 명령어를 입력합니다:
    8. flutter doctor
  8. 문제가 발생하지 않으면 플러터가 성공적으로 설치된 것입니다.

6. 플러터 플러그인 설치하기

비주얼 스튜디오 코드에서 플러터 개발을 위해서는 플러터 및 다트(Dart) 플러그인을 설치해야 합니다. 다음의 절차에 따라 플러그인을 설치해 주세요:

  1. 비주얼 스튜디오 코드의 왼쪽 사이드바에서 Extensions 아이콘을 클릭합니다.
  2. 검색창에 “Flutter”를 입력하고, Flutter 플러그인을 찾습니다.
  3. 플러그인 옆의 Install 버튼을 클릭하여 설치합니다.
  4. 같은 방법으로 “Dart” 플러그인도 설치합니다.

7. 새로운 플러터 프로젝트 생성하기

플러터와 관련된 모든 설정이 완료된 후, 새로운 플러터 프로젝트를 생성하여 실제로 개발을 시작할 수 있습니다. 다음의 단계를 따라 프로젝트를 생성합니다:

  1. 비주얼 스튜디오 코드에서 터미널을 열고, 다음 명령어를 입력하여 새로운 플러터 프로젝트를 만듭니다:
    2. flutter create my_first_app
  2. 생성된 프로젝트 폴더로 이동합니다:
    3. cd my_first_app
  3. 비주얼 스튜디오 코드에서 프로젝트를 열기 위해 다음 명령어를 입력합니다:
    4. code .

8. 시뮬레이터에서 애플리케이션 실행하기

새로운 프로젝트가 설정되면, 애플리케이션을 시뮬레이터에서 실행할 수 있습니다. 아래의 절차에 따라주세요:

  1. iOS 시뮬레이터를 실행합니다. 시뮬레이터는 Xcode를 통해 설치할 수 있습니다.
  2. 비주얼 스튜디오 코드의 터미널에서 다음 명령어를 입력하여 애플리케이션을 실행합니다:
    3. flutter run

9. 결론

이번 강좌를 통해 맥 OS에서 비주얼 스튜디오 코드를 설치하고, 플러터 개발 환경을 설정하는 방법을 배웠습니다. 이러한 과정이 끝난 후, 여러분은 이제 실제로 플러터를 사용하여 모바일 애플리케이션을 개발할 준비가 되었습니다. 앞으로의 강좌에서는 플러터의 기본적인 위젯 구성 및 레이아웃 등에 대해 다룰 예정입니다. 그럼 다음 강좌에서 만나요!