섹션 설계 요청

Big Idea

좋은 웹 명령은 바로 완성 화면부터 시키지 않고, 먼저 페이지 섹션 순서를 제안하게 합니다

첫 화면, 소개, 카드, 후기, 문의처럼 위에서 아래로 어떤 구역이 어떤 순서로 와야 하는지 먼저 정해야 웹페이지가 덜 흔들립니다. 오늘은 AI에게 섹션 지도를 먼저 시키는 법을 배웁니다.

Goal페이지를 만들기 전에 섹션 지도를 먼저 요청하는 법을 익힙니다.

Output방문자와 목적에 맞는 섹션 설계 요청 문장 1개를 완성합니다.

Check섹션 순서와 각 구역의 역할이 분명한지 확인합니다.

Next구조가 맞으면 그다음에 디자인과 콘텐츠 요청으로 넘어갑니다.

페이지 섹션 순서를 먼저 제안하게 하는 수업용 장면 — Section Plan좋은 웹 구조는 완성 HTML보다 먼저 섹션 순서와 각 구역의 역할부터 분명히 잡습니다

Page 02

Airtable처럼 구조가 또렷한 화면을 보면, 좋은 페이지는 위에서 아래로 읽는 구역의 리듬이 먼저 잡혀 있다는 걸 알 수 있습니다

우리 눈은 웹페이지를 한 장 그림처럼 보지 않고, 여러 구역을 차례로 읽습니다. 그래서 AI에게도 완성 화면보다 먼저 섹션 순서를 제안하게 하는 편이 훨씬 안정적입니다.

1좋은 페이지는 구역이 서로 섞이지 않고 역할이 분명합니다.
2첫 화면 다음에 어떤 설명이 이어질지 먼저 정하는 편이 더 쉽습니다.
3구조가 맞아야 이후 디자인 요청도 덜 흔들립니다.

Airtable 페이지 스크린샷 — Airtable구조가 또렷한 화면을 보면 섹션이 위에서 아래로 어떤 흐름으로 읽히는지 더 잘 보입니다

Page 03

Dropbox처럼 첫 화면과 설명과 행동 구역이 차례로 이어지는 화면은 섹션 순서를 먼저 설계해야 한다는 걸 잘 보여 줍니다

방문자는 처음에 관심을 갖고, 그다음 이해하고, 마지막에 행동합니다. 이 흐름이 섹션 설계의 기본입니다.

Interest첫 화면에서 누구를 위한 페이지인지와 한 줄 메시지를 먼저 봅니다.

Action설명과 카드 뒤에 문의나 신청 같은 행동 구역이 오는 편이 자연스럽습니다.

Dropbox 페이지 스크린샷 — Dropbox첫 화면에서 관심을 만들고, 중간 설명 뒤에 행동 구역이 오는 흐름을 쉽게 읽을 수 있습니다

Page 04

Zapier 같은 구조를 보면, 카드와 설명과 버튼이 제멋대로 섞이지 않도록 섹션의 역할을 먼저 적는 일이 왜 중요한지 보입니다

섹션은 단순히 위아래 칸이 아니라 각각 다른 일을 합니다. 소개는 설명, 카드는 비교, 문의는 행동처럼 각 구역의 역할을 같이 적어야 구조가 단단해집니다.

1같은 카드라도 어느 구역에 두느냐에 따라 의미가 달라집니다.
2각 섹션의 역할을 한 줄로 적으면 구조가 훨씬 선명해집니다.
3이후 콘텐츠 채우기와 버튼 배치도 쉬워집니다.

Zapier 페이지 스크린샷 — Zapier좋은 구조는 각 구역의 역할이 분명해서 카드와 설명과 행동이 섞이지 않고 읽힙니다

Page 05

섹션 순서를 먼저 잡지 않으면, AI는 첫 화면 다음에 카드가 와야 할지 설명이 와야 할지 스스로 추측하게 됩니다

초심자는 디자인보다 읽는 순서를 먼저 잡는 편이 훨씬 안전합니다. 방문자가 처음에 무엇을 보고, 그다음 무엇을 이해하고, 어디서 행동할지를 먼저 정해야 합니다.

No Structure설명과 카드와 버튼이 어디에 와야 할지 AI가 스스로 정하게 됩니다.

Hard To Fix순서가 꼬이면 예쁜 디자인이어도 읽기 어렵습니다.

With Plan섹션 지도가 있으면 HTML 만들기 전 구조부터 바로 고칠 수 있습니다.

Safer Start구조를 먼저 보면 이후 디자인 요청도 훨씬 안정적입니다.

