Luna Whale AI Web Class · Prompt Bible 03

페이지부터 작게 만들기 Step Build

Big Idea

좋은 웹 제작 명령은 사이트 전체를 한 번에 시키지 않고, 지금 만들 한 화면이나 한 섹션부터 작게 시작합니다

처음부터 홈, 소개, 카드, 문의, 모바일까지 전부 한 번에 맡기면 AI가 너무 많이 추측합니다. 오늘은 첫 화면, 소개 섹션, 카드 목록처럼 작은 단위로 나누어 웹을 만드는 법을 배웁니다.

Goal사이트 전체 대신 작은 제작 단위를 먼저 고르는 법을 익힙니다.
Output한 페이지를 네 단계 요청으로 나눈 문장을 완성합니다.
Check이번 단계에서 만들 것과 아직 만들지 않을 것을 구분합니다.
Next잘 된 조각을 쌓아 전체 웹페이지로 연결합니다.
사이트 전체 대신 한 화면이나 한 섹션부터 작게 시작하는 수업용 장면
Small Start한 화면, 한 섹션, 한 행동부터 시작하면 웹 제작이 훨씬 안정적입니다
Page 02

Framer 템플릿 화면을 보면, 좋은 웹도 거대한 한 덩어리가 아니라 조각을 모아 만든 구조라는 감각이 생깁니다

우리가 보는 웹은 처음부터 한 번에 태어나는 완성품이 아니라, 첫 화면과 카드 구역과 안내 구역이 차례로 붙는 구조에 가깝습니다. 그래서 AI에게도 그 순서대로 말하는 편이 좋습니다.

  • 1좋은 레이아웃은 섹션 단위로 나누어 관찰할 수 있습니다.
  • 2조각이 보이면 지금 어떤 부분을 먼저 만들지 정하기 쉬워집니다.
  • 3웹 전체보다 현재 만들 화면 조각을 말하는 편이 더 정확합니다.
Framer 템플릿 스크린샷
Framer완성된 사이트도 실제로는 여러 섹션과 카드와 화면 조각의 조합으로 읽을 수 있습니다
Page 03

Webflow 템플릿 카드들을 보면, 한 번에 사이트 하나보다 카드 구역 하나를 먼저 요청하는 방식이 더 자연스럽다는 걸 알 수 있습니다

카드 목록은 반복되는 구조라서 따로 떼어 요청할수록 결과가 선명합니다. 제목, 설명, 카드 개수, 열 수처럼 지금 필요한 기준만 좁혀 말할 수 있기 때문입니다.

Repeat Structure카드와 목록은 반복 구역이어서 별도 요청으로 떼기 좋습니다.
Clear Scope이번 단계에 카드 수와 정렬만 집중할 수 있어 결과 확인이 쉬워집니다.
Webflow 템플릿 카드 스크린샷
Webflow반복 카드 구역은 전체 사이트와 분리해서 따로 요청하고 다듬기 좋은 단위입니다
Page 04

Notion 템플릿처럼 블록이 나뉜 화면을 보면, 웹 요청도 “이번 블록만” 말하는 습관이 왜 중요한지 더 잘 보입니다

한 번에 다 잘 쓰는 것보다 필요한 블록을 분리해서 말하는 편이 훨씬 강합니다. 첫 화면만, 소개 구역만, 카드 목록만처럼 범위를 좁히면 AI도 덜 헷갈립니다.

  • 1블록처럼 나뉜 구조는 빠진 단계와 필요한 다음 단계가 잘 보입니다.
  • 2지금 만들 조각이 분명하면 잘 된 부분을 다시 건드릴 일도 줄어듭니다.
  • 3단계별로 쌓으면 수정 요청도 훨씬 짧고 정확해집니다.
Notion 템플릿 카드 스크린샷
Notion웹 요청도 문서 블록처럼 나누면 지금 만들 부분과 나중에 만들 부분이 명확해집니다
Page 05

사이트 전체를 한 번에 시키면, 화면 구조와 카드와 버튼과 반응형이 한꺼번에 섞여서 어디서부터 고칠지 어려워집니다

초심자에게는 완성품 한 번보다 작은 성공 여러 번이 더 안전합니다. 첫 화면만 보고 맞는지 확인하고, 그다음 섹션을 붙이는 방식이 훨씬 관리하기 쉽습니다.

