Luna Whale AI Web Class · Web Intro 03

AI는 웹페이지를 어떻게 만들까 3 Layers

Big Idea

AI는 웹페이지를 한 번에 마법처럼 만드는 것이 아니라, 내용을 놓고, 모양을 정하고, 누르면 반응하는 행동을 붙입니다. 초심자는 문법보다 이 세 가지를 나누어 말하는 법을 먼저 배웁니다.

Goal내용·모양·움직임을 구분하기

Output내 웹 요청 3칸 설계표

AI SkillAI에게 세 부분을 나누어 부탁하기

Check버튼 행동과 모바일 조건까지 말했는지 확인

학생이 노트북에서 웹페이지의 내용 디자인 움직임 세 층을 나누어 보는 수업 이미지 — 3 Layers내용 · 모양 · 움직임

먼저 그림으로 봅니다

코드 이름을 외우기 전에, AI가 웹페이지를 만들 때 필요한 요청을 세 묶음으로 나누어 봅니다.

웹페이지가 내용 모양 움직임 세 층으로 만들어지는 모습 — Finished Page세 층이 합쳐져 한 화면이 됩니다

내용 디자인 움직임 요청 카드를 책상 위에 나누어 놓은 모습 — Request CardsAI에게 주기 전에 요청을 나눕니다

1. 오늘은 문법을 외우는 시간이 아닙니다

HTML, CSS, JS라는 이름은 들어도 됩니다. 하지만 오늘의 목표는 문법 암기가 아니라 AI에게 어떤 부분을 부탁할지 정확히 말하는 것입니다.

초심자가 힘든 방식

태그 이름, 속성 이름, 중괄호를 먼저 외우려고 하면 웹 만들기가 갑자기 어려워집니다.

오늘의 방식

“무엇을 넣을지, 어떻게 보일지, 눌렀을 때 무엇이 일어날지”를 먼저 정리합니다.

2. 내용 담당: 무엇을 넣을까요?

AI에게 가장 먼저 말해야 하는 것은 화면에 들어갈 실제 내용입니다. 제목, 설명, 이미지, 카드, 버튼 이름이 여기에 들어갑니다.

제목과 설명

방문자가 3초 안에 무슨 페이지인지 알 수 있게 합니다.

이미지와 카드

작품 사진, 수업 사진, 목록처럼 보여줄 자료를 정합니다.

버튼 이름

“누르기”가 아니라 “수업 신청”, “작품 보기”처럼 행동을 말합니다.

3. 모양 담당: 어떻게 보일까요?

같은 내용도 글자 크기, 색, 간격, 카드 배치에 따라 전혀 다르게 보입니다. AI에게 원하는 분위기를 구체적으로 말해야 합니다.

읽기 쉬운 크기

모니터 수업에서는 작은 글씨가 바로 실패입니다. 제목과 설명을 충분히 크게 요청합니다.

여백과 정렬

내용이 붙어 있으면 답답합니다. 카드 사이와 섹션 사이의 간격을 정합니다.

모바일 모양

컴퓨터에서 3열이어도 휴대폰에서는 1열로 바뀌어야 합니다.

4. 움직임 담당: 누르면 어떻게 되나요?

웹페이지는 보는 것만이 아닙니다. 버튼, 탭, 검색, 슬라이드처럼 사용자가 누르면 반응하는 부분이 있습니다.

버튼 이동

신청 버튼을 누르면 문의 섹션이나 신청 링크로 이동합니다.

탭 전환

게임, 앱, 웹처럼 탭을 누르면 아래 내용이 바뀝니다.

검색과 필터

자료가 많을 때 검색어에 맞는 카드만 보여줄 수 있습니다.

5. 세 가지가 빠지면 AI가 추측합니다

AI가 이상한 결과를 만들 때는 대부분 필요한 정보가 빠져 있어서 마음대로 추측했기 때문입니다.

내용이 빠짐

AI가 가짜 문장과 어울리지 않는 이미지를 채울 수 있습니다.

모양이 빠짐

글씨가 작거나, 카드가 답답하거나, 색이 수업 분위기와 맞지 않을 수 있습니다.

움직임이 빠짐

버튼은 보이지만 눌러도 아무 일도 일어나지 않을 수 있습니다.

6. 나쁜 명령과 좋은 명령

좋은 명령은 길기만 한 문장이 아니라, 필요한 부분이 빠지지 않은 문장입니다.

부족한 말

“내 작품 소개 홈페이지 만들어줘. 예쁘게 해줘.”

나누어 말하기

“내용은 작품 사진 6장과 설명 카드입니다. 모양은 밝고 넓은 갤러리 느낌입니다. 사진 카드를 누르면 큰 이미지가 열리게 해주세요.”

7. AI에게 주는 3칸 공식

수업에서는 어려운 용어보다 이 공식을 먼저 사용합니다. 나중에 HTML, CSS, JS라는 이름과 연결하면 됩니다.

내용:
페이지 제목, 설명 2문장, 이미지 3장, 카드 4개를 넣어줘.

모양:
글자는 크게, 여백은 넓게, 카드는 2열로 보여줘.
모바일에서는 1열로 바꿔줘.

움직임:
작품 보기 버튼을 누르면 갤러리 섹션으로 이동하게 해줘.

8. 이름만 살짝 연결합니다

깊게 외우지는 않습니다. 다만 AI가 말하는 결과를 이해하려면 이름 정도는 알고 있으면 좋습니다.

HTML

내용을 놓는 뼈대입니다. 제목, 문단, 이미지, 버튼이 어디에 있는지 정합니다.

CSS

모양을 정하는 규칙입니다. 색, 크기, 여백, 정렬, 반응형을 맡습니다.

JavaScript

움직임을 붙입니다. 클릭, 검색, 탭 전환, 슬라이드 같은 행동을 맡습니다.

9. 실제 웹에서 세 가지 찾기

좋은 웹사이트를 볼 때 “예쁘다”에서 끝내지 말고 내용, 모양, 움직임을 나누어 관찰합니다.

Khan Academy학습 내용, 버튼, 카드 구성을 봅니다.

Scratch만들기 버튼과 프로젝트 카드 흐름을 봅니다.

NASA Kids어린 학생용 설명과 시각 자료를 봅니다.

10. 실습: 내 페이지를 3칸으로 나누기

오늘은 코드를 쓰지 않습니다. 만들고 싶은 페이지를 내용, 모양, 움직임으로 나누어 적습니다.

내 페이지 주제

예: 반려식물 관찰 기록 웹

누가 볼까요?

무엇을 보여줄까요?

3칸 설계

내용: 제목, 사진, 설명, 카드

모양: 색, 크기, 여백, 배열

움직임: 버튼, 탭, 검색, 이동

11. 숙제: AI에게 줄 요청문 만들기

집에서는 완성 코드를 만들 필요가 없습니다. 다음 시간에 쓸 좋은 요청문을 준비합니다.

숙제 1

내가 만들고 싶은 웹페이지 주제를 하나 고르고, 들어갈 내용 5가지를 적어 옵니다.

숙제 2

그 페이지가 어떤 분위기여야 하는지 색, 글자 크기, 카드 배열, 버튼 행동을 문장으로 적어 옵니다.