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

자막 담당자가 곡 자막뿐 아니라 행사 순서 전체의 자막도 이 앱에서 만들고 싶다고 했다. 그래서 곡만 다루던 구조를 순서지(행사 순서 전체를 차례대로 적은 표)까지 넓히기로 했다. 그 과정에서 판단이 필요했던 것들을 모았다.


곡과 순서 자막은 맡은 사람이 달랐다

곡 가사는 곡을 맡은 팀이 관리하고, 순서 자막은 자막 담당자가 관리한다. 그래서 구분(카테고리)마다 그 위의 큰 묶음인 대분류를 붙여 “곡”과 “순서” 둘로 나눴고, 이 한 칸이 어느 화면에 보일지와 수정 승인을 누가 할지를 같이 정하게 했다.

권한을 “이 화면이 잠겼나”가 아니라 “이 값이 누구 소관인가”로 묻는 방식은 앞선 TIL 4에서 정리한 그대로다.


떼어 놓고 싶은데 이어져 있어야 했다

곡 팀이 만든 콘티(곡 순서표)를 순서지에 통째로 끼워 넣는 기능을 붙이려니, 요구가 둘이었고 방향이 반대였다.

  • 자막 담당자는 순서지 안에서 곡 사이에 자막을 끼우고 순서를 바꾸고 싶다. 그러려면 원래 콘티와 떨어져 있어야 한다.
  • 그런데 곡 팀이 가사를 고치면 순서지 자막에도 그 수정이 들어가야 한다. 그러려면 원래 곡과 이어져 있어야 한다.

“복사할까, 참조할까(원본을 가리키기만 할까)“를 통째로 정하면 둘 중 하나는 반드시 깨진다. 그래서 축을 둘로 갈랐다.

  • 배치(어떤 곡을 어떤 순서로)는 복사한다. 끼워 넣는 순간의 구성을 스냅샷(그 순간 상태를 떠 둔 사본)으로 떠 두니, 순서지에서 무엇을 하든 원래 콘티와 엉키지 않는다.
  • 내용(가사)은 공유한다. 복사한 항목은 가사 원문 대신 원래 곡을 가리키는 번호만 들고 있고, PPT를 만들 때 곡을 최신으로 다시 읽는다.

넣는 순간 구성만 사진으로 찍고, 내용은 링크로 걸어 두는 셈이다.

곁들여, 콘티를 가리키는 특별한 항목 종류를 새로 만들 필요도 없었다. 콘티 이름을 그룹 머리글(곡 몇 개를 묶어 주는 제목 줄)로 하나 얹고 그 아래 곡들을 펼쳐 넣으면, 순서지에 이미 있던 항목들만으로 표현된다.

대가도 있다. 끼워 넣은 뒤 곡 팀이 콘티에서 곡을 빼거나 바꾸면(배치 변경) 순서지에는 따라오지 않는다. 배치를 복사하기로 한 순간 따라오는 값이라, 필요하면 다시 불러오게 두었다.


빈 구분을 숨겼더니 첫 항목을 넣을 데가 없었다

순서용 구분이 늘면서, 항목이 하나도 없는 구분까지 드롭다운에 줄줄이 떴다. 그래서 항목이 0개인 구분은 목록에서 숨기기로 했다.

그런데 같은 정리를 추가 폼에도 걸면, 빈 구분에는 첫 항목을 영영 넣을 수 없다. 폼에서도 안 보이니까. 비어 있어서 숨겼는데, 숨겨져 있어서 계속 비는 셈이다.

그래서 숨기는 건 검색 필터에서만 하고, 추가 폼에는 전부 보여주기로 했다. 같은 구분 목록이라도 고르는 목록(이미 있는 것 중에서 찾는 곳)이면 빈 걸 치우는 게 맞고, 만드는 목록(새로 채워 넣는 곳)이면 빈 것도 남아 있어야 한다. 목록을 정리하는 규칙이 쓰임에 따라 반대가 된다.


