소리꽃 KeyBloom TIL 34

이 글은 Today I Learn 시리즈의 139번째 기록입니다. (총 141개)

기능 사이사이 거슬리던 것들을 정리하며 알게 된 것들.

---

편집 후 단축키가 막히는 건 포커스가 남아서다

슬라이더·체크박스를 만진 뒤 숫자키(큐 전환)·스페이스(재생)가 바로 안 먹혔다. 원인은 단축키 핸들러가 입력칸에 포커스가 있으면 무시하도록 돼 있어서(타이핑 중 단축키 가로채기 방지). 컨트롤을 만지면 포커스가 거기 남아 계속 막힌다.

그래서 파라미터 편집이 끝나는 지점(change 커밋)에서 그 컨트롤의 포커스를 뗀다.

bodyWrap.addEventListener("change", (e) => {
  const el = e.target as HTMLElement;
  if (el.matches('input[type="range"], input[type="checkbox"], select')) {
    commit();
    el.blur(); // 포커스 해제 → 이후 keydown의 e.target이 body → 단축키 즉시 동작
  }
});

재생(seek) 바는 별도 위치라 거기에도 따로 change → blur를 걸었다.

---

네이티브에서 저장 대화상자가 자꾸 뜨는 이유

저장 위치를 정해뒀는데도 영상 저장을 누르면 매번 대화상자가 떴다. 오프라인 렌더가 브라우저의 저장 픽커(showSaveFilePicker)를 직접 호출하는데, 이건 브라우저가 파일을 직접 읽고 쓰게 해주는 FSA(File System Access) 기능이다. 네이티브 WebView(WebView2, Windows 내장 브라우저 엔진)도 이걸 지원해서 대화상자를 띄운 것.

네이티브에선 이 픽커를 끄고, 결과를 버퍼로 받아 지정 폴더(없으면 다운로드 폴더)에 바로 쓰게 했다.

// 네이티브면 FSA 픽커 대신 버퍼 → 지정 폴더로 직접 저장(대화상자 없음)
if (!IS_NATIVE && typeof win.showSaveFilePicker === "function") { /* 웹: 픽커 */ }
else { /* 버퍼로 받아 saveOutput이 폴더에 씀 */ }

기본 폴더는 Tauri의 downloadDir()로 다운로드 폴더를 잡아 대화상자 없이.

주의로 남긴 것 — 버퍼는 메모리에 통째라 4K 장척은 나중에 Rust 스트리밍 쓰기로 개선해야 한다.

---

오버레이는 스타일을 재사용한다

느린 내보내기(앞으로 붙일 알파 인코딩 등)에서 진행을 크게 보여주려고 화면 중앙 진행바를 만들었다. 이미 있던 시작 로딩 오버레이의 .loading-* 스타일을 그대로 재사용하고, 반투명 배경만 얹었다.

• 배운 점: 같은 모양의 오버레이는 CSS를 새로 짜지 말고 기존 클래스를 재사용 — 진행바·박스·퍼센트가 이미 다 있음.

---

요약

• 편집 후 단축키가 막히면 커밋 지점에서 blur() — 포커스가 input에 남는 게 원인.
• 네이티브 저장 대화상자는 showSaveFilePicker를 네이티브에서 끄고 버퍼→지정 폴더(downloadDir)로 우회.
• 같은 꼴 오버레이는 기존 스타일 재사용.

---

Series: Today I Learn

