@ihabdevteam/core 0.122.0 → 0.124.0

package/dist/ihabdevteam-core.d.ts

@@ -1341,7 +1341,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.122.0";
+export declare const CORE_VERSION = "0.124.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -1362,13 +1362,14 @@ export declare type CoreNoiseSettings = {
      */
     level: number;
     /**
-     * 소음 비율 — 문제 소리(`mainVolume`) 대비 배수, 0–2.0(0.1 칸). 1 = 소음과 문제 소리가 같은 크기.
-     * 실제 소음 볼륨 = min(1, mainVolume × noiseRatio). 없으면 `level` 에서 옮긴다.
+     * 소음 비율 — 문제 소리 대비 소음의 배수, 0–2.0(0.1 칸). 1 = 소음과 문제 소리가 같은 크기.
+     * 문제 소리 = mainVolume × min(1, 1/noiseRatio), 소음 = mainVolume × min(1, noiseRatio).
+     * 없으면 `level` 에서 옮긴다.
      */
     noiseRatio?: number;
     /** 소음 재생 속도(playbackRate). 0.75–1.25, 기본 1. */
     speed: number;
-    /** 전체 소리(= 문제 소리 볼륨). 0–1, 기본 1. 소음은 이 값 × `noiseRatio`. 계정 설정("훈련" 패널)과 훈련 화면 툴팁이 함께 영속화한다. */
+    /** 전체 소리 — 두 소리 중 큰 쪽의 크기. 0–1, 기본 1. 실제 두 볼륨은 `noiseRatio` 로 나뉜다. 계정 설정("훈련" 패널)과 훈련 화면 툴팁이 함께 영속화한다. */
     mainVolume: number;
     /** 문장(메인) 재생 속도(playbackRate). 0.5–1.5, 기본 1. 계정 설정("훈련" 패널)과 훈련 화면 툴팁이 함께 영속화한다. */
     mainSpeed: number;

package/dist/packages/core/src/components/Training/AudioPlayerWaveForm.d.ts

