데이터 추출

사용할 때 유료 Workspace 요금제, Webflow 디자이너에서 직접 웹사이트의 HTML, CSS, JavaScript 및 리소스를 추출할 수 있는 옵션이 있습니다. 이는 코드 백업을 생성하거나 요청 시 클라이언트에 제공하는 데 유용할 수 있습니다. 또한 어트리뷰션 없이 원하는 플랫폼에서 호스팅하기 위해 추출된 코드를 활용할 수도 있습니다. 

이 튜토리얼에서는 다음 영역을 다룹니다.

1. 코드를 추출하는 방법
2. 축소된 HTML을 추출하는 절차
3. 추출된 파일의 내용
4. 추출된 파일에서 제외
5. 문제 해결을 위한 자주 묻는 질문과 팁

코드를 추출하는 방법

1. 사이트용 디자이너 실행
2. 선택 내보내다 옵션 
3. 클릭 우편번호 준비 
4. ZIP 파일 다운로드를 진행하세요.

메모: CMS, 사용자 계정, 전자상거래(데이터베이스) 및 논리 흐름의 콘텐츠는 추출된 코드에 포함되지 않습니다. 컬렉션 목록은 빈 상태로 표시되며 컬렉션 페이지에는 컬렉션 필드에 첨부된 콘텐츠가 부족합니다. 페이지의 비밀번호 보호가 우편번호 추출을 무효화합니다. 또한 사이트 검색 기능 및 양식(파일 업로드 및 reCAPTCHA 포함)은 GDPR 규정을 준수하기 위해 내보낸 사이트에서 작동이 중단됩니다. 내보낸 사이트의 양식 제출에 대한 추가 지침을 참조하세요.

축소된 HTML을 추출하는 방법

축소를 통해 HTML을 최적화하면 브라우저 렌더링에 필요하지 않은 불필요한 공백, 주석 및 기타 필수적이지 않은 코드 요소를 제거하여 페이지 로딩 속도를 향상시킬 수 있습니다. 축소된 HTML을 추출하려면:

1. 다음을 클릭하세요. 내보내다 디자이너 상단에 있는 버튼
2. 누르다 컨트롤 + O 키보드에서
3. 확인란을 선택하세요. HTML 축소 내보내기 창에 나타나는
4. 딸깍 하는 소리 우편번호 준비 
5. ZIP 파일을 저장하세요.

추출된 파일의 내용

다운로드한 ZIP 파일은 사이트의 모든 페이지, 스타일, 스크립트 및 이미지로 구성됩니다.

1. CSS 디렉토리 사이트의 모든 스타일이 3에 포함되어 있습니다. .css 파일:

• CSS 파일 (예: your-site-name.css) 모든 사용자 정의 스타일 포함
• 웹플로우.css 여기에는 Webflow 레이아웃 시스템의 기본 기본 스타일과 탐색 모음, 슬라이더 및 탭과 같은 다양한 구성 요소가 포함되어 있습니다.
• 정규화.css 이는 브라우저가 요소를 일관되게 렌더링하고 최신 표준을 준수하도록 보장합니다. 특히 정규화가 필요한 스타일에 중점을 둡니다.

2. JS 디렉토리 주택 Webflow.js 파일. 이 파일에는 페이지에서 대화형 요소를 활성화하는 데 필요한 필수 JavaScript가 포함되어 있습니다. 양식, 탐색 모음, 슬라이더, 탭 및 상호 작용과 같은 요소는 webflow.js에 따라 달라집니다. 이 파일을 삭제하면 페이지에 다음이 발생할 수 있습니다.나타나다올바르게 작동하지만 제대로 작동하지 않습니다.
3. 이미지 디렉토리 사이트의 자산 관리자에 업로드된 이미지가 포함되어 있습니다.
4. .html 파일 모든 사이트 페이지(콘텐츠가 없는 컬렉션 템플릿 페이지 포함)

메모: CMS, 사용자 계정, 전자상거래(데이터베이스) 및 논리 흐름의 콘텐츠는 추출된 코드에 포함되지 않습니다. 컬렉션 목록은 빈 상태로 표시되며 컬렉션 페이지에는 컬렉션 필드에 첨부된 콘텐츠가 부족합니다. 페이지의 비밀번호 보호가 우편번호 추출을 무효화합니다. 또한 사이트 검색 기능 및 양식(파일 업로드 및 reCAPTCHA 포함)은 GDPR 규정을 준수하기 위해 내보낸 사이트에서 작동이 중단됩니다. 내보낸 사이트의 양식 제출에 대한 추가 지침을 참조하세요.

통찰력: Webflow에서 내보낸 코드를 살짝 보려면 다음의 소스 코드를 확인하세요. 우리 홈페이지 마우스 오른쪽 버튼을 클릭하고 페이지 소스 보기를 선택합니다. 모든 것은 Webflow를 사용하여 제작되었습니다!

