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

하나로 버티기

색이 무한하면 그림을 색마다 만들 수 없다

레벨마다 팔레트가 다르고 바스켓 색이 사실상 무한하다. 양동이 그림을 색마다 그리는 건 애초에 불가능하다.

밝은 크림색 원본 한 장을 두고 코드에서 색을 곱해 입히기로 했다. 흰색에 색을 곱하면 그 색이 그대로 나오고, 원본의 명암은 곱해지면서 그대로 남는다. 그래서 원본이 밝을수록 착색이 깨끗하다.

막혀서 못 쓰는 상태도 회색 덮개를 씌우는 대신 입히는 색 자체를 회색 쪽으로 눌렀더니 더 깔끔했다.

  • 경우의 수가 무한한 축이 있으면 그 축은 그림이 아니라 계산으로 만든다. 그림은 하나만 관리한다
  • 원본을 밝게 만들어 두는 것이 그 뒤 모든 선택지를 넓힌다

사람은 길이가 아니라 넓이로 양을 읽는다

원형 칩 안에 남은 양을 표시하는데, 아래에서 차오르는 사각 채움을 넣으니 부분만 찼을 때 윗면이 직선으로 잘려 각져 보였다. 원 안에는 원이 맞다.

원으로 바꾸면서 지름을 남은 비율에 그대로 비례시켰더니 이번엔 양이 실제보다 적어 보였다. 지름을 두 배로 키우면 넓이는 네 배가 되기 때문이다. 절반 남은 것을 절반으로 보이게 하려면 지름은 0.7배여야 한다.

  • 양을 그림으로 보여 줄 때는 사람이 무엇으로 읽는지 먼저 본다. 원이면 넓이, 막대면 길이다
  • 수치를 그대로 크기에 넣으면 도형에 따라 체감이 어긋난다

강조는 물건이 아니라 그 아래가 준다

내보낼 수 있는 칸을 양동이 자체가 빛나게 표시했는데, 그림에 투명한 여백이 있어서 빛이 지저분하게 번졌다.

강조를 양동이 밑 바닥 타일로 옮기니 깔끔해졌다. 양동이는 담백하게 두고 바닥이 신호를 준다.

  • 신호를 줄 자리는 대상 자체가 아니어도 된다. 주변이 더 깨끗하게 말해 줄 때가 있다

같은 숫자, 다른 기준

분모는 보는 자리마다 다르다

바스켓에 남은 양을 퍼센트로 보여 줬는데, 기준이 “그 색 전체 대비”였다. 보드에서는 말이 되지만 벨트에서 부으며 줄어드는 걸 볼 때는 헷갈린다. 그때 궁금한 건 그 색 전체가 아니라 이 통이 얼마나 남았는가다.

벨트에서는 “이 통이 처음 담은 양이 100%” 기준으로 바꾸고, 보드에서는 퍼센트를 아예 숨겼다.

  • 같은 숫자라도 보는 자리에 따라 분모가 달라야 뜻이 산다. 한 기준으로 통일하는 것이 늘 옳지는 않다
  • 자리에 따라 뜻이 흐려지면 숫자를 고치기 전에 안 보여 주는 선택지도 있다

규칙을 바꾸면 어디까지 딸려 오나

언제 공개하는가는 화면이 아니라 규칙이다

색을 숨긴 물음표 바스켓을 넣었는데, 자리에 따라 판이 시작하자마자 색이 열려 버렸다. 공개 시점이 “고를 수 있게 되는 순간”이었고, 그 바스켓이 처음부터 고를 수 있는 자리에 있으면 첫 화면에서 바로 열린다.

화면 문제로 보였지만 규칙 문제였다. 공개 시점을 “보드를 떠나 엘리베이터에 오르는 순간”으로 바꾸니 배치와 무관하게 보드에 있는 동안은 계속 물음표다.

  • 언제 보여 줄 것인가는 연출이 아니라 규칙이다. 자리에 따라 결과가 달라지면 규칙이 자리에 기대고 있다는 뜻이다

규칙을 고치면 그 규칙을 읽던 화면이 같이 썩는다

공개 시점을 바꾸고 나니 이번엔 물음표 칸이 길이 열려도 안 눌렸다. 화면 쪽이 옛 규칙(공개 전에는 조작 불가)을 기준으로 그리고 있었기 때문이다.

