웹사이트 만들기 전에 알아야 할 용어 정리 — 페이지, 섹션, 디자인 시스템, PRD
AI 웹빌더를 처음 써보면 "섹션을 추가해드릴까요?", "디자인 시스템을 적용했습니다" 같은 말이 낯설게 들립니다. 이 4가지 개념을 먼저 이해하면 이후 과정이 훨씬 매끄럽게 흘러갑니다.
1. 페이지(Page) — 책의 챕터
웹사이트를 구성하는 개별 화면입니다. URL이 바뀌면 다른 페이지입니다.
비유: 책의 챕터. 책 전체 = 웹사이트, 챕터 = 각 페이지
예시: Home, About, Services, Contact, Blog
일반적인 소개 웹사이트는 4~6개 페이지로 구성됩니다. 방문자는 내비게이션 메뉴를 통해 페이지를 이동합니다. WindWalker는 AI와의 대화에서 "예약 페이지도 포함해줘"처럼 요청하면 해당 페이지를 자동으로 추가합니다.
웹사이트 구조 — 페이지와 섹션의 관계
Home (페이지)
About (페이지)
Contact (페이지)
각 박스 = 페이지 / 내부 항목 = 섹션
2. 섹션(Section) — 책의 단락
한 페이지 안에 세로로 쌓이는 구분된 블록입니다. 스크롤을 내리면 하나씩 지나치게 됩니다.
비유: 책의 단락. 챕터(페이지) 안에 단락(섹션)이 여러 개 있음
예시: 히어로 배너, 서비스 소개, 가격표, 고객 후기, 팀 소개, 연락처 폼
섹션은 콘텐츠를 시각적으로 구분하는 단위입니다. 같은 페이지 안에도 여러 섹션을 넣어 정보를 체계적으로 배치할 수 있습니다. "팀 소개 섹션 추가해줘"라고 AI에게 요청하면, AI는 어느 페이지의 어느 위치에 넣을지도 함께 결정합니다.
3. 디자인 시스템(Design System) — 브랜드 가이드북
사이트 전체에 적용되는 색상·폰트·간격 규칙의 집합입니다. 한 번 설정하면 모든 페이지에 자동으로 적용됩니다.
비유: 브랜드 가이드북. 어느 문서에서든 같은 로고, 색상, 폰트를 쓰는 규칙
포함 항목: 주요 색상, 보조 색상, 제목 폰트, 본문 폰트, 버튼 스타일, 여백 규칙
디자인 시스템의 실용적인 이점은 일관성입니다. 사이트가 10개 페이지로 늘어나도 같은 색상과 폰트가 자동으로 유지됩니다. "브랜드 색상을 진한 네이비로 바꿔줘"라고 하면 모든 페이지의 버튼, 배너, 링크 색상이 한 번에 바뀝니다.
주 색상
보조 색상
제목 폰트
본문 폰트
"브랜드 색상을 딥 그린으로 바꿔줘" → 모든 버튼·배너·링크 색상이 한 번에 변경
4. PRD (Product Requirements Document) — 건물 설계도
AI가 사이트 전체 구조를 이해하는 청사진 문서입니다. WindWalker에서는 AI가 자동으로 생성하고 관리합니다.
비유: 건물 설계도. 건물을 짓기 전에 구조를 문서화하듯, 사이트를 만들기 전에 AI가 전체 구조를 정리함
포함 내용: 페이지 목록, 각 페이지의 섹션 구성, 디자인 시스템 설정, 사이트 목적 및 타겟 사용자
사용자 입장에서는 PRD를 직접 작성할 필요가 없습니다. AI와 대화를 나누면 그 내용을 바탕으로 PRD가 자동으로 만들어집니다. 이후 "서비스 페이지 하나 더 추가해줘"라고 요청하면 PRD가 업데이트되고, 캔버스에 바로 반영됩니다.
네 개념의 관계 (계층 구조)
├── 디자인 시스템 (색상 · 폰트 · 간격)
└── 페이지들
├── Home
│ ├── 히어로 배너 섹션
│ ├── 서비스 소개 섹션
│ └── 고객 후기 섹션
├── About
│ ├── 팀 소개 섹션
│ └── 연혁 섹션
└── Contact
└── 연락처 폼 섹션
PRD가 가장 상위 개념입니다. 그 안에 디자인 시스템과 페이지들이 정의되고, 각 페이지는 다시 섹션들로 구성됩니다.
실제 사용 예시
이 4가지 개념을 머릿속에 두고 AI와 대화하면, 요청이 더 구체적이고 정확해집니다. "Home 페이지에 가격표 섹션 추가해줘"처럼 페이지와 섹션을 명시하면 AI도 더 정확하게 처리합니다.
정리
| 용어 | 한 줄 정의 | 비유 |
|---|---|---|
| 페이지 | 웹사이트의 개별 화면 (URL 단위) | 책의 챕터 |
| 섹션 | 페이지 안에 세로로 쌓이는 콘텐츠 블록 | 책의 단락 |
| 디자인 시스템 | 사이트 전체의 색상·폰트·스타일 규칙 | 브랜드 가이드북 |
| PRD | 사이트 전체 구조를 담은 AI의 청사진 | 건물 설계도 |