섹션 순서 짜기

Big Idea

섹션 순서는 방문자가 위에서 아래로 어떤 질문부터 답받는지 정하는 일입니다

페이지는 예쁜 카드 조각을 쌓는 곳이 아니라, 읽는 순서를 설계하는 곳입니다. 첫 화면, 이유, 예시, 자세한 정보, 자주 묻는 질문, 신청 버튼처럼 어떤 구역이 먼저 나와야 하는지 정하면 방문자가 훨씬 덜 헤맵니다.

Goal위에서 아래로 어떤 구역이 오는지 순서를 정합니다.

Output내 페이지의 섹션 지도 5칸 정도를 만듭니다.

Check중요한 질문이 위에, 덜 급한 정보가 아래에 있는지 봅니다.

Next다음에는 각 섹션 안에 어떤 카드와 내용이 들어갈지 채웁니다.

섹션 순서는 방문자가 위에서 아래로 어떤 질문부터 답받는지 정하는 일이라는 수업용 화면 — Reading Order좋은 페이지는 필요한 질문부터 차례대로 답해 주는 구조를 가집니다

Page 02

Zapier는 첫 화면에서 큰 문장과 행동 버튼을 먼저 보여주고, 그 아래에서 다음 내용을 이어 줍니다

첫 화면에서 무엇을 하는 서비스인지 큰 문장으로 먼저 이해시키고, 바로 시작 버튼을 둔 뒤, 아래쪽에 숫자와 다음 섹션을 이어 붙입니다. 방문자가 위에서 아래로 무엇을 먼저 읽어야 하는지가 자연스럽게 정리된 예시입니다.

1큰 문장으로 페이지 주제를 먼저 말합니다.
2바로 행동할 버튼을 같은 화면 안에 둡니다.
3그 다음에 숫자와 다음 설명 섹션이 이어집니다.

Zapier 홈페이지 스크린샷 — Zapier큰 문장, 행동 버튼, 다음 설명 섹션이 위에서 아래로 또렷하게 이어집니다

Page 03

Trello도 먼저 핵심 이득을 보여주고, 그 옆에서 제품 모습을 함께 보여 줍니다

방문자는 이 페이지가 무엇을 도와주는지부터 알고 싶어 합니다. Trello는 큰 제목과 짧은 설명, 가입 입력칸과 버튼, 제품 화면 예시를 같은 첫 구역에 묶어서 먼저 보여 주고 있습니다.

First Question무엇을 도와주는 페이지인지 큰 제목이 먼저 답합니다.

Next Action이메일 입력과 가입 버튼이 바로 이어져 행동 흐름을 만듭니다.

Trello 홈페이지 스크린샷 — Trello핵심 이득과 행동과 제품 예시를 첫 구역 안에서 한 번에 보여줍니다

Page 04

Dropbox는 제목과 설명과 대표 버튼을 먼저 보여주고, 제품 화면으로 이어서 믿음을 더합니다

방문자는 먼저 이 페이지가 나에게 무슨 도움이 되는지 궁금해합니다. Dropbox는 큰 제목과 짧은 설명, 대표 버튼을 위에 두고, 오른쪽에서 실제 제품 화면을 보여 주면서 다음 읽기 흐름을 자연스럽게 이어 갑니다.

1큰 제목으로 가장 중요한 질문에 먼저 답합니다.
2대표 버튼을 바로 붙여 첫 행동을 분명하게 만듭니다.
3제품 화면이 뒤따르며 설명의 믿음을 보강합니다.

Dropbox 홈페이지 스크린샷 — Dropbox이득 설명과 첫 행동과 제품 예시가 한 구역에서 함께 읽히는 구조입니다

Page 05

같은 수업 페이지라도 섹션 순서를 잘못 놓으면 읽는 힘이 약해집니다

정보가 틀린 것이 아니라, 순서가 어색해서 이해가 느려지는 경우가 많습니다. 먼저 궁금한 것을 위에 두고, 덜 급한 정보는 아래로 보내는 것만으로도 같은 내용이 훨씬 읽기 쉬워집니다.

