잠금 툴팁과 패딩 반대 버그
이날은 세 가지 작업을 했다.
잠금 화면 툴팁을 만들면서 패딩 버그를 잡았다.
에이전트 도구에서 토큰을 절감하는 CLI를 도입했다.
그리고 옵시디언 볼트 재구성도 이어갔다.
회사 교육 플랫폼에서 잠금 라벨에 툴팁을 추가했다.
며칠 전에 순차 수강 잠금 화면을 만들었는데, 잠긴 강의에 마우스를 올리면 왜 잠겨 있는지, 어떻게 풀 수 있는지 알려주는 툴팁이 필요했다.
공통 툴팁 컴포넌트를 써서 툴팁을 붙였다.
그리고 피그마 디자인이랑 스타일 속성 11개를 비교했다.
하나하나 맞추다가 패딩이 반대로 들어가 있는 걸 발견했다.
위아래 패딩이 좌우로, 좌우 패딩이 위아래로 들어가 있었다.
이런 버그는 눈으로 보기엔 비슷해 보인다.
근데 피그마랑 픽셀 단위로 비교하면 어긋나는 게 보인다.
패딩 축을 잘못 잡으면 여백이 달라진다.
이걸 픽셀 비교 없이 잡기는 어렵다.
이 프로젝트는 피그마랑 코드를 픽셀 단위로 일치시키는 걸 기준으로 삼는다.
그래서 이런 미묘한 버그도 잡아낼 수 있다.
“대충 비슷하다”로 넘어가면 이런 버그가 쌓인다.
이 잠금 모달이랑 툴팁은 나중에 공통 패키지로 승격됐다. 여러 앱에서 같은 잠금 UI를 쓰게 된 거다.
처음에는 한 앱에만 만들었는데, 재사용할 일이 생기니까 공통으로 빼는 게 맞았다.
토큰 절감 CLI
에이전트 도구 쪽에서는 토큰을 절감하는 실험을 했다.
AI 코딩 에이전트의 큰 비용 중 하나가 도구 출력이다.
셸 명령을 실행하면 출력이 길게 나온다.
예를 들어 디렉토리 목록이나 git 상태 같은 건 구조적으로 출력이 길다.
이게 전부 토큰을 잡아먹는다.
그래서 셸 명령 출력을 압축하는 CLI를 도입했다.
grep, ls, git 같은 명령을 이 CLI를 통해서 실행하면, 출력을 압축해서 에이전트한테 전달한다.
측정 결과
측정해보니 토큰 절감이 확실했다.
디렉토리 목록은 약 99%가 줄었다.
디렉토리 목록은 구조적으로 출력이 길어서 압축이 잘 된다.
git 상태는 약 64%가 줄었다.
grep은 약 44%가 줄었다.
grep은 이미 출력이 꽤 조밀해서 압축 효율이 상대적으로 낮았다.
출력이 구조적으로 긴 명령일수록 압축 효율이 높다.
디렉토리 목록이 극단적인 이유가 그거다.
반면 grep은 이미 필요한 줄만 뽑아주니까, 압축할 여지가 적다.
Cursor ACP는 버렸다
같은 날 Cursor ACP라는 것도 실험했다.
에디터를 모델 프로바이더처럼 쓰는 거였다.
근데 너무 무겁고 지저분해서 전부 걷어냈다.
패키지, 바이너리, 심볼릭 링크까지 전부 제거했다.
그리고 최소한의 커서 에이전트 CLI만 다시 설치했다.
필요한 것만 남기고 나머지를 버리는 게 더 깔끔하다.
옵시디언 볼트 재구성 이어가기
그리고 옵시디언 볼트 재구성도 이어갔다.
이건 며칠에 걸친 작업이었다.
이중 분류 체계를 단일 분류로 통합했다.
원래는 type이랑 area 두 필드로 분류하고 있었다.
근데 이게 중복되고 모순이 있었다.
그래서 category 하나로 통합했다.
63개 노트를 재분류하고 옛날 필드를 제거했다.
그리고 프로젝트 디렉토리에 평평하게 쌓여 있던 파일 199개를 11개 디렉토리로 재구성했다.
병렬 에이전트 4개가 옵시디언 이동 명령을 실행해서 위키링크 무결성을 자동으로 유지했다.
이동 후 깨진 링크 7개만 수동으로 고쳤다.
마무리
이날의 교훈은 세 가지다.
첫째, 피그마랑 코드를 픽셀 단위로 비교하는 게 중요하다.
패딩 반대 버그는 눈으로는 안 보인다.
픽셀 비교해야 잡을 수 있다.
둘째, 토큰 절감은 출력이 구조적으로 긴 곳에서 가장 효과적이다.
디렉토리 목록이 99% 줄어든 건 출력이 구조적으로 길기 때문이다.
어디를 압축하면 효과가 큰지 아는 게 중요하다.
셋째, 실험한 걸 과감히 버리는 것도 중요하다.
Cursor ACP는 무겁고 지저분해서 전부 걷어냈다.
필요한 것만 남기고 나머지를 버리는 게 더 깔끔하다.
“도입했으니까 쓴다”가 아니라 “도입했는데 안 좋으면 버린다”가 맞다.