ModuWeb - 프로젝트 개요

ModuWeb (WAT: Web Accessibility Tools - 웹 접근성 지원 도구)

📖 프로젝트 소개

프로젝트 명: ModuWeb

부제: WAT: Web Accessibility Tools

ModuWeb은 웹 접근성 지원 도구입니다. 다양한 사용자의 접근성 요구사항을 충족시키기 위해 설계된 모듈형 플러그인 시스템입니다. 이 프로젝트는 웹 표준을 준수하며, 사용자 친화적인 인터페이스를 제공합니다.
웹 접근성 기능을 적용해 콘텐츠를 보다 쉽게 이용할 수 있게 돕습니다.

프로젝트 목표

  • 웹 접근성 환경 개선
  • 평등한 웹 경험 제공
  • 웹 접근성 준수
  • 모듈형 도구로 사용자 맞춤화

🔧 핵심 특징

  • TTS/STT 음성 인터페이스
  • 다양한 접근성 도구
  • 반응형 UI 디자인
  • 실시간 설정 저장
  • 키보드 네비게이션

📊 프로젝트 현황

📋 버전 정보

  • 현재 버전2.0.1
  • 마지막 업데이트2025-08-19
  • 라이선스Apache 2.0
  • 개발 팀DAEGU CYBER UNIVERSITY
  • 언어 지원6개국

🛠️ 개발환경 및 기술 스택

💻 개발 도구

에디터

IDE

Visual Studio Code

버전 관리

Git

Git 기반 소스코드 관리

빌드 도구

Webpack

모듈 번들링 및 최적화

테스팅

Jest

단위 테스트 및 통합 테스트

🌐 브라우저 지원

데스크톱 브라우저

  • Chrome90+
  • Firefox88+
  • Safari14+
  • Edge90+

모바일 브라우저

  • iOS Safari14+
  • Android Chrome90+
  • Samsung Internet14+

🔧 핵심 기술

Web Speech API

Native

TTS/STT 음성 인터페이스

Dictionary API

API

외부 사전 API 활용

HTML5

Semantic

접근성 중심 마크업

JavaScript

ES6+

모던 JavaScript 문법 활용

CSS3

Modern

Flexbox, Grid, Custom Properties

🏗️ 시스템 아키텍처

📐 전체 아키텍처 개요

🏛️ WAT Core Framework

WAT
StateManager
EventHandler

🔧 Core Modules

TTSManager
STTManager
FocusTTS

⚡ Feature Modules

MediaController
DictionaryManager
ConfigManager

📡 Events System

wat:initialized
wat:tts:*
wat:stt:*
wat:media:*
wat:dict:*
wat:settings:*

🔄 초기화 플로우

1

WAT 인스턴스 생성

사용자 정의 옵션과 함께 WAT 클래스 인스턴스를 생성합니다.

2

StateManager 초기화

중앙집중식 상태 관리 시스템을 초기화하고 기본 설정을 로드합니다.

3

모듈 초기화

TTS, STT, MediaController 등 핵심 모듈들을 순차적으로 초기화합니다.

4

이벤트 시스템 활성화

모듈 간 통신을 위한 이벤트 기반 시스템을 활성화합니다.

5

초기화 완료

wat:initialized 이벤트를 발송하여 초기화 완료를 알립니다.

🔗 모듈 간 통신

User Interface
WAT Framework
StateManager
TTSManager
Event System
1
User Interface → WAT Framework
사용자 액션
2
WAT Framework → StateManager
상태 업데이트
3
StateManager → StateManager
상태 변경 처리
4
StateManager → TTSManager
모듈 호출
5
TTSManager → Event System
이벤트 발송
6
Event System → User Interface
UI 업데이트
반응형 상태 기반 아키텍처

⚡ 주요 기능

🎨 접근성 도구

👁️ 시각적 지원

시인성 및 가독성 향상
  • 폰트 크기 및 종류 조절
  • 텍스트 정렬 및 간격 조정
  • 화면 확대/축소

🎨 색상 인식 지원

색상 대비 및 인식 개선
  • 웹페이지 색상 모드 변경
  • 채도 및 명암 조절

집중력 지원

집중력 향상을 위한 시각적 도구
  • 마우스 위치 강조
  • 마우스 가이드 표시
  • 미디어 콘텐츠 및 애니메이션 제어

🔊 청각적 지원

청각 정보 제공 및 제어
  • 음성 피드백 안내
  • 오디오 설명 추가
  • 미디어 볼륨 조절

