VS Code 첫 강의 — 유튜브 대본
예상 길이: 25~35분
대상: 완전 입문자
목표: 설치 → Hello World 완성
범례
| 태그 | 의미 |
|---|---|
| 🎬 화면 행동 | 실제로 마우스/키보드를 움직이는 시점 |
| 🎙️ 내레이션 | 말하면서 설명하는 구간 |
| 💡 포인트/팁 | 강조 멘트, 컷 전환 시 자막 넣기 좋음 |
| 💻 코드 | 화면에 직접 타이핑하는 부분 |
인트로 · 오프닝 & 채널 소개 0:00 – 1:30
🎙️ 내레이션
안녕하세요! 이 채널에서는 코딩을 전혀 몰라도 따라올 수 있도록, 맨 처음부터 차근차근 알려드립니다. 오늘은 그 첫 번째 시간으로 VS Code 설치부터 Hello World 출력까지 함께 해볼게요.
💡 포인트
이 영상 하나로 VS Code가 뭔지, 어떻게 쓰는지, 그리고 AI 코딩과 어떻게 연결되는지까지 감을 잡으실 수 있습니다.
01 · VS Code란? — 설치하면서 설명하기 1:30 – 8:00
🎬 화면 행동
브라우저에서 code.visualstudio.com 접속 → Download 버튼 클릭 → 설치 파일 실행
🎙️ 내레이션
VS Code, 풀네임은 Visual Studio Code입니다. 마이크로소프트가 만들었고, 무료에 오픈소스입니다. 전 세계 개발자의 약 70%가 쓰는 에디터예요.
에디터란 코드를 쓰는 메모장이라고 생각하시면 돼요. 근데 일반 메모장과 달리, 코드를 색깔로 구분해주고, 자동완성도 되고, AI 도구도 연결할 수 있어요.
🎬 화면 행동
설치 마법사 ‘다음’ 누르는 화면 — 각 단계마다 아래 설명 삽입
🎙️ 설치 단계별 멘트
- 📌 동의 화면: 라이선스 동의하고 다음 누릅니다.
- 📌 설치 위치: 기본값 그대로 두세요. 건드리지 않아도 됩니다.
- 📌 추가 작업 선택: 여기서 ‘PATH에 추가’는 꼭 체크해두세요. 나중에 터미널에서
code명령어를 쓸 수 있게 해줍니다. - 📌 설치 완료: ‘지금 Visual Studio Code 실행’ 체크하고 마침!
💡 왜 VS Code인가?
무료니까요. 그리고 GitHub Copilot, Cursor, Claude 같은 AI 코딩 도구들이 모두 VS Code 위에서 돌아갑니다. 지금 배우는 이 에디터가 AI 코딩의 기반이 됩니다.
02 · 워크스페이스 열기 (폴더 열기) 8:00 – 11:00
🎙️ 내레이션
VS Code를 켜면 빈 화면이 나옵니다. VS Code는 ‘폴더 단위’로 프로젝트를 관리해요. 파일 하나를 여는 것보다, 폴더 전체를 여는 것이 훨씬 강력합니다.
🎬 화면 행동
바탕화면에 my-first-project 폴더 생성 → VS Code에서 File > Open Folder → 폴더 선택
🎙️ 내레이션
이 폴더가 바로 우리의 워크스페이스입니다. 앞으로 만드는 모든 파일이 이 안에 저장될 거예요.
💡 팁
Ctrl+K, Ctrl+O (맥은 Cmd) 단축키로도 폴더를 열 수 있어요. 자주 쓰게 될 거니까 익혀두세요!
03 · 화면 구성 & 왼쪽 메뉴바 소개 11:00 – 15:00
🎙️ 내레이션
VS Code 화면을 크게 보면 왼쪽 사이드바 / 가운데 편집창 / 아래 터미널로 나뉩니다. 왼쪽 세로 아이콘 바를 하나씩 살펴볼게요.
🎬 화면 행동
각 아이콘 클릭하며 설명
🎙️ 각 아이콘 설명
| 아이콘 | 이름 | 역할 |
|---|---|---|
| 📁 | 탐색기 (Explorer) | 폴더와 파일 목록. 가장 많이 씁니다. |
| 🔍 | 검색 (Search) | 프로젝트 전체에서 단어 검색. |
| 🔀 | 소스 제어 (Source Control) | Git 연동. 다음 강의에서 자세히 다룹니다. |
| 🧩 | 확장 (Extensions) | 플러그인 설치. 오늘 직접 써볼 거예요. |
| 🐞 | 실행 및 디버그 | 코드 실행과 오류 추적. |
| ⚙️ | 설정 (기어 아이콘) | 테마, 폰트, 단축키 등 커스터마이징. |
04 · 탐색기 & README.md 만들기 15:00 – 21:00
🎙️ 내레이션
탐색기 아이콘을 클릭하면 우리가 연 폴더 내용이 보입니다. 파일을 만들어볼게요.
🎬 화면 행동
탐색기 패널에서 새 파일 아이콘 클릭 → README.md 입력 → Enter
🎙️ 내레이션
README.md를 만들었어요. 여기서 .md 확장자는 Markdown 형식이라는 뜻입니다. Markdown은 간단한 기호로 문서를 예쁘게 꾸밀 수 있는 형식이에요.
💻 README.md 입력 예시
# 나의 첫 프로젝트
이 프로젝트는 VS Code 학습을 위해 만들었습니다.
## 사용 기술
- HTML
- JavaScript
## 시작하는 방법
1. 이 폴더를 VS Code로 열기
2. index.html 파일 실행🎬 화면 행동
Ctrl+Shift+V 로 Markdown 미리보기 오픈
🎙️ 내레이션
Markdown이 실시간으로 렌더링되는 걸 보셨죠?
| 기호 | 의미 |
|---|---|
# | 제목 (H1) |
## | 소제목 (H2) |
- | 목록 |
1. | 순서 있는 목록 |
💡 AI 코딩에서 Markdown이 중요한 이유
- ChatGPT, Claude, GitHub Copilot 같은 AI 도구들은 모두 Markdown으로 답변합니다.
- AI에게 지시문(프롬프트)을 줄 때 Markdown 형식으로 구조화하면 훨씬 정확한 결과를 얻어요.
- GitHub에서 프로젝트 첫 화면에 보이는 설명이 바로 이
README.md입니다. - AI가 내 프로젝트를 이해하려면 README부터 읽거든요.
05 · Git — 다음 강의 예고 21:00 – 22:30
🎙️ 내레이션
왼쪽 메뉴에 소스 제어 아이콘이 있죠? 이게 Git과 연결된 버튼입니다. Git은 쉽게 말해 코드의 **‘저장 이력 관리 시스템’**이에요. 언제 무엇을 바꿨는지 기록하고, 실수해도 이전 상태로 되돌릴 수 있습니다.
💡 다음 영상 예고
Git은 내용이 많아서 다음 강의에서 전용으로 다룰 예정입니다. Git 설치부터 GitHub 연동까지 한 번에 정리해드릴게요. 지금은 ‘이런 버튼이 있구나’ 정도만 알고 넘어가세요!
06 · Extension — 한국어 팩 설치해보기 22:30 – 26:00
🎙️ 내레이션
확장(Extension)은 VS Code에 기능을 추가하는 플러그인이에요. 마켓플레이스에 수만 개가 있습니다. 직접 설치해볼게요.
🎬 화면 행동
왼쪽 확장 아이콘(네모 4개) 클릭 → 검색창에 korean 입력
🎙️ 내레이션
Korean Language Pack for Visual Studio Code가 보이시죠? Microsoft가 공식으로 제공하는 한국어 팩이에요. Install 클릭합니다.
🎬 화면 행동
Install 클릭 → 우측 하단 ‘재시작’ 팝업 → Restart 클릭
🎙️ 내레이션
재시작하면 VS Code 메뉴가 한국어로 바뀐 걸 볼 수 있어요. Extension 하나만으로 인터페이스 전체가 바뀌었습니다. 이처럼 Extension으로 AI 도구, 테마, 코드 검사기 등도 추가할 수 있어요.
💡 추천 Extension (맛보기)
| Extension | 역할 |
|---|---|
| Prettier | 코드 자동 정렬 |
| ESLint | 자바스크립트 오류 검출 |
| GitHub Copilot | AI 자동완성 |
| Material Icon Theme | 파일 아이콘을 예쁘게 |
07 · Hello World + AI 코딩을 위한 기초 26:00 – 34:00
🎙️ 내레이션
드디어 코드를 써볼 시간입니다! 탐색기에서 새 파일 → index.html 이라고 이름 짓겠습니다.
🎬 화면 행동
index.html 생성 → 파일 열기 → ! 입력 후 Tab 키
🎙️ 내레이션
느낌표 하나 치고 Tab을 누르면 HTML 기본 구조가 자동으로 생성됩니다. 이게 바로 Emmet이라는 VS Code 내장 기능이에요.
💻 완성할 index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나의 첫 웹페이지</title>
</head>
<body>
<h1>Hello, World! 🌍</h1>
<p>VS Code로 만든 첫 번째 페이지입니다.</p>
</body>
</html>🎬 화면 행동
파일 저장 (Ctrl+S) → 파일 탐색기에서 index.html 더블클릭하여 브라우저로 열기
🎙️ 내레이션
브라우저에 ‘Hello, World!’가 나왔나요? 축하드립니다, 첫 번째 웹페이지를 만드셨습니다!
💡 AI 코딩 연결 포인트
이제 이 파일을 ChatGPT나 Claude에 붙여넣고 “여기에 버튼 추가해줘” 라고 하면 AI가 코드를 바로 써줍니다.
VS Code를 알아야
- AI가 써준 코드를 어디에 붙여넣는지
- 어떻게 저장하고 실행하는지
알 수 있어요. 오늘 배운 것이 AI 코딩의 진짜 기초입니다.
아웃트로 · 마무리 & 다음 영상 예고 34:00 – 35:00
🎙️ 내레이션
오늘은 VS Code 설치부터 Hello World까지 함께 해봤습니다. 정리하면:
- ✅ VS Code가 뭔지 알았고
- ✅ 폴더로 프로젝트를 여는 법
- ✅ 화면 구성 파악
- ✅ Markdown 파일 만들기
- ✅ Extension 설치
- ✅ 첫 HTML 파일 작성까지 마쳤습니다!
💡 다음 영상 예고
다음 영상에서는 Git을 다룹니다. 코드를 저장하고, GitHub에 올리고, AI 도구와 연동하는 법까지 알려드릴게요.
구독과 좋아요 잊지 마세요! 댓글로 질문 남겨주시면 답변드리겠습니다. 😊
촬영 전 체크리스트
- VS Code 미리 다운로드만 해두기 (설치는 영상 중에)
- 바탕화면 깔끔하게 정리
-
my-first-project폴더 미리 만들지 말 것 (영상 중에 직접 생성) - 브라우저 탭 최소화
편집 포인트
- 설치 진행 바 기다리는 구간 → 2배속 or 컷
- README 타이핑 구간 → 자막 + 완성본 보여주기로 간결하게
구성 요약 및 촬영 팁 몇 가지:
색 구분 의미
- 🟡 화면 행동 — 실제로 마우스/키보드 움직이는 시점
- 🟢 내레이션 — 말하면서 설명하는 구간 (기울임체)
- 🔴 포인트/팁 — 강조 멘트, 컷 전환 시 자막 넣기 좋음
- ⬜ 코드 — 화면에 직접 타이핑하는 부분
촬영 전 준비 체크리스트
- VS Code 미리 다운로드만 해두고 설치는 영상 중에 (설치 중 대기 시간이 길면 편집으로 컷)
- 바탕화면 깔끔하게 정리
my-first-project폴더 미리 만들지 말고 영상 중에 직접 생성- 브라우저 탭 최소화 (집중도 ↑)
편집 포인트
- 설치 진행 바 기다리는 구간 → 2배속 or 컷
- README 타이핑 구간 → 자막 + 완성본 보여주기로 간결하게
좋은 컨셉이네요! 구성을 먼저 정리하고, 그 다음에 실제로 AI한테 물어보면서 복습하는 인터랙티브 앱을 만들어드릴게요.
구성 흐름:
- 강의에서 배운 내용 요약 카드 → 한눈에 정리
- AI 챗봇에게 질문 → AI가 강사처럼 답해주고, 실습 미션도 줌
- 미션 완료 체크 → 다음 챕터로 넘어가는 구조이렇게 만들었어요. 구조를 설명하면:
📋 강의 요약 탭 강의 챕터별로 핵심 포인트를 카드로 정리했고, 각 챕터 하단에 “AI에게 물어보기” 버튼이 있어서 누르면 바로 AI 복습 탭으로 넘어갑니다.
🤖 AI 복습 탭 실제 Claude API가 연결되어 있어서 진짜 AI가 답해줘요. 세 가지 방식으로 쓸 수 있어요.
- 상단에서 챕터를 고르면 그 챕터에 맞는 빠른 질문들이 아래에 뜸
- 빠른 질문 버튼 클릭으로 바로 물어보기
- 직접 타이핑해서 자유롭게 질문
AI가 답변 끝에 항상 🎯 미션을 줘서 “들었으면 직접 해봐라”는 흐름으로 자연스럽게 실습으로 이어지도록 했어요.
영상에서 이 앱을 보여주는 순서로 가면 자연스러울 것 같아요. 강의 봄 → 요약 탭으로 정리 → AI한테 모르는 거 물어봄 → 미션 수행 → 다음 강의로!