WAT 프로젝트 아키텍처

Web Accessibility Tools - 웹 접근성 도구 프레임워크

🏗️ 전체 시스템 아키텍처

graph TB subgraph "WAT Framework" WAT[WAT Main Class
메인 컨트롤러] SM[StateManager
상태 관리] EH[ErrorHandler
에러 처리] end subgraph "Core Modules" TTSMgr[TTSManager
음성 합성] STTMgr[STTManager
음성 인식] FocusTTS[FocusTTS
포커스 읽기] end subgraph "Feature Modules" MediaCtrl[MediaControls
미디어 제어] DictMgr[DictionaryManager
사전 관리] ConfigMgr[ConfigManager
설정 관리] end subgraph "Events System" InitEvent[wat:initialized] TTSEvent[wat:tts:stateChanged] STTEvent[wat:stt:stateChanged] MediaEvent[wat:media:*] DictEvent[wat:dictionary:*] SettingsEvent[wat:settings:*] end WAT --> SM WAT --> EH WAT --> TTSMgr WAT --> STTMgr WAT --> FocusTTS WAT --> MediaCtrl WAT --> DictMgr WAT --> ConfigMgr WAT --> InitEvent TTSMgr --> TTSEvent STTMgr --> STTEvent MediaCtrl --> MediaEvent DictMgr --> DictEvent ConfigMgr --> SettingsEvent SM --> TTSMgr SM --> STTMgr SM --> FocusTTS classDef mainClass fill:#667eea,stroke:#333,stroke-width:2px,color:#fff classDef coreModule fill:#52c41a,stroke:#333,stroke-width:2px,color:#fff classDef featureModule fill:#faad14,stroke:#333,stroke-width:2px,color:#333 classDef eventSystem fill:#722ed1,stroke:#333,stroke-width:2px,color:#fff class WAT,SM,EH mainClass class TTSMgr,STTMgr,FocusTTS coreModule class MediaCtrl,DictMgr,ConfigMgr featureModule class InitEvent,TTSEvent,STTEvent,MediaEvent,DictEvent,SettingsEvent eventSystem

📦 클래스 구조 상세

WAT (메인 클래스)

전체 프레임워크의 핵심 컨트롤러
  • 플러그인 초기화 및 설정 관리
  • 모든 모듈의 라이프사이클 관리
  • 이벤트 디스패치 중앙 관리
  • 선택적 기능 로딩
  • 에러 핸들링 통합

StateManager

전역 상태 관리 시스템
  • 깊은 객체 병합 (Deep Merge)
  • 옵저버 패턴 구현
  • 상태 변경 감지 및 알림
  • 경로 기반 상태 접근
  • 이벤트 기반 상태 동기화

TTSManager

음성 합성 (Text-to-Speech) 관리
  • 다양한 TTS 엔진 지원
  • 텍스트 전처리 및 정리
  • 음성 설정 관리 (속도, 음성)
  • 상태 기반 TTS 제어
  • 레이블 제거 처리

STTManager

음성 인식 (Speech-to-Text) 관리
  • 웹 음성 인식 API 활용
  • 음성 명령어 처리
  • 실시간 음성 변환
  • 언어 설정 지원
  • 음성 인식 상태 관리

FocusTTS

포커스 기반 텍스트 읽기
  • 포커스 이벤트 감지
  • 더블클릭 텍스트 읽기
  • 요소별 텍스트 추출
  • 접근성 향상 기능
  • 키보드 네비게이션 지원

초기화 플로우

sequenceDiagram participant HTML as HTML 페이지 participant WAT as WAT Class participant Modules as 모듈들 participant Events as Event System HTML->>WAT: new WAT(options) WAT->>WAT: 설정 병합 WAT->>Modules: 선택적 모듈 초기화 Modules->>WAT: 초기화 완료 알림 WAT->>Events: wat:initialized 이벤트 발송 Events->>HTML: 초기화 완료 통지 Note over HTML,Events: 이후 각 모듈은 독립적으로 이벤트 발송

초기화 단계별 설명

  1. 스크립트 로드: HTML에서 webAccTools.js 로드
  2. 옵션 파싱: data-wat-options 속성에서 설정 추출
  3. WAT 인스턴스 생성: 파싱된 옵션으로 WAT 클래스 인스턴스화
  4. 모듈 초기화: 설정에 따라 필요한 모듈만 선택적으로 로드
  5. 이벤트 발송: wat:initialized 이벤트로 초기화 완료 알림
  6. 사용 준비: 모든 기능이 활성화되어 사용 가능한 상태

📡 이벤트 시스템

주요 이벤트 목록

  • wat:initialized - 프레임워크 초기화 완료
  • wat:tts:stateChanged - TTS 상태 변경 (활성화/비활성화)
  • wat:stt:stateChanged - STT 상태 변경
  • wat:media:play/pause/stop - 미디어 컨트롤 상태
  • wat:dictionary:search - 사전 검색 실행
  • wat:settings:changed - 설정 변경

이벤트 기반 통신

모든 모듈은 상태 변경 시 CustomEvent를 통해 다른 컴포넌트와 통신합니다. 이를 통해:

  • 모듈 간 느슨한 결합 (Loose Coupling) 유지
  • 확장성과 유지보수성 향상
  • 외부 애플리케이션에서 WAT 상태 모니터링 가능
  • 플러그인 방식의 기능 확장 지원

⚡ 주요 기술적 특징

모듈화 설계

각 기능이 독립적인 클래스로 구현
  • 단일 책임 원칙 준수
  • 기능별 독립적 테스트 가능
  • 선택적 로딩으로 성능 최적화

이벤트 기반 아키텍처

느슨한 결합의 컴포넌트 간 통신
  • CustomEvent 기반 통신
  • 상태 변경 실시간 알림
  • 확장 가능한 플러그인 구조

상태 관리 시스템

중앙화된 상태 관리 및 동기화
  • 옵저버 패턴 구현
  • 깊은 객체 병합
  • 경로 기반 상태 접근