Too Big홈, 소개, 카드, 문의, 모바일이 한 문장에 섞입니다.
Hard To Check어디가 좋고 어디가 문제인지 한 번에 보기 어렵습니다.
Easy To Rebuild마음에 안 들면 전체를 다시 만들게 되기 쉽습니다.
Better Way첫 화면, 소개, 카드, 마지막 정리 순서로 나눕니다.
너무 큰 요청과 작은 단계 요청을 비교하는 수업용 장면
Why Split작은 단계 요청은 범위와 검사 순서를 분명하게 만들어 줍니다
Page 06

첫 요청은 전체 페이지가 아니라, 첫 화면 한 장면만 만드는 것으로 충분합니다

제목, 짧은 설명, 대표 버튼, 대표 이미지까지만 먼저 만들면 됩니다. 이 단계에서 아래 섹션까지 욕심내지 않아야 첫 인상이 맞는지 정확하게 볼 수 있습니다.

Hero Only첫 화면에서는 큰 제목, 설명, 대표 버튼, 대표 이미지까지만 봅니다.
Why First첫 인상과 대상과 버튼 위치가 맞는지 가장 먼저 점검하기 쉽습니다.
첫 화면 한 장면만 먼저 만드는 수업용 장면
Step 1첫 단계는 아래 섹션을 빼고 첫 화면의 제목, 버튼, 대표 이미지부터 맞추는 일입니다
Page 07

첫 화면이 맞으면, 그다음에는 소개 섹션이나 특징 구역 한 덩어리만 붙입니다

사이트 전체를 확장하기 전에 “이 수업이 무엇인지 설명하는 구역”만 따로 요청하면, 정보 우선순위와 문장 길이를 안정적으로 맞출 수 있습니다.

  • 1소개 섹션은 긴 글보다 짧은 설명 카드 몇 개로 나누는 편이 읽기 쉽습니다.
  • 2이 단계에서는 문장 길이와 정보 순서를 먼저 확인합니다.
  • 3카드 구역과 섞이지 않으니 설명이 과한지 부족한지 바로 보입니다.
소개 섹션만 따로 붙이는 수업용 장면
Step 2첫 화면 아래 설명 구역만 따로 요청하면 정보 우선순위를 훨씬 또렷하게 잡을 수 있습니다
Page 08

그다음에는 카드 목록이나 갤러리처럼 반복되는 구역을 따로 만듭니다

카드 구역은 제목과 설명과 태그가 반복되기 때문에 따로 떼어 요청하는 편이 훨씬 정확합니다. 이 단계에서는 카드 수와 한 줄 배치만 집중해서 보면 됩니다.

Cards Only특징 카드 3개, 카드 목록 6개처럼 개수를 먼저 정합니다.
Short Copy각 카드의 제목과 설명 길이도 같이 제한합니다.
Columns데스크톱 3열, 모바일 1열처럼 배치 규칙을 같이 적습니다.
Repeat Check반복 구역이므로 정렬과 간격을 집중 점검합니다.
카드 목록만 따로 만드는 수업용 장면
Step 3반복 카드 구역은 전체와 분리해서 요청해야 개수와 정렬과 설명 길이를 정확히 맞추기 쉽습니다
Page 09

단계를 나누면, 매번 무엇을 확인해야 하는지도 쉬워집니다

첫 화면 단계에서는 제목과 버튼을 보고, 소개 섹션 단계에서는 문장 길이를 보고, 카드 단계에서는 반복 구조와 열 수를 봅니다. 마지막에야 모바일과 간격을 한 번 더 검사합니다.

Per Step Check각 단계마다 다른 검사 기준을 붙이면 결과가 훨씬 안정적입니다.
Final Mobile모바일 1열, 글자 겹침 없음, 버튼 잘림 없음은 마지막에 묶어서 봅니다.
단계별 검사 순서를 설명하는 수업용 장면
Check Flow첫 화면, 소개, 카드, 마지막 모바일 정리처럼 단계마다 보는 포인트가 달라집니다
Page 10

같은 웹페이지도 한 문장으로 던지지 말고, 네 단계 명령으로 나누면 훨씬 다루기 쉬워집니다

지금 만들 것과 아직 만들지 않을 것을 함께 적으면 AI가 범위를 덜 착각합니다. 이 습관이 있으면 다음 수정 요청도 훨씬 짧아집니다.

