[앱 개발 기초] Windows 개발 환경 설정: VS Code 플러그인 설치 및 설정, 테마 및 폰트 설정(Fira Code 다운)

 

 

목차

---

Ⅰ. 서론: 왜 VS Code를 사용할까?

📌 1.  VS Code가 Flutter 개발에 적합한 이유

📌 2.  VS Code와 Android Studio 비교

 

Ⅱ. Windows에서 VS Code 설정하기

📌 1. Step 1: VS Code 다운로드 및 설치

📌 2. Step 2: Flutter 플러그인 및 필수 확장 프로그램 설치

📌 3. Step 3: VS Code에서 Flutter 프로젝트 실행 설정

 

Ⅲ. 결론: VS Code에서 Flutter 개발을 시작하기 위한 추가 설정

📌 1.  Debug 설정 및 단축키 활용법

📌 2. 테마 및 폰트 설정으로 최적의 개발 환경 만들기

 

 

Windows 개발 환경 설정:

VS Code 플러그인 설치 및 설정 💻🔧

 

VS Code(Visual Studio Code)는

가볍고 빠른 Flutter 개발 환경을 제공하는

코드 편집기입니다.

이번 포스팅에서는

Windows에서 VS Code를 설정하고,

Flutter 개발을 위한

플러그인을 설치하는 방법을

단계별로 설명하겠습니다. 🚀

 

---

Ⅰ. 서론: 왜 VS Code를 사용할까? 🤔

 

VS Code가 Flutter 개발에 적합한 이유

 

 

 

VS Code는

Flutter 개발자들에게

매우 인기가 높은

코드 편집기입니다.

그 이유는 다음과 같습니다.

 

 

✅ 가볍고 빠른 실행 속도 → Android Studio보다 가볍고 빠르게 실행 가능
✅ Flutter 및 Dart 플러그인 지원 → 코드 자동 완성, 상태 관리, 디버깅 기능 제공
✅ Hot Reload 및 디버깅 지원 → 빠른 UI 수정 및 테스트 가능
✅ 터미널 내장 → Flutter 명령어 실행이 편리함

 

---

VS Code와 Android Studio 비교

 

비교 항목	VS Code	Android Studio
설치 용량	가벼움 (200~400MB)	무거움 (수 GB)
실행 속도	빠름	상대적으로 느림
Flutter 플러그인 지원	✅ 있음	✅ 있음
에뮬레이터 실행	❌ (별도 설정 필요)	✅ 기본 제공
사용 대상	가볍게 Flutter 개발	전체 Android 개발

 

➡ Flutter 개발만 한다면

VS Code가 더 빠르고 가벼운 선택!

 

 

---

Ⅱ. 본론: Windows에서 VS Code 설정하기 🔧

 

  Step 1: VS Code 다운로드 및 설치

 

✅ 1) VS Code 다운로드

1. VS Code 공식 다운로드 페이지로 이동
2. Windows용 설치 파일 (.exe) 다운로드
3. 다운로드한 파일 실행 후 설치 진행

파일 바로 다운로드

 

---

 

✅ 2) VS Code 설치 과정

1. 설치 화면에서 모든 기본 옵션 체크 (경로 추가 포함)
2. 설치 완료 후 VS Code 실행

✅ 설치 완료 후 VS Code가 정상적으로 실행되는지 확인!

---

 

✅ 3) VS 커뮤니티 설치 과정

1. VS Tool 공식 다운로드 페이지로 이동
2. Windows용 설치 파일 (.exe) 다운로드
3. 다운로드한 파일 실행 후 설치 진행

파일 바로 다운로드

Visual Studio Tools 다운로드 - Windows, Mac, Linux용 무료 설치

 

여기서 중요한 것은

설치 중 워크로드에서

해당 데스크톱 개발을

설치해야 완료된다는 것입니다. 

 

생각보다 무겁네요..

노트북이 버텨줄지..

블렌더와 C4D, 스케치업도

구동하고 있는 PC인데...

 

설치는 되어도.. 

원활한 개발은 불가능할 듯......

 

 

설치는 완료되었지만..

으억..

버ㅓ버걱..

암튼 완료..

 

다음부턴 진짜

데스크탑에서 할겁니다!

카페는 못가겠군..

 

---

Step 2: Flutter 플러그인 및 필수 확장 프로그램 설치

 

 

