Vscode & Vibe Coding

2025년 11월 15일 기준 유스튜디오 양승철 대표님의 AI 웹앱 개발 바이크 보딩 정리 강의 입니다.

Gem을 활용하여 수정한 내용이며, 강의 사이에 개발 실습 플로우가 정리되어 있습니다.

이 내용을 가지고 Domain Knowledge로 활용하여 GPT 혹은 Copilot과 같이 개발을 진행해도 좋습니다.

서울대 교육공학과와 알파코와 함께 개발한 AIMS 프로젝트입니다.

공공 데이터를확인 한 후 , 학교 상황을 파악하고 설문지를 제작하여 학교에서의 문제를 분석합니다.

비정형 데이터 분석 후 이를 '프로그램 혹은 앱'을 활용하여 자동화할 수 있는 방법을 아이디에이션하고 최적의 대안을 찾은 후 설계를 하는 방향의 프로그램입니다. 

마지막으로 발표와 도큐먼트로 공유를 하며 프로젝트를 마무리 합니다.  아래는 AIMS프로젝트에 지도 방향 내용입니다.

2025년8월 30일 서울대학교 교육공학과 및 알파코 연구원들과 함께 중,고등 디지털 교육 프로그램을 AIMS 모형에 근거하여 운영하였다. 12시간 교안 이지만 4시간 30분으로 단축하여 운영하였으며, 최소한의 단계와 최소로 필요한 지식만 도메인 지식으로 교육하고 운영하였다. 

오전 10:30-12:00의 90분수업은 AIMS 모델에 대한 이해 및 GPT 와 Copilot과의 관계, GPT 프롬프트 엔지니어링의 기초, Context와 Instruction과의 관계 등에 대한 실습을 진행하였다. 나아가 Canva 인터페이스 기본 설명 및 Canva Docs를 활용한 포트폴리오 작성 방법에 대한 기초 설명을 진행하였다. Canva 자제 교육 보다는 AIMS 모형 자체의 단계에서 분석(Analyze)과 상상(Imagine)단계에서 우리의 실생활 문제를 분석하고 그 결과를 도출하였으며, 4가지 문제(학교에서 학습 시 소란 스러운 문제, 졸음 방지 책상의 부족 문제, 급식 자리 배정 문제, 학습 시간 컨트롤 문제)로 정리 되었으며, 이를 소프트웨어 적으로 해결할 수 있는 방안을 브레인 스토밍 하고 최적의 대안을 선정하였다.

오후 13:00-15:30까지는 Vibe coding을 위한 환경 세팅을 진행하였다. Vs code설치 및 Github 가입 그리고 Github Copilot의 활용방법에 대한 이해를 진행하였다. 나아가 Vscode에 대한 기초적인 구조 설명 이해하는 시간을 갖었다.

오후 15:30-16:00까지 실제 Vibe coding에 대한 의미 이해 및 Github Copilot을 Vs code와 연동하여 코딩을 진행하였다. 물론, 학생들이 포트폴리오를 작성하며, 바이브 코딩을 통해 실제 해결 가능한 아이디어를 실제화 하는 단계를 거쳤다. 다만 Github Copilot이라는 AI를 튜터로 활용하였으며, 교사는 개발 시 발생하는 특수한 문제 상황을 학생과 함께 해결하는 조력자 역할을 하였다. 아래는 아이들이 제출한 포트폴리오의 결과이다.