728x90
반응형
Flutter 개발을 위해 VS Code를 설정하는 과정은 생각보다 간단하다. 처음 시작하는 사용자가 차근차근 따라 할 수 있도록 직접 세팅하며 겪었던 경험을 바탕으로 단계별로 정리한다.
1. VS Code용 Flutter 확장 프로그램 설치
가장 먼저 VS Code가 Flutter와 Dart 언어를 인식할 수 있도록 도구를 추가해야 한다.
- VS Code 실행: 왼쪽 사이드바의 Extensions(확장) 아이콘을 클릭한다.
- 검색 및 설치: 상단 검색창에 **'Flutter'**를 입력하고 설치한다. 이때 'Dart' 확장 프로그램도 자동으로 함께 설치되는 것을 확인할 수 있다.
2. Flutter SDK 설치 및 경로 지정
코드 에디터 설정이 끝났다면 실제 앱을 빌드하는 엔진인 SDK를 내려받아야 한다.
- 명령 팔레트 활용: Ctrl + Shift + P를 눌러 Flutter: New Project를 입력한다.
- SDK 다운로드: 시스템에 SDK가 없다면 [Download SDK] 버튼이 나타난다. 이를 클릭하여 설치를 진행한다.
- 설치 경로 주의: C:\Program Files와 같이 권한 제한이 있는 곳보다는 **C:\flutter**와 같이 접근이 용이한 경로를 권장한다.
3. 환경 변수(Path) 설정
SDK 설치가 완료되었다면 시스템 어디서든 flutter 명령어를 사용할 수 있도록 설정이 필요하다.
- 시스템 환경 변수 편집: 윈도우 검색창에 '환경 변수'를 검색하여 실행한다.
- 변수 추가: [시스템 변수] 항목 중 Path를 편집하여, Flutter가 설치된 폴더 내의 bin 경로를 추가한다. (예: C:\flutter\bin)
- 확인: VS Code 터미널에서 flutter --version을 입력하여 정상적으로 인식되는지 체크한다.
4. Flutter Doctor를 통한 최종 점검
Flutter는 현재 설치 상태의 문제점을 진단해 주는 강력한 도구를 제공한다.
- 진단 실행: 터미널에 **flutter doctor**를 입력한다.
- 항목 확인: 결과 화면에서 **엑스([✗])**나 **느낌표([!])**가 뜬 항목을 확인하여 해결한다.
- Android Toolchain: 안드로이드 스튜디오 설치 및 라이선스 동의가 필요한 경우가 많다.
- Visual Studio: 데스크톱 앱 개발 환경이 필요한 경우 추가 설치 안내를 따른다.
5. 첫 프로젝트 생성 및 실행 테스트
모든 준비가 끝났다면 프로젝트가 정상적으로 구동되는지 확인한다.
- 프로젝트 생성: Ctrl + Shift + P -> Flutter: New Project -> **Application**을 선택한다.
- 저장 및 실행: 프로젝트 폴더를 지정한 뒤, 하단 상태 표시줄에서 기기(Chrome 또는 에뮬레이터)를 선택하고 F5를 눌러 실행한다.
직접 세팅해 보니 flutter doctor에서 나타나는 경고 메시지만 차근차근 해결해도 큰 어려움 없이 환경 구축이 가능했다. 개발 환경이 준비되었다면 이제 본격적인 위젯 코딩을 시작해 보자.
728x90
반응형
