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오늘의 목표는 한 페이지를 네 단계 요청으로 나눈 문장을 완성하는 것입니다