6단계 프로토타입 만들고 버전 관리하기

퍼널 에디터 6단계 프로토타입은 5단계 디자인 컨셉과 4단계 콘텐츠를 바탕으로 AI가 실제로 열어 볼 수 있는 HTML 페이지를 만들어 주는 단계입니다. 퍼널의 페이지마다 따로 만들고, 만든 결과를 미리 보고, 파일로 내려받을 수 있습니다. 이 글에서는 프로토타입을 생성하는 방법과 결과 카드, 상세 창의 기능을 안내합니다.

1. 6단계 화면 살펴보기

5단계에서 다음을 누르거나 위쪽 단계 탭의 프로토타입을 누르면 Step 6 / 7 화면이 열립니다. 맨 위 초록색 프로토타입 생성기 카드에는 "AI가 디자인 콘셉트를 바탕으로 실제 HTML 페이지를 생성합니다." 안내와 현재 저장된 프로토타입 개수, AI 모델 선택 상자, 전체 생성 버튼이 있습니다. 그 아래에는 퍼널의 단계마다 1. 설문 페이지, 2. 결과 페이지처럼 번호와 이름이 붙은 구역이 이어지고, 아직 만들지 않은 구역에는 "아직 생성된 프로토타입이 없습니다"라는 안내와 생성하기 버튼이 보입니다.

2. 모델 고르고 생성하기

AI 모델 선택 상자에서 프로토타입을 만들 모델을 고릅니다. 목록은 Gemini, Claude, GPT 같은 제공사별로 묶여 있고, 내 계정에서 사용할 수 있는 제공사의 모델만 나옵니다. 모델마다 속도가 달라서 같은 페이지도 걸리는 시간이 크게 차이 납니다.

한 페이지만 만들려면 해당 구역 오른쪽 위의 생성 또는 빈 상태의 생성하기를 누르고, 모든 페이지를 한꺼번에 만들려면 맨 위 전체 생성을 누릅니다. 생성 중에는 "AI가 프로토타입을 생성하고 있습니다" 안내와 로딩 표시가 나타나며, 이번 예시에서는 Gemini 2.5 Flash로 한 페이지를 만드는 데 20초 안팎이 걸렸습니다. AI 기능이므로 구독의 AI 사용 한도와 크레딧 상태에 따라 실행됩니다.

3. 결과 카드 읽기

생성이 끝나면 해당 구역에 생성된 프로토타입 카드가 나타나고 저장된 프로토타입 개수가 올라갑니다. 카드에는 만들어진 페이지의 축소 화면과 생성 시각, 1개 버전 배지가 보이고 아래쪽에 아이콘 네 개가 있습니다. 왼쪽부터 미리보기(눈 모양), 재생성, 다운로드, 삭제입니다. 이번 예시의 프로토타입에는 5단계에서 정한 초록 계열 색상과 분위기가 반영되었고, 히어로 영역에 어울리는 이미지도 함께 들어갔습니다.

4. 상세 창에서 확인하고 내려받기

카드나 미리보기 아이콘을 누르면 페이지 1 상세 편집 창이 열립니다. 왼쪽에는 만들어진 페이지가 실제 모습대로 표시되고, 오른쪽 위의 세 아이콘으로 데스크톱, 태블릿, 모바일 화면 폭을 바꿔 가며 볼 수 있습니다. 오른쪽 패널은 세 영역입니다.

• 버전 관리: 만들어진 디자인이 "생성된 디자인 날짜 (모델 이름)" 형식으로 시각과 함께 목록에 표시되며 현재 보고 있는 버전이 강조됩니다.
• 내보내기: HTML 다운로드를 누르면 페이지 전체가 담긴 HTML 파일이, 마크다운 다운로드를 누르면 제목과 내용이 정리된 마크다운 파일이 내려받아집니다.
• 작업: AI 다시 생성 버튼 아래에 "현재 내용을 덮어씁니다"라는 안내가 있습니다. 다시 생성하기 전에 마음에 드는 결과는 먼저 다운로드해 두세요.

5. 이렇게 활용해 보세요

• 처음에는 가장 중요한 페이지 한 장만 만들어 방향이 맞는지 확인한 뒤 나머지를 만드세요. 한 번에 전체 생성을 하면 시간이 오래 걸릴 수 있습니다.
• 모바일 폭으로 바꿔서 제목 줄바꿈과 버튼 위치를 확인하세요. 광고를 모바일로 보는 고객이 많다면 이 확인이 특히 중요합니다.
• HTML 파일은 개발자나 페이지 제작 도구에 전달하는 참고 시안으로 쓰기 좋습니다.

6. 알아 두실 점

• 프로토타입은 AI가 만든 시안입니다. 실제로 공개하기 전에 문구, 링크, 이미지를 직접 점검하세요.
• 생성 시간은 모델에 따라 크게 다릅니다. 처음에는 속도가 빠른 모델로 시험해 보고, 마음에 들면 다른 모델로도 만들어 비교해 보세요.
• AI 기능의 크레딧과 사용 한도는 플랜별로 다릅니다. 실행 전에 화면의 안내를 확인하세요.