[개발일지 #02 | 인프라] Mac에서 Flutter & VS Code 개발 환경 구축하기 (초보자 완벽 가이드)

카카오톡 같은 크로스플랫폼 메신저 ‘딩동(DingDong)’ 만들기 프로젝트 2탄!
이번 글에서는 macOS(Apple Silicon M1/M2/M3/M4 및 Intel) 환경에서 Flutter SDK를 설치하고, Visual Studio Code(VS Code)를 실무 개발용으로 완벽하게 세팅하는 과정을 다룹니다.

1. 사전 요구사항 및 확인

Flutter로 Android, iOS, macOS, Windows 앱을 개발하려면 기본 개발 도구들이 필요합니다:

1. Mac 운영체제: macOS 11 이상 권장 (현재 Apple Silicon M1~M4 기준 완벽 지원)
2. Xcode: iOS 및 macOS 앱 빌드용 (Mac App Store에서 무료 다운로드)
3. Android Studio: Android SDK 및 에뮬레이터 설정용
4. Visual Studio Code: 주력 코드 편집기

2. 가장 쉬운 설치 방법: VS Code 플러그인부터 설치하기 (추천!)

터미널에서 명령어 입력하고 환경변수(PATH)를 설정하는 게 복잡하게 느껴진다면, VS Code에서 확장 프로그램(플러그인)을 먼저 설치하고 자동으로 SDK를 다운받는 방법이 가장 쉽고 편리합니다.

flowchart LR
    A["1. VS Code 실행"] --> B["2. 'Flutter' 확장 설치"]
    B --> C["3. 새 프로젝트 생성"]
    C --> D["4. 'Download SDK' 자동 설치"]
    D --> E["5. 개발 준비 끝!"]
    linkStyle default stroke-width:3px,stroke:#333333

[단계 1] VS Code에서 Flutter 확장 프로그램 설치

1. VS Code를 실행합니다.
2. 좌측 메뉴에서 확장(Extensions) 아이콘(Cmd + Shift + X)을 누릅니다.
3. 검색창에 **Flutter**를 검색한 뒤 [Install] 버튼을 누릅니다.
   (Dart 언어 플러그인도 자동으로 함께 설치됩니다.)

[단계 2] VS Code 안내창으로 Flutter SDK 자동 다운로드

1. VS Code에서 단축키 Cmd + Shift + P를 누릅니다.
2. 검색창에 **Flutter: New Project**를 입력하고 엔터를 칩니다.
3. 컴퓨터에 Flutter SDK가 없으면 우측 하단에 “Flutter SDK를 찾을 수 없습니다. [Download SDK] 하시겠습니까?” 라는 팝업 알림이 뜹니다.
4. [Download SDK] 버튼을 클릭하고 원하는 폴더(예: ~/development 또는 본인 홈 폴더)를 지정합니다.
5. VS Code가 알아서 최신 Flutter SDK를 다운로드하고, 압축을 풀고 경로 연결까지 자동으로 완료해 줍니다!

3. (선택) 전통적인 터미널 수동 설치 방식

만약 터미널에서 직접 제어하거나 Homebrew를 사용하는 것을 선호하신다면 아래 방식도 가능합니다:

# 방법 A: Homebrew로 한 줄 설치 (가장 깔끔함)
brew install --cask flutter

# 방법 B: Git 저장소에서 직접 다운로드
mkdir -p ~/development && cd ~/development
git clone https://github.com/flutter/flutter.git -b stable
echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.zshrc
source ~/.zshrc

4. Flutter Doctor로 개발 환경 상태 점검하기

VS Code 플러그인과 SDK가 준비되었으면, 혹시 필요한 추가 도구(iOS/Android 빌드용)가 있는지 확인해 봅니다.
VS Code 터미널(Ctrl + ~)에서 아래 명령어를 실행합니다:

flutter doctor

실행하면 아래처럼 체크리스트가 나옵니다:

[✓] Flutter (Channel stable, 3.x.x, on macOS ...)
[!] Android toolchain - develop for Android devices
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[!] Xcode - develop for iOS and macOS
    ! Xcode installation is incomplete...
[✓] Chrome - develop for the web
[!] Android Studio (not installed or missing plugins)
[✓] VS Code (version 1.x)
[✓] Connected device
[✓] Network resources

느낌표(!)가 뜰 때 해결 방법

① Android 라이선스 동의 오류

flutter doctor --android-licenses
# 나타나는 모든 질문에 'y' 입력 후 Enter

② Xcode 관련 설정 (iOS/Mac 빌드용)

App Store에서 Xcode 설치 후 터미널에서 다음 명령어 실행:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

③ CocoaPods 설치 (iOS 라이브러리 관리자)

sudo gem install cocoapods
# 또는 Homebrew 사용 시
brew install cocoapods

모든 필수 항목에 [✓] 초록색 체크가 뜨면 준비 완료입니다!

5. 추가로 설치하면 좋은 유용한 VS Code 확장 & 설정

5.1 생산성 추천 플러그인 (Extensions)

VS Code 좌측의 확장 아이콘(Cmd + Shift + X)에서 추가로 설치하면 개발이 매우 편리해집니다:

4.3 생산성을 200% 올려주는 VS Code 설정 (settings.json)

코드 저장 시 자동으로 형식을 정리해주고, Flutter 개발에 최적화된 설정을 적용합니다.

1. Cmd + Shift + P 를 누르고 Preferences: Open User Settings (JSON) 을 검색해 엽니다.
2. 아래 내용을 추가/병합합니다:

{
  // 1. 저장 시 자동 포맷팅 및 임포트 정리
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "explicit"
  },

  // 2. Dart / Flutter 전용 설정
  "[dart]": {
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.rulers": [80],
    "editor.selectionHighlight": false,
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.suggestSelection": "first",
    "editor.tabCompletion": "onlySnippets",
    "editor.wordBasedSuggestions": "off"
  },

  // 3. 플러터 위젯 가이드 라인 표시 (트리 구조 한눈에 보기)
  "dart.previewFlutterUiGuides": true,
  
  // 4. 위젯 끝에 쉼표(Trailing Comma) 적극 활용 권장
  "dart.lineLength": 80,
  
  // 5. 핫 리로드 설정 (파일 저장 시 즉시 화면 반영)
  "flutter.hotReloadOnSave": "always"
}

