바이브 코딩(Vibe Coding) 교사용 인터랙티브 가이드

바이브 코딩의 세계로

이 섹션은 AI 시대의 새로운 코딩 패러다임인 '바이브 코딩'의 기초를 다룹니다. 코딩을 몰라도 자연어로 앱을 만드는 원리, 웹앱의 3요소, 그리고 교실 환경에서 가장 중요한 'NO-API' 원칙을 통해 어떻게 안전하고 효율적인 수업 도구를 만들 수 있는지 이해할 수 있습니다.

💬

사람의 말(Vibe)로 만드는 SW

과거처럼 복잡한 컴퓨터 언어를 밤새워 공부할 필요가 없습니다. 원하는 기능과 디자인을 설명하면, AI가 대신 프로그래밍을 해주는 기적 같은 시대입니다.

⚠️ 제1규칙: 제발 "대충" 시작하세요! 완벽주의는 금물입니다. 대충 만들고 교실에서 써보며 하나씩 고쳐나가는 것이 핵심입니다.

🏫

최강 치트키: NO-API 원칙

외부 서버나 데이터베이스 연결 없이, 브라우저 자체 연산력만 사용하는 100% 오프라인 웹앱을 만드세요.

✔ 교육청 보안망 방화벽 100% 통과
✔ 학생 개인정보 유출 원천 차단
✔ 유료 API 요금 폭탄 및 인증키 에러 방지

웹앱을 이루는 3총사

HTML (뼈대)

웹페이지의 구조와 영역을 나눕니다.

비유: 건물의 기둥과 벽

CSS (디자인)

색상, 폰트, 정렬 등 예쁘게 꾸며줍니다.

비유: 건물의 인테리어와 도색

JavaScript (기능)

버튼 클릭, 연산 등 동적 기능을 만듭니다.

비유: 엘리베이터, 자동문 작동

프롬프트 설계법

이 섹션에서는 AI에게 원하는 결과물을 정확하게 지시하는 방법을 다룹니다. 프론트엔드 핵심 치트키의 원리와 교사의 수준에 맞춘 3단계 프롬프트 성장 사다리, 그리고 복잡한 기획을 AI에게 대신 맡기는 '메타 프롬프팅' 기술을 통해 에러 없는 완벽한 웹앱을 설계할 수 있습니다.

const cheatKeys = [ 'Tailwind', 'Flexbox', ... ];

프론트엔드 치트키 (생략 시 참사)

Tailwind CSS & Flexbox ▼

생략 시: 90년대 윈도우 폴더 창 같은 투박한 버튼, 화면 정렬이 깨져 조잡한 디자인.
포함 시: 알록달록 촌스러운 디자인 대신 유행하는 모던한 카드형 UI와 깔끔한 중앙 정렬 적용. (초보자 최소 생존 세트)

반응형 디자인 (Responsive) ▼

생략 시: 교사 PC에서는 잘 보이지만 학생 스마트폰/태블릿에서는 글자가 찌그러지고 조작 불가능.
포함 시: 디바이스 해상도에 맞춰 화면 비율이 유연하게 변동.

로컬 스토리지 (Local Storage) ▼

생략 시: 새로고침 한 번에 학생의 퀴즈 진행 상황과 점수가 영구 증발하여 교실 민원 폭발.
포함 시: 외부 서버 없이 학생 기기 브라우저 자체에 데이터를 안전하게 보존.

성장 사다리 공식

Level 1 (입문)

RPO 공식

역할-목적-출력. 1분 뚝딱.
Level 2 (일반)

RTCO 공식

역할-작업-제약-출력. 실용적.
Level 3 (정보 교사)

정보 담긴 질문

개념+로직+환경. 명작 앱 창조.

🤖

구원투수: "메타 프롬프팅" (PRD 자동화)

초보자가 복잡한 5W1H나 PRD를 직접 짜는 것은 무리입니다. 대충 쓴 아이디어를 AI에게 주며 "기획서(PRD)부터 대기업 PM 수준으로 짜줘!"라고 시키세요.