@@ -9,7 +9,7 @@ export default function WaveForm(props: {
     onSegmentClick?: (idx: number) => void;
     waveProgressRef?: MutableRefObject<HTMLDivElement | null>;
     noiseSrc?: string | null;
-    noiseVolume?: number;
+    noiseRatio?: number;
     noiseSpeed?: number;
     mainVolume?: number;
     onReadyChange?: (ready: boolean) => void;

package/dist/packages/core/src/components/Training/AudioPlayerWaveForm.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { computePeaksFromUrl } from '../../utils/audioPeaks';
+import { waveBarPx, waveBarVal, WAVE_H1_PX } from './waveScale';
 import './TrainingStepAudioPlayer.css';
 /**
  * waveform 바 최소 픽셀 — 렌더 높이가 이 값 이하이면 바를 그리지 않는다(문장·소음 공통).
@@ -9,7 +10,7 @@ import './TrainingStepAudioPlayer.css';
  */
 const MIN_BAR_PX = 4;
 export default function WaveForm(props) {
-    const { src, segments, progress = 0, waveProgressRef, noiseSrc, noiseVolume = 0, noiseSpeed = 1, totalDuration = 0, mainVolume = 1, onReadyChange, showSoundWaveForm = true } = props;
+    const { src, segments, progress = 0, waveProgressRef, noiseSrc, noiseRatio = 0, noiseSpeed = 1, totalDuration = 0, mainVolume = 1, onReadyChange, showSoundWaveForm = true } = props;
     const waveformRef = useRef(null);
     const outerRef = useRef(null);
     const [wavePeaks, setWavePeaks] = useState(null);
@@ -118,8 +119,9 @@ export default function WaveForm(props) {
         return () => { cancelled = true; };
     }, [noiseSrc, barsTotal, totalDuration, noiseSpeed]);
     /* eslint-enable react-hooks/set-state-in-effect */
-    // 문장: 자기 최고치로 정규화해 세로 영역을 다 씀 × 재생 소리(볼륨).
-    // 소음은 이 문장 최고치(sentenceMaxPeak)를 공통 분모로 써서 서로 비율이 유지된다.
+    // **그림의 눈금은 "문장 = 기준"** — 소리 셈(문제 소리 = M×min(1,1/R))과 달리 문장을 줄이지 않고
+    // 소음을 R 배로 키워 비율을 보인다. 막대 크기 a: 문장 = peak/문장최고치 × 전체 소리(M),
+    // 소음 = 같은 분모 × M × 소음 비율(R). a → 픽셀은 구간별 눈금(waveScale — 1 까지 45px, 2 에 74px).
     const mainAmp = Math.max(0, Math.min(1, mainVolume));
     const sentenceMaxPeak = useMemo(() => (wavePeaks && wavePeaks.length) ? (Math.max(...wavePeaks) || 1) : 1, [wavePeaks]);
     const barsCountForMix = barsTotal || 40;
@@ -128,9 +130,10 @@ export default function WaveForm(props) {
     const bars = useMemo(() => Array.from({ length: barsCountForMix }).map((_, i) => {
         const peak = wavePeaks && wavePeaks[i] != null ? wavePeaks[i] : null;
         const eff = peak == null ? null : Math.min(1, (peak / sentenceMaxPeak) * mainAmp);
-        // 로딩 시 placeholder(0.15); 계산 후엔 렌더 높이(eff×waveHeightPx)가 MIN_BAR_PX 이하면 숨김(0)
-        const belowMin = eff != null && waveHeightPx > 0 && eff * waveHeightPx <= MIN_BAR_PX;
-        const val = eff == null ? 0.15 : (belowMin ? 0 : eff);
+        // 로딩 시 placeholder(0.15); 계산 후엔 렌더 높이(waveBarPx)가 MIN_BAR_PX 이하면 숨김(0).
+        // waveHeightPx 는 "칸이 배치됐나" 만 본다 — 모를 때(0) 지우면 안 된다.
+        const belowMin = eff != null && waveHeightPx > 0 && waveBarPx(eff) <= MIN_BAR_PX;
+        const val = eff == null ? 0.15 : (belowMin ? 0 : waveBarVal(eff));
         // 가로 위치 비율(0=왼쪽 lightMain ~ 1=오른쪽 lightSub) — 바 색을 위치에 따라 믹스
         const mix = barsCountForMix > 1 ? i / (barsCountForMix - 1) : 0;
         const style = { ['--val']: val, ['--i']: i, ['--mix']: mix };
@@ -143,10 +146,16 @@ export default function WaveForm(props) {
     // 컨테이너 실제 폭에 맞춰 정밀 계산한 바 간격 — outer에 걸어 .audio-player__wave-inner 등
     // 하위 요소들의 CSS 변수(--bar-gap, 기본 3px)로 상속시킨다. 계산은 하되 값을 어디에도
     // 바인딩하지 않아 항상 하드코딩된 기본값(3px)으로만 그려지던 문제 — 실제로 적용한다.
-    const outerStyle = { '--bar-gap': `${barGap}px` };
-    // 소음 바 높이 = (절대진폭 / 문장 최고치) × 실제 소음 볼륨(effectiveNoiseVolume — 부모가 소리에 쓰는 값 그대로).
-    // 문장과 같은 분모(sentenceMaxPeak)를 써서 문장 대비 소음 비율이 미터와 일치.
-    const noiseAmp = Math.max(0, Math.min(1, noiseVolume));
+    // 칸 높이 = 눈금 끝 max(1, R) 의 픽셀 높이 — R ≤ 1 이면 45px 그대로, R 2 면 74px. 소음이 안 보이면 1.
+    // 막대(::after)는 늘 1배 높이(--wave-h1)를 scaleY 하므로 칸이 자라는 동안에도 문장 막대 크기는 그대로다.
+    const waveScaleEnd = noiseSrc ? Math.max(1, noiseRatio) : 1;
+    const outerStyle = {
+        '--bar-gap': `${barGap}px`,
+        '--wave-h': `${waveBarPx(waveScaleEnd)}px`,
+        '--wave-h1': `${WAVE_H1_PX}px`,
+    };
+    // 소음 막대 크기 a = (절대진폭 / 문장 최고치) × M × R — 문장과 같은 분모라 두 막대의 비가 곧 소음 비율.
+    const noiseAmp = mainAmp * Math.max(0, noiseRatio);
     const noiseReady = !!noisePeaks;
     // 소음 연산은 문장 연산(barsTotal 확정) 이후에 시작돼 항상 더 늦게 끝난다 — 문장 바가 먼저 나타났다가
     // 소음 바만 뒤늦게 팝인하는 것을 막기 위해, 최초 등장 시엔 두 계산이 모두 끝난 뒤 함께 드러낸다.
@@ -169,10 +178,10 @@ export default function WaveForm(props) {
     // 문장 바와 같은 이유로 메모 — 입력값이 바뀔 때만 재생성
     const noiseBars = useMemo(() => Array.from({ length: noiseCount }).map((_, i) => {
         const peak = noisePeaks && noisePeaks[i] != null ? noisePeaks[i] : null;
-        const eff = peak == null ? 0 : Math.min(1, (peak / sentenceMaxPeak) * noiseAmp);
-        // 렌더 높이(eff×waveHeightPx)가 MIN_BAR_PX 이하면 숨김(0)
-        const belowMin = waveHeightPx > 0 && eff * waveHeightPx <= MIN_BAR_PX;
-        const val = belowMin ? 0 : eff;
+        const eff = peak == null ? 0 : (peak / sentenceMaxPeak) * noiseAmp;
+        // 렌더 높이(waveBarPx — 2 에서 자름)가 MIN_BAR_PX 이하면 숨김(0)
+        const belowMin = waveHeightPx > 0 && waveBarPx(eff) <= MIN_BAR_PX;
+        const val = belowMin ? 0 : waveBarVal(eff);
         // 가로 위치 비율(0=왼쪽 deepMain ~ 1=오른쪽 deepSub) — 바 색을 위치에 따라 믹스
         const mix = noiseCount > 1 ? i / (noiseCount - 1) : 0;
         const style = { ['--val']: val, ['--i']: i, ['--mix']: mix };

package/dist/packages/core/src/components/Training/NoisePlayerContext.d.ts

@@ -18,10 +18,13 @@ export declare const NOISE_RATIO_STEP = 0.1;
 export declare function noiseRatioOf(settings: Pick<CoreNoiseSettings, 'level' | 'mainVolume'> & {
     noiseRatio?: number;
 }): number;
-/** @public 실제 소음 볼륨(0~1) = min(1, mainVolume × noiseRatioOf(settings)). 켜짐 여부는 보지 않는다. */
-export declare function effectiveNoiseVolume(settings: Pick<CoreNoiseSettings, 'level' | 'mainVolume'> & {
+type 비율설정 = Pick<CoreNoiseSettings, 'level' | 'mainVolume'> & {
     noiseRatio?: number;
-}): number;
+};
+/** @public 실제 소음 볼륨(0~1) = mainVolume × min(1, 비율). 켜짐 여부는 보지 않는다. */
+export declare function effectiveNoiseVolume(settings: 비율설정): number;
+/** @public 실제 문제 소리 볼륨(0~1) = mainVolume × min(1, 1/비율). 비율 0 이면 mainVolume. */
+export declare function effectiveSpeechVolume(settings: 비율설정): number;
 /**
  * @public 설정에 조각을 덮는다 — `{ ...base, ...patch }` 에 비율 규칙 하나를 더한 것.
  *
@@ -29,6 +32,8 @@ export declare function effectiveNoiseVolume(settings: Pick<CoreNoiseSettings, '
  * 옛 `noiseOverride`). 그대로 덮으면 base 의 `noiseRatio`(기본값 1 등)가 남아 level 을 가려
  * 버리므로, 덮은 결과의 level·mainVolume 으로 비율을 셈해 **그 자리에서 박아 둔다** —
  * 박지 않고 비워 두면 뒤에 전체 소리만 바꿀 때 비율이 따라 변해 소음이 옛날처럼 제자리에 선다.
+ * 비율이 1 을 넘으면 소음이 큰 쪽이므로 `mainVolume` 도 level/9 로 함께 박는다(옛날에 들리던
+ * 두 크기 그대로 — 예: level 9·mainVolume 0.5 → 비율 2·mainVolume 1 = 소음 1·문제 0.5).
  * `{ ...DEFAULT_NOISE_SETTINGS, ...saved }` 대신 이것을 쓴다.
  */
 export declare function mergeNoiseSettings(base: CoreNoiseSettings, patch?: Partial<CoreNoiseSettings> | null): CoreNoiseSettings;
@@ -45,7 +50,7 @@ export type NoisePlayerContextValue = {
     /** 문장(메인) 재생 속도(playbackRate). 0.5–1.5, 기본 1. */
     playbackRate: number;
     setPlaybackRate: (rate: number) => void;
-    /** 전체 소리(= 문제 소리 볼륨). 0–1, 기본 1. 소음은 이 값 × 소음 비율로 따라 움직인다. */
+    /** 전체 소리 — 두 소리(문제 소리·소음) 중 큰 쪽의 크기. 0–1, 기본 1. 실제 볼륨은 effectiveSpeechVolume·effectiveNoiseVolume. */
     mainVolume: number;
     setMainVolume: (v: number) => void;
 };

package/dist/packages/core/src/components/Training/NoisePlayerContext.js

@@ -11,9 +11,15 @@ export const levelToPct = (level) => Math.round((Math.min(LEVEL_MAX, Math.max(0,
 /** @public */
 export const pctToLevel = (pct) => (pct / 100) * LEVEL_MAX;
 /* ── 소음 비율 ──────────────────────────────────────────────────────────────
-   전체 소리(`mainVolume` 0~1)가 문제 소리이고, 소음은 그에 대한 **비율**(`noiseRatio` 0~2배)로
-   정한다. 실제 소음 볼륨 = min(1, mainVolume × noiseRatio) — 전체 소리를 줄이면 소음도 따라
-   준다. 예전에는 소음 크기(level/9)가 전체 소리와 따로 움직였다. */
+   전체 소리(`mainVolume` 0~1)는 **두 소리 중 큰 쪽의 크기**이고, 소음은 문제 소리에 대한
+   **비율**(`noiseRatio` R, 0~2배)로 정한다.
+     R ≤ 1: 문제 소리 = M,     소음 = M × R
+     R > 1: 문제 소리 = M ÷ R, 소음 = M
+   곧 문제 소리 = M × min(1, 1/R), 소음 = M × min(1, R) — 어느 쪽도 1 을 넘지 않고, 0~2배가
+   전체 소리와 무관하게 정확히 들린다.
+   (0.120.0 에서는 문제 소리 = M, 소음 = min(1, M×R) 이라 M 이 50% 를 넘으면 소음이 1 에 막혀
+   슬라이더 배수와 실제가 어긋났다 — 전체 80% 에 2배 → 실제 1.25배. 0.123.0 에서 고침.)
+   예전(0.119.0 까지)에는 소음 크기(level/9)가 전체 소리와 따로 움직였다. */
 /** @public 소음 비율 상한(배). */
 export const NOISE_RATIO_MAX = 2;
 /** @public 소음 비율 칸(배). */
@@ -35,10 +41,29 @@ export function noiseRatioOf(settings) {
         return 1;
     return 한칸반올림(비율자르기(소음 / 전체));
 }
-/** @public 실제 소음 볼륨(0~1) = min(1, mainVolume × noiseRatioOf(settings)). 켜짐 여부는 보지 않는다. */
-export function effectiveNoiseVolume(settings) {
+/**
+ * 전체 소리와 비율을 확정한다. `noiseRatio` 가 없는 옛 기록은 옛 뜻(문제 소리 = mainVolume,
+ * 소음 = level/9)이 **들리던 크기 그대로** 남도록 옮긴다 — R = noiseRatioOf, 그리고 R > 1 이면
+ * 소음이 큰 쪽이므로 전체 소리 = level/9.
+ */
+function 확정(settings) {
     const 전체 = Math.min(1, Math.max(0, Number(settings.mainVolume) || 0));
-    return Math.min(1, 전체 * noiseRatioOf(settings));
+    const noiseRatio = noiseRatioOf(settings);
+    const 옛기록 = !(typeof settings.noiseRatio === 'number' && Number.isFinite(settings.noiseRatio));
+    if (옛기록 && noiseRatio > 1) {
+        return { mainVolume: Math.min(LEVEL_MAX, Math.max(0, Number(settings.level) || 0)) / LEVEL_MAX, noiseRatio };
+    }
+    return { mainVolume: 전체, noiseRatio };
+}
+/** @public 실제 소음 볼륨(0~1) = mainVolume × min(1, 비율). 켜짐 여부는 보지 않는다. */
+export function effectiveNoiseVolume(settings) {
+    const { mainVolume, noiseRatio } = 확정(settings);
+    return mainVolume * Math.min(1, noiseRatio);
+}
+/** @public 실제 문제 소리 볼륨(0~1) = mainVolume × min(1, 1/비율). 비율 0 이면 mainVolume. */
+export function effectiveSpeechVolume(settings) {
+    const { mainVolume, noiseRatio } = 확정(settings);
+    return noiseRatio > 1 ? mainVolume / noiseRatio : mainVolume;
 }
 /**
  * @public 설정에 조각을 덮는다 — `{ ...base, ...patch }` 에 비율 규칙 하나를 더한 것.
@@ -47,12 +72,16 @@ export function effectiveNoiseVolume(settings) {
  * 옛 `noiseOverride`). 그대로 덮으면 base 의 `noiseRatio`(기본값 1 등)가 남아 level 을 가려
  * 버리므로, 덮은 결과의 level·mainVolume 으로 비율을 셈해 **그 자리에서 박아 둔다** —
  * 박지 않고 비워 두면 뒤에 전체 소리만 바꿀 때 비율이 따라 변해 소음이 옛날처럼 제자리에 선다.
+ * 비율이 1 을 넘으면 소음이 큰 쪽이므로 `mainVolume` 도 level/9 로 함께 박는다(옛날에 들리던
+ * 두 크기 그대로 — 예: level 9·mainVolume 0.5 → 비율 2·mainVolume 1 = 소음 1·문제 0.5).
  * `{ ...DEFAULT_NOISE_SETTINGS, ...saved }` 대신 이것을 쓴다.
  */
 export function mergeNoiseSettings(base, patch) {
     const merged = { ...base, ...(patch ?? {}) };
     if (patch && 'level' in patch && !(typeof patch.noiseRatio === 'number')) {
-        merged.noiseRatio = noiseRatioOf({ level: merged.level, mainVolume: merged.mainVolume });
+        const 박을것 = 확정({ level: merged.level, mainVolume: merged.mainVolume });
+        merged.noiseRatio = 박을것.noiseRatio;
+        merged.mainVolume = 박을것.mainVolume;
     }
     return merged;
 }

package/dist/packages/core/src/components/Training/TrainingStepAudioPlayer.css

@@ -267,13 +267,17 @@
 
 @keyframes audio-player-spinner { to { transform: rotate(360deg); } }
 
-.audio-player__wave { position: absolute; width: 100%; height: 90%; z-index: 60; display: flex; align-items: center; justify-content: center; pointer-events: none; }
+/* 칸 높이 --wave-h — WaveForm 이 눈금 끝 max(1, 소음 비율)의 픽셀 높이로 준다(waveScale.ts: 1배 45px =
+   slider 50px 의 90%, 2배 74px). 비율을 옮기면 막대 등장과 같은 곡선으로 따라 자란다. */
+.audio-player__wave { position: absolute; width: 100%; height: var(--wave-h, 90%); transition: height 350ms cubic-bezier(.22,.9,.3,1); z-index: 60; display: flex; align-items: center; justify-content: center; pointer-events: none; }
 
 /* 두 레이어(미재생/재생)를 겹쳐서 진행도를 시각화합니다 */
 .audio-player__wave-inner { display: flex; align-items: center; gap: var(--bar-gap, 3px); padding: 0; width: 100%; margin: 0 auto; justify-content: center; z-index: 60; height: 100%; pointer-events: none; cursor: default; }
 .audio-player__wave-inner:not(.is-ready) .audio-player__bar::after { opacity: 0; }
 .audio-player__wave-inner.is-ready .audio-player__bar::after {
-  animation: wave-bar-in 350ms cubic-bezier(.22,.9,.3,1) both;
+  /* backwards — 등장이 끝난 뒤에는 기본 transform 이 이어받아, --val 이 바뀌면(비율·전체 소리) 아래
+     transition 으로 부드럽게 옮긴다. both 면 끝 키프레임이 붙들어 --val 변화가 뚝 끊겨 보였다. */
+  animation: wave-bar-in 350ms cubic-bezier(.22,.9,.3,1) backwards;
   animation-delay: calc(var(--i, 0) * 2ms);
 }
 @keyframes wave-bar-in {
@@ -289,9 +293,9 @@
 .audio-player__wave-played { position: absolute; left: 0; right: 0; top: 0; bottom: 0; /* clip-path 으로 재생된 구간만 표시 — RAF 루프가 --progress 를 직접 갱신합니다 */ clip-path: inset(0 calc((1 - var(--progress, 0)) * 100%) 0 0); pointer-events: none; }
 .audio-player__bar { flex: 0 0 var(--bar-w, 3px); height: 100%; position: relative; box-sizing: border-box; }
 /* 미재생 바: 사운드 크기에 비례한 opacity (0 ~ 70%). 가로 위치 비율(--mix)로 lightMain~lightSub 그라디언트 */
-.audio-player__wave-unplayed .audio-player__bar::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) scaleY(var(--val, 0.15)); transform-origin: center center; height: 100%; background: color-mix(in srgb, var(--color-lightMain), var(--color-lightSub) calc(var(--mix, 0) * 100%)); border-radius: 999px; opacity: 1; z-index: 61; }
+.audio-player__wave-unplayed .audio-player__bar::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) scaleY(var(--val, 0.15)); transform-origin: center center; height: var(--wave-h1, 100%); transition: transform 350ms cubic-bezier(.22,.9,.3,1); background: color-mix(in srgb, var(--color-lightMain), var(--color-lightSub) calc(var(--mix, 0) * 100%)); border-radius: 999px; opacity: 1; z-index: 61; }
 /* 재생된 바: 사운드 크기에 비례한 opacity (0 ~ 70%). 가로 위치 비율(--mix)로 lightMain~lightSub 그라디언트 */
-.audio-player__wave-played .audio-player__bar::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) scaleY(var(--val, 0.15)); transform-origin: center center; height: 100%; background: color-mix(in srgb, var(--color-lightMain), var(--color-lightSub) calc(var(--mix, 0) * 100%)); border-radius: 999px; opacity: 1; z-index: 62; }
+.audio-player__wave-played .audio-player__bar::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) scaleY(var(--val, 0.15)); transform-origin: center center; height: var(--wave-h1, 100%); transition: transform 350ms cubic-bezier(.22,.9,.3,1); background: color-mix(in srgb, var(--color-lightMain), var(--color-lightSub) calc(var(--mix, 0) * 100%)); border-radius: 999px; opacity: 1; z-index: 62; }
 
 /* 소음 waveform — 문장 바 뒤에 깔리는 은은한 레이어. 진하기는 --noise-op(소음 크기)로 조절 */
 .audio-player__wave-noise {
@@ -303,7 +307,9 @@
 .audio-player__wave-noise .audio-player__bar::after {
   content: ""; position: absolute; left: 0; right: 0; top: 50%;
   transform: translateY(-50%) scaleY(var(--val, 0.1));
-  transform-origin: center center; height: 100%;
+  /* 막대는 늘 1배 높이(--wave-h1)를 scaleY — 소음은 2배까지 --val 이 1 을 넘는다(waveScale) */
+  transform-origin: center center; height: var(--wave-h1, 100%);
+  transition: transform 350ms cubic-bezier(.22,.9,.3,1);
   background: color-mix(in srgb, var(--color-deepMain), var(--color-deepSub) calc(var(--mix, 0) * 100%));
   border-radius: 999px;
   opacity: 1; z-index: 58;
@@ -311,7 +317,9 @@
 /* 문장 바(.audio-player__wave-inner)와 동일한 진입 연출 — is-ready 전까지 숨겨서 계산 완료 시 동시에 드러난다 */
 .audio-player__wave-noise:not(.is-ready) .audio-player__bar::after { opacity: 0; }
 .audio-player__wave-noise.is-ready .audio-player__bar::after {
-  animation: wave-bar-in 350ms cubic-bezier(.22,.9,.3,1) both;
+  /* backwards — 등장이 끝난 뒤에는 기본 transform 이 이어받아, --val 이 바뀌면(비율·전체 소리) 아래
+     transition 으로 부드럽게 옮긴다. both 면 끝 키프레임이 붙들어 --val 변화가 뚝 끊겨 보였다. */
+  animation: wave-bar-in 350ms cubic-bezier(.22,.9,.3,1) backwards;
   animation-delay: calc(var(--i, 0) * 2ms);
 }
 

package/dist/packages/core/src/components/Training/TrainingStepAudioPlayer.js

@@ -7,7 +7,7 @@ import { useTranslation } from "react-i18next";
 import { downloadSound, getSignedOrPublicUrl, resolveSoundPath } from '../../utils/storage';
 import { getTTSUrlResolver } from '../../utils/ttsConfig';
 import { getElementAnalyser, resumeAudioMeter } from '../../utils/audioMeter';
-import { useNoisePlayer, effectiveNoiseVolume } from './NoisePlayerContext';
+import { useNoisePlayer, effectiveNoiseVolume, effectiveSpeechVolume, noiseRatioOf } from './NoisePlayerContext';
 import { useNoiseFade } from './useNoiseFade';
 import { useTTSPlayback } from './useTTSPlayback';
 import './TrainingStepAudioPlayer.css';
@@ -97,8 +97,10 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
     // 문장(메인) 재생 속도·볼륨 — 하단 소음설정 툴팁과 공유(NoisePlayerContext)
     const playbackRate = noisePlayer?.playbackRate ?? 1.0;
     const mainVolume = noisePlayer?.mainVolume ?? 1.0;
-    // 실제 소음 볼륨 — 전체 소리 × 소음 비율(상한 1). 파형의 소음 막대도 이 값으로 그린다.
+    // 실제 두 볼륨 — 전체 소리(큰 쪽 크기)를 소음 비율로 나눈다(소리용). 파형은 M·R 로 따로 그린다.
     const noiseVolume = noisePlayer ? effectiveNoiseVolume(noisePlayer.settings) : 0;
+    // 소음을 끈 판(소음 종류 "없음")은 들리지 않는 소음에 문제 소리를 양보하지 않는다 — 전체 소리 그대로.
+    const speechVolume = noisePlayer?.settings.enabled ? effectiveSpeechVolume(noisePlayer.settings) : mainVolume;
     const [fillCompletionPhase, setFillCompletionPhase] = useState('idle');
     const [noticeMessage, setNoticeMessage] = useState("");
     const [noticePosition] = useState("top");
@@ -141,7 +143,8 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
     const { startTTS, stopTTS } = useTTSPlayback({
         ttsText,
         playbackRate,
-        mainVolume,
+        // TTS 음성 = 문제 소리 — 전체 소리가 아니라 비율로 나뉜 문제 소리 볼륨
+        mainVolume: speechVolume,
         fillRef,
         waveProgressRef,
         setProgress,
@@ -947,15 +950,51 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
         }
         catch (e) { }
     }, [playbackRate]);
-    // 문장(메인) 볼륨 반영
+    // 문장(메인) 볼륨 반영 — 문제 소리 볼륨(effectiveSpeechVolume). 전체 소리·소음 비율 어느 쪽을
+    // 바꿔도 달라진다. 재생 중이면 소음과 같은 150ms 램프로 옮기고, 멈춰 있으면 바로 건다.
+    // 백그라운드 탭에서는 RAF 가 멈춰 램프가 중간에 설 수 있으므로 끝값을 타이머로 한 번 더 박는다.
+    const speechRampRef = useRef({ raf: null, timer: null });
     useEffect(() => {
-        try {
-            const a = audioRef.current;
-            if (a)
-                a.volume = Math.max(0, Math.min(1, mainVolume));
+        const a = audioRef.current;
+        if (!a)
+            return;
+        const target = Math.max(0, Math.min(1, speechVolume));
+        const ramp = speechRampRef.current;
+        const 끊기 = () => {
+            if (ramp.raf !== null) {
+                cancelAnimationFrame(ramp.raf);
+                ramp.raf = null;
+            }
+            if (ramp.timer !== null) {
+                clearTimeout(ramp.timer);
+                ramp.timer = null;
+            }
+        };
+        끊기();
+        const from = a.volume;
+        if (a.paused || Math.abs(from - target) < 0.001 || typeof requestAnimationFrame !== 'function') {
+            try {
+                a.volume = target;
+            }
+            catch (e) { }
+            return;
         }
-        catch (e) { }
-    }, [mainVolume]);
+        const start = performance.now();
+        const step = () => {
+            const t = Math.min(1, (performance.now() - start) / 150);
+            try {
+                a.volume = from + (target - from) * t;
+            }
+            catch (e) { }
+            ramp.raf = t < 1 ? requestAnimationFrame(step) : null;
+        };
+        ramp.raf = requestAnimationFrame(step);
+        ramp.timer = setTimeout(() => { 끊기(); try {
+            a.volume = target;
+        }
+        catch (e) { } }, 200);
+        return 끊기;
+    }, [speechVolume]);
     // fill (진행 마커) 클래스 및 초기 위치 계산 — RAF 루프에서 .style.left를 직접 갱신합니다.
     const isFillHolding = fillCompletionPhase === 'hold';
     const isFillOutAnimating = fillCompletionPhase === 'out';
@@ -969,5 +1008,7 @@ export default function TrainingStepAudioPlayer({ btnLabel, soundSrc, bucketPath
                         onFocus: showListenTip, onBlur: hideListenTip, children: _jsx("span", { ref: listenBtnRef, className: "audio-player__button-triangle-wrap", children: _jsx("svg", { className: "audio-player__button-triangle", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { ref: triPathRef, d: "M13.2 7.7 L16.5 9.85 Q20.2 12 16.5 14.15 L10 18.3 Q7 19.7 7 16.3 L7 7.7 Q7 4.3 10 5.7 L13.2 7.7" }) }) }) })) : null, listenBtnRect && (_jsx(InfoTooltip, { anchorRect: listenBtnRect, text: typeof label === 'string' && label ? label : t('training.listenLabel', '문장 듣기'), offset: 8 })), _jsxs("div", { className: `audio-player__play ${stateLocal === "playMode" || displayedPlaying ? "is-visible" : ""}`, children: [_jsxs("div", { ref: btnsRef, className: "audio-player__buttons", children: [_jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "skip-back", onClick: handlePrev, ariaLabel: t('training.prev', '이전'), width: "60px", variant: "transparent-white", "aria-hidden": "true", tabIndex: -1, disabled: stateLocal !== 'playMode' }), _jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: displayedPlaying ? "pause" : "play", onClick: handleToggle, ariaLabel: t('common.playPause', '재생 / 멈춤'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' }), _jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "square", onClick: handleStop, ariaLabel: t('training.stop', '정지'), width: "60px", variant: "transparent-white", "aria-hidden": "true", tabIndex: -1, disabled: stateLocal !== 'playMode' }), sourceButtonCount > 1 ? (_jsx("div", { ref: sourceButtonsRef, className: "audio-player__source-buttons", children: Array.from({ length: sourceButtonCount }).map((_, idx) => (_jsx(Button, { size: 32, type: "dot", shape: "pill", useBorder: false, label: String(idx + 1), onClick: () => { try {
                                                 handleJumpTo(idx);
                                             }
-                                            catch (e) { } }, ariaLabel: t('training.sourcePlay', { n: idx + 1 }), variant: "transparent-white", selected: 구간표시 && currentIndex === idx, disabled: stateLocal !== 'playMode' || !(Array.isArray(sources) && sources[idx]), showTooltipInfo: true }, idx))) })) : null, (!Array.isArray(sources) || sources.length <= 1) ? (_jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "repeat", onClick: handleReplay, ariaLabel: t('common.replay', '다시듣기'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' })) : null, _jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "skip-forward", onClick: handleNext, ariaLabel: t('training.next', '다음'), width: "60px", variant: "transparent-white", "aria-hidden": true, tabIndex: -1, disabled: stateLocal !== 'playMode' }), _jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "check", onClick: handleEnd, ariaLabel: t('common.done', '완료'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' })] }), _jsxs("div", { className: "audio-player__slider", children: [_jsx("div", { className: fillClass, ref: fillRef, style: { left: `${fillLeftPercent}%` }, "aria-hidden": "true" }), (showSoundWaveForm || showNoiseWaveForm) && (_jsx(WaveForm, { segments: currentSegments, progress: progress, totalDuration: totalDuration, onSegmentClick: handleJumpTo, waveProgressRef: waveProgressRef, showSoundWaveForm: showSoundWaveForm, noiseSrc: (showNoiseWaveForm && noisePlayer?.settings.enabled && noiseVolume > 0) ? activeNoiseUrl : null, noiseVolume: noiseVolume, noiseSpeed: noisePlayer?.settings.speed ?? 1, mainVolume: mainVolume, onReadyChange: handleWaveReadyChange }))] })] }), _jsx("audio", { ref: audioRef, crossOrigin: "anonymous", preload: "auto" })] }), !showSoundWaveForm && (_jsxs("p", { className: "audio-player__no-waveform caption-1", children: [_jsx(Icon, { icon: "triangle-alert", size: 14 }), t('training.noSoundWaveform', '소리 비교 문제는 웨이브폼을 표현하지 않습니다.')] })), _jsx(Toast, { message: noticeMessage, position: noticePosition, onClose: handleClearNotice })] }));
+                                            catch (e) { } }, ariaLabel: t('training.sourcePlay', { n: idx + 1 }), variant: "transparent-white", selected: 구간표시 && currentIndex === idx, disabled: stateLocal !== 'playMode' || !(Array.isArray(sources) && sources[idx]), showTooltipInfo: true }, idx))) })) : null, (!Array.isArray(sources) || sources.length <= 1) ? (_jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "repeat", onClick: handleReplay, ariaLabel: t('common.replay', '다시듣기'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' })) : null, _jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "skip-forward", onClick: handleNext, ariaLabel: t('training.next', '다음'), width: "60px", variant: "transparent-white", "aria-hidden": true, tabIndex: -1, disabled: stateLocal !== 'playMode' }), _jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", shape: "pill", useBorder: false, icon: "check", onClick: handleEnd, ariaLabel: t('common.done', '완료'), width: "60px", variant: "transparent-white", disabled: stateLocal !== 'playMode' })] }), _jsxs("div", { className: "audio-player__slider", children: [_jsx("div", { className: fillClass, ref: fillRef, style: { left: `${fillLeftPercent}%` }, "aria-hidden": "true" }), (showSoundWaveForm || showNoiseWaveForm) && (_jsx(WaveForm, { segments: currentSegments, progress: progress, totalDuration: totalDuration, onSegmentClick: handleJumpTo, waveProgressRef: waveProgressRef, showSoundWaveForm: showSoundWaveForm, noiseSrc: (showNoiseWaveForm && noisePlayer?.settings.enabled && noiseVolume > 0) ? activeNoiseUrl : null, noiseRatio: noisePlayer ? noiseRatioOf(noisePlayer.settings) : 0, noiseSpeed: noisePlayer?.settings.speed ?? 1, 
+                                        /* 그림은 "문장 = 기준" — 문제 소리(M÷R)가 아니라 전체 소리 M 으로 문장을 그리고 소음을 R 배로 키운다 */
+                                        mainVolume: mainVolume, onReadyChange: handleWaveReadyChange }))] })] }), _jsx("audio", { ref: audioRef, crossOrigin: "anonymous", preload: "auto" })] }), !showSoundWaveForm && (_jsxs("p", { className: "audio-player__no-waveform caption-1", children: [_jsx(Icon, { icon: "triangle-alert", size: 14 }), t('training.noSoundWaveform', '소리 비교 문제는 웨이브폼을 표현하지 않습니다.')] })), _jsx(Toast, { message: noticeMessage, position: noticePosition, onClose: handleClearNotice })] }));
 }

