숨겨진 데이터를 가시 텍스트 키워드 감지가 놓치는 이유와 이를 해결하는 방법

키워드 모니터링을 설정하고 DevTools를 열어 페이지의 HTML에서 해당 단어를 분명히 볼 수 있는데도 알림은 전혀 발생하지 않습니다. 문제가 있는 것은 아닙니다. 표준 키워드 감지는 페이지의 가시적인 텍스트, 즉 사람이 화면에서 실제로 읽을 수 있는 단어만 읽습니다. 모니터링하는 값이 숨겨진 요소, data- 속성 또는 인라인 스크립트에 있다면 실제 데이터이기는 하지만 가시적인 텍스트는 아니므로 일반 감지는 그대로 지나쳐 버립니다.

해결 방법은 체크박스 하나입니다. Extfy의 Auto Refresh 확장 프로그램의 Detect Keyword 탭에서 Find monitor text in source를 활성화하면 키워드 검색이 렌더링된 텍스트에서 전체 HTML 소스로 전환되며, 숨겨진 요소, 속성 및 스크립트까지 모두 포함하여 검색합니다.

자동 새로고침

한국어 

실행 중 

시간 간격

새로고침 목록

키워드 감지

태그를 입력하세요

in_stock ✕

키워드에 대한 알림 및 강조 표시 설정

 사용자에게 알림 

키워드를 찾았거나 선택기를 클릭했을 때

키워드를 찾지 못했거나 일치하는 선택기가 없을 때

 키워드를 찾았을 때/찾지 못했을 때 소리 재생 

 소스에서 모니터링 텍스트 찾기 

저장

숨겨진 데이터가 실제로 존재하는 위치

현대의 웹페이지는 화면에 표시하는 것보다 훨씬 더 많은 정보를 마크업에 담고 있습니다. 찾고 있는 키워드는 다음과 같은 위치 중 하나에 있는 경우가 많습니다.

• 숨겨진 요소 — display:none 또는 visibility:hidden으로 감싸진 상태 메시지로, 스크립트가 이를 표시할 때까지 기다리고 있습니다.
• data- 속성 — data-availability="in_stock" 또는 data-status="approved"와 같은 값으로, UI를 제어하지만 텍스트로는 표시되지 않습니다.
• 인라인 스크립트와 JSON — 페이지가 <script> 블록에 포함해 전달하고 나중에 JavaScript로 렌더링하는 상태 객체입니다.
• title, alt, aria-label과 같은 속성 — 기계와 스크린 리더는 읽을 수 있지만 텍스트 일치 검색에는 보이지 않습니다.
• HTML 주석과 템플릿 블록 — 개발자가 남겨둔 마크업으로, 여전히 페이지의 실제 상태를 반영합니다.

일반 키워드 감지가 이러한 내용을 볼 수 없는 이유

가시 텍스트 감지는 사용자의 직관에 맞도록 설계되었습니다. 브라우저가 모든 내용을 렌더링한 후 사람이 보는 방식대로 페이지를 읽으며, 실제 화면에 표시되는 단어만 대상으로 합니다. 덕분에 빠르고 결과도 명확합니다. 일치 항목이 있다는 것은 사람도 그 단어를 볼 수 있다는 의미입니다. 하지만 이러한 설계에는 사각지대가 있습니다. 마크업에만 존재하는 내용은 정의상 가시 텍스트가 아니므로 감지기는 그것을 전혀 확인하지 않습니다. 페이지에 입력한 키워드 문자열이 그대로 여러 번 존재하더라도 렌더링된 화면에 없다면 감지는 정직하게 “찾을 수 없음”이라고 보고합니다.

해결 방법: Find monitor text in source 활성화

1. 모니터링 중인 페이지에서 Auto Refresh 확장 프로그램을 열고 Detect Keyword 탭으로 이동합니다.
2. 소스에 표시된 그대로 키워드를 입력합니다. 예를 들어 페이지가 나중에 표시할 수 있는 “In stock” 라벨이 아니라 in_stock을 입력합니다.
3. Find monitor text in source를 선택합니다.
4. Save를 클릭합니다. 다음 새로고침부터는 매번 검사할 때마다 가시 텍스트만이 아니라 숨겨진 요소와 스크립트를 포함한 전체 HTML 소스를 검색합니다.

가시 텍스트 감지와 소스 감지 비교

• 읽는 대상: 가시 텍스트 모드는 사람이 보는 렌더링된 페이지를 읽고, 소스 모드는 서버가 전송한 원시 HTML 전체(모든 태그, 속성, 주석 및 인라인 스크립트)를 읽습니다.
• 속도: 가시 텍스트 모드가 더 가볍습니다. 전체 소스를 검색하면 새로고침마다 더 많은 작업을 수행하므로 검사가 약간 더 무거워질 수 있습니다.
• 오탐: 가시 텍스트 모드는 오탐이 드물지만, 소스 모드는 화면 표시와 무관한 백그라운드 마크업의 키워드와 일치할 수 있습니다.
• 적합한 용도: 가시 텍스트 모드는 일반적인 모니터링에 적합하며, 소스 모드는 페이지가 저장하지만 표시하지 않는 값을 확인하려는 개발자와 고급 사용자에게 적합합니다.

실제 예시: 페이지에 표시되기 전에 변경 사항 감지하기

쇼핑객에게는 “Out of stock”이 표시되지만 마크업에는 이미 data-availability="in_stock"이 포함된 상품 페이지를 생각해 보세요. 데이터는 이미 업데이트되었지만 UI만 아직 반영되지 않은 상태입니다. 가시 텍스트 감지는 오래된 “Out of stock” 라벨만 계속 감지합니다. Find monitor text in source를 활성화하고 키워드를 in_stock으로 설정하면 Auto Refresh는 HTML에 변경 사항이 기록되는 즉시 이를 감지하며, 화면이 업데이트되기보다 한발 앞서는 경우가 많습니다. 같은 방법은 숨겨진 오류 플래그, 관리자 도구의 승인 상태, 그리고 JavaScript가 나중에 렌더링하는 모든 값에도 적용됩니다.

소스 일치 검색을 정확하게 유지하기

• 구체적으로 지정하세요.
짧고 일반적인 단어는 페이지의 마크업 곳곳에 우연히 나타날 수 있으므로 stock보다 in_stock 또는 status-approved와 같은 고유한 문자열이 훨씬 안전합니다.
• 의도하지 않은 일치에 주의하세요. 화면에서 아무것도 변경되지 않았는데도 알림이 발생한다면 키워드가 백그라운드 마크업과 일치하는 것입니다. 키워드를 더 구체적으로 지정하거나 해당 규칙을 다시 가시 텍스트 모드로 전환하세요.
• 모든 곳이 아니라 규칙별로 활성화하세요. 표준 감지로 이미 필요한 내용을 찾을 수 있는 페이지라면 더 빠르고 깔끔한 검사를 위해 이 옵션은 꺼두는 것이 좋습니다.

가시 텍스트 감지는 기본적으로 가장 적합한 선택입니다. 하지만 모니터링하는 대상이 실제로 화면에 렌더링되지 않는다면 예외입니다. 키워드가 숨겨진 요소, 속성 또는 스크립트에 있는 경우 Detect Keyword 탭과 Auto Refresh에서 Find monitor text in source를 활성화하면 DevTools가 페이지를 읽는 방식 그대로 HTML을 검사하여 일반 감지가 조용히 놓치는 데이터를 찾아냅니다.