소리꽃 KeyBloom TIL 22
피아노 소리에 공간감을 넣고 재생·내보내기 타임라인을 손보며 나온 것들.
재료를 줄이는 방법
파일이 있어야 할 것 같은 기능도 계산으로 대신될 때가 있다
소리에 공간감(잔향)을 넣는 표준 방법은 컨볼루션 리버브다. 실제 공간에서 짧은 소리를 냈을 때 그 공간이 되울리는 파형을 녹음해 두고 — 이걸 임펄스 응답이라고 한다 — 모든 소리에 그 공간감을 입힌다. 그 파일을 앱에 같이 넣으면 용량이 붙고 로딩이 늘어난다.
그런데 임펄스 응답은 대충 “처음이 크고 뒤로 갈수록 잦아드는 잡음”이라, 지수적으로 감쇠하는 노이즈로 앱이 켜질 때 즉석에서 만들어 쓸 수 있었다. 실제 공간을 녹음한 것만큼 개성 있지는 않지만, 우리가 필요한 건 개성이 아니라 “울리는 느낌”이었다.
기능을 검토할 때 “이건 데이터가 있어야 한다”고 넘겨짚기 전에, 그 데이터가 어떤 성질을 가졌는지부터 보면 계산으로 대신할 수 있는 게 종종 나온다. 대신 품질의 상한이 낮아지니, 그 상한이 우리 용도에 충분한지를 같이 판단해야 한다.
두 경로를 하나로 묶기
미리보기와 결과물이 같은 규칙을 읽게 해 둔다
들으며 확인하는 재생과 영상으로 뽑는 내보내기는 속으로 다른 길을 간다. 그래서 같은 설정을 양쪽에 각각 반영해 두면, 한쪽만 고쳤을 때 확인한 것과 뽑힌 것이 달라진다. 실제로 화면에서 쓰는 큐 판정 규칙이 양쪽에 따로 있었다.
고친 방식은 규칙을 한 군데로 떼어내고 양쪽이 그걸 읽게 한 것이다. 여기서 중요한 건 “떼어내는 것”이지 “잘 짜는 것”이 아니다. 두 경로가 각자 알아서 잘하게 두면 언젠가 반드시 어긋난다.
확인용 경로와 납품용 경로가 따로 있는 제품은 전부 이 위험을 안고 간다. 새 설정을 넣을 때마다 “이건 어디에 적혀 있나, 양쪽이 같은 걸 보나”를 물어야 한다.
끝나는 기준은 가장 늦게 끝나는 것에 맞춘다
같은 함정이 두 번 나왔다. 앞선 TIL 11에서 내보내기 길이는 고르게 했는데 미리보기 길이는 악보 길이로만 잡혀 있어서 반주 오디오가 악보보다 길 때 뒷부분이 잘렸다. 영상 내보내기는 파티클이 다 사라지면 끝내게 했더니, 소리의 잔향이 파티클보다 오래 남는 경우에 소리가 뚝 끊겼다.
둘 다 “끝”을 재료 하나로 판단한 것이 원인이다. 여러 재료가 동시에 흐르는 것에서 끝은 그중 가장 늦게 끝나는 것이다. 시작은 대체로 하나로 맞추면 되는데 끝은 그렇지 않다.
타이밍
“지금 시작”은 이미 늦었다
곡 맨 앞부터 재생하면 첫 음의 시작 부분이 살짝 잘려 들렸다. 소리를 “지금 이 순간”에 시작하라고 예약했는데, 준비하는 사이에 그 순간이 이미 지나가서 앞이 깎인 것이다.
해법은 시작을 아주 조금 미래로 미는 것이었다. 앞에 짧은 빈 구간을 두고 거기서부터 흐르게 하면 첫 음이 온전하게 나온다. 화면과 소리가 같은 오디오 클럭(오디오 장치가 세는 시계)을 보고 함께 밀리므로 어긋나지도 않는다.
실시간으로 무언가를 시작하는 자리에는 대체로 같은 함정이 있다. “즉시”를 문자 그대로 요구하면 준비 시간만큼 앞이 잘린다. 눈치채지 못할 만큼의 여유를 앞에 두는 게 정석이다.
환경과 언어
빌려 쓰는 기본 창은 환경에 따라 아예 없을 수 있다
“저장할까요?”를 물으려고 브라우저가 기본으로 주는 확인창(window.confirm)을 썼다. 브라우저에서는 잘 떴는데 앱으로 감싼 웹뷰에서는 안 뜨고, 사용자가 아무 답을 안 했는데도 취소한 것처럼 처리돼 그냥 넘어갔다.
물어보는 창이 안 뜨는 것보다, 안 뜬 채로 “아니오”가 눌린 것처럼 진행되는 게 더 위험하다. 사용자는 자기가 선택하지 않은 결과를 받는다.
그래서 확인창을 직접 그려 넣었다. 어차피 우리에게 필요한 선택지는 저장·저장 안 함·취소 셋이라, 예/아니오 둘만 되는 기본 창으로는 처음부터 부족했다. 빌려 쓰는 기본 UI는 편하지만 어디까지 되는지가 환경에 달려 있다.
번역하면 레이아웃이 깨진다
영어로 바꿔 놓고 보니 설정 패널에 가로 스크롤이 생겼다. 라벨이 길어지면서 옆에 있던 슬라이더를 밀어낸 것이다. 한국어 화면만 보고 있었으면 끝까지 몰랐다.
다국어를 지원하기로 했으면 화면 검수도 언어별로 해야 한다. 특히 라벨 옆에 조절 도구가 붙는 배치가 위험하다. 같은 뜻이라도 언어마다 글자 수가 크게 다르고, 대개 한국어가 제일 짧아서 한국어 화면은 늘 멀쩡해 보인다.
요약
- 데이터 파일이 필요해 보여도 성질만 맞으면 계산으로 대신할 수 있다 — 대신 품질 상한을 확인한다
- 확인용 경로와 납품용 경로가 따로면 규칙을 떼어내 양쪽이 같은 걸 읽게 한다
- 여러 재료가 흐르면 끝은 가장 늦게 끝나는 것에 맞춘다
- “즉시 시작”을 문자 그대로 요구하면 앞이 잘린다 — 눈치 못 챌 여유를 앞에 둔다
- 빌려 쓰는 기본 확인창은 환경에 따라 없다. 안 뜬 채 “아니오”로 처리되는 게 가장 위험하다
- 언어를 바꾸면 레이아웃이 깨진다 — 한국어 화면은 글자가 짧아서 늘 멀쩡해 보인다