Vscode & Vibe Coding
-스마트 테블릿으로 하는 바이브 코딩 in 2025-
-스마트 테블릿으로 하는 바이브 코딩 in 2025-
🍀 스마트 테블릿으로 바이브 코딩(Vibe coding)을 연습하는 방법
바이브 코팅이란?: 바이브 코딩(Vibe Coding)은 음악의 리듬과 감각을 활용해 코딩을 직관적이고 창의적으로 배우는 방식을 의미합니다. 즉, 단순한 문법 학습을 넘어 코딩을 하나의 예술적 경험으로 연결하는 접근법입니다. 창의적인 자신만의 흐름을 AI LLM을 사용하여 프로그램 및 앱을 설계하는 것입니다.
스마트 테블릿으로 바이브 코딩을 하기 위해서는 코드를 스케치할 IDE가 필요하고, 코드 스케치를 도울 AI(LLM 모델)이 필요합니다.
따라서 교육하려는 목적, 교육에 활용할 소프트웨어 언어에 따라서 환경 세팅이 달라질 수 있습니다.
스마트 테블릿으로 바이브 코딩을 체험하기 위해서는 웹 기반 IDE(코드 스케치 툴)이 필요하며, 학생 입장에서 테블릿으로 실행 가능한 AI 모델이 필요합니다.
이번 교육에서는 웹 기반 IDE로 JS Bin을 활용하고, 테블릿으로 실행 가능한 AI모델은 Microsoft Copilot을 활용합니다.
다만, Copilot의 종류는 3가지가 있습니다. 1)Microsoft 개인 계정으로 가입하는 무료 Copilot | 2)학교 교육청에서 발급하는 Microsoft 365라이선스의 MS Copilot Chat 그리고 | 3)Github에서 활용 가능한 Github Copilot이 있습니다.
아래 활동에서는 무료 Github Copilot을 활용하여 HTML 코드를 받아내고, JS bin에서 실행하여 확인하는 방법으로 진행하는 수업을 하였습니다.
Github 가입 후 내부의 Copilot활용
JS bin창을 띄우고 GitHub Copilot에 명령하며 코드 설계
JS bin에 코드 복사하고 프로그램 실행
Github코파일럿에서 코드 설계 요청, 여기서는 Copilot Agent라하여 코드를 잘 설계해주는 AI로 설정되어 있다.
Js bin에서 HTML파일을 실행하면, 왼쪽에 제작한 앱이 실행된다.
테블릿에서 접속해서 AI활용 코드 설계
➡️
JS bin에서 실행
시간 일정 계획표를 만든 학생
알카노이드 게임을 설계한 학생
피카츄 배구 스타일 게임을 설계한 학생
🍀 바이브 코딩 with Android 성찰일지: 도구를 넘어서, 가능성에 대하여
오늘은 학생들과 함께 ‘바이브 코딩’을 주제로 짧은 실습 수업을 진행했다. HTML을 중심으로 한 간단한 게임 만들기였고, 개발 도구로는 JS Bin을 활용하였다. 코딩 환경은 특별할 것 없이 안드로이드 기반의 스마트 테블릿이었고, AI 모델로는 깃허브 코파일럿을 사용하였다.
도구는 단지 수단일 뿐이다. 그러나 그 수단이 어떻게 사용되는가에 따라, 전혀 다른 결과가 도출된다. 나는 이번 수업을 통해 학생들에게 테블릿 PC가 단순한 소비의 기기가 아니라, 창작과 문제 해결의 플랫폼이 될 수 있음을 체험하게 해주고 싶었다.
아이들이 작은 코드를 입력하고, 화면에 떠오른 캐릭터의 움직임에 기뻐하는 모습을 보며 생각했다. 우리가 흔히 말하는 '생산적 활동'이란, 거창한 것이 아닐지도 모른다. 아주 소박한 구현이더라도, 스스로 사고하고, 시도하고, 오류를 수정해보는 그 과정 자체가 이미 가치 있는 배움이기 때문이다.
기술은 늘 중립적이다. 중요한 것은 그것을 통해 무엇을 보여줄 것인가이다. 오늘 내가 전하고 싶었던 메시지는 어쩌면 이것 하나였을지도 모른다. “너희 손에 쥔 이 기계는, 너희의 상상력을 담아낼 수 있는 도구가 될 수 있어.”
그 가능성의 문턱에서, 나는 교사로서 무엇을 가리키고 무엇을 조명해야 하는가를 다시 묻게 된다.
'Peace be with you.'
by Learnmore'