피드로 돌아가기
A rival to my open-source tool shipped. I read all of it — then ported its 4 best ideas the same afternoon.
Dev.toDev.to
Frontend

WebDriver 제약 극복 및 CSSOM 기반 iOS 웹 검증 도구 통합

A rival to my open-source tool shipped. I read all of it — then ported its 4 best ideas the same afternoon.

אחיה כהן2026년 6월 18일4intermediate

Context

기존 Safari MCP는 AppleScript를 활용해 사용자 세션이 유지되는 실제 브라우저를 제어하는 구조임. 반면 경쟁 도구는 WebDriver 기반의 독립된 인스턴스를 사용하여 쿠키 및 로그인 세션 유지 불가라는 아키텍처적 한계를 가짐.

Technical Solution

  • WebDriver의 격리된 환경 대신 AppleScript do JavaScript 엔진을 통한 실제 브라우저 컨텍스트 제어 유지
  • 정적 데이터베이스 기반의 caniuse 방식 대신 브라우저 런타임에서 CSS.supports() API를 호출하는 동적 검증 로직 도입
  • CSSOM(CSS Object Model)을 순회하여 속성-값 쌍을 추출함으로써 정규표현식 사용 시 발생하는 False Positive 제거
  • -webkit- 접두사 자동 재시도 로직을 통한 실제 렌더링 호환성 판별 체계 구축
  • 비동기 처리가 불가능한 엔진 제약을 해결하기 위해 synchronous IIFE 구조로 래핑하여 JSON 결과 반환
  • viewport meta, safe-area-insets, PWA 준비도 등 iOS Safari 특화 검증 도구 4종을 JavaScript 주입 방식으로 포팅

1. 외부 라이브러리의 정적 데이터보다 런타임 API(예: CSS.supports)를 통한 실시간 상태 검증 우선 고려

2. 엔진 제약 사항(예: async/await 불가) 발견 시 IIFE와 같은 구조적 래퍼를 통해 동기적 인터페이스 구현

3. 경쟁 기술 분석 시 아키텍처(How)와 도메인 지식(What)을 분리하여 핵심 비즈니스 로직만 추출

원문 읽기