1. 초등학생 부모님이 보는 수업 페이지의 첫 화면만 만들어줘. 2. 그 아래에 수업 소개 섹션 하나만 추가해줘. 3. 그다음 특징 카드 3개 구역만 붙여줘. 4. 전체 흐름이 맞으면 마지막에 모바일 1열과 버튼 정리를 해줘.
네 단계 요청 예시를 보여주는 수업용 장면
Full Sequence작게 만든 조각을 차례대로 붙이는 네 단계 요청 예시입니다
Page 11

“사이트 전체를 다 만들어줘”보다 “첫 화면만 먼저”가 초심자에게 훨씬 강한 요청입니다

좋은 요청은 작은 범위와 검사 순서를 함께 줍니다. 그래서 AI도 한 단계씩 안정적으로 따라옵니다.

Bad수업 홈페이지를 전체 다 만들어줘. 카드도 넣고 문의도 넣고 모바일도 다 맞춰줘.
Good지금은 첫 화면만 만들어줘. 제목, 설명, 신청 버튼, 대표 이미지만 보여줘. 아래 소개 섹션은 아직 넣지 마.
Bad Result범위가 커서 전체를 다시 만들게 되기 쉽습니다.
Good Result이번 단계에서 맞춰야 할 조각만 정확하게 확인할 수 있습니다.
나쁜 요청과 좋은 요청을 비교하는 수업용 장면
Bad vs Good좋은 요청은 화려한 말보다 지금 만들 범위와 아직 하지 않을 일을 분명하게 적습니다
Page 12

오늘의 실습: 내 웹페이지를 네 단계로 나누는 요청표를 직접 채워 봅니다

오늘의 결과는 완성 코드가 아니라, AI에게 순서대로 보낼 수 있는 작은 요청 4개입니다. 다음 제작과 수정에서 그대로 다시 쓸 수 있는 문장들입니다.

  • 1첫 화면, 소개 섹션, 카드 구역, 마지막 정리 순서로 나눕니다.
  • 2각 단계에서 아직 넣지 않을 것도 같이 적습니다.
  • 3마지막에 네 단계를 한 장 요청표로 정리합니다.
웹 단계별 요청 기록표 활동지 장면
Worksheet오늘의 목표는 한 페이지를 네 단계 요청으로 나눈 문장을 완성하는 것입니다
Luna Web Maker · Follow Along Guide

나만의 웹제작 AI 프롬프트 가이드 Codex · Claude Code

빈칸을 채우고 1번부터 차례로 복사하세요. 코딩을 몰라도 각 단계의 확인법과 쉬운 용어 설명을 따라가면 실제 홈페이지와 공개 준비까지 남습니다.

초보자용약 30–90분HTML · CSS · JavaScript10단계진행 자동 저장

시작 전 1분

새 폴더를 만들고 그 폴더를 Codex 또는 Claude Code에서 엽니다. 오른쪽 내용을 메모한 뒤, 아래 프롬프트를 같은 대화창에 한 단계씩 붙여 넣으세요.

사이트 이름사이트 목적주요 방문자꼭 보여줄 내용원하는 분위기와 색상연락 방법참고 사이트 1–3개사용할 사진이나 이미지
HTML 주석
<!-- 배움: 화면 구조를 설명합니다. -->
CSS 주석
/* 배움: 색상과 배치 규칙입니다. */
JavaScript 주석
// 배움: 클릭할 때 실행되는 동작입니다.
01
Project Brief

내 홈페이지 설명서 만들기

AI가 멋대로 추측하지 않도록 누구를 위한 어떤 사이트인지 먼저 정리합니다.

복사해서 AI에게 보내기
너는 내 웹 제작 파트너이자 초보자 웹 선생님이야. 앞으로 이 폴더에서 홈페이지를 단계별로 완성해줘.

작업 규칙:
1. 작업 전에 현재 폴더와 기존 파일을 먼저 확인해.
2. 기존 파일과 기능은 이유 없이 삭제하거나 덮어쓰지 마.
3. HTML, CSS, 순수 JavaScript로 가볍고 관리하기 쉬운 정적 홈페이지를 만들어.
4. 중요한 코드에는 반드시 `배움:`으로 시작하는 쉬운 한국어 주석을 달아.
5. 전문용어가 처음 나오면 초등학생도 이해할 수 있게 한 줄로 풀이해.
6. 매 단계가 끝나면 `바꾼 파일 / 확인 방법 / 배움 메모 / 다음 단계`를 알려줘.

