📝 Form-ation

Windows에서는 작동하지만, macOS Chrome에서는 저장 확인 알림이 전혀 표시되지 않는 문제가 발생했습니다. Content Script와 Background Script 간 통신은 정상이고, 알림 권한도 'granted' 상태였지만 실제 알림이 화면에 나타나지 않았습니다.

단계별 디버깅을 통해 원인을 분석했습니다.

1. Service Worker 통신 문제 의심 → 재시도 로직 추가했지만 해결되지 않음
2. 시스템 알림 설정 문제 의심 → 권한은 정상이었음
3. 알림 아이콘 문제 의심 → base64 더미 이미지를 실제 아이콘으로 변경했지만 여전히 문제
4. 테스트 알림으로 원인 분리 → 간단한 알림은 표시되지만 버튼이 포함된 복잡한 알림은 표시되지 않음을 발견
5. 핵심 원인: macOS Chrome에서 버튼이 2개 이상 포함된 알림과 requireInteraction: true 설정이 제대로 작동하지 않음

크로스 플랫폼 호환성을 위해 알림 구조를 단순화하고 1개의 버튼으로 변경했습니다. 이 과정에서 플랫폼별 API 동작 차이와 Chrome Extension의 제약사항에 대해 배울 수 있었습니다.

네이버 검색과 같이 폼 제출 후 즉시 페이지가 이동하는 환경에서 저장 확인 모달이 표시되기 전에 페이지가 바뀌어 사용자 데이터가 손실되는 문제가 발생했습니다. 기존 Content Script 기반 모달로는 페이지 생명주기와 함께 사라졌습니다.

브라우저 레벨 알림 시스템으로 전환했습니다.

1. Chrome Notifications API를 활용한 페이지 독립적 알림
2. Background Script에서 직접 저장 로직 처리
3. requireInteraction 옵션으로 사용자 응답까지 알림 유지
4. Message Passing을 통한 Content ↔ Background Script 간 안정적 통신

페이지 이동과 완전히 독립적으로 동작하는 시스템을 구축했습니다. Chrome Extension의 아키텍처와 생명주기, 그리고 브라우저 API의 활용법에 대해 경험을 쌓을 수 있었습니다.

모든 폼 제출 시마다 저장 확인을 요청하면 사용자에게 피로감을 주고, 실제로 저장이 필요하지 않은 경우도 많았습니다. 기존 자동완성 도구들의 주요 불편함이었던 "과도한 알림"을 해결해야 했습니다.

사용자 주도적 저장 시스템을 구현했습니다.

1. 기본 OFF 상태로 불필요한 알림 방지
2. 확장 아이콘 클릭으로 저장 모드 ON/OFF 전환 (빨간 "ON" 배지 표시)
3. 저장 완료 후 자동으로 OFF 상태 복귀
4. 사이트별 "다시 묻지 않음" 설정 지원
5. 글로벌 저장 모드와 사이트별 설정의 이중 필터링

사용자가 필요할 때만 저장 기능을 활성화하는 직관적인 UX를 구현했습니다. 사용자 중심 설계와 상태 관리의 중요성을 체감할 수 있었습니다.

React, Vue 등 CSR 앱에서 동적으로 생성되는 클래스명이나 ID에 의존하다 보니 셀렉터가 자주 변경되어 저장된 데이터와 매칭이 실패하는 문제가 발생했습니다. 특히 빌드마다 해시가 바뀌는 CSS-in-JS 환경에서 심각했습니다.

셀렉터 생성 우선순위를 재설계했습니다.

1. name 속성을 최우선으로 사용 (폼 필드에서 가장 안정적)
2. data-testid, data-test-id, data-cy 등 테스트용 속성 활용
3. id 속성은 그 다음 우선순위로 배치
4. 불안정한 셀렉터 사용 시 사용자에게 경고 아이콘(⚠️) 표시

안정적인 속성을 우선 사용하고, 불안정한 셀렉터는 사용자가 인지할 수 있도록 했습니다. 프론트엔드 생태계의 다양한 환경을 고려한 설계의 중요성을 배웠습니다.

기존에는 셀렉터, ID, 클래스, 위치 등 여러 기준으로 신뢰도를 계산하여 매칭했습니다. 하지만 "대충 비슷하면 매칭"하는 방식은 잘못된 필드에 데이터가 입력되는 위험이 있었고, 사용자가 어떤 필드에 입력될지 예측하기 어려웠습니다.

신뢰도 기반 매칭을 완전히 제거하고 정확 매칭 방식으로 변경했습니다.

1. 셀렉터와 input 타입이 완전히 일치해야만 매칭
2. 매칭 실패 시 해당 필드는 스킵하고 사용자에게 결과 알림
3. 몇 개 필드가 채워졌고, 몇 개가 스킵되었는지 명확하게 표시

"똑똑한 추측"보다 "예측 가능한 동작"이 사용자 신뢰에 더 중요하다는 것을 배웠습니다. 실패하더라도 명확하게 알려주는 것이 더 나은 UX임을 체감했습니다.

SPA(Single Page Application)에서 soft navigation(페이지 새로고침 없이 URL만 변경) 시 Content Script가 여러 번 실행되어 이벤트 리스너가 중복 등록되고, 메모리 누수가 발생했습니다.

전역 플래그를 활용한 싱글톤 패턴을 적용했습니다.

1. globalThis.__formationInitialized 플래그로 중복 초기화 방지
2. MutationObserver는 페이지 언로드 시 자동 정리
3. 셀렉터 모드 비활성화 시 모든 이벤트 리스너 해제

Chrome Extension과 SPA의 생명주기 차이를 이해하게 되었습니다. 리소스 정리의 중요성과 메모리 관리에 대해 깊이 있게 배울 수 있었습니다.