Flutter 개발을 위해

Flutter 플러그인과

Dart 플러그인을 설치해야 합니다.

✅ 1) VS Code에서 Flutter 및 Dart 플러그인 설치

1. VS Code 실행 후 "확장(Extensions)" 아이콘 클릭 (Ctrl + Shift + X 단축키 사용 가능)
2. 검색창에 Flutter 입력 후 Flutter 플러그인 설치
3. 검색창에 Dart 입력 후 Dart 플러그인 설치

✅ Flutter 플러그인 설치 시, Dart 플러그인도 자동으로 설치됨!

 

✅ 2) 추가 추천 플러그인 설치 (Flutter 개발에 유용한 확장 프로그램)

플러그인 이름	설명
Flutter	Flutter 개발을 위한 필수 플러그인
Dart	Flutter에서 사용하는 언어 지원
Flutter Intl	다국어 번역 지원 (i18n)
Bracket Pair Colorizer	코드 가독성을 높이는 괄호 색상 표시
Error Lens	코드 오류를 더 쉽게 확인할 수 있도록 표시

✅ 필수 확장 프로그램 설치 후, VS Code를 재시작하세요!

---

Step 3: VS Code에서 Flutter 프로젝트 실행 설정

 

✅ 1) VS Code에서 Flutter 프로젝트 열기

1. Ctrl + Shift + P를 눌러 Command Palette 열기
2. "Flutter: New Project" 입력 후 선택
3. 프로젝트 이름 입력 후 저장할 폴더 선택
4. VS Code에서 새로 생성된 프로젝트가 자동으로 열림

 

✅ 2) 터미널에서 Flutter 프로젝트 실행하기

1. VS Code의 터미널(Terminal) 열기 (Ctrl + ~ 단축키)
2. 다음 명령어 입력하여 프로젝트 실행

flutter run

   3. 에뮬레이터 또는 연결된 기기에서 앱 실행 확인

✅ Flutter 프로젝트가 정상적으로 실행되면 설정 완료! 🎉

 

 

---

Ⅲ. 결론: VS Code에서 Flutter 개발을 시작하기 위한 추가 설정 ✅

 

Debug 설정 및 단축키 활용법

 

VS Code에서는

디버깅 및 코드를

빠르게 실행할 수 있는 단축키를

제공합니다.

 

기능	단축키
Flutter 앱 실행	F5
디버깅 모드 실행	Shift + F5
앱 다시 실행 (Hot Restart)	Ctrl + Shift + F5
터미널 열기	Ctrl + ~
코드 자동 정리 (Format)	Shift + Alt + F

✅ 단축키를 활용하면 더 빠르고 편리하게 Flutter 개발 가능!

---

테마 및 폰트 설정으로 최적의 개발 환경 만들기

 

✅ 테마 변경

1. Ctrl + Shift + P → "Preferences: Color Theme" 입력 후 테마 선택
2. 추천 테마: Dracula, Material Theme, One Dark Pro

✅ 폰트 및 글자 크기 설정

1. Ctrl + , 눌러 설정(Settings) 창 열기
2. Editor: Font Size 항목에서 글자 크기 조절 (기본값: 14)
3. Editor: Font Family 항목에 Fira Code 입력 (프로그래밍 폰트 추천)

✅ Fira Code 폰트 적용 방법

1. Fira Code 다운로드 후 설치
2. VS Code 설정에서 **"Editor: Font Family"**에 Fira Code 추가
3. "Editor: Font Ligatures" 옵션 활성화

GitHub - tonsky/FiraCode: Free monospaced font with programming ligatures

 

➡ 개발 환경을 개인 스타일에 맞게 최적화하면 코딩이 더 편해집니다! 🎯

---

🎯 마무리: VS Code 개발 환경 설정 완료! 🎉

이제 Windows에서 VS Code를 활용한 Flutter 개발 환경이 완성되었습니다!

✅ VS Code 다운로드 및 설치 완료
✅ Flutter 및 Dart 플러그인 설치 완료
✅ Flutter 프로젝트 생성 및 실행 완료
✅ 디버깅 및 개발 환경 최적화 완료

이제 **다음 단계인 "Windows 개발 환경 설정: Java & Gradle 오류 해결하기"**로 넘어가 보겠습니다! 🚀

더 궁금한 점이 있다면 언제든 질문해 주세요! 🎯