프론트엔드
AI가 읽는 디자인 시스템: 추상화를 다시 설계한 이유
두줄요약
AI가 디자인 시스템을 사용할 때는 규칙을 설명하는 것보다 잘못된 상태를 만들 수 없게 하는 추상화가 중요하다고 다뤘습니다. 목적별 컴포넌트 분리와 타입 계약으로 접근성과 상호작용을 시스템이 직접 소유하는 방법을 소개했습니다.
핵심 내용
- AI가 디자인 시스템을 읽고 사용할 때는 설명보다 잘못된 상태를 원천적으로 막는 추상화가 더 강한 가이드가 될 수 있다는 문제의식
- 기존 ListItem의 모호한 범용성을 줄이고, 목적별 컴포넌트와 타입 계약으로 의미·접근성·상호작용을 컴포넌트가 직접 소유하도록 재설계
- Button과 item 계열을 통해 label, onSelect, aria 속성, 키보드 동작, disclosure 책임을 분리한 설계 기준을 제시
- 좋은 하네스는 프롬프트보다 먼저 추상화에서 시작하며, 문서·테스트·정적 분석은 그 의도를 보조하는 역할
적용해볼 점
- 반복되는 규칙은 문서로 설명하기보다 타입과 기본 API로 닫을 수 있는지 점검
- 목적이 다른 UI를 하나의 범용 컴포넌트로 묶기보다 사용 맥락별 컴포넌트로 분리
- 접근성과 키보드 상호작용을 제품 코드가 아니라 디자인 시스템의 기본 책임으로 이동