🎵 음성 인터페이스

🗣️ TTS (Text-to-Speech)

텍스트를 음성으로 변환하는 기능
  • 자동 TTS - 페이지 요소 순차 읽기
  • 포커스 TTS - 포커스된 요소 읽기
  • 키보드 TTS - 단축키 기반 읽기
  • 다국어 음성 지원
  • 읽기 속도 조절

🎤 STT (Speech-to-Text)

음성을 텍스트로 변환하는 기능
  • 음성 인식
  • 명령어 인식
  • 텍스트 필드 자동 입력

📚 보조 기능

📖 사전 기능

단어 의미 검색
  • 더블클릭 검색
  • 팝업 사전

⚙️ 설정 관리

개인화 설정
  • 장애 프로필 기능
  • 설정 내보내기/가져오기
  • 초기화 기능

🔧 개발자 기능

API 및 확장성

// WAT 인스턴스 생성 및 초기화
const wat = new WAT({
    containerSelector: '#content',
    language: 'ko'
});

await wat.init();

// 이벤트 리스너 등록
document.addEventListener('wat:initialized', () => {
    console.log('WAT 초기화 완료');
});

// TTS 기능 사용
wat.ttsManager.toggleAutoTTS();
wat.ttsManager.setSpeechRate(1.2);

// STT 기능 사용
wat.sttManager.toggleVoiceCommand();

📁 프로젝트 구조도

📂 디렉토리 구조

WAT-Project/
├── 📁 docs/                    # 문서화
│   ├── 📄 architecture-diagram.html
│   ├── 📄 project-overview.html
│   └── 📄 API-GUIDE.md
│
├── 📁 examples/                # 예제 파일
│   ├── 📄 index.html          # 메인 예제 페이지
│   ├── 📄 basic.html          # 기본 사용 예제
│   ├── 📄 custom-examples.html # 커스텀 설정 예제
│   ├── 📄 api-examples.html    # API 사용 예제
│   └── 📁 assets/             # 예제용 리소스
│
├── 📁 dist/                   # 배포용 파일
│   ├── 📄 webAccTools.js      # 메인 스크립트
│   └── � assets/             # 정적 리소스
│       ├── 📁 css/            # 스타일시트
│       ├── 📁 fonts/          # 웹폰트
│       ├── 📁 images/         # 이미지
│       ├── 📁 js/             # 자바스크립트
│       │   └── 📄 webAccTools.js # 메인 스크립트
│       └── 📁 locales/        # 언어팩
│
└── 📄 LICENSE                 # 라이선스

🏗️ 모듈 구조

🏛️ WAT Framework Core

WAT.js
→
StateManager
→
EventHandler
→
ConfigManager

🎵 TTS Modules

TTSManager
→
AutoTTS
→
FocusTTS
→
KeyboardTTS

🎤 STT Modules

STTManager
→
SpeechRecognition
→
CommandProcessor

🖥️ UI Components

UIManager
→
ControlPanel
→
SettingsPanel
→
StatusIndicator

🔧 Utility Modules

DictionaryManager
MediaController
AccessibilityTools

📊 클래스 다이어그램

WAT

+ options: Object
+ state: StateManager
+ ttsManager: TTSManager
+ sttManager: STTManager
+ init(): Promise
+ destroy(): void

StateManager

- _state: Object
- _observers: Map
+ setState(path, value): void
+ getState(path): any
+ subscribe(path, callback): Function

TTSManager

+ autoTTS: AutoTTS
+ focusTTS: FocusTTS
+ keyboardTTS: KeyboardTTS
+ toggleAutoTTS(): void
+ toggleFocusTTS(): void
+ setSpeechRate(rate): void

STTManager

+ recognition: SpeechRecognition
+ isListening: boolean
+ toggleVoiceCommand(): void
+ setLanguage(language): void
+ getStatus(): Object
WAT
→
StateManager
WAT
→
TTSManager
WAT
→
STTManager

🔄 데이터 플로우

1

사용자 입력

UI 상호작용, 키보드 이벤트, 음성 명령 등

2

이벤트 처리

EventHandler가 입력을 받아 적절한 모듈로 라우팅

3

상태 업데이트

StateManager가 애플리케이션 상태를 중앙집중식으로 관리

4

모듈 실행

해당 기능 모듈이 작업을 수행하고 결과를 반환

5

UI 업데이트

상태 변경에 따라 UI가 자동으로 업데이트됨