Deep Learning & Computer Vision in Web Diffing: Solving Layout Shifts with Neural Embeddings and SSIM

개요

딥러닝 및 컴퓨터 비전 기술은 웹사이트 레이아웃 변경 감지에 있어 픽셀 단위 비교의 한계를 극복하고, 신경망 임베딩과 SSIM을 활용하여 정확도를 높이는 방식으로 발전하고 있습니다.

주요 내용

* 픽셀 단위 비교의 한계: 기존의 픽셀 단위 비교 알고리즘은 웹 환경에서 동적인 배너 삽입, 텍스트 렌더링 차이 등 실제 콘텐츠 변화와 무관한 요소로 인해 오탐(false positive)을 발생시킵니다.
* 구조적 유사성 지수 (SSIM): SSIM은 인간의 시각적 인식을 모방하여 휘도(Luminance), 대비(Contrast), 구조(Structure) 세 가지 차원에서 이미지 간의 유사성을 측정하며, 픽셀 값 자체보다는 구조적 변화에 초점을 맞춰 노이즈에 강건합니다.
* SSIM 계산 공식: $\text{SSIM}(x, y) = \frac{(2\mu_x\mu_y + C_1)(2\sigma_{xy} + C_2)}{(\mu_x^2 + \mu_y^2 + C_1)(\sigma_x^2 + \sigma_y^2 + C_2)}$
* TypeScript로 SSIM 윈도우 슬라이딩 구현 예시가 제시되었습니다.
* 탄력적 레이아웃 보정 (ORB): 페이지 요소가 이동하는 경우(e.g., 상단 배너 추가), SSIM만으로는 해당 영역을 변경으로 감지합니다. ORB(Oriented FAST and Rotated BRIEF) 특징점 매칭을 통해 이동 벡터를 계산하고, 이미지 변환(homography)을 적용하여 변경 전 이미지와 정렬 후 SSIM 비교를 수행합니다.
* 의미론적 임베딩 (Siamese Neural Networks & ONNX Runtime): 동적인 그래프, 아바타, 폰트 스타일 변화 등 복잡한 웹 컴포넌트의 경우 픽셀 또는 SSIM 비교가 민감할 수 있습니다. 이를 해결하기 위해 경량화된 Siamese ResNet-18 신경망을 ONNX Runtime에서 실행하여 스크린샷 영역을 128차원의 잠재 공간(latent feature space)으로 투영합니다.
* 두 이미지 패치의 임베딩 벡터 간 코사인 유사도(cosine similarity)가 특정 임계값 $\epsilon$ 미만이면, 이를 비의미적(cosmetic) 변화로 간주합니다.
* ONNX Runtime을 활용한 엣지 추론(edge inference) 및 코사인 유사도 계산 코드 스니펫이 제공됩니다.
* 다단계 컴퓨터 비전 파이프라인:
1. HTML AST 비교를 통한 조기 종료 (구조적 해시 체크).
2. SSIM 맵 생성.
3. ORB 특징점 매칭을 통한 레이아웃 정렬.
4. ResNet-18 임베딩 모델을 사용한 신경망 기반 의미론적 필터링 (ONNX).
5. 검증된 고신뢰도 의미론적 변경 사항만 강조 표시.

시사점

SSIM, ORB, 신경망 임베딩의 조합은 웹사이트 변경 모니터링에서 발생하는 99% 이상의 오탐을 제거하고, 즉각적이며 신뢰할 수 있는 변화 감지를 가능하게 합니다.