Luna Whale AI Web Class · Web Intro 02

홈페이지의 기본 재료 Web Blocks

Big Idea

홈페이지는 어려운 코드 덩어리가 아니라 제목, 문단, 이미지, 버튼, 링크, 카드 같은 작은 재료가 모여 만들어집니다. AI에게도 이 재료를 정확히 말해야 원하는 페이지가 나옵니다.

Goal웹페이지 기본 블록 6가지를 구분하기

Output내 홈페이지 재료 목록 1장

AI Skill제목, 이미지, 버튼, 카드 수를 명령하기

Check빈말 대신 실제 콘텐츠를 넣었는지 확인

학생이 노트북에서 웹사이트 화면과 콘텐츠 카드를 배치하는 수업 이미지 — Web Blocks제목 · 이미지 · 버튼 · 링크 · 카드

먼저 그림으로 봅니다

제목, 문단, 이미지, 버튼, 링크, 카드가 실제 화면에서 어디에 놓이는지 먼저 눈으로 확인합니다.

학생이 노트북에서 홈페이지의 제목 이미지 버튼 카드 자료를 배치하는 모습 — Web Blocks제목 · 이미지 · 버튼 · 링크 · 카드

학생이 홈페이지에 넣을 이미지 버튼 링크 카드 자료를 책상 위에 정리하는 수업 이미지

재료 카드 정리화면을 만들기 전에 제목, 이미지, 버튼, 링크, 카드 자료를 먼저 나눕니다.

1. 홈페이지는 재료 목록에서 시작합니다

AI에게 바로 “홈페이지 만들어줘”라고 하지 않고, 페이지에 들어갈 재료를 먼저 모읍니다.

텍스트 재료

제목, 한 줄 설명, 문단, 카드 설명처럼 방문자가 읽는 문장입니다.

시각 재료

대표 이미지, 작품 사진, 아이콘, 배경 이미지처럼 내용을 보여주는 자료입니다.

행동 재료

버튼, 링크, 메뉴처럼 방문자가 누르고 이동하는 부분입니다.

2. 제목은 페이지의 이름표입니다

제목은 멋진 말보다 방문자가 바로 이해하는 말이어야 합니다.

애매한 제목

“새로운 가능성의 시작”처럼 멋있지만 무슨 페이지인지 알기 어렵습니다.

좋은 제목

“초등학생 AI 웹 메이커 수업”처럼 누가, 무엇을 배우는지 바로 보입니다.

3. 문단은 방문자를 도와주는 설명입니다

문단은 길게 쓰는 글이 아니라 방문자가 다음 행동을 이해하도록 돕는 짧은 안내입니다.

좋은 문단 기준

한 문단에 한 가지 내용만 말합니다.
어려운 단어를 줄입니다.
누가 보면 좋은지 알려줍니다.
다음에 무엇을 하면 되는지 연결합니다.

제목 아래에 들어갈 설명을 써줘.
방문자는 초등학생 부모님이야.
수업은 AI에게 명령해 웹페이지를 만드는 수업이야.
너무 광고처럼 쓰지 말고, 2문장으로 쉽게 써줘.

4. 이미지는 내용을 보여주는 증거입니다

이미지는 장식이 아니라 방문자가 내용을 믿고 이해하게 만드는 자료입니다.

대표 이미지

첫 화면에서 페이지의 주제와 분위기를 한 번에 보여줍니다.

설명 이미지

수업 장면, 작품 예시, 과정 화면처럼 설명을 도와줍니다.

이미지 조건

비율, 잘리면 안 되는 부분, 캡션, 대체 텍스트를 같이 정합니다.

5. 버튼은 방문자의 다음 행동입니다

버튼은 예쁜 박스가 아니라 방문자가 무엇을 해야 하는지 알려주는 명령입니다.

버튼 문구 예시

수업 신청하기
작품 갤러리 보기
커리큘럼 다운로드
문의 메시지 보내기

버튼 검사

버튼은 눌렀을 때 어디로 가는지 정해져 있어야 합니다. 모바일에서는 손가락으로 누르기 쉬운 크기여야 합니다.

6. 링크는 페이지 사이의 길입니다

링크가 정확해야 방문자가 길을 잃지 않습니다. AI에게 링크 주소와 버튼 행동을 함께 말합니다.

부족한 말

“버튼 만들어줘.” 어떤 버튼인지, 어디로 가는지 모릅니다.

정확한 말

“작품 보기 버튼을 만들고, 누르면 showcase.html로 이동하게 해줘.”

7. 카드는 반복 정보를 정리합니다

수업 목록, 작품 목록, 상품 목록처럼 비슷한 정보가 반복될 때 카드를 씁니다.

수업 카드

수업명, 대상, 시간, 짧은 설명, 신청 버튼을 담습니다.

작품 카드

이미지, 작품 제목, 만든 사람, 설명, 보기 버튼을 담습니다.

주의

카드가 너무 많으면 복잡해집니다. 처음에는 3개나 4개만 만듭니다.

8. 실제 웹에서 재료를 찾습니다

레퍼런스 사이트를 보며 첫 화면의 제목, 이미지, 버튼, 카드가 어디 있는지 찾습니다.

Khan Academy교육 페이지의 제목, 설명, 학습 버튼을 관찰합니다.

재료 카드 정리제목, 이미지, 링크, 카드가 화면에 들어가기 전 어떤 자료인지 구분합니다.

LEGO이미지와 카드가 상품/콘텐츠를 어떻게 보여주는지 봅니다.

9. AI에게 재료를 주는 명령문

재료가 정리되면 AI는 추측을 줄이고 더 정확하게 만들 수 있습니다.

초등학생 AI 웹 메이커 수업 소개 페이지를 만들어줘.
제목: 초등학생 AI 웹 메이커 수업
한 줄 설명: 코드를 외우기보다 AI에게 정확히 명령해 나만의 웹페이지를 만드는 수업입니다.
대표 이미지: 학생이 노트북으로 웹페이지를 만드는 밝은 교실 장면
버튼: 수업 신청하기, 커리큘럼 보기
카드 3개: 웹 입문, AI 명령법, 작품 발표
모바일에서는 카드가 1열로 쌓이고 버튼은 크게 보여줘.

10. 오늘의 활동

오늘의 결과물은 완성 페이지가 아니라 내 홈페이지에 필요한 재료 목록입니다.

수업 중 만들 것

페이지 제목 1개

한 줄 설명 1개

필요한 이미지 3개

버튼과 링크 2개

집에서 글쓰기

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

방문자가 가장 먼저 봐야 할 말

카드로 정리할 정보 3개

꼭 넣고 싶은 이미지 설명