추출된 파일에서 제외

후속 기능과 콘텐츠는 추출된 코드에서 제외되며 내보낸 웹사이트에서 예상대로 작동하지 않습니다. 

• CMS 콘텐츠 및 기능(컬렉션 항목 및 목록 포함)
• 사용자 계정 콘텐츠 및 기능(사용자 및 액세스 그룹 포함)
• 전자상거래 콘텐츠 및 기능(제품 및 결제 포함)
• 사이트 또는 페이지 비밀번호 보호
• 양식 제출 처리 
• 기존 양식 제출(별도로 내보낼 수 있음)
• 양식에 존재하는 reCAPTCHA 요소
• 사이트 검색
• 논리 흐름

참고: CMS, 사용자 계정, 컬렉션 항목, 사용자 계정 및 제품의 백업을 유지하려는 경우 전자상거래 컬렉션을 CSV 형식으로 별도로 내보낼 수 있습니다. CSV 내보내기에 대해 자세히 알아보세요.

FAQ 및 문제 해결 팁

클래스 이름에 "w-" 접두사를 붙이는 이유는 무엇입니까?

다른 코드 프레임워크와의 충돌을 피하기 위해 Webflow는 구성 요소별 클래스에 "w-" 접두사를 추가합니다. 

내 사이트 코드 섹션을 선택적으로 내보낼 수 있나요?

현재는 내보낼 특정 부품을 선택하는 옵션이 없습니다. 사이트의 내보낼 수 있는 모든 측면이 각 추출에 포함됩니다. 

내보내기 후에 코드를 수정하는 것이 가능합니까?

내보낸 후에는 코드를 자유롭게 변경할 수 있습니다. 그럼에도 불구하고 내보낸 파일을 수동으로 조정하면 특정 Webflow 구성 요소가 중단될 수 있습니다. 

내보낸 페이지의 URL에서 .html 확장자를 제거할 수 있나요?

내보낸 페이지에서 .html 확장자를 제거하려면 .htaccess 파일. 

내 사이트를 외부에서 호스팅하는 경우 Webflow를 의무적으로 적립해야 합니까?

내보내기 후, 내보낸 사이트가 외부 서버에서 작동하려면 Webflow 계획에 대한 속성이나 요구 사항이 필요하지 않습니다. 

추출된 코드에 내 CMS, 멤버십, 전자상거래 콘텐츠가 포함됩니까?

CMS, 사용자 계정 및 전자상거래 콘텐츠(데이터베이스)는 추출된 코드의 일부가 아닙니다. 컬렉션 목록에는 빈 상태가 표시되고 컬렉션 페이지에는 컬렉션 필드에 바인딩된 콘텐츠가 부족합니다. 

코드 추출 후에도 비밀번호로 보호된 페이지는 안전하게 유지되나요?

아니요. 사이트의 비밀번호로 보호된 페이지는 우편번호 내보내기 보호 기능을 잃게 됩니다. 비밀번호 보호가 올바르게 작동하려면 사이트가 Webflow에서 호스팅되어야 합니다. 프로젝트 및 페이지 비밀번호에 대한 자세한 내용을 참조하세요. 

코드를 다른 곳에 호스팅하면 모든 사이트 요소가 작동합니까?

CMS, 사용자 계정, 전자상거래 콘텐츠(데이터베이스) 및 기능은 논리 흐름과 함께 추출된 코드에 포함되지 않습니다. 이러한 기능이 제대로 작동하려면 호스팅이 필요합니다. 내보낸 사이트에서 컬렉션 목록은 빈 상태로 표시되고 컬렉션 페이지에는 컬렉션 필드에 바인딩된 콘텐츠가 부족합니다. 사이트에서 비밀번호로 보호된 모든 페이지는 우편번호 추출 보호 기능을 잃게 됩니다. 

또한 GDPR을 준수하기 위해 내보낸 사이트에서는 사이트 검색 기능 및 양식(파일 업로드 및 reCAPTCHA 포함)이 작동하지 않습니다. 양식 제출을 수집하려면 타사 도구를 사용하거나 타사 양식 통합을 포함하는 것을 고려하세요. 내보낸 사이트에서 양식 제출 수집에 대한 지침을 참조하세요.

사이트를 내보낸 후 Lottie 애니메이션이 로컬에서 작동하지 않는 이유는 무엇입니까?

보안 프로토콜의 경우 Lottie JSON 파일은 로컬 파일 시스템에서 로드되지 않습니다. 결과적으로 사이트가 로컬로 액세스되면 Lottie 애니메이션이 표시되지 않습니다. 애니메이션이 의도한 대로 작동하려면 웹 서버가 필수적입니다.