분당경영고등학교에서 진행한 생성형 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호
