사내 디자인 시스템

해결한 문제

• 사내 SaaS 2종이 쓰던 공통 라이브러리를 git 브랜치로 직접 참조하고 있었습니다. 설치할 때마다 토큰이 노출됐고, CJS 배럴 구조라 트리셰이킹이 안 됐고, 타입 선언도 없었습니다.

내가 기여한 것

• 런타임 MUI import 265건을 전부 걷어냈습니다. Radix와 아직 stable이 없는 Base UI 대신 접근성 표준을 지키는 React Aria Components를 골랐고, 유료 DataGridPro의 treeData·groupingColDef는 자체 DataTable로 다시 만들어 라이선스 종속을 끊었습니다.
• Emotion은 런타임 비용과 RSC 비호환 때문에 접고 CSS Modules로 옮겼습니다. @layer ds와 해시 클래스로 소비 앱과 스타일이 부딪히지 않게 했습니다.
• rolldown이 Node interop에 엄격해 브라우저는 ESM, Node는 CJS로 빌드를 나누고 조건부 exports를 자동 생성하는 도구를 만들었습니다.
• 딥패스 import(전체의 78%)를 배럴로 바꾸는 양방향 AST codemod로 사내 서비스 2곳 230여 건을 무중단 전환했고, sx prop 호환 레이어를 둬 소비 앱은 코드를 고치지 않아도 됐습니다.
• 소비 앱과 같은 Next.js 12 환경에 검증 프로젝트를 두고, 단일 컴포넌트 번들 크기와 MUI 잔존 여부, publint 통과를 배포마다 자동으로 확인합니다.

임팩트