01 / 14
SESSION 13 · Part 4 개발 환경

코드 에디터와
AI 코딩 도구

VS Code · Cursor · Claude Code · GitHub Copilot — 코드를 쓰는 도구들

02 / 14
💭

에디터
알아야 할까?

개발자가 하루 종일 머무는 곳은 코드 에디터다.
어떤 도구를 쓰느냐에 따라 생산성이 10배 이상 차이 난다.

2024년 이후, 에디터는 더 이상 단순한 글쓰기 도구가 아닌 AI와 함께 코딩하는 작업 환경으로 진화했다.

03 / 14
🎯

이 세션에서
배우는 것

📝
에디터 vs IDE
텍스트 에디터, IDE, AI 에디터의 차이를 설명할 수 있다
⌨️
VS Code 사용법
기본 기능과 필수 단축키로 빠르게 작업할 수 있다
🤖
AI 도구 선택
Cursor·Claude Code·Copilot의 차이와 선택 기준을 안다
04 / 14

텍스트 에디터 vs IDE

둘 다 코드를 쓰는 도구지만, 제공하는 기능의 범위가 다르다.

📝 텍스트 에디터
가볍고 빠르게 실행
코드 편집·하이라이팅 중심
실행·디버깅은 별도 도구 필요
예: 메모장, Sublime Text, Vim
🛠️ IDE (통합 개발 환경)
편집 + 실행 + 디버깅 + 빌드 통합
언어별 자동완성·오류 체크
무겁지만 모든 작업을 한 곳에서
예: IntelliJ, Visual Studio, Xcode

💡 VS Code는 가벼운 에디터지만 익스텐션으로 IDE급 기능을 갖춰 사실상 표준이 되었다.

05 / 14
💙

VS Code —
업계 표준 에디터

Microsoft가 만든 무료 에디터. 전 세계 개발자의 약 70%가 사용하는 사실상의 표준이다.

🆓
무료 · 오픈소스
Windows·Mac·Linux 모두 지원. 누구나 부담 없이 시작
🧩
익스텐션 생태계
5만+ 확장 기능. 언어, 테마, AI 어시스턴트까지 무엇이든 추가
인텔리센스
변수·함수 자동완성, 오류 즉시 표시, 정의로 점프
06 / 14
⌨️

VS Code 필수 단축키

이 단축키들만 익히면 마우스 사용량이 절반으로 줄어든다.

1
Cmd/Ctrl + P — 파일 빠른 검색
파일 트리를 클릭할 필요 없이 이름의 일부만 입력해 즉시 이동
2
Cmd/Ctrl + Shift + P — 명령 팔레트
VS Code의 모든 기능을 키보드로 검색·실행. "Format Document", "Git: Commit" 등
3
Cmd/Ctrl + / — 주석 토글
선택한 줄을 주석으로 만들거나 해제. 코드 임시 비활성화에 유용
4
Cmd/Ctrl + B · F5
사이드바 토글 / 디버그 실행 — 화면 공간을 자유롭게 조절
07 / 14
🪄

Cursor —
AI가 동석한 에디터

VS Code를 그대로 쓰면서, Claude·GPT를 깊숙이 통합한 도구.

💬
자연어로 수정
"이 함수에 에러 처리 추가해줘" 한 마디로 코드 자동 수정
📂
파일 전체 인식
@파일명으로 컨텍스트 지정. 여러 파일을 동시에 참고하며 작업
🔄
탭으로 자동완성
의도를 미리 예측해 다음 변경을 제안. Tab 한 번이면 완료

💡 VS Code 사용자라면 학습 곡선 거의 없음 — 단축키와 익스텐션이 그대로 호환된다.

08 / 14
🤖

Claude Code —
터미널의 AI 파트너

Anthropic이 만든 터미널 기반 AI 에이전트. 작업 전체를 통째로 위임할 수 있다.