Bad선생님 소개, 지도, FAQ가 먼저 나오면 핵심 주제가 늦게 보입니다.

Good첫 화면, 활동 예시, 일정 정보, FAQ, 신청 순서면 훨씬 자연스럽습니다.

읽기 힘든 순서와 읽기 쉬운 순서를 비교하는 수업용 장면 — Bad Vs Good같은 내용도 순서를 바꾸면 읽히는 힘과 신청 흐름이 달라집니다

Page 06

페이지 목적에 따라 자주 쓰는 섹션 순서 패턴도 달라집니다

모든 페이지를 같은 순서로 만들 필요는 없습니다. 안내 페이지, 모집 페이지, 전시 페이지는 방문자가 기대하는 읽기 흐름이 다르기 때문에, 첫 화면 뒤에 어떤 구역을 둘지도 달라집니다.

1안내 페이지는 배우는 내용과 방법이 빨리 보여야 합니다.
2모집 페이지는 대상과 일정과 신청이 중요합니다.
3전시 페이지는 대표 작품과 작품 목록이 먼저 와도 자연스럽습니다.

안내 페이지와 모집 페이지와 전시 페이지의 섹션 순서 패턴을 정리한 수업용 장면 — Pattern Library페이지 목적이 다르면 첫 화면 뒤에 이어질 구역도 달라집니다

Page 07

방문자와 페이지 목적이 정해지면 첫 세 섹션은 훨씬 쉽게 고를 수 있습니다

섹션 순서가 막막한 이유는 무엇을 위에 올릴지 기준이 없기 때문입니다. 누가 보는지와 이 페이지가 무엇을 하려는지 정해 두면, 첫 세 구역은 생각보다 빨리 정리됩니다.

Visitor부모가 먼저 보는 페이지인지, 학생이 먼저 보는 페이지인지 적습니다.

Purpose신청 받기인지, 소개하기인지, 보여주기인지 먼저 정합니다.

First Action일정 확인 후 신청하기처럼 첫 행동을 적으면 순서가 더 쉬워집니다.

Result그 기준으로 첫 화면, 정보, 카드 순서를 빠르게 고를 수 있습니다.

방문자와 목적과 첫 행동을 기준으로 첫 세 섹션을 정하는 수업용 장면 — Choose First Three방문자와 목적만 분명하면 맨 위 세 구역은 빠르게 결정할 수 있습니다

Page 08

가장 많이 묻는 질문일수록 위로, 덜 급한 정보일수록 아래로 보내면 됩니다

방문자가 페이지에 들어와서 가장 먼저 궁금해할 질문부터 답하면 섹션 순서는 자연스럽게 잡힙니다. 반대로 지금 바로 필요하지 않은 정보는 아래에 둬도 괜찮습니다.

1무슨 수업인지, 언제 하는지, 어떤 활동인지가 먼저 옵니다.
2긴 선생님 소개나 정책 설명은 아래로 보내도 됩니다.
3이 기준은 웹페이지뿐 아니라 포스터와 소개글에도 그대로 쓰입니다.

위에 와야 하는 질문과 아래로 보내도 되는 정보를 나눈 수업용 장면 — Priority많이 묻는 질문을 위에 두면 방문자가 훨씬 빨리 이해합니다

Page 09

종이에 먼저 섹션 지도를 그려 두면 웹을 만들 때 훨씬 덜 헤맵니다

섹션 순서를 머릿속으로만 잡으면 금방 섞입니다. 위에서 아래로 첫 화면, 카드, 정보, FAQ, 신청처럼 적어 두면 전체 길이도 보이고, AI에게 요청할 때도 훨씬 편해집니다.

Simple처음에는 다섯 구역 정도만 적어도 충분합니다.

Useful빠진 구역이나 쓸데없이 많은 구역을 빨리 찾을 수 있습니다.

섹션 지도를 먼저 그려 보는 수업용 장면 — Section Map웹을 만들기 전에 섹션 지도를 그리면 전체 구조가 먼저 잡힙니다

Page 10

AI에게는 섹션 이름과 위에서 아래 순서를 같이 말해 줘야 합니다

