분당경영고등학교에서 진행한 생성형 AI 활용 웹사이트 제작 수업.
경기 성남 분당경영고등학교에서 제미나이로 반응형 웹사이트를 만드는 수업 을 했습니다.
반응형이라는 말이 어렵게 들리지만, 학생들에게는 한 문장으로 설명합니다.
같은 페이지를 PC로 볼 때와 휴대폰으로 볼 때 화면이 알아서 바뀌는 것 이요.
학생들은 이미 그런 사이트만 보고 자랐기 때문에 무엇을 만드는지는 금방 이해합니다.
문제는 그다음이었어요.
예전 같으면 CSS를 먼저 몇 시간 배워야 화면 하나가 겨우 나왔습니다.
2차시로는 아무것도 못 만들고 끝났고요.
그래서 이 수업은 코드를 짜는 시간이 아니라 무엇을 만들지 정하는 시간 으로 구성을 바꿨습니다.
운영 개요
“학교 · 분당경영고등학교 (학급 단위, 최소 20명) 주제 · 생성형 AI로 반응형 웹페이지 기획하고 구현하기 시간 · 2차시 80분 또는 3차시 120분 장소 · 일반 교실 (1인 1PC 또는 태블릿 필요)
”
먼저 종이에 화면을 그린다
수업은 컴퓨터를 켜지 않고 시작합니다.
어떤 사이트를 만들 것인지 종이에 먼저 적게 합니다.
누구에게 보여줄 것인지, 첫 화면에 무엇이 있어야 하는지, 아래로 내리면 무엇이 나오는지.
이 세 가지만 적으면 됩니다.
동아리 소개, 좋아하는 게임 소개, 학교 축제 안내 같은 주제가 많이 나왔어요.
이 단계를 건너뛰면 수업이 무너집니다.
AI에게 "웹사이트 만들어 줘"라고만 치면 어떤 것이든 나오는데, 나온 것을 보고도 이게 맞는지 틀린지를 판단할 기준이 없기 때문 입니다.
종이에 적어 둔 것이 그 기준이 됩니다.
무엇을 만들지 먼저 정하고 나서 도구를 켭니다.
요청을 문장으로 바꾸는 연습
기획이 끝나면 그것을 제미나이에게 전달할 문장으로 바꿉니다.
이게 이 수업에서 가장 오래 걸리는 부분이에요.
"멋있게 만들어 줘"는 아무것도 아닙니다.
"위쪽에 메뉴 네 개, 그 아래 큰 사진 하나, 화면이 좁아지면 메뉴가 세 줄 아이콘으로 바뀌게" 정도로 적어야 원하는 것이 나옵니다.
학생들은 여기서 한 번 막힙니다.
머릿속에는 그림이 있는데 문장으로 옮기려니 안 나오거든요.
그래서 종이에 그린 것을 옆에 두고 손가락으로 짚어 가며 문장을 만들게 합니다.
내가 아는 것을 남에게 설명하는 훈련 이 되는 자리입니다.
원하는 화면을 문장으로 옮기는 데 시간이 가장 많이 걸립니다.
브라우저 창을 좁혀 보는 순간
코드가 나오면 바로 브라우저에 띄웁니다.
그리고 창 가장자리를 잡아 좁혔다 넓혔다 해 보게 합니다.
여기서 반응형이 무엇인지 설명이 필요 없어집니다.
가로로 나란히 있던 상자들이 좁아지면서 세로로 쌓이는 것을 눈으로 보거든요.
되던 것이 안 되는 경우도 있는데, 그것도 그대로 보여 줍니다.
글자가 화면 밖으로 삐져나가거나 사진이 찌그러지거나요.
이 어긋난 화면을 고치는 것이 두 번째 과제입니다. 무엇이 잘못됐는지 다시 문장으로 적어 요청하면 고쳐진 코드가 옵니다.
이 왕복을 서너 번 하고 나면 학생들이 요청을 훨씬 구체적으로 쓰기 시작해요.
창을 좁혀 보면 반응형이 무엇인지 바로 알게 됩니다.
한 번에 되는 경우는 없고, 고치는 왕복이 수업의 절반입니다.
코드를 안 읽고 넘어가지는 않습니다
받은 코드를 그냥 붙여 넣고 끝내면 남는 것이 없습니다.
그래서 숫자 하나를 일부러 바꿔 보게 합니다.
화면이 몇 픽셀보다 좁아지면 배치를 바꾸라는 조건이 코드 안에 들어 있는데, 그 숫자를 크게도 해 보고 작게도 해 봅니다.
그러면 세로로 쌓이는 시점이 앞뒤로 움직여요.
문법을 다 아는 것은 아닙니다.
다만 이 코드의 어느 자리가 무엇을 담당하는지 는 알게 됩니다.
상업계 고등학교 학생들에게는 이 정도가 적당한 깊이였어요.
전부 이해시키려다 아무도 못 따라오는 것보다 낫습니다.
숫자 하나를 바꿔 보면 그 줄이 무엇을 하는지 알게 됩니다.
기획한 대로 나왔는지 처음 그린 종이와 대조합니다.
수업 끝에는 서로의 페이지를 열어 봅니다.
담당 선생님이 자주 묻는 것
Q.
HTML을 배운 적 없는 반도 되나요?
됩니다.
이 수업은 문법 학습이 목적이 아니라 기획한 것을 화면으로 만들어 보는 것 이 목적입니다.
태그를 몰라도 진행에 지장이 없습니다.
다만 정보 계열 학과라면 코드 읽는 비중을 늘려 잡습니다.
Q.
학교 계정으로 AI 도구를 못 쓰는데요.
학교마다 접근 제한이 다릅니다.
미리 알려 주시면 그 환경에서 쓸 수 있는 도구로 바꿔서 준비합니다. 사전 점검 때 확인하는 항목 중 하나예요.
Q.
만든 사이트를 인터넷에 올릴 수 있나요?
차시가 넉넉하면 배포까지 넣습니다.
2차시로는 화면 완성까지가 현실적이고, 3차시면 실제 주소로 열어 보는 것까지 갑니다.
프로그램 문의 · 출강 일정 확인
선생님, 아래 세 가지만 알려주시면 프로그램 제안서와 견적을 보내드립니다.
1.
대상 학년과 인원
2.
희망 일정과 차시
3.
실습 공간 여건 (교실 형태, 컴퓨터실 여부, 콘센트)
“전화 · 070-8064-0829 메일 · hyedu0829@gmail.com (제안서·견적 요청은 메일이 빠릅니다) 프로그램 목록 · https://hyedu.kr/ko/programs 한양미래연구소 · 경기도 안산시 상록구 한양대학로 55 창업보육센터 204호
”
