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

나선 모션의 “높이”가 사실은 올라가는 속도를 바꾸고 있어서 속도 슬라이더와 겹쳤다. 둘을 떼어내며 나온 것들.

손잡이 개수는 물리가 정한다

세 값이 한 식으로 묶여 있으면 둘만 줄 수 있다

높이와 속도와 수명(파티클이 살아 있는 시간)은 서로 독립이 아니다. 빠르게 오래 가면 멀리 가고, 느리게 짧게 가면 가까이 간다. 셋 중 둘을 정하면 나머지는 저절로 정해진다. 앞선 TIL 13의 코일 간격·회전·상승과 같은 구조다.

그런데 슬라이더를 셋 다 만들면 사용자는 셋을 따로 정할 수 있다고 믿는다. 실제로는 서로를 침범하니 만질 때마다 다른 값이 어긋나 보인다.

그래서 높이와 속도만 손잡이로 주고, 수명은 그 둘에서 계산해 내기로 했다(도달 목표 ÷ 상승 속도). 목표 높이에 닿는 순간이 곧 끝나는 순간이다. 빠르면 일찍 닿아 짧게 살고 느리면 늦게 닿아 오래 산다. 어느 쪽이든 도달 높이는 사용자가 정한 그 값이다.

컨트롤을 설계할 때 먼저 물어야 할 건 “무엇을 조절하고 싶은가”가 아니라 “이 중 몇 개가 서로 독립인가”다. 독립인 개수보다 많은 손잡이를 만들면, 그 초과분은 편의가 아니라 혼란이 된다.


안전장치가 약속을 깬다

파생된 값에 제한을 걸면 지키려던 관계가 무너진다

수명을 계산해서 쓰기로 하고, 혹시 너무 짧거나 너무 길까 봐 최소·최대로 잘라 두는 클램프를 걸었다. 그러자 이상한 일이 생겼다. 높이를 낮추고 속도를 올렸는데 오히려 더 높이 올라갔다.

계산된 수명이 최소값보다 짧을 때 클램프가 그 최소값으로 늘려 준 게 원인이었다. 일찍 닿아서 사라져야 할 것이 억지로 더 살아남아, 그 시간만큼 목표를 지나쳐 계속 올라간 것이다.

계산해서 나온 값에는 대개 지키고 있는 약속이 있다. 여기서는 “도달 높이는 사용자가 정한 값”이라는 약속이었다. 그 값을 밖에서 자르거나 늘리면 약속도 함께 깨진다. 안전장치를 넣을 자리는 계산 결과가 아니라 계산에 들어가는 입력이다. 입력 범위를 적당히 잡아 두면 결과가 극단으로 안 가고, 관계도 안 깨진다.

이런 버그는 찾기가 특히 어렵다. 제한은 안전하라고 넣은 것이라 의심 목록에서 빠져 있고, 증상이 “값을 낮췄는데 커진다”처럼 거꾸로 나타난다.


정확함과 자연스러움

정확히 맞추면 자로 자른 것처럼 보인다

계산이 정확해지자 이번엔 파티클 꼭대기가 일직선으로 평평해졌다. 모두가 정확히 같은 높이에서 사라졌기 때문이다. 계산이 맞을수록 결과가 인공적으로 보였다.

고친 방법은 목표 높이 자체에 개체마다 약간씩 다른 값을 준 것이다. 각자 제 목표에서 사라지는 성질은 그대로 두고, 목표만 흩었다.

자연물에는 정확히 같은 것이 없다. 화면에서 자연스러움을 만들 때 필요한 건 정밀함이 아니라 적당한 흩어짐이다. 다만 아무 데나 흩으면 안 되고, 지켜야 할 관계는 유지한 채 흩을 수 있는 값을 골라야 한다.

정확도를 올렸는데 결과가 더 나빠 보이면, 계산이 틀린 게 아니라 흩어짐이 사라진 것일 수 있다.


옵션 쪼개기

안이 이미 나뉘어 있으면 사용자에게도 나눠 준다

“가두기” 옵션이 하나였는데, 속을 보니 위아래를 가두는 것과 좌우를 가두는 것이 따로 계산되고 있었다. 사용자는 둘을 함께만 켤 수 있었다.

체크박스를 둘로 나누니 좌우만 좁히거나 위만 막는 게 가능해졌고, 구현은 거의 안 바뀌었다.

옵션을 늘릴지 말지 고민될 때, 안에서 이미 따로 다루고 있는지를 보면 답이 나올 때가 있다. 이미 나뉘어 있으면 쪼개는 비용이 거의 없고, 하나로 묶여 있는 걸 억지로 쪼개면 비용이 크다.


요약

  • 컨트롤을 만들기 전에 “이 중 몇 개가 서로 독립인가”를 센다. 초과분은 편의가 아니라 혼란이다
  • 계산해서 나온 값에 제한을 걸면 그 값이 지키던 약속이 깨진다 — 제한은 입력에 건다
  • 안전장치로 넣은 것은 의심 목록에서 빠져 있어 버그를 찾기 어렵다
  • 정확도를 올렸는데 더 나빠 보이면 흩어짐이 사라진 것일 수 있다
  • 안에서 이미 나뉘어 있는 옵션은 쪼개는 비용이 거의 없다

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