피드로 돌아가기
How to Auto‑Fill Web Forms from Excel or CSV Using a Chrome Extension
Dev.toDev.to
Frontend

Selector 없는 Smart Matching 기반 웹 폼 자동화 설계

How to Auto‑Fill Web Forms from Excel or CSV Using a Chrome Extension

File Filler2026년 6월 4일2beginner

Context

기존 자동화 도구의 과도한 설정 비용과 Selector 및 XPath 유지보수 부담에 따른 진입 장벽 존재. 단순 반복 입력 작업에 최적화된 설정 최소화 아키텍처 필요성 대두.

Technical Solution

  • Label, Placeholder, Input Name 등 DOM 요소의 텍스트 정보를 활용한 Smart Matching 알고리즘 적용
  • 파일 헤더와 페이지 내 텍스트의 유사도를 분석하여 매핑 설정을 제거한 Zero-Configuration 구조 설계
  • 반복 필드 처리 옵션(Repeat ON/OFF)을 통한 단일 폼과 다중 레코드 입력 대응 로직 구현
  • 데이터 구조의 유연성 확보를 위해 파일 내 컬럼 순서와 무관하게 동작하는 Order 정의 섹션 도입
  • DOM 스캔 기반의 Template File 생성 기능을 통한 사용자 제어권 확보 및 매핑 오류 원천 차단

- 복잡한 Selector 대신 텍스트 기반 매칭을 통한 UI 변경 유연성 확보 검토 - 사용자 설정 최소화를 위한 Template 기반 데이터 입력 인터페이스 설계 적용 - 데이터 중복 발생 시 처리 전략(순차 입력 vs 동일 값 입력)의 옵션화 제공

원문 읽기