웹사이트 복제하기
제공된 페이지를 현재 앱에서 재현합니다. 새로운 디자인 방향을 적용하기 전에 소스와 일치시킵니다. 작동하고 편집 가능한 코드를 제공합니다: 스크린샷, iframe, 다운로드된 프로덕션 번들은 참조 자료일 뿐, 구현체가 아닙니다.
1. 작업 맵핑
프로젝트 지침, 실제 프레임워크/스크립트, 기존 경로를 읽습니다. 사용 가능한 브라우저로 소스 URL을 엽니다. 실용적인 경우 직접 HTTP, 에셋 도구 또는 API를 통한 추출을 선호하고, 브라우저는 외관과 동작을 확인하는 데 사용합니다.
짧은 소스-로컬 경로 맵과 각 페이지가 소유한 파일을 기록합니다. 앱의 규칙을 따르며, 이 템플릿에서는 src/app/, src/components/sites/<site>/, public/sites/<site>/, docs/research/<site>/를 사용합니다. 출처, 페이지 및 다운로드에 고유한 이름을 지정하고, 읽을 수 있는 이름이 충돌할 때는 포트나 URL 해시를 추가합니다.
- 첫 번째 루트 복제본은 수정되지 않은 템플릿 홈페이지를 대체할 수 있습니다.
- 하나의 출처에서 여러 페이지의 경우 소스 경로 이름을 유지합니다. 쿼리/프래그먼트 변형은 일반적으로 동일한 경로의 상태를 나타내므로 해당 상태를 재현합니다.
- 기존 제작 경로/에셋을 유지합니다. 요청 시 업데이트하고, 요청되지 않은 경로 충돌은 교체 전에 해결합니다.
- 기존 복제본에 페이지를 추가할 때는 기존 페이지에서 사용하는 스타일을 교체하지 않고 레이아웃과 전역 스타일을 확장합니다.
- 사용자가 결합된 앱을 원하지 않는 한, 다른 출처에는 별도의 앱을 사용합니다. 결합된 사이트에는 고유한 경로 접두사와 범위가 지정된 폰트, 스타일, 레이아웃이 필요합니다.
- 프레임워크 구문(
_,@, 괄호, 소괄호)과 충돌하는 리터럴 URL 세그먼트는 지원되는 메커니즘을 사용하여 이스케이프 처리한 후 실제 요청된 URL을 확인합니다.
기존 복제본은 유용한 시작점입니다: 현재 소스와 비교하고 재사용된 내용을 기록합니다. 요청된 모든 URL에 대상이 있고 파일 소유권이 명확해질 때까지 완료합니다.
2. 빌드 전 관찰
데스크톱 및 모바일 너비에서 전체 페이지를 검사합니다. 상단에서 하단으로 스크롤하여 지연 로드 미디어를 로드하고 고정/고정된 장면을 표시합니다. 그런 다음 메뉴, 탭, 아코디언, 캐러셀, 호버 상태 및 기본 링크를 실행합니다. 스크롤, 클릭, 호버, 시간에 의해 구동되는 변경 사항을 구분합니다. 스크롤 구동 섹션의 클릭 모방은 다른 결과물입니다.
각 관찰을 규칙의 한 샘플로 취급합니다. 한 번의 렌더링에서 유추하는 대신 선언된 값(computed 스타일, CSS 변수, 라이브러리의 라이브 옵션)을 읽고, 뷰포트 너비(디자인보다 더 넓은 것 포함), 뷰포트 높이, 입력 및 상태를 변경하여 각 변경 사항을 구동하는 요소를 파악합니다. 방문자가 사용하는 입력(휠, 터치, 키보드, 포인터)으로 페이지를 구동합니다. 스크립트 스크롤은 부드러운 스크롤과 같은 동작을 우회합니다.
뷰포트, 스크롤 위치 및 상호작용 상태로 레이블이 지정된 소스 스크린샷을 저장합니다. 대체 상태 콘텐츠/에셋을 캡처합니다. 하나의 간결한 페이지 요약을 유지합니다: 섹션 순서, 타이포그래피, 레이아웃 측정값, 에셋 맵핑 및 상호작용. 독립적인 빌더에게 도움이 될 때만 섹션 브리핑을 추가합니다.
추출 및 상태 비교를 위한 검사 참고 자료를 읽습니다. Framer 생성 페이지, 고정 장면, 공개 애니메이션 또는 애니메이션 미디어의 경우 Framer 및 모션을 읽습니다.
소스의 실제 텍스트와 실제 로드되는 파일(폰트, 이미지, SVG, 비디오)을 사용합니다. 다른 공급자나 아이콘 세트의 동일한 이름의 대체품은 다른 메트릭이나 모양을 가집니다. 중요한 지오메트리/계산된 스타일을 측정합니다. 시각을 HTML로 재구축하기 전에 계층화된 이미지와 미디어 요소를 검사합니다. 소스 URL → 로컬 에셋 경로를 추적하고 콘텐츠 유형/치수를 확인합니다: .png URL이 AVIF를 반환할 수 있습니다.
모든 섹션과 중요한 상태에 대해 사용할 수 없는 세부 정보가 식별된 상태로 빌드할 충분한 증거가 있을 때 완료합니다. 대규모 DOM 덤프는 페이지를 보는 것을 대체하지 않습니다.
3. 완전한 1차 빌드
먼저 폰트, 페이지 너비, 색상, 에셋, 경로, 페이지 전체 동작 및 공유 구성 요소를 설정합니다. 각 공유 구성 요소를 관찰된 모든 상태(호버, 포커스, 중단점)로 빌드하여 빌더가 있는 그대로 재사용할 수 있도록 합니다. 적합한 구성 요소를 재사용합니다. 레이아웃/간단한 모션에는 CSS를 선호하고, 소스 동작이 필요할 때는 애니메이션 라이브러리를 사용합니다.
실제 콘텐츠로 일관된 섹션을 빌드합니다. 공유 파일에 소유자가 생긴 후에 독립적인 페이지/섹션을 위임합니다. 빌더에게 스크린샷, 관련 측정값/상태 노트, 에셋 경로, 대상 파일 및 구체적인 완료 기준을 제공합니다. 정확한 파일 참조가 포함된 간결한 브리핑으로 충분합니다. 고정된 에이전트 수나 구성 요소별 문서는 필요하지 않습니다.
범위 내 상호작용을 재현합니다. 실제 외부 대상을 유지합니다. 포함된 경로에 대한 로컬 경로로 링크를 다시 작성하고, 범위를 벗어난 대상은 소스를 가리키도록 두고 공개합니다. 보이는 컨트롤은 약속된 동작을 수행해야 합니다.
통합된 조각 후에 적절한 프로젝트 검사를 실행합니다. 요청된 모든 섹션/경로가 실제 에셋으로 렌더링되고 중요한 컨트롤이 작동할 때 이 패스를 완료합니다.
4. 비교, 수정, 반복
동일한 뷰포트, 스크롤 위치 및 상태에서 소스/로컬 페이지를 엽니다. 폰트, 미디어 및 공개 애니메이션이 안정될 때까지 기다립니다. 2단계에서 규칙이 변경되는 모든 위치와 디자인보다 더 넓은 뷰포트에서 전체 페이지를 검토합니다. 실제 입력으로 스크롤 및 포인터 동작을 판단합니다. 나란히 비교 몽타주는 차이를 찾아내고, 전체 크기 섹션은 세부 사항을 파악합니다.
가장 큰 시각적 차이부터 수정합니다: 지오메트리, 누락된 섹션/레이어, 타이포그래피/줄바꿈, 에셋 크롭, 그다음 간격 및 모션. 영향을 받는 뷰를 다시 확인합니다. 초기, 활성 및 안정된 상태(관련된 경우 역방향 스크롤 포함)에서 애니메이션 영역을 비교합니다.
실제 로컬 워크플로를 실행합니다: 복제된 경로 간 탐색, 모바일 메뉴, 탭/아코디언 상태, 캐러셀 경계, 기본 작업, 미디어 컨트롤 및 관찰된 스크롤 연결 전환. 런타임 오류, 누락된 에셋 및 가로 오버플로를 확인합니다. 페이지를 추가할 때는 기존 경로가 여전히 작동하는지 확인합니다. 클래스 이름에 대한 단언문 대신 이러한 경계에서 몇 번의 브라우저 검사를 사용합니다.
프로젝트의 프로덕션 검사를 실행합니다. 완료하려면 성공적인 빌드 및 렌더링 비교가 필요합니다. 확인되지 않은 결과를 픽셀 완벽이라고 부르는 대신 남은 차이점을 정확히 명시합니다.
제공
미리보기/실행 지침, 소스-로컬 경로 맵, 대표적인 데스크톱/모바일 비교, 실제 실행된 검사 및 남은 시각적/기능적 차이점을 반환합니다. 재사용 가능한 템플릿을 유지할 때는 참조 복제본을 별도의 앱에 보관합니다.