AI로 웹사이트 처음 만들기 — 첫 대화부터 멀티페이지 완성까지
Step 1 — 로그인 후 새 프로젝트 시작하기
로그인 후 채팅창이 열리면 첫 대화를 시작합니다.
이 화면이 WindWalker의 시작점입니다. 별도 프로젝트 설정 화면 없이, 채팅창에 원하는 사이트를 설명하는 것이 첫 단계입니다.
어떻게 입력할지 고민된다면, 아래 형식을 참고하세요.
예: "강남에 있는 이탈리안 레스토랑 웹사이트를 만들어줘. 메뉴 소개, 예약 안내, 오시는 길 페이지 포함해서."
너무 짧은 입력
"레스토랑 사이트 만들어줘"
AI가 추가 질문 필요 또는 범용 구성 생성
적절한 입력
"강남 이탈리안 레스토랑, 예약·메뉴·오시는 길 포함"
업종에 맞는 구성으로 바로 생성
상세한 입력
"업종+지역+색상+페이지 목록+특이사항"
첫 생성 결과 완성도가 높음
Step 2 — AI가 되묻는 질문들
AI가 몇 가지 추가 정보를 물어볼 수 있습니다.
더 정확한 사이트를 만들기 위해 AI가 비즈니스 특성, 디자인 방향, 필요 기능을 확인합니다.
실제 대화는 이런 식으로 진행됩니다.
Step 3 — PRD가 생성된다
AI가 사이트 전체 청사진(PRD)을 자동으로 만듭니다.
PRD에는 페이지 목록, 각 페이지의 섹션 구성, 디자인 시스템(색상·폰트) 정보가 담겨 있습니다. 이 문서를 기반으로 실제 HTML 페이지가 렌더링됩니다.
사용자 입장에서 PRD를 직접 볼 필요는 없습니다. 내부에서 AI가 관리합니다. 중요한 것은 이 구조 덕분에 이후 수정 요청도 전체 사이트의 맥락을 유지하며 반영된다는 점입니다.
AI가 자동 생성하는 PRD 구조
사이트 청사진
Step 4 — 캔버스에 첫 렌더링
Home 페이지가 캔버스에 나타납니다.
PRD를 기반으로 실제 웹사이트 화면이 렌더링됩니다. 히어로 배너, 소개 섹션 등이 디자인 시스템이 적용된 상태로 표시됩니다.
이 단계에서 완벽함을 기대할 필요는 없습니다. 텍스트가 placeholder일 수도 있고, 이미지가 비어 있을 수도 있습니다. 이후 채팅으로 하나씩 채워가는 방식이 일반적인 흐름입니다.
Step 5 — Pages 패널에서 페이지 전환
왼쪽 패널에서 생성된 페이지 목록을 확인합니다.
메뉴, 예약, 오시는 길 등 AI가 생성한 모든 페이지가 목록에 있습니다. 클릭하면 해당 페이지가 캔버스에 렌더링됩니다.
각 페이지를 클릭하며 구조를 확인하세요. AI가 각 페이지에 적합한 섹션을 배치했는지 살펴보고, 빠진 내용이나 조정이 필요한 부분을 메모해두면 다음 대화가 구체적으로 이어집니다.
이후: PRD 기반으로 수정이 계속 쌓인다
WindWalker의 구조에서 한 가지 알아두면 좋은 점이 있습니다. 첫 생성 이후의 모든 수정 요청도 PRD에 누적됩니다.
"팀 소개 섹션 추가해줘"라고 하면 About 페이지의 PRD가 업데이트되고, "색상 테마를 더 어둡게 바꿔줘"라고 하면 디자인 시스템 설정이 갱신됩니다. 사이트가 점점 구체화될수록 PRD도 함께 풍부해집니다.
자주 하는 실수: 첫 대화를 너무 짧게 쓰면?
AI는 정보가 부족하면 두 가지 중 하나를 합니다.
- 추가 질문: 업종, 페이지 구성, 색상 방향 등을 다시 물어봅니다.
- 일반적인 사이트 생성: 정보 없이 범용적인 구성으로 사이트를 만듭니다. 이 경우 수정 작업이 늘어납니다.
| 입력 유형 | 예시 | 결과 |
|---|---|---|
| 너무 짧음 | "레스토랑 사이트 만들어줘" | AI가 추가 정보 요청 또는 범용 구성 생성 |
| 적절함 | "강남 이탈리안 레스토랑, 예약·메뉴·오시는 길 포함" | 업종에 맞는 구성으로 바로 생성 |
| 상세함 | 업종 + 지역 + 색상 방향 + 페이지 목록 + 특이사항 | 첫 생성 결과 완성도가 높음 |
처음이라 어떻게 써야 할지 모르겠다면, AI의 추가 질문에 성실하게 답하는 것만으로도 충분합니다. 대화를 주고받으면서 사이트 구조가 자연스럽게 잡힙니다.