AI 웹사이트 클로너, 무엇을 관찰하고 어디까지 복원할 수 있을까요?

AI 웹사이트 클로너는 관찰한 화면·구조·동작을 바탕으로 프런트엔드를 재구현합니다. 스크린샷에 보이는 배치는 만들 수 있지만, 메뉴를 눌렀을 때의 변화까지 구현하려면 추가 자료가 필요해요. 복원 범위는 화면의 유사성과 조작의 정확성을 나눠 판단해야 합니다.

스크린샷 한 장에는 특정 화면 너비와 상태만 담깁니다. 닫힌 메뉴의 내부 구성이나 좁은 화면에서 달라지는 배치는 원본의 다른 상태를 관찰해야 재구현할 근거가 생겨요. 화면 코드를 새로 만드는 작업은 원본 소스를 회수하거나 서버 기능을 복원하는 작업과도 범위가 다릅니다.

결과를 평가하기 전에 입력 자료부터 확인하세요

먼저 AI에 어떤 자료가 주어졌는지 살펴보기를 권합니다. 스크린샷만 받았는지, URL에 접근해 페이지 요소의 구조인 DOM과 CSS, 이미지 같은 자산까지 확인할 수 있었는지가 출발점이에요. 입력 정보가 다른 결과를 나란히 비교하면 관찰 범위의 차이를 모델 성능의 차이로 오해하기 쉽습니다.

Design2Code는 실제 웹페이지 484개의 스크린샷을 바탕으로 화면을 렌더링하는 코드 생성 과제를 평가했습니다. 연구진은 당시 평가한 모델들이 시각 요소를 빠짐없이 재현하거나 정확한 레이아웃을 만드는 데 어려움을 보였다고 설명해요. 화면 재현에 관한 평가이므로 서비스 전체의 복원 성능으로 확대해 해석하기는 어렵습니다.

브라우저 내부 정보에 접근할 수 있다면 관찰의 깊이가 달라집니다. Chrome DevTools의 Styles 탭에서는 덮어써진 선언을 포함한 CSS 규칙을, Computed 탭에서는 요소에 실제 적용되는 값을 확인할 수 있어요. 간격을 눈으로 추정하는 데서 더 나아갈 수 있는 셈입니다.

Playwright의 ARIA 스냅샷은 요소의 역할·이름·상태와 계층을 담습니다. 버튼이 어떤 이름으로 노출되고 펼쳐진 상태로 표현되는지 살펴볼 수 있어요. 색상과 간격은 이미지로, 요소의 의미와 상태는 접근성 구조로 확인하면 서로 다른 정보를 얻습니다. 특정 클로너가 이런 자료를 수집하는지는 해당 도구의 접근 범위와 기능을 확인해야 합니다.

메뉴를 열기 전후의 상태를 기록합니다

관찰 단위는 ‘페이지 하나’보다 ‘특정 조건에서의 페이지 상태’로 잡는 편이 유용합니다.

메뉴가 닫힌 화면과 열린 화면을 따로 남기면 구현해야 할 결과가 구체적으로 드러납니다. 다음 순서로 기록하고 비교해 보세요.

1. 원본의 화면 너비·기기 조건과 메뉴가 닫힌 초기 상태를 기록합니다.
2. 메뉴를 여는 행동을 수행합니다.
3. 열린 화면과 요소의 상태를 저장합니다.
4. 재구현 화면에 같은 조건과 행동을 적용해 결과를 비교합니다.

Playwright의 테스트 생성기는 브라우저에서 수행한 행동을 테스트 코드로 기록하고, 표시 여부·텍스트·값에 대한 검증을 추가할 수 있게 합니다. 화면 너비와 기기, 색상 모드 등의 조건도 지정할 수 있어요. 기록한 행동에 기대 결과까지 붙여야 메뉴를 클릭했다는 사실을 넘어 제대로 열렸는지 확인할 수 있습니다.

각 화면 너비에서 발견한 차이는 요소 누락·배치 오류·동작 실패로 구분해 기록하기를 권합니다. 항목이 보이지 않는 문제, 위치가 어긋난 문제, 눌러도 반응하지 않는 문제는 수정할 지점이 다르기 때문이에요. 한 너비에서 성공했더라도 다른 너비의 결과는 따로 비교해야 합니다.

화면 차이 허용치보다 비교 조건을 먼저 맞춥니다

스크린샷은 외형을, ARIA 스냅샷은 접근성 구조를, 행동 테스트는 조작 후 기대 결과를 확인하는 데 사용합니다. 화면이 닮았다는 이유로 구조와 동작까지 통과했다고 판단하면 검증에 빈틈이 생겨요.

시각 비교에서는 운영체제·브라우저·설정과 화면 상태부터 맞춰야 합니다. 메뉴의 열림 여부처럼 비교 시점의 상태도 같아야 해요. Playwright의 toHaveScreenshot()은 기준 이미지와 실행 결과를 비교하므로, 환경 때문에 생긴 렌더링 차이와 구현 오류를 구분할 필요가 있습니다.

허용치를 높이면 테스트가 통과할 수 있지만 화면 자체가 개선되지는 않습니다.

Playwright의 시각 비교 문서에서 threshold는 픽셀의 색상 차이를 판단하는 기준이고, maxDiffPixels는 허용할 다른 픽셀 수를 뜻합니다. 두 설정을 구분하고 비교 조건을 맞춘 뒤, 남은 차이를 허용할지 결정하세요. 판정 기준을 느슨하게 만드는 일과 구현을 고치는 일을 구별해야 복원 품질을 제대로 평가할 수 있습니다.

이 절차는 관찰·검증의 기준으로 활용하세요. 과거 연구 결과만으로 최신 AI 웹사이트 클로너의 성능을 단정하기는 어렵습니다.