임의 값을 의미 토큰으로
이날은 두 세션으로 나뉘었다.
첫 번째는 알림 설정 UI를 픽셀 퍼펙트로 맞추는 작업이었다.
두 번째는 기능 검증이랑 Zed 에디터 훅에서 파일 시스템 루트를 복사할 뻔한 치명적 버그를 잡은 거다.
교육 플랫폼에서 알림 설정 UI를 다듬었다.
기능 자체는 이전에 구현했는데, 시각적 충실도가 부족했다.
피그마랑 픽셀이 안 맞았다.
문제는 코드에 임의 값이 가득했다.
배경색, 너비, 높이, 간격이 전부 하드코딩된 색상 코드랑 픽셀 값이었다.
이러면 일관성이 없다.
같은 회색인데 어떤 곳은 코드를 직접 쓰고, 어떤 곳은 토큰을 쓰고. 그래서 임의 값을 전부 의미 토큰으로 바꿨다.
4개 파일에서 색상, 간격, 크기 값을 전부 프로젝트 토큰으로 교체했다.
이 프로젝트는 Tailwind 숫자 스케일이 픽셀 값이랑 일치하도록 설정되어 있다.
그러니까 60픽셀 너비는 w-60, 5픽셀 패딩은 p-5처럼 쓸 수 있다.
토큰화하니까 일관성이 생겼다.
같은 색을 쓸 때 어디서든 같은 토큰을 쓴다.
나중에 디자인 시스템이 바뀌면, 토큰 정의만 바꾸면 전체에 반영된다.
픽셀 퍼펙트
OffsetDayChips 컴포넌트를 피그마랑 픽셀 단위로 맞췄다.
버튼 크기, 아이콘 크기랑 정렬, 칩 닫기 버튼이 영역을 벗어나는 문제까지. 피그마의 인셋 값을 그대로 적용했다.
아이콘 컨테이너 크기랑 인셋 비율을 피그마에서 읽어서 코드에 그대로 넣었다.
세로 가운데 정렬도 맞췄다.
그리고 요구사항 검증을 돌려서 남은 문제 2개를 더 잡았다.
임의 줄 높이 값이랑 비활성 툴팁 누락. 검증을 돌리니까
눈으로 놓친 게 나왔다.
MSW 환경 버그가 코드 버그인 척했다
두 번째 세션에서 기능을 검증하다가 이상한 일이 있었다.
특정 코스에서 토글 상태가 피그마랑 안 맞았다.
코드 버그인 줄 알고 코드를 뒤졌는데, 원인이 코드가 아니었다.
개발 서버를 MSW 없이 시작한 거다.
그러니까 목 서비스 워커가 요청을 가로채지 않았다.
요청이 실제 API로 갔다.
실제 API는 인증이 안 되어 있으니까 401이 났다.
코스 분류 정보가 null로 로드됐다.
분류가 null이니까 토글 상태가 다
틀어진 거다.
MSW를 켜고 다시 검증하니까 전부 맞았다.
코드 로직은 처음부터 맞았다.
환경 설정이 잘못된 거였다.
이런 일이 왜 위험한가. 환경 버그를 코드 버그로 착각하면, 엉뚱한 곳에서 삽질한다.
“왜 토글이 안 맞지”라고 코드를 뒤지는데, 원인은 환경에 있다.
환경을 먼저 확인하는 습관이 필요하다.
Zed 훅이 파일 시스템 루트를 복사하려 했다
그리고 Zed 에디터 훅에서 치명적인 버그를 잡았다.
이게 이날 가장 극적인 사건이었다.
Zed 워크트리 생성 훅은 새 워크트리를 만들 때 설정 디렉토리를 복사하는 기능이다.
근데 환경변수가 비어 있으면, 소스 경로가 루트 디렉토리로 해석됐다.
루트 디렉토리에서 모든 파일을 복사하려고 했다.
시스템 디렉토리, 장치 파일, 심볼릭 링크까지 전부. 권한 에러가 폭포처럼 쏟아졌다.
다행히 권한이 막아줘서 실제로 복사는 안 됐지만 시도 자체는 하고 있었다.
원인
환경변수를 검증하지 않은 거다.
소스 경로가 비어 있거나 루트인지 확인 안 하고 그대로 복사에 썼다.
비어 있으면 기본값이 루트로 떨어지고 루트에서 복사를 시도한 거다.
해결은 환경변수를 사용하기 전에 검증하는 거다.
비어 있거나 루트면 에러를 내고 종료한다.
그리고 깃 저장소인지도 확인한다.
이 검증을 복사 전에 넣었다.
이 훅에는 이전에도 버그가 두 개 있었다. 디렉토리가 이미 있으면 복사를 건너뛰는 문제, 50메가바이트 크기 제한에 걸려서 설정 디렉토리가 복사 안 되는 문제.
이걸 고치다가 환경변수 검증이 빠져 있어서 더 큰 버그가 터진 거다.
버그를 고치면서 새 버그를 만들지 않으려면, 변경 후에 검증을 철저히 해야 한다.
마무리
이날의 교훈은 세 가지다.
첫째, 토큰화는 픽셀 퍼펙트의 기반이다.
임의 값을 없애고 의미 토큰으로 통일하면, 일관성이 유지된다.
디자인 시스템이 바뀌어도 토큰 정의만 바꾸면 된다.
둘째, 환경 버그를 코드 버그로 착각하면 안 된다.
“왜 안 되지”라고 코드부터 뒤지기 전에, 환경을 먼저 확인해야 한다.
개발 서버 설정, 환경변수, 목 활성화 상태. 이런 걸 먼저 점검하면 삽질을 줄일 수 있다.
셋째, 환경변수를 검증 없이 쓰면 치명적이다.
빈 환경변수가 루트 경로로 해석되면, 파일 시스템 전체를 복사하려 한다.
환경변수를 사용하기 전에 반드시 검증해야 한다.
이건 셸 스크립트의 기본 규칙이다.