1. 웹 페이지에서의 최적 인터페이스 설계

웹 페이지에서 JavaScript 브릿지를 구현할 때는 명확하고 확장성 있는 인터페이스 설계가 중요합니다. 다음은 추천하는 함수 설계 방식과 잘못된 접근법의 비교입니다.

❌ 피해야 할 구현 방식: 플랫폼 종속적 접근법

// 특정 앱에서만 동작하는 직접적 처리
$(document).ready(function() {
  if (typeof AndroidApp !== 'undefined') {
    // Android 전용 코드...
  } else if (typeof webkit !== 'undefined' && webkit.messageHandlers) {
    // iOS 전용 코드...
  }
});

✅ 권장하는 구현 방식: 통일된 인터페이스

// 1. 접근성 상태 변화를 처리할 전역 함수 정의
window.onAccessibilityStatusChanged = function(status) {
  // status 객체 형식: {voiceOver: boolean, talkBack: boolean}
  // - voiceOver: iOS의 VoiceOver 활성화 여부
  // - talkBack: Android의 TalkBack 활성화 여부
  
  // 2. 스크린 리더 활성화 여부 확인
  const screenReaderActive = status && (status.voiceOver || status.talkBack);
  
  // 3. 상태에 따른 UI 변경 처리
  if (screenReaderActive) {
    // 스크린 리더가 활성화된 경우 적용할 동작
    if (typeof mySlider !== 'undefined' && mySlider.autoplay) {
      mySlider.autoplay.stop();  // 자동 재생 중지
      showAccessibilityNotice(true);  // 접근성 모드 알림 표시
    }
  } else {
    // 스크린 리더가 비활성화된 경우 적용할 동작
    if (typeof mySlider !== 'undefined' && mySlider.autoplay) {
      mySlider.autoplay.start();  // 자동 재생 시작
      showAccessibilityNotice(false);  // 접근성 모드 알림 숨김
    }
  }
};

함수 설계 핵심 요소:

• 전역 접근성: window 객체에 함수를 추가하여 어디서든 호출 가능하게 함
• 일관된 매개변수: 표준화된 JSON 객체로 다양한 플랫폼의 상태 정보 전달
• 명확한 네이밍: onAccessibilityStatusChanged와 같이 기능을 명확히 표현하는 이름 사용
• 독립적 설계: 특정 플랫폼에 종속되지 않는 설계로 확장성 확보

2. Android 앱에서의 접근성 브릿지 구현

Android에서는 AccessibilityManager를 사용하여 TalkBack과 같은 접근성 서비스의 상태를 감지하고, 이 정보를 WebView의 JavaScript 함수로 전달합니다.

중요 구성 요소:

1. 접근성 상태 감지기 - TouchExplorationStateChangeListener를 통한 TalkBack 감지
2. WebView와 연결 - evaluateJavascript를 통한 웹 함수 호출
3. 생명주기 관리 - 적절한 시점에 리스너 등록/해제

핵심 코드:

// 1. 접근성 상태 변경 감지기 구현
private val touchExplorationListener = 
    AccessibilityManager.TouchExplorationStateChangeListener { enabled ->
        // TalkBack 활성화 상태가 변경되면 호출됩니다
        sendAccessibilityStatusToWebView(enabled)
    }

// 2. WebView에 접근성 상태 전송 함수
private fun sendAccessibilityStatusToWebView(talkBackEnabled: Boolean) {
    // 페이지 로드 완료 확인 (중요: 로드 전 호출 방지)
    if (!pageLoaded) return
    
    // 웹에서 정의한 함수를 호출하는 JavaScript 코드 생성
    val js = """
        window.onAccessibilityStatusChanged({
            voiceOver: false,  // iOS에서만 사용
            talkBack: $talkBackEnabled  // 현재 TalkBack 상태 전달
        });
    """.trimIndent()
    
    // WebView에서 JavaScript 실행
    webView.evaluateJavascript(js, null)
}

// 3. 적절한 시점에 리스너 등록/해제 (생명주기 관리)
override fun onResume() {
    super.onResume()
    // 화면이 활성화될 때 리스너 등록
    accessibilityManager.addTouchExplorationStateChangeListener(touchExplorationListener)
    // 현재 접근성 상태 즉시 전송 (중요!)
    sendAccessibilityStatusToWebView(accessibilityManager.isTouchExplorationEnabled)
}

override fun onPause() {
    super.onPause()
    // 화면이 비활성화될 때 리스너 해제 (메모리 누수 방지)
    accessibilityManager.removeTouchExplorationStateChangeListener(touchExplorationListener)
}

구현 시 결정적 포인트:

1. 페이지 로드 상태 확인: 웹뷰가 완전히 로드되기 전에 JavaScript를 실행하면 오류가 발생합니다.
2. 초기 상태 전달: onResume에서 현재 TalkBack 상태를 즉시 전달해야 합니다.
3. 메모리 관리: 리스너를 사용하지 않을 때는 반드시 해제해야 합니다.

3. iOS 앱에서의 접근성 브릿지 구현

iOS에서는 VoiceOver 상태 변화를 감지하고 WKWebView에 이 정보를 전달합니다.

핵심 구현 요소:

1. VoiceOver 상태 감지 - NotificationCenter를 통한 상태 변경 감지
2. WKWebView와 통신 - evaluateJavaScript 메서드를 통한 함수 호출
3. 관찰자 생명주기 관리 - 등록 및 해제 관리

// 1. VoiceOver 상태 변경 감지 및 처리
@objc func voiceOverStatusChanged() {
    // UIAccessibility를 통해 현재 VoiceOver 상태 확인
    let voiceOverEnabled = UIAccessibility.isVoiceOverRunning
    
    // 웹뷰에 상태 전달
    sendAccessibilityStatusToWebView(voiceOverEnabled)
}

// 2. 웹뷰에 접근성 상태 전달 함수
private func sendAccessibilityStatusToWebView(_ voiceOverEnabled: Bool) {
    // 페이지 로드 완료 확인 (중요!)
    guard isPageLoaded else { return }
    
    // 웹 함수 호출을 위한 JavaScript 생성
    let js = """
        window.onAccessibilityStatusChanged({
            voiceOver: \(voiceOverEnabled),  // iOS VoiceOver 상태
            talkBack: false                  // iOS에서는 미사용
        });
    """
    
    // WKWebView에서 JavaScript 실행
    webView.evaluateJavaScript(js, completionHandler: nil)
}

// 3. VoiceOver 상태 변경 감지를 위한 관찰자 등록 (viewDidLoad에서)
override func viewDidLoad() {
    super.viewDidLoad()
    
    // 현재 VoiceOver 상태 저장
    isVoiceOverRunning = UIAccessibility.isVoiceOverRunning
    
    // VoiceOver 상태 변경 감지를 위한 관찰자 등록
    NotificationCenter.default.addObserver(
        self,
        selector: #selector(voiceOverStatusChanged),
        name: UIAccessibility.voiceOverStatusDidChangeNotification,
        object: nil
    )
    
    // 웹뷰 로드 설정...
}

// 4. 관찰자 해제 (메모리 누수 방지)
deinit {
    NotificationCenter.default.removeObserver(self)
}

구현 시 주의 사항:

1. 페이지 로드 확인: iOS에서도 페이지가 완전히 로드된 후에만 JavaScript를 실행해야 합니다.
2. 초기 상태 전달: 앱 시작 시 또는 화면 진입 시 현재 VoiceOver 상태를 즉시 전달해야 합니다.
3. 메모리 관리: deinit에서 관찰자를 해제하여 메모리 누수를 방지합니다.