VSCode 설치하고 멍하니 있는 사람을 위한 확장자 추천 5선 + 단축키 개꿀 요약 (부제: 뭘 눌러야 할지 모르겠는 너에게)

1. 필수 확장 기능 추천

• Prettier – 코드 정렬의 신. 저장하면 코드가 이뻐짐.
• Live Server – HTML 실시간 미리보기. 저장하면 자동 새로고침됨.
• CodeSnap – 코드 스크린샷 찍는 확장자. 감성 + 블로그용으로 꿀.
• Bracket Pair Colorizer – 괄호 색깔 다르게 표시. 초보 구세주.
• Auto Rename Tag – HTML 태그 닫을 때 자동으로 짝 맞춰줌.

Prettier – 코드 정렬의 신. 저장하면 코드가 이뻐짐.

Live Server – HTML 실시간 미리보기. 저장하면 자동 새로고침됨.

CodeSnap – 코드 스크린샷 찍는 확장자. 감성 + 블로그용으로 꿀.

Bracket Pair Colorizer – 괄호 색깔 다르게 표시. 초보 구세주.

Auto Rename Tag – HTML 태그 닫을 때 자동으로 짝 맞춰줌.

2. VSCode 확장 기능(Extensions) 설치 방법

확장 기능은 Visual Studio Code를 더 똑똑하고 편리하게 만들어주는 플러그인입니다.
입문자라면 최소한 2~3개는 깔고 시작하는 걸 추천드립니다.

설치 방법

1. 왼쪽 사이드바에서 네모 4개 아이콘 (확장 기능 탭)을 클릭합니다.
2. 상단 검색창에 원하는 확장 기능 이름을 입력합니다. 예: Prettier, Live Server
3. 검색 결과에서 해당 항목을 클릭한 뒤, [Install] 버튼을 누릅니다.

설치 후에는 바로 사용 가능하며, 설정 → 확장자에서 더 자세한 옵션 조정도 가능합니다.
설치할 때 겁먹지 마세요. 그냥 바나나 껍질 까듯 가볍게 클릭만 하면 됩니다 🍌

3. VSCode 단축키 요약 – 윈도우 & 맥북 사용자 모두를 위한 가이드

기능	Windows	Mac
사이드바 열기/닫기	Ctrl + B	Cmd + B
터미널 열기	Ctrl + `	Ctrl + `
줄 복사	Alt + Shift + ↓ / ↑	Option + Shift + ↓ / ↑
자동완성	Ctrl + Space	Cmd + Space
빠른 파일 열기	Ctrl + P	Cmd + P

 

처음엔 손이 꼬일 수 있습니다. 하지만 익숙해지면... 마치 바나나 깔 듯 자연스럽게 단축키를 누르게 됩니다.

이걸 다 외울 필요는 없습니다.
그냥 하나씩 눌러보다 보면 익숙해지고, 그게 실력이 됩니다.