피드로 돌아가기
Dev.toFrontend
원문 읽기
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.
AI 요약
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)을 분리하여 핵심 비즈니스 로직만 추출