훈민정음 보이스 스튜디오(Hunminjeongeum Voice Studio) 사용자 가이드 및 디자인 시스템 상세 설명서

저자: Antigravity & Moos
일자: 2026-08-12
버전: v3.0 (2026-08-12 — UI 보이스 카탈로그 명칭 및 Gemini 24kHz 시스템 완벽 동기화 개정판)
분류: user-manual, design-system, gemini-tts-stt, hunminjeongeum-phonetics, architecture-doc

초록 (Abstract)

본 설명서는 훈민정음 해례본(訓民正音 解例本)의 제자 원리인 오음(아·설·순·치·후) 및 천지인(天地人) 삼재 폼포인트 원리를 구글의 최신 Gemini 24kHz 멀티모달 신경망 음성 엔진(Gemini 3.1 Flash TTS / Gemini 3.6 Flash)과 결합한 통합 보이스 플랫폼 훈민정음 Voice Studio (v1.0)의 디자인 시스템, 5대 한글 음색 모델(선희, 인준, 세종, 다온, 지호), 핵심 UI/UX 구성 요소, 백엔드 멀티모달 파이프라인, 그리고 9000번 포트 운용 가이드를 체계적으로 기술합니다.

1. 디자인 시스템 & UX 철학 (Design System & Philosophy)

graph TD
    A["훈민정음 제자 원리"] --> B["Warm Paper & Wood 디자인 시스템"]
    B --> C1["컬러 팔레트: 한지(韓紙)와 묵(墨)"]
    B --> C2["타이포그래피: 전통 명조 & 현대 산세리프"]
    B --> C3["4대 코어 탭 구조"]
    C3 --> D1["글자를 소리로 (TTS)"]
    C3 --> D2["소리를 글자로 (STT)"]
    C3 --> D3["음운 분석실 (Phonetics)"]
    C3 --> D4["보관함 (History)"]

1-1. Function-Driven Design (기능 중심 전통-현대 유기적 디자인)

과도한 일렉트릭 다크 테마를 벗어나, 한글의 창제 정신을 담은 온화하고 명료한 한지(Warm Paper) 질감의 서페이스 위에 직관적인 상호작용 카드와 음성 콘솔을 배치했습니다.

1-2. Warm Paper & Deep Wood 컬러 시스템

