Chrome 확장 프로그램 가이드

확장 프로그램 개요

CloneWebsite Chrome 확장 프로그램은 웹페이지 상태를 캡처하는 핵심 도구입니다. 전통적인 웹 크롤러와 달리 브라우저 컨텍스트 내에서 실행되므로 다음을 수행할 수 있습니다:

1. CORS 제한 우회: 교차 출처 리소스(예: 타사 호스팅 이미지 및 글꼴)에 직접 액세스하고 다운로드합니다.
2. 실제 렌더링된 상태 캡처: JavaScript 동적 계산 후의 최종 DOM과 CSS를 얻습니다.
3. 인증된 콘텐츠 액세스: 로그인이 필요한 페이지(예: 대시보드, 관리 시스템)를 클론합니다.

인터페이스 및 기능

브라우저 우측 상단의 확장 프로그램 아이콘을 클릭하여 메인 컨트롤 패널을 엽니다.

플로팅 도구 모음에는 두 가지 출력 대상이 있습니다: 웹사이트는 기존 HTML/ZIP 워크플로를 유지하고, Figma는 CloneWebsite Figma 플러그인용 로컬 .cdesign 아카이브를 생성합니다. 전체 워크플로와 권한 모델은 웹페이지를 Figma로 내보내기를 참조하세요.

클론 설정

클론을 시작하기 전에 다음 옵션을 구성할 수 있습니다:

• 딥 클론 모드: iframe 콘텐츠와 더 깊은 동적 리소스를 캡처하려고 시도합니다 (처리 시간이 늘어날 수 있음).
• 이미지 처리:
  • 파일로 추출 (권장): 모든 이미지를 assets 폴더에 저장되는 독립적인 .png/.jpg 파일로 추출합니다.
  • Base64 유지: 이미지를 HTML 내의 인라인 데이터로 유지합니다 (HTML 파일 크기가 매우 커짐).
• 개인정보 보호 필터링:
  • 추적 스크립트 제거: Google Analytics, Facebook Pixel 등과 같은 알려진 추적 코드를 자동으로 제거합니다.
  • 모든 JS 제거: 완전히 정적이고 상호작용이 없는 페이지 사본을 생성합니다 (가장 안전).
• 외부 링크 자동 수정: 절대 경로를 상대 경로로 변환하여 원활한 오프라인 탐색 환경을 보장합니다.

상세 클론 프로세스

1. 준비 단계

1. 페이지를 스크롤하여 모든 지연 로드된 이미지와 콘텐츠가 완전히 로드되었는지 확인합니다.
2. 캡처하려는 드롭다운 메뉴, 아코디언 컴포넌트 또는 모달을 펼칩니다.
3. 모든 스켈레톤 화면이 실제 콘텐츠로 교체될 때까지 기다립니다.

2. 실행 단계

클론 시작을 클릭하면 확장 프로그램은 다음 단계를 수행합니다:

1. DOM 동결: 캡처 중에 페이지가 변경되는 것을 방지하기 위해 모든 CSS 애니메이션과 타이머에 의해 트리거된 DOM 변경을 일시 중지합니다.
2. 리소스 추출: DOM 트리를 순회하여 참조된 모든 이미지, 글꼴 및 외부 스타일시트를 찾습니다.
3. 스타일 계산: 환경 간 시각적 일관성을 보장하기 위해 모든 요소의 최종 계산된 스타일을 얻습니다.
4. 중복 정리: 보이지 않는 요소, 빈 자리표시자 및 알려진 쓸모없는 스크립트 태그를 제거합니다.
5. 패키징 및 다운로드: JSZip을 사용하여 메모리에 파일 구조를 구축하고 브라우저의 다운로드 동작을 트리거합니다.

3. 큰 페이지 처리

매우 크거나 복잡한 페이지(예: 긴 목록, 무한 스크롤 대시보드)를 클론할 때 문제가 발생하면:

• 부분적으로 클론해 보세요: 가장 관심 있는 부분만 펼칩니다.
• 브라우저 메모리를 확보하기 위해 다른 관련 없는 탭을 닫습니다.
• 브라우저에 "페이지 응답 없음"이라고 표시되면 "대기"를 선택하세요. 복잡한 직렬화 프로세스에는 시간이 걸릴 수 있습니다.

단축키 및 일반 작업

• Alt + Shift + C (Mac: Option + Shift + C): 기본 설정을 사용하여 현재 페이지를 한 번에 클론합니다.
• 컨텍스트 메뉴: 페이지의 빈 영역을 마우스 오른쪽 버튼으로 클릭하고 CloneWebsite -> Clone this page를 선택합니다.

일반적인 오류 및 해결 방법

Q: 다운로드한 페이지의 레이아웃이 망가지는 이유는 무엇입니까?
A: 일반적으로 페이지가 복잡한 CSS 변수를 사용하거나 크기를 동적으로 계산하기 위해 특정 JavaScript 로직에 의존하기 때문입니다. 설정에서 "중요 스타일 강제 인라인" 옵션을 활성화해 보세요.

Q: 아이콘이 표시되지 않는 이유는 무엇입니까?
A: 일부 글꼴 아이콘(예: FontAwesome)에는 핫링크 보호가 있을 수 있습니다. 확장 프로그램이 가져오려고 시도하지만 서버가 거부하면 아이콘이 사각형으로 표시됩니다. 글꼴에 대한 교차 출처 전략을 지속적으로 최적화하고 있습니다.

Q: 클론을 클릭해도 아무 일도 일어나지 않나요?
A: Chrome 개발자 도구(F12)를 열고 콘솔 패널로 전환하여 오류를 확인하세요. 일부 매우 엄격한 콘텐츠 보안 정책(CSP)이 확장 프로그램 스크립트의 실행을 차단할 수 있습니다.