내 사이트 정보:
- 사이트 이름: [여기에 입력]
- 목적: [여기에 입력]
- 주요 방문자: [여기에 입력]
- 꼭 보여줄 내용: [여기에 입력]
- 원하는 분위기: [여기에 입력]
- 선호 색상: [여기에 입력]
- 연락 방법: [여기에 입력]
- 참고 사이트: [없으면 없음]

먼저 코드를 많이 만들지 말고, 위 내용을 정리한 PROJECT_BRIEF.md를 만들어줘. 빠진 정보는 합리적인 임시값으로 표시하고 작업을 멈추지는 마.
만들어지는 결과`PROJECT_BRIEF.md`라는 홈페이지 제작 설명서가 생깁니다.
직접 확인하기사이트 목적, 방문자, 분위기가 내가 원하는 방향인지 읽어봅니다.
전문용어 쉬운 설명 보기
프로젝트 브리프
무엇을, 누구를 위해, 어떤 모습으로 만들지 정한 제작 설명서입니다.
정적 사이트
로그인이나 데이터베이스 없이 HTML 파일 중심으로 보여주는 가벼운 웹사이트입니다.
주석
화면에는 보이지 않고, 코드를 배우거나 고칠 때 도움을 주는 설명입니다.
02
Content Plan

화면 순서와 실제 글 작성하기

빈 예시 문장 대신 방문자가 실제로 읽을 제목과 설명을 먼저 만듭니다.

복사해서 AI에게 보내기
PROJECT_BRIEF.md를 읽고 이 사이트에 가장 알맞은 한 페이지 구조를 설계해줘.

각 섹션마다 다음 내용을 작성해서 CONTENT_PLAN.md에 저장해:
- 섹션 이름과 배치 순서
- 방문자가 이 섹션에서 알아야 할 한 가지
- 실제로 사용할 제목과 본문
- 필요한 버튼 문구와 이동 위치
- 필요한 이미지 종류

Lorem ipsum 같은 가짜 문장은 쓰지 말고, 지금 바로 홈페이지에 넣을 수 있는 자연스러운 한국어 문장을 써줘. 정보가 없는 부분만 [나중에 입력]으로 표시해. 전문용어는 `배움 메모`로 풀이해줘.
만들어지는 결과`CONTENT_PLAN.md`와 홈페이지에 들어갈 실제 문장이 생깁니다.
직접 확인하기첫 화면만 읽어도 누구의 어떤 사이트인지 알 수 있어야 합니다.
전문용어 쉬운 설명 보기
정보 구조
방문자가 내용을 쉽게 찾도록 화면 순서를 정하는 일입니다.
섹션
한 페이지 안에서 소개, 작품, 연락처처럼 역할이 나뉜 구역입니다.
CTA
“문의하기”, “작품 보기”처럼 방문자의 다음 행동을 안내하는 버튼입니다.
03
HTML Structure

HTML로 홈페이지 뼈대 만들기

글과 링크를 의미 있는 순서로 배치해 디자인 전에도 읽히는 페이지를 만듭니다.

복사해서 AI에게 보내기
PROJECT_BRIEF.md와 CONTENT_PLAN.md를 기준으로 index.html을 만들어줘.

조건:
- 한국어 문서 설정과 모바일 화면 설정을 포함해.
- header, nav, main, section, footer처럼 의미가 드러나는 HTML 태그를 사용해.
- CONTENT_PLAN.md의 실제 문구를 빠짐없이 넣어.
- 메뉴를 누르면 해당 섹션으로 이동하게 해.
- 링크와 버튼의 역할을 올바르게 구분해.
- styles.css와 script.js를 연결하되, 아직 복잡한 기능은 만들지 마.
- 중요한 구조마다 `<!-- 배움: 쉬운 설명 -->` 주석을 달아.
- 작업 후 HTML을 브라우저에서 확인하는 방법을 알려줘.
만들어지는 결과제목부터 연락처까지 내용이 모두 보이는 기본 `index.html`이 생깁니다.
직접 확인하기디자인이 없어도 내용이 위에서 아래로 자연스럽게 읽히는지 봅니다.
전문용어 쉬운 설명 보기
HTML
홈페이지의 제목, 글, 이미지, 버튼 같은 내용과 구조를 적는 언어입니다.
시맨틱 HTML
이름만 보아도 역할을 알 수 있는 태그로 구조를 만드는 방식입니다.
DOM
JavaScript가 읽고 바꿀 수 있도록 브라우저가 HTML을 정리한 구조입니다.
04
Visual System