“수업 페이지 만들어줘”라고만 하면 어떤 순서로 읽히게 할지 잘 안 잡힙니다. 섹션 이름과 순서를 함께 주면 AI가 훨씬 덜 헤매고, 우리가 원하는 구조에 가깝게 만듭니다.

부모가 먼저 보는 초등 메이커 캠프 모집 페이지를 만들어줘. 위에서 아래 섹션 순서는 1. 첫 화면 2. 활동 예시 카드 3개 3. 대상 학년 / 일정 / 준비물 4. 자주 묻는 질문 5. 지금 신청하기 순서로 배치해줘.

AI에게 섹션 이름과 위에서 아래 순서를 함께 말해 주는 수업용 장면 — Prompt With Order섹션 이름과 순서를 함께 주면 AI 결과 구조가 훨씬 또렷해집니다

Page 11

막연한 요청을 섹션 순서까지 넣은 요청으로 고치면 구조가 훨씬 좋아집니다

AI는 구조 지시가 없으면 익숙한 순서나 임의 순서로 만들기 쉽습니다. 반대로 섹션 이름과 순서를 같이 주면 페이지 길과 읽기 흐름이 더 분명해집니다.

Bad메이커 캠프 소개 페이지 만들어줘. 신청도 넣고 FAQ도 넣어줘.

Good첫 화면 → 활동 카드 → 일정 정보 → FAQ → 신청 버튼 순서로 배치해줘.

Bad어디에 무엇이 와야 하는지 없으면 구조가 흔들립니다.

Good읽는 순서까지 말해 주면 결과가 훨씬 안정적입니다.

막연한 요청과 섹션 순서가 들어간 요청을 비교하는 수업용 장면 — Repair Prompt무엇을 넣을지뿐 아니라 어떤 순서로 둘지도 함께 말해야 합니다

Page 12

오늘의 실습: 내 페이지의 섹션 순서를 직접 적어봅니다

다음 시간에는 각 섹션 안에 어떤 카드와 내용이 들어갈지 더 구체적으로 적게 됩니다. 오늘은 위에서 아래로 어떤 구역이 오는지 4~5칸으로 정리할 수 있으면 충분합니다.

1대표 방문자와 페이지 목적을 먼저 적습니다.
2첫 번째, 두 번째, 세 번째 섹션을 위에서 아래 순서로 적습니다.
3마지막에는 질문 답변이나 신청 버튼 위치를 적어 봅니다.

내 페이지의 섹션 순서를 직접 적어보는 활동지 화면 — Worksheet내 페이지의 읽기 순서를 위에서 아래로 직접 적어 보며 구조를 정리합니다

섹션 순서 짜기 Section Order

섹션 순서는 방문자가 위에서 아래로 어떤 질문부터 답받는지 정하는 일입니다

Zapier는 첫 화면에서 큰 문장과 행동 버튼을 먼저 보여주고, 그 아래에서 다음 내용을 이어 줍니다

Trello도 먼저 핵심 이득을 보여주고, 그 옆에서 제품 모습을 함께 보여 줍니다

Dropbox는 제목과 설명과 대표 버튼을 먼저 보여주고, 제품 화면으로 이어서 믿음을 더합니다

같은 수업 페이지라도 섹션 순서를 잘못 놓으면 읽는 힘이 약해집니다

페이지 목적에 따라 자주 쓰는 섹션 순서 패턴도 달라집니다

방문자와 페이지 목적이 정해지면 첫 세 섹션은 훨씬 쉽게 고를 수 있습니다

가장 많이 묻는 질문일수록 위로, 덜 급한 정보일수록 아래로 보내면 됩니다

종이에 먼저 섹션 지도를 그려 두면 웹을 만들 때 훨씬 덜 헤맵니다

AI에게는 섹션 이름과 위에서 아래 순서를 같이 말해 줘야 합니다

막연한 요청을 섹션 순서까지 넣은 요청으로 고치면 구조가 훨씬 좋아집니다

오늘의 실습: 내 페이지의 섹션 순서를 직접 적어봅니다

핵심 생각

처음에 잡기 쉬운 기준

AI 명령 공식

섹션 순서 기록표

오늘의 점검

용어 설명