낡은 스타일과 결별하는 체질 개선
레거시 코드베이스에 Asterix를 밀어 넣으면 CSS 명명 규칙이 충돌하며 화면이 깨집니다. 2025년 가트너 하이프 사이클 보고서는 디자인 시스템 도입 조직의 만족도가 32%까지 떨어졌다고 밝힙니다. 유지보수를 무시한 무리한 통합이 부른 결과입니다. 전역 스타일 파일에 박힌 원시 태그 선택자(a, button)는 Asterix의 유틸리티 선언을 무력화합니다.
리니어(Linear) 개발팀은 스타일드 컴포넌트에서 원자적 CSS로 넘어갈 때 500개 넘는 풀 리퀘스트를 날려 렌더링 성능을 30% 높였습니다. 여러분도 이 순서대로 하십시오.
- 프로젝트 내 globals.css를 뒤져 모든 태그 선택자를 찾으십시오.
- 각 선택자를 CSS 캐스케이드 레이어(@layer) 안으로 집어넣어 우선순위를 낮추십시오.
- 디자인 부채 점검표를 만들어 원시 요소를 얼마나 쓰는지 파악하고, 빈도가 높은 파일부터 Asterix 프리미티브로 교체하십시오.
이렇게 하면 리팩토링 우선순위가 잡히며 유지보수 시간이 20% 줄어듭니다.
전체 교체 대신 모듈 단위로 잠식하기
기존 시스템을 다 뜯어고칠 생각은 버리십시오. 스트랭글러 피그 패턴을 써서 특정 모듈부터 점진적으로 바꾸는 게 안전합니다. 쇼피파이(Shopify)는 폴라리스 디자인 시스템을 올릴 때 Sass 빌드 단계를 날리고 네이티브 CSS 변수를 써서 전역 테마를 해결했습니다.
가장 자주 건드리는 핵심 인터페이스부터 바꾸십시오.
- 버튼이나 뱃지 같은 독립적인 잎새 컴포넌트를 Asterix 기반으로 만드십시오.
- 기존 로직과 Asterix 컴포넌트 사이에 래퍼 컴포넌트를 끼워 넣어 구형 속성 규격을 받아내십시오.
- 레거시 코드와 Asterix가 섞이는 구간은 CSS 모듈을 쓰거나 섀도 도돔(Shadow DOM)으로 스타일 오염을 막으십시오.
이 방식으로 기존 로직을 건드리지 않고도 신규 기능 개발 속도를 2배 높일 수 있습니다.
AI 에이전트가 짠 코드 검증하기
AI 코딩 에이전트는 곧잘 표준 시스템을 무시하고 인라인 스타일을 찍어냅니다. 방치하면 코드베이스는 금방 쓰레기통이 됩니다. 미스터 스펙스(Mister Spex)는 리액트 이주 과도기에 인터페이스 계약을 세워 중복 코드를 잡았습니다.
AI가 짠 UI를 믿으려면 자동화 루프를 만드십시오.
- ESLint 설정에 no-restricted-syntax 규칙을 넣어 원시 인라인 스타일 사용을 빌드 시점에 차단하십시오.
- Playwright로 핵심 페이지의 픽셀 매칭 테스트 스크립트를 짜고 동적 영역은 마스킹 처리하십시오.
- 테스트가 실패하면 Diff 이미지와 로그를 다시 AI 에이전트에게 던져 스스로 고치게 하십시오.
이 파이프라인을 돌리면 수동 디자인 수정에 쓰는 시간을 주당 5시간 아낄 수 있습니다.
운영 생산성을 높이는 주간 점검 루틴
피그마(Figma) 데이터에 따르면 표준화된 컴포넌트 라이브러리를 쓰는 조직은 미도입 조직보다 화면 설계 속도가 34% 빠릅니다. 효율을 유지하려면 문서를 따로 관리하지 마십시오. 시스템 내부 인터페이스에 실시간 레퍼런스 페이지를 두어 에이전트와 개발자가 사양을 즉시 확인하게 하십시오.
매주 다음 루틴을 지키십시오.
- @layer 블록 밖으로 삐져나온 전역 스타일 선언이 있는지 스캔하십시오.
- 하드코딩된 Hex 컬러값이 새로 들어왔는지 ESLint로 잡고 즉시 제거하십시오.
- 기획이 바뀌면 npx playwright test --update-snapshots를 실행해 로컬 시각적 베이스라인을 최신화하십시오.
이 점검이 디자인 불일치를 줄이고 배포 안정성을 유지합니다.