CSS로 디자인 입히기

색상, 글자, 간격과 버튼 모양을 한 가지 규칙으로 맞춥니다.

복사해서 AI에게 보내기
현재 HTML 구조는 유지하면서 PROJECT_BRIEF.md의 분위기에 맞는 styles.css를 완성해줘.

조건:
- :root에 색상, 글자 크기, 간격, 둥근 정도를 변수로 정리해.
- 글이 편하게 읽히는 최대 너비와 충분한 여백을 사용해.
- 헤더, 첫 화면, 카드, 버튼, 푸터의 디자인을 일관되게 만들어.
- 버튼의 hover와 키보드 focus 상태를 모두 보여줘.
- 외부 폰트가 없어도 예쁘게 보이는 시스템 글꼴을 우선 사용해.
- 중요한 CSS 규칙에는 `/* 배움: 쉬운 설명 */` 주석을 달아.
- 기존 HTML 문구는 임의로 바꾸지 마.
만들어지는 결과통일된 색상과 간격을 가진 완성형 디자인이 생깁니다.
직접 확인하기버튼, 카드, 제목이 한 사이트의 요소처럼 일관돼 보여야 합니다.
전문용어 쉬운 설명 보기
CSS
HTML의 색, 크기, 간격, 배치를 정하는 스타일 언어입니다.
디자인 토큰
자주 쓰는 색상과 간격을 변수로 저장해 일관성을 지키는 값입니다.
Hover · Focus
마우스를 올렸을 때와 키보드로 선택했을 때의 표시입니다.
05
Image & Assets

이미지와 시각 요소 정리하기

깨진 이미지와 알 수 없는 파일명을 없애고 사진 설명까지 챙깁니다.

복사해서 AI에게 보내기
현재 폴더의 이미지 파일을 확인하고 홈페이지의 시각 요소를 정리해줘.

규칙:
- 원본 이미지는 삭제하거나 덮어쓰지 마.
- 사용할 이미지는 assets/images 폴더에 알아보기 쉬운 영문 파일명으로 정리해.
- 외부 사이트 이미지를 무단으로 직접 연결하지 마.
- 이미지마다 내용에 맞는 alt 설명과 width, height를 넣어.
- 첫 화면을 제외한 큰 이미지는 필요하면 지연 로딩을 적용해.
- 이미지가 하나도 없다면 깨진 임시 이미지를 넣지 말고 색상 블록이나 간단한 인터페이스 아이콘으로 자연스럽게 완성해.
- 어디에 내 사진을 교체하면 되는지 배움 메모로 알려줘.
만들어지는 결과파일명이 정돈되고 깨진 이미지가 없는 안정적인 화면이 됩니다.
직접 확인하기모든 이미지가 보이고, 파일명이 용도를 설명하는지 확인합니다.
전문용어 쉬운 설명 보기
Asset
홈페이지에 사용하는 이미지, 아이콘, 영상 등의 파일입니다.
Alt 텍스트
이미지를 볼 수 없는 사람에게 이미지 내용을 알려주는 설명입니다.
지연 로딩
화면 아래 이미지를 나중에 불러와 첫 화면을 빠르게 여는 방법입니다.
06
Responsive Web

휴대폰·태블릿·PC 화면 맞추기

화면이 작아져도 글자와 카드가 겹치지 않는 반응형 페이지를 만듭니다.

복사해서 AI에게 보내기
현재 홈페이지를 반응형으로 완성해줘.