package/dist/packages/core/src/components/Training/useTTSPlayback.d.ts

@@ -8,6 +8,7 @@ type PlaybackState = 'stopped' | 'playing' | 'paused';
 export declare function useTTSPlayback({ ttsText, playbackRate, mainVolume, fillRef, waveProgressRef, setProgress, setPlaybackState, setStateLocal, fadeInNoise, fadeOutNoise, noiseSettingsRef, onDoneRef, handleEndRef, }: {
     ttsText?: string | string[] | null;
     playbackRate: number;
+    /** 음성 볼륨 0–1 — 부르는 쪽이 문제 소리 볼륨(effectiveSpeechVolume)을 넘긴다 */
     mainVolume: number;
     fillRef: RefObject<HTMLDivElement | null>;
     waveProgressRef: RefObject<HTMLDivElement | null>;

package/dist/packages/core/src/components/Training/waveScale.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 파형 세로 눈금 — 막대 크기 a(문장 단위: 문장 최고치 × 전체 소리 = 1)를 픽셀 높이로 옮긴다.
+ *
+ * 소음 비율이 1 을 넘으면 소음 막대가 문장보다 커야 보인다(말귀 사용자 "최대를 1로 두었을 때
+ * 2배는 영역을 더 늘려서"). 그런데 재생 카드(.audio-player__panel 120px)와 조작 줄 자리는 그대로라
+ * 쓸 수 있는 세로가 모자란다 — 가운데 선(y=45)에서 위로 45px 이 카드 윗변, 아래로 37px 이
+ * 조작 줄 윗변이다. 그래서 **구간별 눈금**(사용자 결정, 2026-09-13):
+ *
+ *   a ≤ 1      h = a × H1                        — 지금과 똑같다(H1 = 45px, slider 50px 의 90%)
+ *   1 < a ≤ 2  h = H1 + (a − 1) × (HMAX − H1)     — 2배가 정확히 HMAX(74px = 2 × 37)에 닿는다
+ *
+ * 1~2 구간은 한 칸에 29px 로 기울기가 다르다. 겹침·넘침은 test/waveScale.test.ts 가 CSS 치수로 잰다.
+ */
+/** @public 1배 막대 높이(px) — 지금까지의 파형 칸 높이. */
+export declare const WAVE_H1_PX = 45;
+/** @public 2배 막대 높이(px) — 카드 윗변·조작 줄을 넘지 않는 최대. */
+export declare const WAVE_HMAX_PX = 74;
+/** @public 눈금 끝(배). */
+export declare const WAVE_A_MAX = 2;
+/** @public 막대 크기 a(0~2, 넘으면 자름) → 픽셀 높이. */
+export declare function waveBarPx(a: number): number;
+/** @public 막대 `--val` — 1배 높이(H1)에 대한 배율. 막대 ::after 는 H1 높이를 scaleY(--val) 한다. */
+export declare function waveBarVal(a: number): number;

package/dist/packages/core/src/components/Training/waveScale.js

@@ -0,0 +1,28 @@
+/**
+ * 파형 세로 눈금 — 막대 크기 a(문장 단위: 문장 최고치 × 전체 소리 = 1)를 픽셀 높이로 옮긴다.
+ *
+ * 소음 비율이 1 을 넘으면 소음 막대가 문장보다 커야 보인다(말귀 사용자 "최대를 1로 두었을 때
+ * 2배는 영역을 더 늘려서"). 그런데 재생 카드(.audio-player__panel 120px)와 조작 줄 자리는 그대로라
+ * 쓸 수 있는 세로가 모자란다 — 가운데 선(y=45)에서 위로 45px 이 카드 윗변, 아래로 37px 이
+ * 조작 줄 윗변이다. 그래서 **구간별 눈금**(사용자 결정, 2026-09-13):
+ *
+ *   a ≤ 1      h = a × H1                        — 지금과 똑같다(H1 = 45px, slider 50px 의 90%)
+ *   1 < a ≤ 2  h = H1 + (a − 1) × (HMAX − H1)     — 2배가 정확히 HMAX(74px = 2 × 37)에 닿는다
+ *
+ * 1~2 구간은 한 칸에 29px 로 기울기가 다르다. 겹침·넘침은 test/waveScale.test.ts 가 CSS 치수로 잰다.
+ */
+/** @public 1배 막대 높이(px) — 지금까지의 파형 칸 높이. */
+export const WAVE_H1_PX = 45;
+/** @public 2배 막대 높이(px) — 카드 윗변·조작 줄을 넘지 않는 최대. */
+export const WAVE_HMAX_PX = 74;
+/** @public 눈금 끝(배). */
+export const WAVE_A_MAX = 2;
+/** @public 막대 크기 a(0~2, 넘으면 자름) → 픽셀 높이. */
+export function waveBarPx(a) {
+    const x = Math.min(WAVE_A_MAX, Math.max(0, Number(a) || 0));
+    return x <= 1 ? x * WAVE_H1_PX : WAVE_H1_PX + (x - 1) * (WAVE_HMAX_PX - WAVE_H1_PX);
+}
+/** @public 막대 `--val` — 1배 높이(H1)에 대한 배율. 막대 ::after 는 H1 높이를 scaleY(--val) 한다. */
+export function waveBarVal(a) {
+    return waveBarPx(a) / WAVE_H1_PX;
+}

package/dist/packages/core/src/types/training.d.ts

@@ -15,13 +15,14 @@ export type CoreNoiseSettings = {
      */
     level: number;
     /**
-     * 소음 비율 — 문제 소리(`mainVolume`) 대비 배수, 0–2.0(0.1 칸). 1 = 소음과 문제 소리가 같은 크기.
-     * 실제 소음 볼륨 = min(1, mainVolume × noiseRatio). 없으면 `level` 에서 옮긴다.
+     * 소음 비율 — 문제 소리 대비 소음의 배수, 0–2.0(0.1 칸). 1 = 소음과 문제 소리가 같은 크기.
+     * 문제 소리 = mainVolume × min(1, 1/noiseRatio), 소음 = mainVolume × min(1, noiseRatio).
+     * 없으면 `level` 에서 옮긴다.
      */
     noiseRatio?: number;
     /** 소음 재생 속도(playbackRate). 0.75–1.25, 기본 1. */
     speed: number;
-    /** 전체 소리(= 문제 소리 볼륨). 0–1, 기본 1. 소음은 이 값 × `noiseRatio`. 계정 설정("훈련" 패널)과 훈련 화면 툴팁이 함께 영속화한다. */
+    /** 전체 소리 — 두 소리 중 큰 쪽의 크기. 0–1, 기본 1. 실제 두 볼륨은 `noiseRatio` 로 나뉜다. 계정 설정("훈련" 패널)과 훈련 화면 툴팁이 함께 영속화한다. */
     mainVolume: number;
     /** 문장(메인) 재생 속도(playbackRate). 0.5–1.5, 기본 1. 계정 설정("훈련" 패널)과 훈련 화면 툴팁이 함께 영속화한다. */
     mainSpeed: number;

package/dist/packages/core/src/version.d.ts

@@ -46,4 +46,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.122.0";
+export declare const CORE_VERSION = "0.124.0";

package/dist/packages/core/src/version.js

@@ -46,4 +46,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export const CORE_VERSION = '0.122.0';
+export const CORE_VERSION = '0.124.0';