디자인 시스템을 붙이자 반응형이 깨졌다 — CSS 캐스케이드 충돌을 @source로 푼 이야기
사내 디자인 시스템을 예약 앱에 도입하자 lg 반응형이 무력화돼 운영에서 롤백했다. 빌드 산출 CSS에서 규칙 위치로 원인을 확인하고, 세 가지 선택지를 비교해 앱 Tailwind가 DS 클래스를 직접 생성하는 방식으로 재도입한 기록.
#디자인 시스템
4개의 글
배포된 토큰의 알파값이 사라져 있었다
Figma 스펙과 대조하다 발견한 디자인 토큰 알파값 유실 버그. Tokens Studio의 hex/alpha 분리 필드가 원인이었고, 전수조사와 렌더값 검증으로 마무리한 과정.
재현 안 되는 버그를 쫓다가 CI 게이트 부재를 발견했다
동료가 제보한 타입 에러를 재현하려다 전혀 다른 에러를 만났고, 그 과정에서 저장소에 typecheck 스크립트 자체가 없었다는 사실을 발견한 이야기.
토큰 시스템을 만들어놓고 아무도 안 쓰고 있었다 — Tailwind 임의값을 걷어낸 이야기
디자인 토큰 파이프라인을 갖춘 컴포넌트 라이브러리인데, 정작 컴포넌트 코드에는 Tailwind 임의값(`[16px]` 같은 대괄호 문법)이 100개 넘게 박혀 있었다. 전수조사로 토큰화 가능한 값과 예외로 남겨야 하는 값을 가른 과정.