1 ｜ C++ 자료형(Data Type) 2 ｜ MD5 vs pHash 3 ｜ C++에서 함수의 선언과 정의 4 ｜ Tkinter padx, pady 5 ｜ 메모리와 포인터 변수 6 ｜ Call by Value, Call by Reference, Call by Pointer 비교 7 ｜ const 8 ｜ Gemfile — Jekyll 프로젝트의 의존성 파일 9 ｜ kramdown-parser-gfm — Jekyll의 GFM 파서 10 ｜ 파서(Parser) 11 ｜ AHU vs OHU 12 ｜ I might try it vs I'll try it 뉘앙스 차이 13 ｜ SESSION_EXPIRE_AT_BROWSER_CLOSE=True 14 ｜ configuration key 15 ｜ Git stash vs discard 16 ｜ subprocess.Popen으로 Windows 탐색기에 명령어를 전달 17 ｜ Post 잔디 분석하기 18 ｜ Google Sheets Sync 최적화 19 ｜ DSL (Domain Specific Language)과 GPL (General Purpose Language) 20 ｜ 마크다운 표 그리는 방법 21 ｜ 쿼리 파라미터(Query Parameter). 기존 QR코드 재활용 22 ｜ Django 보안 취약점 점검 및 수정 23 ｜ OOP Object-Oriented Programming 객체 지향 프로그래밍 24 ｜ Fernet 대칭 암호화 25 ｜ Jekyll 코드블록 안의 Liquid 태그 26 ｜ 습관만들기 Pawbit TIL 1 27 ｜ insertOnConflictUpdate vs DoUpdate(target) 28 ｜ 세션 필터 29 ｜ 아코디언(Accordiaon) UI를 펼친상태로 만들기 30 ｜ input의 step 31 ｜ 습관만들기 Pawbit TIL 2 32 ｜ 습관만들기 Pawbit TIL 3 33 ｜ Word Cloud 34 ｜ Google Sheets를 데이터 버스로(with AppSheet) 35 ｜ Django 모델 텍스트 필드 자동 수집 패턴 36 ｜ localStorage로 섹션 토글 상태 유지 37 ｜ 순차 ID 생성(`select_for_update()` + `max()` 조합) 38 ｜ 역참조 검색과 distinct() 39 ｜ xlsx 다운로드와 로딩 오버레이 충돌 40 ｜ Android 파일 공유 MIME 타입 41 ｜ AssetManifest — Flutter 빌드 타임 asset 목록 런타임 조회 42 ｜ 크레센도 Phaser + TypeScript TIL 1 43 ｜ 크레센도 Phaser + TypeScript TIL 2 44 ｜ 크레센도 Phaser + TypeScript TIL 3 45 ｜ 크레센도 Phaser + TypeScript TIL 4 46 ｜ 크레센도 Phaser + TypeScript TIL 5 47 ｜ 여둘까 Office Layout TIL 1 48 ｜ 습관만들기 Pawbit TIL 4 49 ｜ 여둘까 Office Layout TIL 2 50 ｜ 여둘까 Office Layout TIL 3 51 ｜ 크레센도 Phaser + TypeScript TIL 6 52 ｜ UTF-8 BOM과 PowerShell 파일 쓰기 53 ｜ 소리꽃 KeyBloom TIL 1 54 ｜ 소리꽃 KeyBloom TIL 2 55 ｜ 소리꽃 KeyBloom TIL 3 56 ｜ 소리꽃 KeyBloom TIL 4 57 ｜ 소리꽃 KeyBloom TIL 5 58 ｜ 습관만들기 Pawbit TIL 5 59 ｜ 여둘까 Office Layout TIL 4 60 ｜ 소리꽃 KeyBloom TIL 6 61 ｜ 소리꽃 KeyBloom TIL 7 62 ｜ 소리꽃 KeyBloom TIL 8 63 ｜ 메트로놈 Simple Metronome TIL 1 64 ｜ 소리꽃 KeyBloom TIL 9 65 ｜ 메트로놈 Simple Metronome TIL 2 66 ｜ 소리꽃 KeyBloom TIL 10 67 ｜ 습관만들기 Pawbit TIL 6 68 ｜ 크레센도 Phaser + TypeScript TIL 7 69 ｜ 메트로놈 Simple Metronome TIL 3 70 ｜ 습관만들기 Pawbit TIL 7 71 ｜ 정적 블로그 SEO 정비와 Pagefind 검색 도입 72 ｜ 크레센도 Phaser + TypeScript TIL 8 73 ｜ 메트로놈 Simple Metronome TIL 4 74 ｜ 습관만들기 Pawbit TIL 8 75 ｜ 안드로이드 AudioTrack 연속 재생, 실측 피커 정렬, 카메라 토치 플래시 76 ｜ 메트로놈 Simple Metronome TIL 5 77 ｜ 모래게임 Sandrop TIL 1 78 ｜ 습관만들기 Pawbit TIL 9 79 ｜ 메트로놈 Simple Metronome TIL 6 80 ｜ 모래게임 Sandrop TIL 2 81 ｜ 모래게임 Sandrop TIL 3 82 ｜ 습관만들기 Pawbit TIL 10 83 ｜ 습관만들기 Pawbit TIL 11 84 ｜ 메트로놈 Simple Metronome TIL 7 85 ｜ 모래게임 Sandrop TIL 4 86 ｜ 모래게임 Sandrop TIL 5 87 ｜ 습관만들기 Pawbit TIL 12 88 ｜ 모래게임 Sandrop TIL 6 89 ｜ 소리꽃 KeyBloom TIL 11 90 ｜ 모래게임 Sandrop TIL 7 91 ｜ 모래게임 Sandrop TIL 8 92 ｜ 소리꽃 KeyBloom TIL 12 93 ｜ 모래게임 Sandrop TIL 9 94 ｜ 소리꽃 KeyBloom TIL 13 95 ｜ 모래게임 Sandrop TIL 10 96 ｜ 소리꽃 KeyBloom TIL 14 97 ｜ 소리꽃 KeyBloom TIL 15 98 ｜ 소리꽃 KeyBloom TIL 16 99 ｜ 콘티온 Conti On TIL 1 100 ｜ 소리꽃 KeyBloom TIL 17 101 ｜ 콘티온 Conti On TIL 2 102 ｜ 습관만들기 Pawbit TIL 13 103 ｜ 콘티온 Conti On TIL 3 104 ｜ 모래게임 Sandrop TIL 11 105 ｜ 소리꽃 KeyBloom TIL 18 106 ｜ 여둘까 Office Layout TIL 5 107 ｜ 모래게임 Sandrop TIL 12 108 ｜ 모래게임 Sandrop TIL 13 109 ｜ 콘티온 Conti On TIL 4 110 ｜ 모래게임 Sandrop TIL 14 111 ｜ 소리꽃 KeyBloom TIL 19 112 ｜ 소리꽃 KeyBloom TIL 20 113 ｜ 소리꽃 KeyBloom TIL 21 114 ｜ 소리꽃 KeyBloom TIL 22 115 ｜ 습관만들기 Pawbit TIL 14 116 ｜ 모래게임 Sandrop TIL 15 117 ｜ 모래게임 Sandrop TIL 16 118 ｜ 소리꽃 KeyBloom TIL 23 119 ｜ 소리꽃 KeyBloom TIL 24 120 ｜ 소리꽃 KeyBloom TIL 25 121 ｜ 소리꽃 KeyBloom TIL 26 122 ｜ 온실 GreenHouse TIL 1 123 ｜ 콘티온 Conti On TIL 5 124 ｜ 모래게임 Sandrop TIL 17 125 ｜ 소리꽃 KeyBloom TIL 27 126 ｜ 온실 GreenHouse TIL 2 127 ｜ 콘티온 Conti On TIL 6 128 ｜ 모래게임 Sandrop TIL 18 129 ｜ 콘티온 Conti On TIL 7 130 ｜ 모래게임 Sandrop TIL 19 131 ｜ 소리꽃 KeyBloom TIL 28 132 ｜ 모래게임 Sandrop TIL 20 133 ｜ 모래게임 Sandrop TIL 21 134 ｜ 소리꽃 KeyBloom TIL 29 135 ｜ 소리꽃 KeyBloom TIL 30 136 ｜ 소리꽃 KeyBloom TIL 31 137 ｜ 소리꽃 KeyBloom TIL 32 138 ｜ 소리꽃 KeyBloom TIL 33 139 ｜ 소리꽃 KeyBloom TIL 34 읽는 중 140 ｜ 소리꽃 KeyBloom TIL 35 141 ｜ 여둘까 Office Layout TIL 6