구조 없이 만들기와 구조부터 정하기를 비교하는 수업용 장면 — Why First섹션 설계는 카드와 설명과 행동 구역이 섞이지 않도록 읽는 길을 먼저 정하는 일입니다

Page 06

대부분의 페이지는 첫 화면에서 대상과 한 줄 메시지와 대표 버튼을 먼저 보여 주는 편이 읽기 쉽습니다

섹션 설계 요청을 할 때는 첫 화면이 페이지의 문을 여는 구역이라는 점을 먼저 말해 주면 좋습니다. 무엇을 가장 먼저 알게 할지부터 정하는 단계입니다.

Hero Role대상, 한 줄 메시지, 대표 버튼을 가장 먼저 보여주는 구역입니다.

What It Solves방문자가 첫 3초 안에 이 페이지가 무엇인지 이해하게 도와줍니다.

첫 화면 섹션의 역할을 설명하는 수업용 장면 — Hero First첫 화면은 이 페이지가 누구를 위한 페이지인지와 첫 행동이 무엇인지 가장 먼저 보여주는 구역입니다

Page 07

첫 화면 다음에는 소개, 특징 카드, 예시, 후기처럼 이해를 돕는 중간 구역이 이어져야 합니다

방문자는 첫 화면에서 관심을 갖고, 그다음 구역에서 왜 이 페이지를 봐야 하는지 확인합니다. 그래서 중간 섹션의 순서를 잡는 일이 아주 중요합니다.

1소개 섹션은 페이지의 내용을 짧게 풀어 주는 역할을 합니다.
2특징 카드와 예시 구역은 이해와 비교를 돕는 역할을 합니다.
3후기나 FAQ는 불안한 점을 줄여 주는 구역이 될 수 있습니다.

중간 섹션들의 역할을 설명하는 수업용 장면 — Middle Sections소개, 특징 카드, 예시, 후기 같은 중간 구역은 방문자의 이해를 도와 다음 행동으로 이어지게 합니다

Page 08

문의나 신청 같은 행동 구역은 페이지 마지막 쪽에서, 충분히 이해한 뒤 자연스럽게 만나게 하는 편이 좋습니다

섹션 설계 요청을 할 때는 행동 구역이 어디에 와야 하는지도 함께 말해야 합니다. 너무 빠르면 부담스럽고, 너무 늦으면 행동을 놓치기 쉽습니다.

CTA Later설명과 카드들을 읽은 뒤 행동 구역을 만나는 편이 더 자연스럽습니다.

Short Summary행동 구역 앞에 짧은 요약을 다시 한 번 주면 전환이 좋아집니다.

Not Too Early문의 버튼이 너무 빨리 나오면 아직 이해 전이라 부담스러울 수 있습니다.

Not Too Late너무 늦으면 행동 타이밍을 놓치기 쉽습니다.

마지막 행동 섹션을 설명하는 수업용 장면 — Final Action행동 구역은 충분히 이해한 뒤 자연스럽게 도착하도록 마지막 쪽에 배치하는 편이 좋습니다

Page 09

섹션 설계 요청의 핵심은 “바로 HTML 만들지 말고, 먼저 섹션 이름과 순서를 제안해줘”라고 말하는 데 있습니다

이렇게 하면 AI가 코드를 급하게 만들기 전에 구조부터 보여줍니다. 초심자는 이 구조가 맞는지 먼저 보고, 그다음 디자인과 콘텐츠 요청으로 넘어가면 됩니다.

Ask For Names먼저 섹션 이름과 순서만 받으면 구조를 빠르게 점검할 수 있습니다.

No HTML Yet아직 HTML은 만들지 말라고 같이 적어야 구조 요청이 더 깨끗해집니다.

HTML보다 먼저 섹션 이름과 순서를 요청하는 수업용 장면 — Ask Structure First섹션 이름과 순서와 각 구역의 역할을 먼저 받으면 구조가 맞는지 빠르게 확인할 수 있습니다

Page 10

좋은 섹션 설계 요청은 페이지 목적과 방문자를 먼저 주고, 그에 맞는 섹션 지도를 먼저 제안하게 합니다

섹션 이름과 순서와 역할을 먼저 받으면, 이후 디자인과 콘텐츠 요청도 훨씬 단단해집니다. 구조가 먼저 맞아야 나머지도 덜 흔들립니다.

