볼트 재구성 완료
나는 어제 이어하던 세 가지 작업을 마무리한 날이었다.
옵시디언 볼트 재구성이 완료됐다.
잠금 화면 툴팁이 피그마랑 픽셀 단위로 완전히 일치했다.
토큰 절감 CLI 효과도 최종 확인했다.
며칠에 걸쳐 진행한 옵시디언 볼트 재구성이 끝났다.
이중 분류 체계를 단일 category로 통합했다.
원래 type이랑 area 두 필드로 나누어 있었는데, 모순이 있었다.
그래서 하나로 합쳤다.
63개 노트를 재분류했다.
프론트매터도 정리했다.
규칙에 맞지 않는 24개를 정규화하고 깨진 위키링크 31개를 제거했다.
깨진 링크는 그래프 탐색을 방해하니까 하나씩 잡았다.
그리고 프로젝트 디렉토리의 평평한 파일 199개를 11개 카테고리로 재구성했다.
병렬 에이전트 4개가 옵시디언 이동 명령을 실행했다.
위키링크 무결성이 자동으로 유지됐다.
깨진 링크 7개만 수동으로 고쳤다.
리눅스 CLI 래퍼 강화
옵시디언은 일렉트론 앱이라 리눅스에서 GPU 샌드박스가 실패할 때가 있다.
그러면 CLI가 안 돌아간다.
근데 전체 자동 로깅 파이프라인이 옵시디언 CLI에 의존한다.
CLI가 안 돌면 자동 로깅이 멈춘다.
그래서 CLI 래퍼에 GPU 샌드박스 비활성화 플래그를 자동으로 넣게 만들었다.
이제 리눅스에서도 CLI가 안정적으로 돈다.
잠금 UI 픽셀 퍼펙트
잠금 화면 툴팁이 피그마랑 픽셀 단위로 완전히 일치했다.
이게 얼마나 걸렸냐면, 요구사항 검증에서 7개 불일치를 찾았다.
완료율 계산 오류, 모달 타이포그래피, 툴팁 위치, 부제목 조건 누락, 진행률 바 색상이랑 높이, 모달 닫기 버튼, 잠금 아이콘 크기. 이 7개를 두 번에 걸쳐 잡았다.
첫 번째는 구조적인 것 세 개. 두 번째는 폰트 굵기, 줄 높이, 자간, 패딩, 마진, 간격, 색상까지 전부.
왜 픽셀까지 맞추는가
이 프로젝트는 피그마랑 코드를 픽셀 단위로 일치시키는 걸 기준으로 삼는다.
Playwright로 화면을 찍어서 피그마 스크린샷이랑 비교한다.
불일치가 0개가 될 때까지 다듬는다.
왜 여기까지 하는가. 디자인 의도랑 구현이 어긋나면, 사용자 경험이 달라진다.
디자이너가 의도한 간격이 코드에서 다르면, 화면의 느낌이 바뀐다.
“대충 비슷하다”로 넘어가면 이런 어긋남이 쌓인다.
픽셀까지 맞추면 이런 어긋남이 없다.
디자이너가 의도한 대로 화면이 나온다.
이 잠금 모달은 나중에 공통 패키지로 승격됐다. 여러 앱에서 같은 잠금 UI를 재사용하게 된 거다.
처음에 픽셀까지 맞춰놓으니까, 공통화할 때 품질이 보장됐다.
대충 만들었으면 공통으로 빼면서 다시 고쳐야 했을 거다.
백엔드 API 응답 누락
잠금 기능을 만들면서 백엔드 API 응답에 누락이 있는 것도 발견했다.
순차 수강 잠금 필드가 커리큘럼 API에는 있었는데, 대시보드 API에는 빠져 있었다.
그러니까 대시보드에서는 잠금 상태를 모른다.
그래서 “다음 강의” 버튼이 잠긴 파트로 그냥 넘어가버린다.
잠금 모달이 안 뜬다.
이건 프론트엔드 버그가 아니라 백엔드 계약의 누락이었다.
형제 API에서도 잠금 필드를 반환하게 수정했다.
이런 종류의 버그는 프론트엔드만 보면 잡을 수 없다.
API 응답에 필드가 없으면, 프론트엔드에서 아무리 처리해도 소용이 없다.
백엔드까지 함께 봐야 한다.
토큰 절감 최종 확인
토큰 절감 CLI 효과도 최종 확인했다.
grep, ls, git 명령을 토큰 압축 CLI를 통해서 실행하면, 출력이 압축되어서 에이전트한테 전달된다.
어제 측정했던 결과가 재현됐다.
디렉토리 목록은 약 99% 절감, git 상태는 약 64% 절감, grep은 약 44% 절감. 디렉토리 목록이 극단적인 건 출력이 구조적으로 길기 때문이다.
그리고 수동 등록을 제거했다.
플러그인 디렉토리를 자동 스캔하는 걸 확인했으니까, 수동으로 등록할 필요가 없다.
새 세션이 시작되면 자동으로 잡는다.
마무리
며칠간 진행한 작업이 마무리된 날이었다.
볼트 재구성이 끝났고 잠금 UI가 픽셀 퍼펙트를 달성했다.
픽셀 퍼펙트가 왜 중요한지 다시 확인했다.
대충 만들면 나중에 공통화할 때 다시 고쳐야 한다.
처음부터 제대로 만들면, 재사용할 때 품질이 보장된다.
지금 만든 잠금 모달이 공통 패키지로 승격될 수 있었던 건, 처음에 픽셀까지 맞췄기 때문이다.
백엔드 API 응답 누락도 중요한 교훈이다.
프론트엔드만 보면 잡을 수 없는 버그가 있다.
API 계약을 전체적으로 봐야 한다.
필드가 빠져 있으면 프론트엔드에서 아무리 처리해도 안 된다.