Luna Whale AI Web Class · Web Intro 01

웹페이지란 무엇인가 Web Page

Big Idea

웹페이지는 인터넷에 떠 있는 그림 한 장이 아닙니다. 주소를 입력하면 브라우저가 서버에서 HTML, CSS, JS, 이미지 파일을 받아 오고, 그 파일을 사람이 읽는 화면으로 그려 줍니다.

Goal웹페이지가 열리는 큰 흐름 말하기

Output브라우저·주소·링크·서버 용어 카드

AI Skill“어떤 파일/링크/화면이 문제인지” 설명하기

Check좋은 웹페이지 3개를 보고 구조 찾기

학생이 노트북 브라우저에서 웹페이지가 열리는 모습을 관찰하는 수업 이미지 — Web Page브라우저 · 화면 · 콘텐츠 · 링크

먼저 그림으로 봅니다

설명 전에 웹페이지가 열리는 흐름과 실제 웹 화면을 먼저 봅니다. 학생은 용어보다 “어디가 주소이고, 어디가 화면인지”를 눈으로 잡습니다.

브라우저와 서버가 파일을 주고받는 웹페이지 흐름도 — Flow Map주소 입력 → 파일 요청 → 화면 표시

Scratch주소, 메뉴, 첫 화면, 버튼이 실제 웹에서 어떻게 보이는지 관찰합니다.

1. 웹페이지는 화면이 아니라 약속입니다

우리가 보는 화면 뒤에는 주소, 파일, 브라우저, 서버라는 약속이 있습니다. 이 약속을 알아야 AI에게 문제를 정확히 설명할 수 있습니다.

주소

웹페이지가 있는 위치입니다. 집 주소처럼 브라우저가 찾아갈 곳을 알려 줍니다.

브라우저

Chrome, Safari처럼 웹 주소를 열고 파일을 화면으로 보여 주는 앱입니다.

서버

웹 파일을 보관하고, 누군가 요청하면 보내 주는 컴퓨터입니다.

2. 주소를 입력하면 무슨 일이 생길까요?

학생에게는 “주소를 넣는다 → 파일을 요청한다 → 파일을 받는다 → 화면으로 그린다” 네 단계로 설명합니다.

웹페이지 요청과 응답 흐름 — Request & Response찾아가기, 요청하기, 받아오기, 보여주기

교사용 설명 문장

“브라우저는 주소를 보고 서버에게 ‘이 페이지에 필요한 파일을 보내 주세요’라고 요청합니다. 서버가 HTML, CSS, JS, 이미지 파일을 보내면 브라우저가 그 파일을 조립해서 우리가 보는 화면으로 보여 줍니다.”

3. HTML · CSS · JS는 역할이 다릅니다

처음부터 코드를 외우지 않습니다. 세 파일이 무슨 일을 하는지만 구분합니다.

HTML

제목, 문단, 이미지, 버튼처럼 페이지에 들어갈 내용을 정합니다.

CSS

글자 크기, 색, 간격, 카드 배치처럼 보이는 모양을 정합니다.

JavaScript

탭 전환, 버튼 클릭, 필터처럼 화면의 행동을 정합니다.

4. 링크는 다른 페이지로 가는 문입니다

웹은 한 페이지가 아니라 페이지들이 링크로 이어진 공간입니다. 링크가 깨지면 방문자는 길을 잃습니다.

애매한 설명

“버튼이 안 돼요.” AI는 어떤 버튼인지, 어디로 가야 하는지 알 수 없습니다.

정확한 설명

“상단의 ‘작품 보기’ 버튼을 누르면 gallery.html로 이동해야 하는데 아무 변화가 없습니다.”

5. 웹페이지는 섹션으로 읽습니다

처음 보는 페이지도 첫 화면, 소개, 카드 목록, 갤러리, 문의처럼 큰 덩어리로 나누어 읽으면 이해가 빨라집니다.

첫 화면

방문자가 들어오자마자 보는 제목, 한 줄 설명, 대표 이미지, 주요 버튼입니다.

본문 섹션

특징, 수업 내용, 작품 목록, 가격, 질문 같은 정보를 순서대로 보여 줍니다.

마지막 행동

신청하기, 문의하기, 다음 페이지 보기처럼 방문자가 할 일을 알려 줍니다.

6. 실제 웹을 보며 구조를 찾습니다

게임 사이트, 교육 사이트, 작품 갤러리 사이트를 보며 첫 화면과 섹션 흐름을 관찰합니다.

Scratch처음 배우는 학생에게 친숙한 창작 커뮤니티 구조를 봅니다.

Nintendo게임 소개 페이지가 이미지, 제목, 버튼을 어떻게 쓰는지 봅니다.

Google Arts & Culture교육적 콘텐츠도 이미지와 이야기로 흥미롭게 보여 줄 수 있습니다.

7. 좋은 웹페이지는 처음 온 사람을 돕습니다

초심자는 “멋진 화면”보다 “어디를 봐야 하는지 알 수 있는 화면”을 먼저 배워야 합니다.

좋은 첫 화면

무슨 페이지인지 3초 안에 알 수 있습니다.
중요한 버튼이 너무 작지 않습니다.
이미지가 내용을 설명합니다.
다음에 읽을 섹션이 살짝 보입니다.

어려운 첫 화면

제목이 추상적이라 무슨 내용인지 모릅니다.
버튼이 많아서 무엇을 눌러야 할지 모릅니다.
이미지가 어둡거나 잘려 내용을 확인하기 어렵습니다.
모바일에서 글자가 겹칩니다.

8. AI에게 웹 문제를 말하는 법

AI 웹 제작 수업의 핵심은 코드를 많이 외우는 것이 아니라, 문제 위치와 원하는 상태를 정확히 말하는 것입니다.

지금 index.html 첫 화면에서 제목은 보이지만 버튼이 너무 작아.
방문자는 초등학생과 부모님이야.
모바일 390px 화면에서도 버튼을 손가락으로 누르기 쉽게 키워줘.
버튼이 제목이나 이미지와 겹치지 않게 간격도 같이 조정해줘.
수정 후 데스크톱과 모바일에서 가로 스크롤이 생기지 않는지 확인해줘.

9. 공식 자료로 기준을 확인합니다

화면이 바뀌어도 기본 개념은 같습니다. 브라우저, HTML 구조, 접근성은 공식 학습 자료로 기준을 잡습니다.

MDN · Your First Website웹사이트를 이루는 기본 파일과 흐름을 배우는 입문 자료입니다. web.dev · Learn HTMLHTML이 웹페이지의 구조를 만드는 방법을 공식적으로 정리한 자료입니다. W3C WAI · Accessibility모든 사람이 읽을 수 있는 웹을 만드는 기본 기준입니다.

10. 오늘의 작은 과제

오늘은 코드를 만드는 것보다 웹페이지를 설명하는 말을 만드는 것이 중요합니다.

수업 중 활동

내가 자주 보는 웹사이트 주소 쓰기

그 페이지의 첫 화면 제목 찾기

링크 또는 버튼 2개 찾기

HTML·CSS·JS 역할 한 줄로 설명하기

집에서 글쓰기

내가 만들고 싶은 웹페이지 주제

누가 보는 페이지인지

방문자가 가장 먼저 알아야 할 것

꼭 들어가야 할 이미지나 버튼