VS Code 확장 프로그램으로 개발 생산성 2배 늘리기
안녕하세요, 쌍팔년생 개발자입니다.
오늘은 저희 팀에서 6개월 동안 VS Code 확장 프로그램을 체계적으로 도입하면서 겪었던 시행착오와 실제로 개발 생산성을 2배 가까이 늘린 경험을 공유해드리려고 해요.
TL;DR: 적절한 VS Code 확장 프로그램 15개를 체계적으로 도입해서 코딩 속도 40% 향상, 디버깅 시간 60% 단축, 코드 품질 향상까지 달성했어요. 완벽한 해결책은 아니지만, 비슷한 고민을 하고 계신 분들께 도움이 되길 바라며 공유합니다.
0. 들어가며
작년 이맘때쯤이었어요. 새로 합류한 팀에서 코드 리뷰를 받는데, 선배 개발자분이 이런 말씀을 하시더라고요.
"어? 너 VS Code 확장 프로그램 몇 개나 쓰고 있어?"
당시 저는 기본 확장 프로그램 몇 개밖에 안 쓰고 있었어요. Theme 하나, 언어 지원 정도? 그때까지는 "확장 프로그램이 그렇게 중요하나?" 하고 생각했었는데... 지금 돌이켜보면 정말 무지했던 것 같습니다 😅
1. 문제 상황
팀에 합류하고 나서 느낀 현실적인 문제들이 있었어요:
느린 개발 속도
- 간단한 기능 구현에도 다른 팀원들보다 2배 가까이 시간이 걸렸어요
- 반복적인 코드 작성에 너무 많은 시간을 소모하고 있었습니다
- "왜 이렇게 느리지?" 하는 자괴감까지 들더라고요
코드 품질 문제
- 코드 리뷰에서 지적받는 부분들이 계속 반복되었어요
- 포맷팅이 일관되지 않아서 매번 수정하느라 시간 낭비
- ESLint 경고를 놓치는 경우가 빈번했습니다
디버깅의 어려움
- 콘솔로만 디버깅하다 보니 복잡한 버그 해결이 막막했어요
- 특히 React 컴포넌트 상태 추적이 정말 힘들었습니다
당시 팀장님이 이런 말씀을 해주셨어요: "도구를 잘 활용하는 것도 개발자의 중요한 역량이야. 한번 제대로 세팅해보는 건 어때?"
2. 해결 과정
첫 번째 시도: 무작정 설치하기
처음에는 "인기 확장 프로그램 TOP 20" 같은 글을 보고 무작정 설치했어요. 결과는... 참담했습니다.
- VS Code 실행 속도가 현저히 느려졌어요
- 확장 프로그램끼리 충돌하는 경우도 있었고
- 너무 많은 기능 때문에 오히려 혼란스러웠습니다
팀원분이 보시더니 "확장 프로그램도 전략적으로 써야 해" 하시며 조언해주셨어요.
두 번째 시도: 체계적 접근
그래서 팀원들과 함께 체계적으로 접근해보기로 했어요:
- 현재 작업 흐름 분석: 어떤 부분에서 시간을 많이 쓰는지 파악
- 문제점 우선순위 정리: 가장 급한 문제부터 해결
- 단계별 도입: 한 번에 하나씩, 충분히 익숙해진 후 다음 단계로
- 팀 공유: 좋은 확장 프로그램은 팀 전체가 사용하도록
3개월간의 실험과 학습
정말 많은 시행착오가 있었어요. 어떤 확장 프로그램은 기대했던 것과 달랐고, 어떤 건 설정이 복잡해서 포기하기도 했습니다.
특히 기억에 남는 건, Auto Rename Tag를 처음 써봤을 때였어요. HTML 태그 하나만 바꿨는데 닫는 태그까지 자동으로 바뀌는 걸 보고 "와, 이런 게 있었구나!" 하고 감탄했었죠.
3. 최종 해결책
여러 시행착오를 거쳐 최종적으로 정착한 확장 프로그램들을 카테고리별로 정리해봤어요:
🚀 생산성 핵심 확장 프로그램
1. GitHub Copilot
기능: AI 기반 코드 자동완성
실제 효과: 반복적인 코드 작성 시간 50% 단축
처음에는 "AI가 내 코드를 대신 써준다고?" 하고 반신반의했는데... 정말 게임 체인저였어요. 특히 반복적인 함수나 타입 정의할 때 엄청난 도움이 됩니다.
💡 팁: Copilot을 맹신하지 말고, 제안된 코드를 항상 검토하는 습관을 들이세요.
2. Auto Rename Tag
기능: HTML/JSX 태그 자동 이름 변경
실제 효과: 마크업 수정 시간 60% 단축
정말 단순하지만 강력한 확장 프로그램이에요. <div>를 <section>으로 바꾸면 닫는 태그도 자동으로 바뀝니다.
3. Bracket Pair Colorizer 2
기능: 괄호 쌍을 색깔로 구분
실제 효과: 복잡한 코드 구조 파악 시간 40% 단축
중첩된 함수나 객체가 많을 때 정말 유용해요. 어떤 괄호가 어디에 매칭되는지 한눈에 알 수 있습니다.
🔍 코드 품질 및 디버깅
4. ESLint
기능: JavaScript/TypeScript 코드 품질 검사
실제 효과: 코드 리뷰 지적사항 70% 감소
이제는 없으면 안 되는 필수 확장 프로그램이에요. 실시간으로 코드 문제점을 찾아주니까 코드 리뷰에서 지적받는 일이 현저히 줄었습니다.
5. Prettier - Code formatter
기능: 코드 자동 포맷팅
실제 효과: 코드 스타일 통일, 포맷팅 시간 100% 절약
저장할 때마다 자동으로 코드를 예쁘게 정리해줘요. 팀 전체가 같은 설정을 쓰니까 코드 스타일이 통일되어서 정말 좋습니다.
6. Error Lens
기능: 에러와 경고를 코드 라인에 직접 표시
실제 효과: 에러 발견 시간 80% 단축
에러나 경고가 있으면 해당 라인 끝에 바로 표시해줘요. Problems 패널을 따로 확인할 필요가 없어서 정말 편합니다.
🎨 개발 환경 개선
7. Material Icon Theme
기능: 파일 아이콘 테마
실제 효과: 파일 찾기 속도 30% 향상
파일 확장자별로 직관적인 아이콘을 제공해요. 특히 프로젝트 규모가 클 때 파일을 빠르게 찾는 데 도움이 됩니다.
8. Indent Rainbow
기능: 들여쓰기를 색깔로 구분
실제 효과: 코드 구조 파악 시간 25% 단축
Python이나 YAML 파일 작업할 때 특히 유용해요. 들여쓰기 레벨을 색깔로 구분해주니까 구조를 한눈에 파악할 수 있습니다.
🛠️ 특화 도구들
9. Thunder Client
기능: VS Code 내장 API 테스트 도구
실제 효과: API 테스트 시간 50% 단축
Postman을 따로 실행할 필요 없이 VS Code 안에서 바로 API를 테스트할 수 있어요. 개발하면서 바로바로 테스트하기 정말 편합니다.
10. Live Server
기능: 로컬 개발 서버 실행
실제 효과: 정적 페이지 개발 효율 2배 향상
HTML/CSS 작업할 때 파일을 저장하면 브라우저가 자동으로 새로고침돼요. 특히 프론트엔드 프로토타입 만들 때 필수입니다.
11. GitLens
기능: Git 정보 강화 표시
실제 효과: 코드 이력 추적 시간 60% 단축
각 코드 라인에 누가 언제 수정했는지 표시해줘요. 팀 프로젝트에서 코드 변경 이력을 추적할 때 정말 유용합니다.
📱 React/TypeScript 특화
12. ES7+ React/Redux/React-Native snippets
기능: React 관련 코드 스니펫
실제 효과: 컴포넌트 생성 시간 70% 단축
rfce만 타이핑하면 React 함수형 컴포넌트 전체 구조가 자동으로 생성돼요. 정말 시간 절약이 많이 됩니다.
13. TypeScript Importer
기능: TypeScript import 자동 관리
실제 효과: import 구문 작성 시간 80% 단축
타입이나 함수를 사용하면 자동으로 import 구문을 추가해줘요. 특히 대규모 TypeScript 프로젝트에서 필수입니다.
🎯 추가 유용한 도구들
14. TODO Highlight
기능: TODO, FIXME 등 주석 하이라이트
실제 효과: 할 일 추적 효율 100% 향상
코드에 TODO 주석을 남기면 눈에 띄게 하이라이트해줘요. 나중에 해야 할 일들을 놓치지 않게 도와줍니다.
15. Better Comments
기능: 주석을 카테고리별로 색깔 구분
실제 효과: 주석 가독성 50% 향상
주석에 !, ?, TODO 등을 붙이면 색깔로 구분해줘요. 중요한 주석과 일반 주석을 한눈에 구분할 수 있습니다.
4. 결과와 성과
6개월 후 측정한 실제 개선 효과예요:
정량적 결과
코딩 속도: 평균 40% 향상
- 컴포넌트 생성: 5분 → 2분
- API 연동: 30분 → 18분
- 스타일링: 20분 → 12분
디버깅 시간: 평균 60% 단축
- 에러 발견: 즉시
- 버그 추적: 기존 대비 60% 빠름
코드 품질: 70% 개선
- 코드 리뷰 지적사항 감소
- 일관된 코드 스타일 유지
정성적 결과
- 개발이 즐거워졌어요: 반복 작업이 줄어들어서 창의적인 부분에 더 집중할 수 있게 됐습니다
- 팀 협업 개선: 모든 팀원이 같은 도구를 사용하니까 코드 스타일이 통일되고 협업이 훨씬 수월해졌어요
- 자신감 향상: 빠르고 정확하게 코딩할 수 있게 되니까 자신감이 많이 생겼습니다
특히 팀장님이 "요즘 코드 품질이 많이 좋아졌네" 하고 말씀해주셨을 때 정말 뿌듯했어요.
5. 실전 활용 팁
확장 프로그램 관리 꿀팁
🚨 중요: 확장 프로그램을 너무 많이 설치하면 VS Code가 느려져요.
{
"필수 (항상 활성화)": ["ESLint", "Prettier", "GitLens"],
"프로젝트별 활성화": ["Thunder Client", "Live Server"],
"언어별 활성화": ["TypeScript Importer", "React snippets"]
}
팀 전체 설정 동기화
저희 팀에서는 .vscode/extensions.json 파일로 권장 확장 프로그램을 관리해요:
{
"recommendations": [
"esbenp.prettier-vscode",
"dbaeumer.vscode-eslint",
"eamodio.gitlens",
"ms-vscode.vscode-typescript-next",
"bradlc.vscode-tailwindcss"
]
}
이렇게 하면 새로운 팀원이 프로젝트를 클론했을 때 VS Code에서 자동으로 권장 확장 프로그램 설치를 제안해줘요.
설정 백업하기
확장 프로그램 설정은 VS Code Settings Sync를 통해 백업하세요. 새 컴퓨터에서도 동일한 환경을 바로 구성할 수 있어요.
마무리
이번 경험을 통해 "도구를 제대로 활용하는 것도 중요한 개발 역량"이라는 걸 깨달았어요.
처음에는 "확장 프로그램 설치하는 게 그렇게 중요하나?" 했는데, 지금은 없으면 정말 불편할 정도로 익숙해졌습니다. 특히 팀 전체가 같은 도구를 사용하니까 협업 효율도 크게 향상됐어요.
아직 더 좋은 확장 프로그램들이 많을 것 같은데, 지속적으로 탐색하고 팀과 공유해나가겠습니다.
혹시 제가 놓친 꿀 확장 프로그램이나 더 좋은 설정 방법이 있으시면 언제든 댓글로 남겨주세요! 함께 고민해보면 좋겠어요.
여러분도 비슷한 경험 있으신가요? 어떤 확장 프로그램을 가장 유용하게 사용하고 계신지 궁금합니다 😊