AI가 멀티페이지 웹사이트를
자동으로 만드는 방법
"보안 스타트업 웹사이트 만들어줘"라는 한 문장으로 Home·About·Services·Contact 4개 페이지가 완성됩니다. WindWalker가 멀티페이지 사이트를 구성하는 원리를 소개합니다.
멀티페이지 웹사이트란 무엇인가
웹사이트는 크게 두 가지로 나뉩니다. 모든 내용을 한 화면에 담은 단일 페이지(One-page)와, 페이지별로 URL이 다른 멀티페이지(Multi-page)입니다.
소개용 랜딩페이지는 단일 페이지로도 충분하지만, 기업 소개·서비스 목록·팀 소개·연락처를 각각 제공해야 한다면 멀티페이지 구조가 필요합니다. 방문자가 찾는 정보로 바로 이동할 수 있고, 검색 엔진도 페이지별로 인덱싱할 수 있어 SEO에도 유리합니다.
AI가 멀티페이지 구조를 어떻게 만드는가
WindWalker에서 새 프로젝트를 시작할 때 AI와의 짧은 대화만으로 전체 사이트 구조가 결정됩니다. 내부적으로는 다음 순서로 동작합니다.
사용자가 입력한 업종·목적·분위기를 AI가 분석합니다. "보안 스타트업", "신뢰감 있는 디자인", "투자자용" 같은 맥락을 읽습니다.
업종에 맞는 표준 페이지 구성을 제안합니다. 스타트업이면 Home·About·Services·Contact, 쇼핑몰이면 Home·Products·About·FAQ 등입니다.
각 페이지의 섹션 구성, 색상 팔레트, 폰트, 내비게이션 구조가 포함된 PRD가 자동으로 작성됩니다.
PRD를 기반으로 각 페이지의 HTML이 생성되고, 에디터에 즉시 표시됩니다. 모든 페이지는 동일한 디자인 시스템을 공유합니다.
자동 생성되는 페이지들의 역할
스타트업 사례를 기준으로 각 페이지가 어떤 역할을 담당하는지 설명합니다.
| 페이지 | URL | 주요 역할 | 핵심 섹션 |
|---|---|---|---|
| Home | / | 첫인상, 핵심 가치 전달 | Hero, Features, Testimonials, CTA |
| About | /about/ | 신뢰 구축, 팀·비전 소개 | Mission, Team, History |
| Services | /services/ | 제품·서비스 상세 설명 | Service cards, Pricing, FAQ |
| Contact | /contact/ | 문의 전환, 리드 수집 | Form, Map, SNS links |
페이지를 추가하는 방법
초기 생성 이후에도 페이지를 추가할 수 있습니다. 에디터 채팅창에 자연어로 요청하면 됩니다.
- "블로그 페이지 추가해줘" → /blog/ 페이지 생성 및 네비게이션 자동 업데이트
- "가격 안내 페이지 만들어줘" → /pricing/ 페이지와 요금제 카드 구성
- "팀 소개를 별도 페이지로 분리해줘" → About 페이지에서 Team 섹션을 독립 페이지로 분리
WindWalker는 새 페이지를 추가할 때 기존 사이트의 디자인 시스템(색상, 폰트, 레이아웃 스타일)을 자동으로 적용합니다. 추가된 페이지가 나머지 페이지들과 동떨어진 모양으로 나타나는 일을 줄여줍니다.
주의사항
멀티페이지 기능을 사용할 때 알아두면 좋은 점들입니다.
- 페이지 수 제한: 현재 베타 기간에는 프로젝트당 최대 10개 페이지를 지원합니다.
- 네비게이션 자동 업데이트: 페이지를 추가하면 전체 페이지의 헤더 내비게이션이 함께 업데이트됩니다. 단, 복잡한 드롭다운 메뉴 구성은 추가 요청이 필요할 수 있습니다.
- 페이지 삭제 시 주의: 다른 페이지에서 링크가 걸려 있는 페이지를 삭제하면 해당 링크가 깨집니다. 삭제 전 AI에게 "연결된 링크도 같이 정리해줘"라고 요청하세요.
- 커스텀 도메인: 멀티페이지 구조는 커스텀 도메인 연결 후 정상적인 URL 구조(/about/, /services/ 등)로 제공됩니다.