Vscode & Vibe Coding
-겨울방학 공유 캠퍼스 바이브 코딩 in 2026-
-겨울방학 공유 캠퍼스 바이브 코딩 in 2026-
🍀 스타터 수업 로직(Logic): 2차시
Microsoft & Google의 2026 빅테크 개발 방향 및 기술 발전 내용 소개(실제 업계 상황, 직업의 변화, 진로와 연결성 설명)
Microsoft 365에 로그인 하여 Copilot 활용 방법 이해
1)Ms Copilot Chat으로 관심 있는 취미 질문하기
2)Ms Copilot Chat으로 URL 분석하기
3)Ms Copilot Chat으로 URL 분석 후 → 발표 PPT로 정리 및 출력 → PPT 디자인 하는 방법 이해하기
MS Copilot Agent 개념이해 및 실습
1)공손한 메세지 에이젼트 제작하며 에이젼트 이름 | 설명 | 지침 작성 방법 실습하기
2)Ms builder Agent 중 Prompt Coach활용하여 지침(Instruction) 출력하기
3)HTML 언어를 기반 바이브 코딩을 위한 HTML 개발자 에이젼트 제작하기
4)Copilot에이젼트(HTML 개발자 에이젼트)를 활용 + 윈도우 메모장 활용하여 HTML 기반 테트리스 기본 게임 제작하기
5)바이브 코딩 개념 및 인공지능을 에이젼트화 하여 사용하면, 모든 사람이 사용하는 인공지능이 다름을 인식하기
🍀 트레이닝 수업 로직(Logic): 3차시
코파일럿 에이젼트 복습하기: 프롬프트 코치 → 에이젼트 개발 → 적용
실습1)HTML 에이젼트 개발 활용 기본 로직 테트리스 게임 실행하기 복습
실습2)HTML 에이젼트 개발 활용 기본 로직 테트리스 게임 플레이 후 디버깅 로직 요청하기 후 적용 방법 연습
실습3)HTML 에이젼트 개발 활용 기본 로직 테트리스 게임 자기 스타일 대로 수정하여 독특한 게임으로 리디자인(추가 코파일럿 활용)
실습2)HTML 에이젼트 개발 활용 유투브 음악 다운로드 프로그램 개발 연습(로직: 링크를 넣으면, Mp3로 추출해주는 프로그램)
제작한 프로그램을 웹페이지로 활용할 수 있는 방법 생각하기
1)Github 로그인 및 메인 인터페이스 설명
2)Github 레포지토리 개념 설명
3)테트리스 게임을 레포지토리에 넣어보기
4)Page 설정하여 정적웹 페이지 생성하기
5)스마트폰에서 플레이 해보기
동일한 과정으로 자율 프로그램 개발하여 Github Page 웹 URL 제시하기
프로그램 발표 및 공유
🍀 트레이닝 수업 로직(Logic): 추가활동
Visual Studio code 및 Python 설치
🍀 바이브 코딩 결과 제출: Github Page
🍀 바이브 코딩 with Window Copilot 활동 사진
로컬에서 .html 확장자로 만들어서 테스팅하는 아이들의 모습,
심플한 개발 도구로 '윈도우에 있는 메모장'을 활용하였다.
로컬용 테트리스는 input으로 키보드를 활용할 수 있지만, 스마트폰은 터치를 해야 하기 때문에
이를 수정하여 스마트폰용으로 최적화하고 배포하는 실습을 진행하였다.
깃허브 페이지 및 Ms 365 코파일럿를 활용하여 스마트폰 인터페이스로 최적화 및 배포
모든 아이들이 기본 테트리스 로직을 바탕으로 다른 인터페이스, 난이도, 디자인의 게임을 설계하는 모습을 볼 수 있다.
🍀 바이브 코딩 with Window Copilot 성찰일지: 마이크로 소프트의 인공지능 Ms 365 Copilot으로 연습하는 바이브 코딩
2026년 겨울, 공유 캠퍼스의 첫 다섯 차시를 열며 나는 한 가지 질문을 생각하였다.
"지식보다 더 중요한 것은 무엇인가?"
학생들에게 단순히 인공지능을 ‘이해시키는 것’이 아니라, 그들과 AI 사이에 변화의 흐름을 이해시키고 싶었다. 그 방법으로 X(과거 트위터)에서 안드레이 카파시(Andrej Karpathy)가 처움 고안한 ‘바이브 코딩’이라는 기법을 택하였다. 인공지능과의 대화는 기계에 명령을 내리는 것이 아니라, 그 흐름 속에 함께 흔들리며 목적을 향해 나아가는 일에 가깝다. 즉, 개발자는 무엇(What)을 만들고 싶은지를 구어체로 말하고, AI가 어떻게(How) 만들지 처리하는 개발 패러다임을 말한다. 결국 인간의 역할은 문제를 정의하고, 맥락을 구성하며, 선택과 수정을 반복하는 것이다.
이번 차시에서는 MS 계정을 기반으로 Office 365와 코파일럿 도구를 활용하였다. 그 과정에서 학생들에게 보편적 LLM과 에이전트화된 AI의 차이를 소개했다. 특히 GPT라는 이름 아래 존재하는 다양한 모델들이 실은 서로 다른 방식으로 우리 삶의 노동을 보조하고 있다는 사실을 강조했다. 에이전트는 도구이자 협업자였고, 학생들 각자의 맥락에서 이 도구를 어떻게 활용할 수 있을지 실험하는 과정은 의미 있었다.
실습에서는 HTML 개발자 에이전트를 활용해 테트리스를 만들고 디버깅하고 다시 설계하게 했다. ‘결과물’이 아닌 ‘방법’을 알려주고 싶었다. 방법을 알게 되면, 비로소 자신의 아이디어를 구현할 수 있기 때문이다. 하나의 정답이 아니라, 수많은 시도와 실패 속에서 각자의 해답을 찾는 그 경험이야말로 살아있는 배움이라 믿었다.
마지막으로 GitHub Pages를 통해 만든 결과물을 세상에 게시해보도록 했다. 이런 과정을 통하여 학생들이 이해했으면 하는 것이 있다. 기술은 결국 흐르고 변한다. 중요한 것은 그 변화를 이해하려는 자세, 그리고 끊임없이 배워가려는 마음이다.
마지막으로, 교사는 정답을 주는 사람이 아니라, 가능성을 여는 사람이어야 한다는 것 느꼈다. 그리고 학생은 지식을 채워 넣는 그릇이 아니라, 의미를 구성하는 존재로서의 교육자 역할이 중요함을 이해하였다.
이러한 흐름 속에서, 나 또한 학생들과 함꼐하며 여전히 배우고 있다.
'Peace be with you.'
by Learnmore'