• 메인 배경 (#F9F8F6): 단아하고 눈이 편안한 한지(Hanji) 톤의 온화한 배경.
• 카드 서페이스 (#FFFFFF): 선명한 흰색 카드 위에 Stone 200 (#E7E5E4) 테두리를 적용하여 직관적 경계 형성.
• 텍스트 & 타이포그래피 (#1C1B1A): 먹(墨)의 깊은 흑갈색을 사용하여 최고 수준의 가독성 확보.
• 주요 포인트 컬러:
• Deep Indigo (#4338CA): TTS 메인 액션 및 주요 강조.
• Rose (#E11D48): STT 마이크 및 음성 인식 액션.
• Amber (#D97706): 음운 분석 및 전통 성음 강조.
• Dark Studio Console (#1C1917): 하단 실시간 오디오 파형 콘솔용 고대비 어두운 목재 톤.

1-3. 타이포그래피 (Modern & Traditional Typography)

• Noto Serif KR: 훈민정음 브랜드 헤더 및 전통 한글 타이틀용 고품격 명조체.
• Inter / System Sans: 컨트롤 라벨 및 실시간 가독성을 위한 모던 산세리프.
• JetBrains Mono: 24kHz 샘플레이트, 타임코드, IPA 발음 기호 렌더링.

2. 주요 UI/UX 구성 요소 및 4대 코어 기능

2-1. 🔊 글자를 소리로 (TTS Studio)

1. 훈민정음 5대 보이스 카탈로그 (Voice Models):
2. 👩 선희 (SunHi): 맑고 정갈한 여성 아나운서 톤 (Gemini Kore 24kHz 연동, 추천: 뉴스 및 안내 방송)
3. 👨 인준 (InJoon): 단정하고 신뢰감 있는 남성 톤 (Gemini Zephyr 24kHz 연동, 추천: 기업 발표 및 뉴스)
4. 📜 세종 (Sejong): 품격 있고 진중한 해례본 낭독 성우 톤 (Gemini Fenrir 24kHz 연동, 추천: 다큐멘터리 및 시 낭독)
5. 👶 다온 (Daon): 밝고 경쾌한 아동 캐릭터 톤 (Gemini Puck 24kHz 연동, 추천: 어린이 동화 및 내레이션)

6. 🎙️ 지호 (Jiho): 따뜻하고 친근한 남성 대화체 톤 (Gemini Charon 24kHz 연동, 추천: 팟캐스트 및 오디오북)

7. 듀얼 엔진 스위처 (Dual Synthesis Engine):

8. Gemini HD (24kHz): Google Gemini API 기반 최상위 24kHz 오디오 품질.

9. Web Speech (내장): API Key 없이도 브라우저 기본 로컬 오디오로 즉시 재생하는 오프라인 엔진.

10. 음성 조율 & AI 원고 다듬기 (Voice Enhancer Modal):

11. 말하기 속도(0.5x ~ 2.0x), 음높이(0.5x ~ 1.5x) 실시간 슬라이더 조정.

12. Gemini 3.6 Flash 연동 원고 다듬기를 통해 호흡 구간 [pause], 강조 [stress], SSML 태그 자동 제안.

13. 콘솔 파형 시각화 & WAV 다운로드:

14. HTML5 Canvas & Web Audio AnalyserNode 기반의 실시간 블루 웨이브폼 렌더링.
15. 생성된 24kHz PCM 데이터를 WAV 블롭(Blob)으로 즉시 변환하여 다운로드 및 보관함 저장 지원.

2-2. 🎤 소리를 글자로 (STT Studio)

1. 실시간 마이크 녹음 및 파일 업로드:
2. 브라우저 마이크 직접 녹음 또는 오디오 파일 drag-and-drop 지원.
3. Gemini 3.6 Flash 음성 받아쓰기 & 정밀 세그먼트:
4. 전체 텍스트 받아쓰기(Speech-to-Text) 및 타임코드 기반 문장 분할.
5. 발음 특이사항, 성조/억양 설명 첨부.
6. 발성 정밀 평가 및 SRT 자막 수출:
7. 말하기 속도, 명확도, 톤, 삼재(천지인) 조화도 4대 음성 정밀 평가.
8. 동기화된 SubRip 자막(.srt) 파일 1클릭 다운로드.

2-3. 🌟 음운 분석실 (Phonetics Lab)

1. 훈민정음 제자 원리 심층 분석:
2. 초성(자음) 오음(五音) 분석: 아음(牙), 설음(舌), 순음(唇), 치음(齒), 후음(喉) 분포 정밀 측정.
3. 중성(모음) 천지인(天地人) 분석: ㆍ(하늘), ㅡ(땅), ㅣ(사람) 삼재 조화도 및 음양(陰陽) 균형 판정.
4. 종성(받침) 분석: 8종성법, 끝소리 규칙, 유음/비음 흐름 분석.
5. 낭독 호흡 및 IPA 가이드:
6. 낭독 시 적절한 휴지(Pause) 지점 및 국제발음기호(IPA) 자동 표기.

2-4. 📂 보관함 (Studio History)

• LocalStorage 기반의 클라이언트 세션 보관함.
• 저장된 TTS 음성 및 STT 결과물 즉시 재생, 복사, 개별/전체 삭제 관리.

3. 백엔드 시스템 아키텍처 및 파이프라인

sequenceDiagram
    autonumber
    actor User as 사용자 (Client)
    participant Server as Express Server (Port 9000)
    participant Gemini as Google Gemini API
    participant AudioCtx as Web Audio API (24kHz)

    User->>Server: POST /api/tts (text, voice="선희/인준/세종/다온/지호")
    Server->>Gemini: ai.models.generateContent (gemini-3.1-flash-tts-preview)
    Gemini-->>Server: Base64 PCM Audio Data (24000Hz)
    Server-->>User: JSON Response (audioBase64, sampleRate)
    User->>AudioCtx: pcmToAudioBuffer() & audioBufferToWavBlob()
    AudioCtx-->>User: Realtime Waveform Rendering & Sound Playback 🔊

3-1. 서버 구성 (server.ts)

• 포트 및 바인딩: http://localhost:9000 (0.0.0.0 바인딩)
• 환경 변수: .env 파일의 GEMINI_API_KEY 및 PORT=9000 자동 주입.
• 주요 엔드포인트:
• GET /api/health: 서버 상태 및 API Key 설정 여부 반환.
• POST /api/tts: Gemini 3.1 Flash TTS 프로토콜 파서.
• POST /api/stt: Gemini 3.6 Flash 음성 인식 및 JSON 세그먼트 파서.
• POST /api/phonetics: 훈민정음 5음/천지인 제자 원리 분석 파서.
• POST /api/voice-enhance: AI 원고 다듬기 파서.

4. 설치 및 실행 방법

1. 프로젝트 환경 설정: bash cd /home/moos/dev_ws/language/tts-stt-main npm install

2. 환경변수 .env 작성: env PORT=9000 GEMINI_API_KEY="your_gemini_api_key_here"

3. 프로덕션 빌드 및 서버 구동: bash npm run build NODE_ENV=production PORT=9000 node dist/server.cjs

4. 웹 브라우저 접속:

5. http://localhost:9000 접속 후 이용.

[!NOTE] 본 기술 설명서는 구글 Gemini API와 훈민정음 해례본 원리를 결합한 훈민정음 Voice Studio v1.0의 공식 시스템 명세서입니다.