초등학생 부모님이 보는 수업 소개 페이지를 만들려고 해. 페이지 목적은 수업 내용과 신청 방법을 한눈에 알리는 거야. 바로 HTML을 만들지 말고, 먼저 이 페이지에 필요한 섹션 이름과 순서를 제안해줘. 각 섹션이 무슨 역할을 하는지도 한 줄씩 써줘.

섹션 설계 요청 예시를 보여주는 수업용 장면 — Full Section Prompt방문자, 목적, 섹션 순서 요청, 아직 HTML 만들지 말기까지 함께 있어야 구조 요청이 단단해집니다

Page 11

“홈페이지 만들어줘”보다 “섹션 순서부터 제안해줘”가 훨씬 강한 시작입니다

좋은 요청은 완성 결과보다 먼저 구조를 보게 만듭니다. 그래서 읽는 길이 더 안정적이고, 이후 수정도 쉬워집니다.

Bad수업 홈페이지를 만들어줘. 예쁘고 카드도 넣어줘.

Good수업 소개 페이지에 필요한 섹션 이름과 순서를 먼저 제안해줘. 첫 화면, 소개, 카드, 문의처럼 읽는 흐름이 보이게 정리해줘.

Bad Result구조와 콘텐츠와 디자인이 한 번에 섞여 방향이 흐려집니다.

Good Result구조를 먼저 잡아 이후 디자인과 콘텐츠 요청이 훨씬 쉬워집니다.

나쁜 요청과 좋은 섹션 설계 요청을 비교하는 수업용 장면 — Bad vs Good좋은 시작은 완성 HTML보다 먼저 섹션 지도와 읽는 흐름을 제안하게 하는 것입니다

Page 12

오늘의 실습: 내 페이지 목적에 맞는 섹션 순서를 먼저 써 보고, 그 순서를 AI에게 요청하는 문장을 만듭니다

오늘의 결과는 완성 코드가 아니라, 페이지 섹션 지도를 먼저 제안받는 요청 한 문장입니다. 이후 실제 제작의 출발점이 되는 문장입니다.

1페이지 목적과 대표 방문자를 먼저 적습니다.
2첫 화면, 중간 설명 구역, 카드 구역, 마지막 행동 구역 순서를 적습니다.
3마지막에 AI에게 구조만 먼저 제안받는 문장으로 정리합니다.

웹 섹션 설계 요청 기록표 활동지 장면 — Worksheet오늘의 목표는 내 페이지에 맞는 섹션 순서를 먼저 제안받는 요청 한 문장을 완성하는 것입니다

섹션 설계 요청 Section Plan

좋은 웹 명령은 바로 완성 화면부터 시키지 않고, 먼저 페이지 섹션 순서를 제안하게 합니다

Airtable처럼 구조가 또렷한 화면을 보면, 좋은 페이지는 위에서 아래로 읽는 구역의 리듬이 먼저 잡혀 있다는 걸 알 수 있습니다

Dropbox처럼 첫 화면과 설명과 행동 구역이 차례로 이어지는 화면은 섹션 순서를 먼저 설계해야 한다는 걸 잘 보여 줍니다

Zapier 같은 구조를 보면, 카드와 설명과 버튼이 제멋대로 섞이지 않도록 섹션의 역할을 먼저 적는 일이 왜 중요한지 보입니다

섹션 순서를 먼저 잡지 않으면, AI는 첫 화면 다음에 카드가 와야 할지 설명이 와야 할지 스스로 추측하게 됩니다

대부분의 페이지는 첫 화면에서 대상과 한 줄 메시지와 대표 버튼을 먼저 보여 주는 편이 읽기 쉽습니다

첫 화면 다음에는 소개, 특징 카드, 예시, 후기처럼 이해를 돕는 중간 구역이 이어져야 합니다

문의나 신청 같은 행동 구역은 페이지 마지막 쪽에서, 충분히 이해한 뒤 자연스럽게 만나게 하는 편이 좋습니다

섹션 설계 요청의 핵심은 “바로 HTML 만들지 말고, 먼저 섹션 이름과 순서를 제안해줘”라고 말하는 데 있습니다

좋은 섹션 설계 요청은 페이지 목적과 방문자를 먼저 주고, 그에 맞는 섹션 지도를 먼저 제안하게 합니다

“홈페이지 만들어줘”보다 “섹션 순서부터 제안해줘”가 훨씬 강한 시작입니다

오늘의 실습: 내 페이지 목적에 맞는 섹션 순서를 먼저 써 보고, 그 순서를 AI에게 요청하는 문장을 만듭니다

핵심 생각

섹션 설계의 4칸

기본 공식

섹션 요청 기록표

오늘의 기록

용어 설명