성남 분당경영고등학교에서 진행한 웹사이트 제작 수업.
성남 분당경영고등학교에서 문법을 한 줄도 가르치지 않고 웹사이트를 만드는 수업을 했습니다.
학생이 만들고 싶은 것을 말로 설명하면 AI가 코드를 만들고, 브라우저에서 바로 열어 확인합니다. 마음에 안 들면 다시 설명해서 고칩니다. 흔히 바이브코딩이라고 부르는 방식이에요.
수업을 해 보면 학생이 막히는 자리가 완전히 옮겨 갑니다. 예전에는 세미콜론 하나 빠져서 멈췄는데, 지금은 자기가 뭘 만들고 싶은지 설명하지 못해서 멈춥니다.
운영 개요
학교 · 분당경영고등학교 (학급 단위, 최소 20명)
주제 · 생성형 AI 웹사이트 제작 · 요구사항 정리 · 화면 구조 설계
시간 · 2차시 80분 또는 3차시 120분
장소 · 일반 교실 (1인 1PC 또는 태블릿 필요)
첫 20분은 코드를 안 씁니다
수업을 열면 바로 AI에게 말을 걸고 싶어 합니다. 그런데 그렇게 시작하면 대부분 “멋진 웹사이트 만들어 줘”라고 칩니다. 그리고 나온 결과를 보고 실망합니다.
그래서 앞부분은 종이에 씁니다. 무엇을 소개하는 사이트인지, 누가 보는지, 화면에 무엇이 있어야 하는지 세 가지를요.
이 종이가 곧 요구사항 명세입니다. 용어는 나중에 알려 줍니다. 먼저 해 보고 나중에 이름을 붙이는 순서가 이 수업에서는 잘 맞았습니다.
만들고 싶은 화면을 말로 정리하는 단계.
한 번에 하나씩 말하기
학생들이 가장 많이 하는 실수는 하고 싶은 걸 한 번에 다 말하는 것입니다. 색깔도 바꾸고 버튼도 넣고 사진도 넣어 달라고 한꺼번에 시키면 결과가 엉킵니다.
그래서 규칙을 하나 줍니다. 한 번에 하나만 바꾼다. 바꾸고 확인하고, 마음에 들면 다음으로 갑니다.
이 규칙을 지키기 시작하면 진도가 눈에 띄게 빨라집니다. 그리고 이건 코딩만의 규칙이 아니에요. 무엇이 결과를 바꿨는지 알 수 있게 하나씩 바꾼다는 건 실험의 기본이기도 합니다.
한 번에 하나씩 바꿔 가며 결과를 확인합니다.
망가졌을 때 어떻게 하나
반드시 한 번은 망가집니다. 잘 되던 화면이 어느 순간 하얗게 비거나 배치가 무너집니다.
여기서 두 가지를 가르칩니다. 첫째, 되돌릴 수 있게 남겨 두기. 잘 되던 상태를 따로 저장해 두면 언제든 돌아올 수 있습니다.
둘째, 증상을 그대로 설명하기. “안 돼요”가 아니라 “버튼을 눌렀는데 아무 반응이 없어요”라고 말해야 고쳐집니다. 이건 AI에게만 해당하는 게 아니라 나중에 어느 팀에 들어가도 똑같이 필요한 능력이라고 짚어 줍니다.
문제가 생겼을 때 증상을 그대로 설명해 보는 연습.
어디까지 되고 어디부터 안 되나
학생들이 꼭 묻습니다. 이렇게 만든 게 진짜 쓸 수 있는 거냐고요. 저희는 솔직하게 선을 그어 줍니다.
됩니다. 자기 소개 사이트, 동아리 소개 페이지, 행사 안내 페이지, 아이디어를 보여 주는 화면 정도는 충분히 나옵니다.
아직 어렵습니다. 회원 정보를 저장하고 결제가 오가는 서비스는 다릅니다. 보안과 데이터 관리가 붙는 순간 사람이 아는 만큼만 안전해집니다.
이 선을 분명히 해 두면 학생이 기술을 과대평가하지도, 과소평가하지도 않습니다. 도구의 한계를 아는 것도 실력이라고 말합니다.
브라우저에서 실제로 열리는 화면을 확인합니다.
수업이 끝나고 남는 것
결과물은 링크 하나로 남습니다. 그런데 저희가 더 중요하게 보는 건 학생이 쓴 요청 기록입니다.
처음에 뭉뚱그려 썼던 문장이 뒤로 갈수록 구체적으로 바뀌어 있어요. 그 변화가 이 수업의 실제 성과입니다. 화면 하나를 붙잡고 여러 번 설명을 고쳐 본 시간이 거기 쌓여 있습니다.
경영·상경 계열 학과가 있는 학교라면 여기서 한 걸음 더 나갑니다. 만든 페이지를 놓고 누구에게 어떻게 알릴 것인가까지 이어 붙이면 그대로 창업 아이디어 수업이 됩니다.
기술보다 기획에 시간을 더 쓰게 되는 구간.
서로의 화면을 보며 아이디어를 주고받습니다.
담당 선생님이 자주 묻는 것
Q. 정보 교과를 안 배운 반도 되나요?
됩니다. 오히려 문법을 모르는 반이 선입견 없이 시작합니다. 이 수업에서 필요한 건 타자 속도가 아니라 자기가 원하는 걸 말로 정리하는 힘입니다.
Q. 잘하는 학생과 처음인 학생 차이가 크지 않나요?
큽니다. 그래서 기본 과제와 추가 과제를 나눠 둡니다. 빨리 끝낸 학생에게는 화면을 하나 더 붙이거나 다른 기기에서 어떻게 보이는지 확인하는 과제를 줍니다.
Q. 학교 컴퓨터에 설치할 게 있나요?
브라우저만 있으면 됩니다. 다만 사이트 접속이 막혀 있는 경우가 있어 사전에 확인이 필요합니다. 미리 알려 주시면 대체 도구로 구성합니다.
Q. 만든 사이트는 계속 볼 수 있나요?
학교 방침에 따라 다르게 잡습니다. 수업 안에서만 확인하고 끝내는 구성, 링크를 남겨 학생이 이어 가는 구성 둘 다 가능합니다.
프로그램 문의 · 출강 일정 확인
선생님, 아래 세 가지만 알려주시면 프로그램 제안서와 견적을 보내드립니다.
1. 대상 학년과 인원
2. 희망 일정과 차시
3. 실습 공간 여건 (교실 형태, 컴퓨터실 여부, 콘센트)
전화 · 070-8064-0829
메일 · hyedu0829@gmail.com (제안서·견적 요청은 메일이 빠릅니다)
프로그램 목록 · https://hyedu.kr/ko/programs
한양미래연구소 · 경기도 안산시 상록구 한양대학로 55 창업보육센터 204호