명사만 바꿨더니 조사가 틀렸다

순서 화면에서는 “곡”을 “자막”으로, “가사”를 “내용”으로 부르게 했다. 데이터는 하나고, 부르는 이름만 화면에 따라 다르다.

처음엔 안내 문장에서 명사 자리만 갈아 끼웠는데 조사에서 깨졌다. 명사 뒤 조사가 하나로 고정돼 있으니, 받침이 없는 “가사”와 받침이 있는 “내용” 중 한쪽은 반드시 틀린다(“가사을” 또는 “내용를”).

받침을 보고 을/를을 골라 주는 처리를 넣을 수도 있지만, 경우가 둘뿐이라 문장을 통째로 두 벌 두기로 했다. “가사를 줄바꿈 그대로 붙여넣으세요”와 “내용을 줄바꿈 그대로 붙여넣으세요”다.

여러 언어로 번역할 규모가 아니면, 조사를 맞추는 규칙보다 문장 두 벌이 읽기도 쉽고 틀릴 데도 없다.


설치된 글꼴을 목록에서 고르고 싶었다

순서 자막까지 맡으면서 쓰는 글꼴이 늘었다. 글꼴 이름을 손으로 치다 보면 철자가 틀리기 쉬워서, 이 PC에 설치된 글꼴을 목록으로 받아 고르게 하기로 했다.

앞선 TIL 2에서는 글꼴이 깔렸는지를 글자 폭을 재서 판정했다. 그건 이름을 이미 알아야 쓸 수 있는 방법이다. 이번엔 이름을 모르니 목록 자체가 필요했고, 브라우저에 설치 글꼴 목록을 통째로 주는 기능(Local Font Access API)이 있었다.

다만 이 기능은 대가가 크다. 설치된 글꼴 목록은 그 기기를 알아볼 수 있을 만큼 사람마다 달라서(핑거프린팅 fingerprinting — 기기의 사소한 특징을 모아 사람을 추적하는 수법에 쓰인다), 부를 때마다 권한을 묻고 거절될 수 있다. Chrome·Edge에서만 되고 다른 브라우저에는 아예 없다.

그래서 입력칸은 그대로 두고, 목록은 자동완성으로만 얹었다. 드롭다운으로 바꾸지 않은 이유가 하나 더 있다. 자막이 실제로 나가는 PC에는 있고 지금 편집하는 PC에는 없는 글꼴도 있는데, 목록에서만 고르게 하면 그런 글꼴은 넣을 방법이 없어진다. 권한을 거절했거나 지원하지 않는 브라우저여도 원래 하던 손입력은 늘 남는다.

편의 기능은 원래 길 위에 얹는다. 편의 기능이 안 되는 환경에서도 아무도 막히지 않아야 하고, 편의 기능이 다루지 못하는 경우(다른 PC에만 있는 글꼴)도 원래 길로 갈 수 있어야 한다.