STEP 1. 기획 요청

"...내 아이디어를 보고, 버그 없이 완벽한 HTML 코드를 짤 수 있도록 정교한 '제품 요구사항 정의서(PRD)'를 작성해줘.
[아이디어] 중3 정보과, 다익스트라 미로 찾기, API 없이 작동..."

STEP 2. 코드 생성

"방금 작성해 준 [PRD] 요구사항을 100% 완벽하게 구현한 '단일 HTML 파일'을 생성해줘. 디자인은 Tailwind CSS 파스텔 블루 테마로 세련되게 짜줘."

배포 로드맵

완성된 단일 HTML 파일을 학생들에게 전달하는 5가지 방법을 비교합니다. 로컬 파일 전달부터 가장 직관적인 네트리파이(Netlify), 그리고 학교 방화벽에 가장 강력한 클라우드플레어(Cloudflare)까지 상황에 맞춰 선택할 수 있습니다.

배포 플랫폼 성능 비교

각 플랫폼의 특성을 방사형 차트로 확인하세요.

📁 Level 1: 로컬 파일 (.html)

인코딩 UTF-8로 메모장에서 저장. 가장 안전하고 기초적인 오프라인 배포 (방화벽 완벽 회피).

🔗 Level 2: CodePen

코드 복붙으로 즉시 모바일 공유 가능. 일회성 간이 칠판 용도.

초보 추천

☁️ Level 3: Netlify Drop

가입 없이 폴더 드래그로 10초 배포. 매우 쉽지만 무료 트래픽 제한 있음.

대세 추천

☁️ Level 4: Cloudflare Pages

폴더 드래그 업로드. 트래픽 무제한 무료, 학교망 방화벽 우수 통과. 가장 안정적.

🌐 Level 5: GitHub Pages

수행평가/포트폴리오 제출용. 세팅이 약간 복잡하지만 영구적인 공식 호스팅.

🖱️ Cloudflare 드래그 배포 영어 경로 가이드

1. [Workers & Pages] (워커 및 페이지) 사이드바 메뉴 클릭

2. 파란색 [Create] (생성) 버튼 클릭

3. 상단 우측의 [Pages] 탭 클릭

4. [Upload assets] (자산 업로드) 박스 클릭

5. "Drag and drop your folder here" 영역에 index.html이 든 폴더 떨구기

정보 교과 특화 5선

외부 API 통신 없이, 오직 브라우저 내부 자바스크립트의 연산력(Local JS)으로만 작동하여 학교 방화벽을 뚫고 안전하게 구동되는 중학생 수준의 컴퓨팅 사고력(CT) 탐구 프로젝트 아이디어입니다.

자료와 정보

🎴

2진수-10진수 인터랙티브 카드

8비트 전구 스위치를 마우스로 켜고 끄며 10진수 계산 원리를 시각적으로 이해.

정보 보안

🔐

비밀번호 복잡도 안전 분석기

입력한 비밀번호의 길이/특수문자 등을 로컬에서 조건 체크하여 크랙 예상 시간 계산.

알고리즘

📊

정렬 알고리즘 눈으로 보는 도구

버블 정렬, 선택 정렬 시 데이터가 교환(Swap)되는 과정을 애니메이션 막대로 시각화.

프로그래밍

🗺️

다익스트라 미로 길찾기

모눈종이 타일에 직접 벽을 그리고, 출발/도착점 간의 최단 경로 탐색을 실험.

인공지능

💬

로컬 미니 텍스트 감정 분석기

외부 거대언어모델(LLM) API 없이, 학생이 직접 긍정/부정 단어 사전을 구축해 기초 NLP 분류 원리 체험.

핵심 로직: JS 배열에 단어를 넣고, 입력된 문장(String)에서 includes()로 매칭 카운트하여 백분율 점수 산출.

시각화: 결과 점수에 따라 중앙 에모지의 표정이 JS로 실시간 변경.