360px 휴대폰, 768px 태블릿, 1024px 노트북, 1440px 큰 화면을 기준으로 확인해.
- 어떤 화면에서도 가로 스크롤이 생기지 않게 해.
- 글자와 여백은 clamp 등 유동적인 값을 적절히 사용해.
- 카드 목록은 화면 너비에 따라 1열, 2열, 여러 열로 자연스럽게 바꿔.
- 메뉴와 버튼은 손가락으로 누르기 충분한 크기로 만들어.
- 넘침 현상은 숨기는 방식으로 덮지 말고 원인을 찾아 고쳐.
- 가능한 경우 실제 브라우저로 확인하고, 확인하지 못한 크기는 확인했다고 말하지 마.
- 미디어 쿼리마다 `배움:` CSS 주석을 달아.
만들어지는 결과휴대폰부터 큰 PC 화면까지 자연스럽게 바뀌는 레이아웃이 됩니다.
직접 확인하기휴대폰에서 확대하지 않아도 읽히고 좌우로 밀리지 않아야 합니다.
전문용어 쉬운 설명 보기
반응형 웹
화면 크기에 맞춰 배치와 글자 크기가 자동으로 바뀌는 웹입니다.
브레이크포인트
화면 배치를 바꾸기로 정한 기준 너비입니다.
미디어 쿼리
특정 화면 크기에만 적용하는 CSS 규칙입니다.
07
Interaction

필요한 동작만 추가하기

모바일 메뉴와 입력 확인처럼 방문자에게 실제로 필요한 움직임을 넣습니다.

복사해서 AI에게 보내기
이 사이트에 실제로 도움이 되는 동작만 script.js에 추가해줘.

우선 적용할 기능:
- 모바일 메뉴 열기와 닫기
- 메뉴 선택 후 해당 섹션으로 이동
- 메뉴 밖을 누르거나 ESC 키를 누르면 닫기
- 현재 HTML에 FAQ가 있을 때만 아코디언 기능 추가
- 연락 폼이 있다면 빈칸과 이메일 형식을 검사

주의:
- 서버가 없는데 문의가 전송됐다고 거짓 성공 메시지를 보여주지 마.
- 전송 서비스가 없다면 실제 이메일 링크나 연락 방법을 분명하게 표시해.
- JavaScript가 꺼져도 핵심 내용은 읽을 수 있게 해.
- 각 함수와 이벤트에는 `// 배움: 쉬운 설명` 주석을 달아.
- 마지막에 브라우저 콘솔 오류가 없는지 검사해.
만들어지는 결과메뉴와 필요한 상호작용이 작동하는 `script.js`가 생깁니다.
직접 확인하기마우스뿐 아니라 Tab, Enter, Esc 키로도 사용할 수 있어야 합니다.
전문용어 쉬운 설명 보기
JavaScript
클릭이나 입력에 반응하도록 홈페이지에 동작을 더하는 언어입니다.
이벤트
클릭, 입력, 키 누르기처럼 브라우저에서 일어난 행동입니다.
유효성 검사
이메일이나 필수 항목이 올바르게 입력됐는지 확인하는 과정입니다.
08
Accessibility

누구나 쓸 수 있게 접근성 점검하기

키보드, 글자 대비와 이미지 설명을 확인해 더 많은 사람이 사용할 수 있게 합니다.

복사해서 AI에게 보내기
현재 홈페이지의 접근성을 점검하고 직접 수정해줘.

다음을 확인해:
- 페이지에 명확한 h1이 하나 있고 제목 순서가 자연스러운가
- 모든 기능을 키보드만으로 사용할 수 있는가
- 현재 선택 위치를 나타내는 focus 표시가 선명한가
- 글자와 배경의 명암 차이가 충분한가
- 이미지에 적절한 alt 설명이 있는가
- 입력칸마다 연결된 label과 이해하기 쉬운 오류 문구가 있는가
- 메뉴 버튼의 열림 상태를 보조기기에 전달하는가
- 움직임을 줄이도록 설정한 사용자를 배려하는가

기본 HTML만으로 해결되는 부분에는 ARIA를 남용하지 마. 수정 후 ACCESSIBILITY_CHECK.md에 통과 항목과 남은 수동 확인 항목을 기록해. 각 수정 이유도 초보자 말로 설명해줘.
만들어지는 결과`ACCESSIBILITY_CHECK.md`와 키보드 사용자를 배려한 화면이 생깁니다.
직접 확인하기마우스 없이 Tab 키만으로 주요 링크와 버튼을 모두 이동해 봅니다.
전문용어 쉬운 설명 보기
웹 접근성
장애나 사용 환경과 관계없이 누구나 웹을 이용할 수 있게 만드는 원칙입니다.
ARIA
기본 HTML만으로 부족할 때 보조기기에 역할과 상태를 알려주는 정보입니다.
명암비
글자와 배경이 얼마나 뚜렷하게 구분되는지 나타내는 정도입니다.
09
Quality Check

오류·속도·검색 노출 점검하기