요약

  • 곡과 순서 자막은 맡은 사람이 달라 대분류 한 칸으로 노출과 승인을 같이 갈랐다. 권한을 값의 소관으로 묻는 방식은 앞선 TIL 4 그대로다.
  • “복사냐 참조냐”를 통째로 정하지 말고 축을 가른다. 배치는 복사해 독립시키고, 내용은 공유해 수정이 따라오게 한다. 대가로 배치 변경은 자동으로 안 따라온다.
  • 무언가를 끼워 넣는 기능은 새 항목 종류를 만들기 전에, 이미 있는 항목들로 펼쳐 넣을 수 있는지 본다.
  • 빈 목록을 치우는 규칙은 고르는 목록과 만드는 목록에서 반대다. 검색 필터는 비면 숨기고, 추가 폼은 남긴다.
  • 한국어 조사는 명사 치환으로 안 맞는다. 경우가 적으면 문장을 통째로 두 벌 두는 게 더 정직하다.
  • 편의 기능(설치 글꼴 목록)은 원래 길(손입력) 위에 얹는다. 권한이 거절되거나, 다른 PC에만 있는 글꼴이어도 막히지 않게.

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 습관만들기 Pawbit TIL 5 55 여둘까 Office Layout TIL 4 56 소리꽃 KeyBloom TIL 2 57 소리꽃 KeyBloom TIL 3 58 메트로놈 Simple Metronome TIL 1 59 소리꽃 KeyBloom TIL 4 60 메트로놈 Simple Metronome TIL 2 61 소리꽃 KeyBloom TIL 5 62 습관만들기 Pawbit TIL 6 63 크레센도 Phaser + TypeScript TIL 7 64 메트로놈 Simple Metronome TIL 3 65 소설 타임라인 관리 도구 Lumior TIL 1 66 습관만들기 Pawbit TIL 7 67 정적 블로그 SEO 정비와 Pagefind 검색 도입 68 크레센도 Phaser + TypeScript TIL 8 69 메트로놈 Simple Metronome TIL 4 70 습관만들기 Pawbit TIL 8 71 안드로이드 AudioTrack 연속 재생, 실측 피커 정렬, 카메라 토치 플래시 72 메트로놈 Simple Metronome TIL 5 73 모래게임 Sandrop TIL 1 74 습관만들기 Pawbit TIL 9 75 메트로놈 Simple Metronome TIL 6 76 모래게임 Sandrop TIL 2 77 모래게임 Sandrop TIL 3 78 습관만들기 Pawbit TIL 10 79 습관만들기 Pawbit TIL 11 80 메트로놈 Simple Metronome TIL 7 81 모래게임 Sandrop TIL 5 82 모래게임 Sandrop TIL 4 83 습관만들기 Pawbit TIL 12 84 모래게임 Sandrop TIL 6 85 소리꽃 KeyBloom TIL 6 86 모래게임 Sandrop TIL 7 87 모래게임 Sandrop TIL 8 88 소리꽃 KeyBloom TIL 7 89 모래게임 Sandrop TIL 9 90 소리꽃 KeyBloom TIL 8 91 모래게임 Sandrop TIL 10 92 소리꽃 KeyBloom TIL 9 93 콘티온 ContiOn TIL 1 94 소리꽃 KeyBloom TIL 10 95 콘티온 ContiOn TIL 2 96 습관만들기 Pawbit TIL 13 97 콘티온 ContiOn TIL 3 98 모래게임 Sandrop TIL 11 99 소리꽃 KeyBloom TIL 11 100 여둘까 Office Layout TIL 5 101 모래게임 Sandrop TIL 12 102 모래게임 Sandrop TIL 13 103 콘티온 ContiOn TIL 4 104 모래게임 Sandrop TIL 14 105 소리꽃 KeyBloom TIL 12 106 습관만들기 Pawbit TIL 14 107 모래게임 Sandrop TIL 15 108 모래게임 Sandrop TIL 16 109 소리꽃 KeyBloom TIL 13 110 온실 GreenHouse TIL 1 111 콘티온 ContiOn TIL 5 읽는 중 112 모래게임 Sandrop TIL 17 113 소리꽃 KeyBloom TIL 14 114 온실 GreenHouse TIL 2 115 콘티온 ContiOn TIL 6 116 모래게임 Sandrop TIL 18 117 콘티온 ContiOn TIL 7 118 모래게임 Sandrop TIL 19 119 소리꽃 KeyBloom TIL 15 120 모래게임 Sandrop TIL 20 121 모래게임 Sandrop TIL 21 122 소리꽃 KeyBloom TIL 16 123 소리꽃 KeyBloom TIL 17 124 소리꽃 KeyBloom TIL 18 125 여둘까 Office Layout TIL 6 126 소리꽃 KeyBloom TIL 19 127 소리꽃 KeyBloom TIL 20 128 콘티온 ContiOn TIL 8 129 콘티온 ContiOn TIL 9 130 로그스톤 상표 셀프 출원 TIL 1 131 소리꽃 KeyBloom TIL 21 132 로그스톤 샵 LogStone Shop TIL 1 133 소리꽃 KeyBloom TIL 22 134 로그스톤 샵 LogStone Shop TIL 2 135 소리꽃 KeyBloom TIL 23 136 모래게임 Sandrop TIL 22 137 모래게임 Sandrop TIL 23 138 소리꽃 KeyBloom TIL 24 139 로그스톤 샵 LogStone Shop TIL 3 140 모래게임 Sandrop TIL 24 141 소리꽃 KeyBloom TIL 25 142 모래게임 Sandrop TIL 25 143 MiniMacro TIL 1 144 모래게임 Sandrop TIL 26 145 콘티온 ContiOn TIL 10 146 Astro가 무엇인지, 왜 옮기는지 147 모래게임 Sandrop TIL 27 148 소리꽃 KeyBloom TIL 26 149 MiniMacro TIL 2 150 로그스톤 샵 LogStone Shop TIL 4 151 메트로놈 Simple Metronome TIL 8 152 모래게임 Sandrop TIL 28 153 여둘까 Office Layout TIL 7 154 메트로놈 Simple Metronome TIL 9 155 블로그 Astro 이관 TIL 156 여둘까 Office Layout TIL 8 157 로그스톤 샵 LogStone Shop TIL 5 158 모래게임 Sandrop TIL 29 159 오픈데이 Openday TIL 1 160 로그스톤 샵 LogStone Shop TIL 6 161 모래게임 Sandrop TIL 30 162 오픈데이 Openday TIL 2 163 모래게임 Sandrop TIL 31 164 Unreal Engine MCP TIL 1 165 모래게임 Sandrop TIL 32 166 소리꽃 KeyBloom TIL 27 167 콘티온 ContiOn TIL 11 168 오픈데이 Openday TIL 3 169 로그스톤 샵 LogStone Shop TIL 7 170 모래게임 Sandrop TIL 33 171 소리꽃 KeyBloom TIL 28 172 오픈데이 Openday TIL 4 173 여둘까 Office Layout TIL 9 174 오픈데이 Openday TIL 5 175 ScorePlayer TIL 1 176 모래게임 Sandrop TIL 34 177 BuildingHub TIL 1 178 ScorePlayer TIL 2 179 여둘까 Office Layout TIL 10 180 BuildingHub TIL 2 181 ScorePlayer TIL 3 182 Unreal Engine MCP TIL 2 183 궁 미로 PalaceMaze TIL 1 184 메트로놈 Simple Metronome TIL 10 185 메트로놈 Simple Metronome TIL 11 186 오픈데이 Openday TIL 6 187 BuildingHub TIL 3 188 Obsidian vault에서 코드만 빼기 — directory junction 189 ScorePlayer TIL 4 190 여둘까 Office Layout TIL 11 191 오픈데이 Openday TIL 7 192 URL은 바뀔 수 있는 것에 묶지 않는다 193 도구는 기능이 아니라 내 일에 맞는지로 고른다 194 돌이키기 힘든 변경은 작게 먼저 확인한다 195 궁 미로 PalaceMaze TIL 2 196 궁 미로 PalaceMaze TIL 3 197 소리꽃 KeyBloom TIL 29 198 오픈데이 Openday TIL 8 199 BuildingHub TIL 4 200 ScorePlayer TIL 5 201 로그스톤 샵 LogStone Shop TIL 8 202 여둘까 Office Layout TIL 12 203 오픈데이 Openday TIL 9 204 BuildingHub TIL 5 205 MiniMacro TIL 3 206 소리꽃 KeyBloom TIL 30 207 오픈데이 Openday TIL 10 208 여둘까 Office Layout TIL 13 209 소리꽃 KeyBloom TIL 31 210 궁 미로 PalaceMaze TIL 4 211 로그스톤 샵 LogStone Shop TIL 9 212 로그스톤 샵 LogStone Shop TIL 10 213 소리꽃 KeyBloom TIL 32