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

내 팔레트에 탁구대가 들어와 있었다

팔레트를 보다가 가구 하나가 탁구대로 바뀌어 있는 걸 봤다. 내가 바꾼 적이 없는데 왜 내 팔레트에 반영돼 있는지 물었다.

누군가 만든 배치 파일을 열었던 게 원인이었다. 프로젝트 파일에는 팔레트(가구 기본값)도 함께 담기는데, 파일을 열면 그 팔레트가 화면에 적용되고, 저장이 한 번 돌면서 그게 내 브라우저에 그대로 굳었다.


저장소에는 “지금 상태”가 아니라 “내가 바꾼 것”만 넣는다

팔레트에서 고친 값은 localStorage(브라우저가 사이트별로 남겨 두는 작은 저장소)에 저장해 다음 방문에도 유지한다. 문제는 무엇을 저장하느냐였다.

지금 화면에 적용된 팔레트 전체를 통째로 저장하고 있었다. “지금 화면에 뭐가 있든 그게 내 설정”이라는 뜻이다. 그러니 남의 파일에서 온 값이 화면에 올라와 있을 때 저장이 한 번 돌면, 그 값이 내 설정이 된다.

내가 직접 고친 항목만 따로 들고 있다가 그것만 저장하게 바꿨다. 저장할 때는 “이 값이 어디서 왔는가”를 물어야 한다. 출처를 안 따지는 저장은 언젠가 남의 것을 내 것으로 만든다.


남의 파일에서 온 값은 그 프로젝트에만

파일에 팔레트를 담은 건 파일을 주고받는 사람끼리 같은 가구 목록을 쓰게 하려는 의도였다. 의도는 맞았는데 적용 범위가 없었다.

범위는 세 단계로 나눌 수 있다.

  • 이 프로젝트에만 — 파일을 닫거나 새로 만들면 내 것으로 돌아온다
  • 이번 방문에만 — 새로고침하면 돌아온다
  • 영구히 — 브라우저에 저장한다

파일에서 온 팔레트는 이 프로젝트에만 적용하기로 했다. 남의 파일 하나가 내 도구의 기본값을 영구히 바꾸면, 나는 언제 그걸 승낙했는지도 모른다. 확인창을 띄워도 사람은 그걸 “이 파일을 열까요” 정도로 읽는다.

파일의 팔레트를 쓸지 물었을 때 거절해도 그 값은 버리지 않고 들고 있게 했다. 실수로 취소했거나 나중에 마음이 바뀌면 프로젝트 설정에서 다시 불러올 수 있다. 거절은 “지금 적용하지 않는다”이지 “없던 일로 한다”가 아니다. 되돌릴 수 있으면 확인창을 누르는 부담도 줄어든다.

팔레트를 처음 상태로 되돌리는 「프리셋 초기화」도 이때 넣었다.


거리 단위를 고를 수 있게 했다

프로젝트 설정에서 거리를 mm·cm·m 중에 골라 볼 수 있게 해 달라고 했다. 그리고 결과 표시만이 아니라 크기를 넣는 입력칸도 같은 단위를 쓰게 해 달라고 했다.

단위는 경계에서만 바꾼다

저장까지 단위를 따라가게 만들면, 파일마다 숫자의 뜻이 달라진다. 나중에 어떤 파일의 1200이 mm인지 m인지 알 수 없게 된다.

그래서 계산과 저장은 mm 하나로 고정하고, 화면에 보여 줄 때와 입력칸에서 값을 읽을 때만 환산하게 했다. 앞선 TIL 1에서 “원본은 실제 치수, 화면 픽셀은 보여 주는 방법”으로 나눠 둔 것 위에 표시 단위를 한 층 더 얹은 셈이다. 층을 쌓아도 아래층이 안 흔들리면, 무언가를 바꿀 때 손대는 곳은 늘 한 곳이다.


보여 주려고 반올림한 값이 저장값이 되면 안 된다

1234mm를 미터로 보여 주면서 소수 둘째 자리까지만 쓰면 1.23이 된다. 결과 표시라면 괜찮다. 그런데 입력칸은 채워 둔 값이 곧 다음에 저장될 값이다. 1.23을 그대로 저장하면 1230mm — 손대지도 않았는데 4mm가 사라진다.

그래서 단위마다 1mm까지 표현되는 자리수를 줬다. cm는 한 자리, m는 세 자리다.

보여 주기용 반올림과 저장할 값은 다른 것이다. 둘이 같은 칸을 쓰는 순간 반올림이 곧 데이터 손실이 된다.


예시와 안내 문구도 단위를 따라야 한다

축척을 맞출 때 “이 두 점의 실제 거리를 입력하세요 — 예: 5000”이라고 묻고 있었다. 미터로 쓰는 사람이 이걸 보면 5000을 넣는다. 5km다. 예시는 장식이 아니라 사람이 그대로 따라 쓰는 형식이라, 고른 단위로 바꿔 보여 주게 했다(m면 “예: 5”).

도움말 곳곳에 적힌 “실제 거리(mm)를 입력하세요”도 단위를 고를 수 있게 된 순간 전부 틀린 말이 됐다. 설정으로 바뀌는 값은 고정 문구에 박아 두지 않는다.


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