# Runtime Snapshots #7 — SiFR 내부: LLM이 Web UI를 볼 수 있게 하는 스키마

Source: Dev.to

SiFR은 Semantic Information for Representation의 약자로, 웹 페이지의 런타임 상태를 다음과 같은 방식으로 캡처하는 JSON 스키마입니다.

• 토큰 효율적 (복잡한 페이지에서는 원시 HTML보다 보통 10–50배 작음)
• 의미 구조화 (모델이 마크업을 재구성하지 않아도 추론 가능)
• 시각 인식 (픽셀 없이 레이아웃 관계를 보존)

이는 DOM과 AI 사이에 위치하는 전처리 레이어로, “브라우저가 렌더링한 내용”을 “모델이 추론할 수 있는 형태”로 변환합니다.

---

왜 원시 HTML만으로는 부족한가

일반적인 전자상거래 페이지에는 다음과 같은 요소가 존재합니다.

• 깊게 중첩된 레이아웃 래퍼
• 반응형 레이아웃을 위한 중복 마크업
• 의미 없는 컨테이너를 가진 클라이언트‑사이드 프레임워크
• DOM에 존재하지만 숨겨져 있거나 비활성화된 요소

이 HTML을 LLM에 전달하면 모델은 다음을 수행해야 합니다.

1. 런타임 UI 상태를 재구성
2. 하위 작업을 해결

대부분의 실패는 단계 1에서 발생합니다. 원시 마크업에서 “버튼 찾기” 경로는 다음과 같습니다.

div > div > div > div > div > div > ... > button

---

SiFR 실제 적용 예

간단한 요소 스냅샷

{
  "id": "btn042",
  "text": "Add to Cart",
  "actions": ["clickable"],
  "salience": "high",
  "cluster": "product-actions"
}

LLM은 요소가 무엇인지, 어떻게 동작하는지, 어디에 속하는지를 마크업을 역공학하지 않고도 파악합니다.

전체 SiFR 스냅샷 구조

1. 페이지‑레벨 컨텍스트 – URL, 뷰포트, 타임스탬프, 통계

   {
     "url": "https://www.costco.com/...",
     "viewport": { "width": 1920, "height": 1080 },
     "stats": {
       "totalNodes": 2847,
       "salienceCounts": { "high": 12, "med": 89, "low": 2746 }
     }
   }

2. 구조적 스켈레톤 – 고수준 레이아웃 블록(페이지의 “목차”)

   {
     "layoutBlocks": [
       { "role": "header",   "contains": ["logo", "nav", "search"] },
       { "role": "sidebar", "contains": ["filters", "categories"] },
       { "role": "main",    "contains": ["product-grid"] }
     ]
   }

3. 요소‑별 데이터 – 셀렉터, 텍스트, 가시성, 인터랙션 상태

   {
     "btn042": {
       "selector": "button.add-to-cart",
       "text": "Add to Cart",
       "actions": ["clickable"],
       "styles": { "visible": true, "disabled": false }
     }
   }

4. 공간 관계 – 의미 기반 위치 지정(픽셀 좌표 없음)

   {
     "btn042": {
       "inside": "card-product-123",
       "below": "price-display",
       "rightOf": "quantity-selector"
     }
   }

5. 중요도 태깅 – 모델의 초점을 안내

   • High: 주요 액션, 메인 콘텐츠, 사용자 입력
   • Medium: 보조 네비게이션, 지원 정보
   • Low: 래퍼, 컨테이너, 장식 요소

   예시 맵:

   PAGE STRUCTURE:
   ├── Header (logo, nav, search, cart)
   ├── Sidebar (filters)
   └── Main
       ├── Breadcrumbs
       ├── Product Grid (24 items)
       └── Pagination

---

압축 결과 (대표적인 예)

복잡한 페이지에서는 SiFR이 LLM 워크플로를 실용적으로 만들며, 원시 HTML은 컨텍스트 윈도우를 초과하는 경우가 많습니다.

---

시작하기

SiFR은 Element to LLM이라는 무료 브라우저 확장 프로그램에 구현되어 있습니다.

• Chrome 웹 스토어 (Arc, Brave, Edge에서도 작동)
• Firefox Add‑ons

포맷 스트레스 테스트

다음 사이트의 스냅샷을 캡처해 보세요.

• https://www.costco.com – 실제 기업 UI, 프레임워크 무거움
• https://www.arngren.net – 시각 밀도가 극단적이고 레이아웃이 혼란스러움

캡처 후 압축 비율을 비교하고, LLM이 구조를 추론할 수 있는지 확인하세요. SiFR이 어려움을 겪는 사이트가 있다면 결과를 공유해 주세요. 이 데이터는 스펙 개선에 큰 도움이 됩니다.

---

구조화된 런타임 UI 컨텍스트 활용 사례

• 레이아웃 디버그 – JSON을 붙여넣어 z‑index / 가시성 / 레이아웃 문제를 파악
• 셀렉터 생성 – 실제 DOM 구조를 기반으로 Playwright/Cypress 테스트 작성
• 자율 네비게이션 – 에이전트가 스크린샷 없이 “어디를 클릭해야 하는지” 이해
• 컴포넌트 재구성 – UI 구조를 React/Tailwind 스캐폴드로 변환

---

사양 현황

• 현재 버전: v2 (엄격하고 버전 관리됨, 자동화 파이프라인용 설계)
• 오픈 스펙 – 기여와 피드백을 환영합니다.

LLM 기반 UI 도구를 만들고 있다면 알려 주세요.

• 무엇이 부족하다고 느끼나요?
• 무엇이 중복된다고 생각하나요?
• 워크플로에 더 유용하게 만들려면 어떤 기능이 필요할까요?

---

관련 포스트

• Taking a “fine” signup form and making it work
• a11y starts with runtime context
• QA That Speaks JSON

---

추가 링크

• Element to LLM – Chrome 웹 스토어
• Element to LLM – Firefox Add‑ons

SiFR을 깨는 사이트를 발견했나요? 댓글에 남겨 주세요 – 스펙을 가장 빠르게 개선할 수 있는 방법입니다.