1
프로젝트 전체 파악
디렉토리 구조와 코드를 스캔해 컨텍스트 자동 구성
2
파일 생성·수정·삭제
"로그인 페이지 만들어줘" 한 마디로 여러 파일 동시 작업
3
명령 실행과 검증
테스트 실행, 빌드 확인, Git 커밋까지 — 사람이 하는 일을 그대로
09 / 14
🐙

GitHub Copilot —
자동완성의 원조

2021년 등장한 AI 코드 어시스턴트의 원조. 타이핑 중 다음 줄을 회색으로 미리 보여준다.

실시간 제안
함수 이름이나 주석만 써도 본문 전체를 자동 제안
🔌
다양한 에디터 지원
VS Code · JetBrains · Vim · Neovim — 어디서든 동일한 경험
💼
기업용 검증
GitHub과 통합되어 보안·라이선스 준수 면에서도 안정적
10 / 14

AI 도구 선택 기준

각 도구의 강점이 다르다 — 작업 성격에 맞춰 골라 쓴다.

🪄
Cursor
에디터 안에서 AI와 빠르게 주고받기. 시각적 작업에 강함
🤖
Claude Code
큰 작업을 통째로 위임. 여러 파일을 한꺼번에 다루기 좋음
🐙
GitHub Copilot
타이핑 자동완성 중심. 기존 워크플로우 변화 최소

💡 셋을 동시에 써도 좋다 — 실제 많은 개발자가 그렇게 한다.

11 / 14
📈

에디터의 진화 —
워드프로세서에서 AI 동료까지

코드 에디터는 시간이 지나면서 함께 일하는 방식 자체가 바뀌었다.

📖 사무실 비유
메모장
=
백지 노트 — 그냥 글씨만 쓸 수 있는 도구
VS Code
=
혼자 쓰는 사무실 — 도구·자료가 다 갖춰진 작업실
Cursor
=
자연어로 일을 시키는 동료 — 옆자리에 앉은 AI 비서
Claude Code
=
출장을 통째로 맡길 파트너 — 큰 작업을 위임 가능
12 / 14
💡

실전 활용 시나리오

비개발자도 AI 도구로 충분히 코드를 만들고 수정할 수 있다.

👤
웹사이트에 문의 폼을 추가하고 싶어요. HTML 파일에 어떻게 넣나요?
🤖
index.html 파일을 열어주시면, 적절한 위치에 이름·이메일·메시지 입력란이 있는 폼을 추가해드릴게요. 스타일은 기존 디자인에 맞추고, 제출 시 동작도 함께 연결해 드릴까요?
👤
네, 디자인 맞춰서 추가해주시고 이메일 형식 검증도 부탁드려요.
🤖
완료했습니다. 73번째 줄에 폼을 추가했고, type="email"로 자동 형식 검증이 들어갑니다. 브라우저에서 새로고침해 확인해보세요!
13 / 14
📌

핵심 정리

📝
에디터 vs IDE
가벼운 편집 vs
실행·디버깅까지 통합
💙
VS Code
업계 표준 무료 에디터
익스텐션으로 무한 확장
⌨️
필수 단축키
Cmd+P, Cmd+Shift+P,
Cmd+/ 부터 시작
🪄
Cursor
자연어로 코드 수정
AI 통합 에디터
🤖
Claude Code
터미널 AI 에이전트
큰 작업 통째 위임
🐙
GitHub Copilot
타이핑 자동완성
모든 에디터 지원
14 / 14
🚀

다음 세션
Session 14 · Git이란?

에디터로 코드를 작성했다면, 이제는 변경 내역을 저장하고 되돌리는 시스템이 필요하다.
실수로 지운 코드를 복구하고, 동료와 협업할 수 있게 해주는 Git의 기초를 배운다.

💡 기억할 것: 에디터는 더 이상 글쓰기 도구가 아니다 — AI와 함께 일하는 작업 환경이다.

슬라이드 목록