규칙만 고치고 그 규칙을 읽던 자리를 안 고친 것이다.

  • 규칙을 바꿀 때는 그 규칙을 읽는 곳을 끝까지 따라간다. “언제 공개하나”를 바꾸면 “공개 전에는 어떻게 보이나”, “누를 수 있나”까지 딸려 온다
  • 딸려 오는 자리가 많다는 건 같은 판단이 여러 곳에 흩어져 있다는 신호다. 합칠 수 있으면 합친다

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 insertOnConflictUpdate vs DoUpdate(target) 27 세션 필터 28 아코디언(Accordiaon) UI를 펼친상태로 만들기 29 input의 step 30 Word Cloud 31 Google Sheets를 데이터 버스로(with AppSheet) 32 Django 모델 텍스트 필드 자동 수집 패턴 33 localStorage로 섹션 토글 상태 유지 34 순차 ID 생성(`select_for_update()` + `max()` 조합) 35 역참조 검색과 distinct() 36 xlsx 다운로드와 로딩 오버레이 충돌 37 Android 파일 공유 MIME 타입 38 AssetManifest — Flutter 빌드 타임 asset 목록 런타임 조회 39 UTF-8 BOM과 PowerShell 파일 쓰기 40 소리꽃 KeyBloom TIL 1 41 소리꽃 KeyBloom TIL 2 42 소리꽃 KeyBloom TIL 3 43 메트로놈 Simple Metronome TIL 1 44 소리꽃 KeyBloom TIL 4 45 메트로놈 Simple Metronome TIL 2 46 소리꽃 KeyBloom TIL 5 47 메트로놈 Simple Metronome TIL 3 48 정적 블로그 SEO 정비와 Pagefind 검색 도입 49 메트로놈 Simple Metronome TIL 4 50 안드로이드 AudioTrack 연속 재생, 실측 피커 정렬, 카메라 토치 플래시 51 메트로놈 Simple Metronome TIL 5 52 모래게임 Sandrop TIL 1 53 메트로놈 Simple Metronome TIL 6 54 모래게임 Sandrop TIL 2 55 모래게임 Sandrop TIL 3 56 메트로놈 Simple Metronome TIL 7 57 모래게임 Sandrop TIL 4 58 모래게임 Sandrop TIL 5 읽는 중 59 모래게임 Sandrop TIL 6 60 소리꽃 KeyBloom TIL 6 61 모래게임 Sandrop TIL 7 62 모래게임 Sandrop TIL 8 63 소리꽃 KeyBloom TIL 7 64 모래게임 Sandrop TIL 9 65 소리꽃 KeyBloom TIL 8 66 모래게임 Sandrop TIL 10 67 소리꽃 KeyBloom TIL 9 68 소리꽃 KeyBloom TIL 10 69 소리꽃 KeyBloom TIL 11 70 소리꽃 KeyBloom TIL 12 71 소리꽃 KeyBloom TIL 13 72 온실 GreenHouse TIL 1 73 소리꽃 KeyBloom TIL 14 74 온실 GreenHouse TIL 2 75 소리꽃 KeyBloom TIL 15 76 소리꽃 KeyBloom TIL 16 77 소리꽃 KeyBloom TIL 17 78 소리꽃 KeyBloom TIL 18 79 소리꽃 KeyBloom TIL 19 80 소리꽃 KeyBloom TIL 20 81 로그스톤 상표 셀프 출원 TIL 1 82 소리꽃 KeyBloom TIL 21 83 소리꽃 KeyBloom TIL 22 84 소리꽃 KeyBloom TIL 23 85 소리꽃 KeyBloom TIL 24 86 MiniMacro TIL 1 87 Astro가 무엇인지, 왜 옮기는지 88 MiniMacro TIL 2 89 메트로놈 Simple Metronome TIL 8 90 메트로놈 Simple Metronome TIL 9 91 블로그 Astro 이관 TIL 92 오픈데이 Openday TIL 1 93 오픈데이 Openday TIL 2 94 Unreal Engine MCP TIL 1 95 콘티온 Conti On TIL 11 96 오픈데이 Openday TIL 3 97 오픈데이 Openday TIL 4 98 오픈데이 Openday TIL 5 99 ScorePlayer TIL 1 100 BuildingHub TIL 1 101 ScorePlayer TIL 2 102 BuildingHub TIL 2 103 ScorePlayer TIL 3 104 Unreal Engine MCP TIL 2 105 궁 미로 PalaceMaze TIL 1 106 메트로놈 Simple Metronome TIL 10 107 메트로놈 Simple Metronome TIL 11 108 오픈데이 Openday TIL 6 109 BuildingHub TIL 3 110 Obsidian vault에서 코드만 빼기 — directory junction 111 ScorePlayer TIL 4 112 오픈데이 Openday TIL 7 113 URL은 바뀔 수 있는 것에 묶지 않는다 114 도구는 기능이 아니라 내 일에 맞는지로 고른다 115 돌이키기 힘든 변경은 작게 먼저 확인한다 116 궁 미로 PalaceMaze TIL 3 117 궁 미로 PalaceMaze TIL 2 118 소리꽃 KeyBloom TIL 29 119 오픈데이 Openday TIL 8 120 BuildingHub TIL 4 121 ScorePlayer TIL 5 122 BuildingHub TIL 5 123 MiniMacro TIL 3 124 소리꽃 KeyBloom TIL 30 125 궁 미로 PalaceMaze TIL 4