공개 전에 깨진 링크와 오류를 고치고, 검색과 공유에 필요한 설명을 채웁니다.

복사해서 AI에게 보내기
홈페이지 공개 전 최종 품질 점검을 진행하고 발견한 문제를 수정해줘.

확인 항목:
- 깨진 링크, 없는 파일, 브라우저 콘솔 오류
- 페이지 title과 자연스러운 meta description
- SNS 공유용 Open Graph 제목, 설명, 이미지 설정
- 제목 구조, 언어 설정, 이미지 크기와 지연 로딩
- 불필요하게 큰 파일과 사용하지 않는 코드
- 휴대폰과 PC에서의 첫 화면 표시
- README.md에 로컬 실행법, 파일 구조, 문구·색상·이미지 수정법 기록

공개 주소가 아직 없으면 canonical 주소를 추측해서 넣지 마. Lighthouse 같은 검사 도구를 사용할 수 있으면 실행하고, 사용할 수 없다면 수동 확인 항목으로 남겨. 결과를 QA_REPORT.md에 통과/수정/수동 확인으로 나눠 기록해줘.
만들어지는 결과`README.md`, `QA_REPORT.md`와 검색·공유 기본 정보가 완성됩니다.
직접 확인하기모든 메뉴와 버튼을 눌러보고 화면에 오류가 없는지 확인합니다.
전문용어 쉬운 설명 보기
SEO
검색 서비스가 페이지 내용을 이해하기 쉽게 정리하는 작업입니다.
메타데이터
브라우저나 검색·공유 서비스에 페이지 정보를 알려주는 숨은 설명입니다.
Lighthouse
속도, 접근성, 검색 기본 상태 등을 검사하는 브라우저 도구입니다.
10
Publish

인터넷에 안전하게 공개하기

기존 배포 방법과 비밀정보를 먼저 확인한 뒤 승인받고 공개 주소를 만듭니다.

복사해서 AI에게 보내기
이 홈페이지를 안전하게 공개할 준비를 해줘.

먼저 현재 폴더의 Git 설정과 기존 배포 설정을 확인해.
- 이미 연결된 호스팅이 있으면 그 방식을 우선 설명해.
- 아무 설정이 없으면 이 정적 사이트에 가장 간단한 무료 배포 방식으로 GitHub Pages를 우선 제안하고, 필요한 계정과 절차를 초보자 순서로 알려줘.
- API 키, 비밀번호, 개인정보가 파일에 들어 있지 않은지 검사해.
- 외부 공개나 원격 저장소 변경을 실제 실행하기 전에는 나에게 한 번 승인을 받아.
- 승인 후 배포하고 공개 URL을 확인해.
- 공개 페이지의 메뉴, 이미지, 모바일 화면, HTTPS 연결을 검사해.
- 마지막에 `다음 수정 후 다시 배포하는 방법`과 `문제가 생겼을 때 이전 버전으로 돌아가는 방법`을 README.md에 추가해.
만들어지는 결과승인 후 실제 공개 주소와 다음 수정 때의 재배포 안내가 남습니다.
직접 확인하기시크릿 창과 휴대폰에서 공개 주소가 정상적으로 열리는지 봅니다.
전문용어 쉬운 설명 보기
배포 · 호스팅
내 파일을 인터넷에 올리는 작업과, 그 파일을 보관해 전달하는 서비스입니다.
도메인 · HTTPS
사이트 주소와, 방문자 통신을 안전하게 암호화하는 연결입니다.
롤백
문제가 생겼을 때 정상 작동하던 이전 버전으로 되돌리는 작업입니다.

중간에 막혔나요? 복구 프롬프트

오류 문구나 이상한 화면을 그대로 적고 아래 문장을 보내면, 전체를 갈아엎지 않고 필요한 부분부터 찾게 합니다.

문제 해결용
방금 단계에서 다음 문제가 생겼어: [보이는 증상이나 오류 문구를 그대로 입력]

추측으로 전체를 다시 만들지 말고:
1. 문제를 직접 재현해.
2. 브라우저 콘솔과 관련 파일을 확인해.
3. 원인을 초보자 말로 설명해.
4. 필요한 부분만 최소한으로 수정해.
5. 기존 디자인과 정상 기능이 유지되는지 다시 검사해.
6. 내가 직접 확인할 방법을 한 단계씩 알려줘.
프롬프트를 복사했습니다.