6. 첫 번째 Flutter 프로젝트 실행 테스트

모든 설정이 끝났으니, 제대로 동작하는지 기본 샘플 프로젝트를 만들어 실행해 봅니다.

6.1 프로젝트 생성

# 원하는 작업 폴더로 이동 후
cd ~/AndroidStudioProjects

# 새 플러터 앱 생성 (조직 도메인 지정)
flutter create --org com.dingdong dingdong_test
cd dingdong_test

# VS Code로 열기
code .

6.2 실행 및 핫 리로드(Hot Reload) 체험

1. 디바이스 선택: VS Code 우측 하단 상태바에서 타겟 기기를 선택합니다.
   (예: macOS (darwin), iPhone 15 Simulator, 또는 Chrome)
2. 실행: 키보드 F5 키를 누르거나, 상단 메뉴에서 Run -> Start Debugging 클릭.
3. 핫 리로드 테스트:
   • lib/main.dart 파일을 엽니다.
   • 'Flutter Demo Home Page' 문구를 '딩동 메신저 개발 시작!' 으로 변경하고 저장(Cmd + S)합니다.
   • 앱이 재시작되지 않고 1초도 안 되어 화면 글자가 즉시 바뀌는 것을 확인할 수 있습니다!

7. 다음 편 예고

이제 모바일/데스크톱 앱을 개발할 수 있는 완벽한 클라이언트 환경이 마련되었습니다.

다음 **[개발일지 #03]**에서는 유그린 NAS(UGOS)의 Docker를 이용해 PostgreSQL 데이터베이스와 Caddy 웹서버를 세팅하고 외부에서 안전하게 접속하는 방법을 다루겠습니다!