Wix와 Framer로 홈페이지 만들기 제작 단계

작업 전 준비물과 적용할 수 없는 조건

웹사이트 제작 전 운영 목적과 데이터 제어 범위를 구체적으로 구분해야 합니다. 예약 시스템, 결제 모듈, 고객 관리 기능이 필요한 상업용 웹사이트인 경우에는 Wix를 선택합니다. 반면 고도화된 인터랙션, 반응형 브레이크포인트 제어, 맞춤형 컴포넌트 설계가 중심인 포트폴리오나 랜딩 페이지인 경우에는 Framer를 선택합니다.

작업 환경에서는 캔버스 제어를 위해 데스크톱 브라우저 환경이 필수입니다. 정밀한 레이아웃 조작과 컴포넌트 속성 변경을 위해 고해상도 모니터와 마우스 또는 트랙패드를 준비합니다. 모바일 기기나 저해상도 단말기 환경에서는 전체 레이아웃 구성을 정밀하게 제어하기 어려우므로 주요 작업 환경에서 제외합니다.

복사 가능한 실제 입력 예시 또는 검수표

AI 프롬프트 작성 시 단편적인 단어만 입력하면 추상적인 결과물이 생성됩니다. 브랜드 정체성, 대상 고객, 주요 서비스, 필요한 섹션 구조를 명시해야 초기 생성 정확도를 높일 수 있습니다. 아래 프롬프트 구조를 복사하여 브랜드 상황에 맞게 수정하여 입력창에 적용합니다.

[브랜드명]을 위한 B2B SaaS 제품 소개 웹사이트를 생성해 주세요.
- 대상 고객: 프로젝트 관리가 필요한 IT 기업 팀장 및 PM
- 브랜드 스타일: 모던한 스타일, 블루 및 다크 그레이 컬러 테마
- 필수 섹션 구성:
  1. 히어로 섹션 (헤드라인, 서브 텍스트, 제품 캡처 이미지, CTA 버튼)
  2. 핵심 기능 3가지 비교 섹션 (아이콘, 제목, 상세 설명)
  3. 고객후기 및 도입 사례 섹션
  4. 요금제 안내 섹션 (월간/연간 스위치 포함)
  5. 문의하기 양식 및 푸터

생성 직후에는 데이터와 레이아웃이 제대로 배치되었는지 검수표 항목을 기준으로 대조합니다. 임시 텍스트 남아 있는지 여부, CTA 버튼의 링크 작동 여부, 모바일 브레이크포인트에서의 요소 겹침 현상, 메타 태그 입력 상태를 전수 조사합니다. 오류가 발견된 요소는 속성 패널에서 직접 변경하거나 AI 섹션 수정 기능을 실행합니다.

메뉴·파일·입력·확인 상태가 포함된 5단계 실행 절차

AI 도구를 활용해 웹사이트를 생성하고 커스텀 도메인에 연결 가능한 상태로 게시하는 절차입니다. Wix 에디터 및 Framer 캔버스 환경에 적용되는 제작 과정입니다.

1. AI 생성 메뉴에 접속하여 대화창이나 프롬프트 입력란에 준비한 브랜드 개요와 필수 섹션 요구사항을 입력합니다.
2. 생성된 초기 웹사이트 개요를 검토하고, Style 또는 테마 설정 메뉴에서 글꼴과 색상 팔레트를 브랜드 가이드라인에 맞게 일괄 변경합니다.
3. Canvas 또는 Editor 창에서 각 섹션을 클릭하고 오른쪽 속성 패널(Properties)을 열어 Width, Height, Padding, Alignment 값을 세부 조정합니다.
4. Pages 및 CMS 메뉴로 이동하여 신규 컬렉션을 생성하거나 비즈니스 솔루션(예약, 양식, 쇼핑몰) 요소를 페이지 내 지정된 위치에 추가합니다.
5. 상단 반응형 스위치(Desktop, Tablet, Phone)를 순서대로 클릭하여 레이아웃을 검토한 뒤, 우측 상단의 Publish 버튼을 눌러 라이브 사이트 URL을 생성합니다.

특정 레이아웃이 의도와 다르게 출력되면 전체를 다시 생성하지 않고 해당 섹션만 선택해 AI 섹션 생성기를 재실행합니다. Framer의 경우 Agent 패널에서 개별 레이어(Layer)를 지정하여 텍스트 및 이미지 구성 요소만 단독 변경할 수 있습니다. Wix는 섹션 추가 메뉴 내 AI 생성 기능을 통해 기존 틀을 유지하면서 부분적인 수정을 진행합니다.

결과를 판정하는 검수 기준

웹사이트 제작이 완료되면 3가지 관점에서 최종 상태를 판정합니다. 시각적 검증에서는 데스크톱(1200px 이상), 태블릿(768px), 모바일(390px) 브레이크포인트에서 텍스트나 이미지 요소가 영역 밖으로 넘치지 않는지 확인합니다. 버튼 크기가 모바일 화면에서 터치 불가능할 정도로 작아지지 않았는지 체크합니다.

기능 검증에서는 문의 양식(Form)에 테스트 데이터를 입력하고 Submit 버튼을 눌렀을 때 관리자 이메일이나 CRM 대시보드로 데이터가 전송되는지 확인합니다. 결제 모듈이나 예약 시스템을 탑재한 경우, 모의 테스트 모드를 통해 승인 단계부터 완료 페이지 이동까지 전체 흐름이 작동하는지 검증합니다.

검색엔진 최적화(SEO) 및 성능 검증에서는 각 페이지의 Settings 메뉴에서 Page Title, Meta Description, OG Image가 정상 등록되어 있는지 확인합니다. 게시된 URL을 구글 PageSpeed Insights 도구에 입력하여 로딩 속도 수치를 최종 확인한 후 사용자에게 주소를 공유합니다.

실패 원인 확인과 다른 메뉴·도구·관리자 경로

AI 프롬프트 입력 후 생성 오류가 발생하거나 기능 조작이 중단되는 원인은 권한 미비 또는 네트워크 연결 차단입니다. 엔터프라이즈 워크스페이스 계정을 사용하는 경우, 조직 관리자가 AI 기능을 비활성화해 두었으면 생성 명령이 작동하지 않습니다. 기업 계정인 경우에는 Workspace Settings 내 AI 권한 상태를 관리자에게 확인해야 합니다.

무료 플랜 상태에서 커스텀 도메인을 연결하려고 하면 업그레이드 안내창이 출력됩니다. Wix에서는 도메인 연결 메뉴 진입 시 프리미엄 플랜 업그레이드 페이지로 이동하며, Framer 역시 커스텀 도메인 적용을 위해서는 프로젝트별 요금제 구독이 선행되어야 합니다. 결제 오류나 플랜 미적용으로 기능이 제한되는 경우에는 각 서비스의 Billing 메뉴에서 결제 수단과 승인 상태를 재검토합니다.

AI 기반 생성 기능이 지속적으로 실패하거나 고도화된 인터랙션을 구현할 수 없는 경우 대안 도구를 활용합니다. 디자인 시스템 표준화 및 코드 추출이 핵심인 경우에는 Figma 디자인을 직접 Import하는 방식을 채택합니다. 백엔드 데이터베이스와의 복잡한 로직 연결이 필요한 경우에는 Webflow나 별도 프론트엔드 개발 환경으로 전환하여 작업을 진행합니다.