CSS 기능 재구현을 배제한 Intent 중심 Design System 설계 전략

Building a Design System Without Recreating CSS

Drew Marshall2026년 6월 22일3분intermediate

AI 요약

Context

Design System 구축 시 Utility Class와 Responsive Option을 과도하게 확장하여 CSS 문법을 중복으로 재구현하는 추세 지속. 이로 인한 Implementation Detail 중심의 마크업 증가가 개발자의 인지 부하를 높이고 코드 가독성을 저해하는 병목 지점으로 작용함.

Technical Solution

구현 상세가 아닌 의도를 정의하는 Intent-based Layer 설계
모든 CSS Capability를 노출하는 대신 공통 패턴에 기반한 Strong Defaults 적용
구체적 속성 설정 대신 adapt="grid", mobile="stack"과 같이 목적을 명시하는 API 추상화
고급 설정은 허용하되 일반적인 워크플로우는 단순화하는 계층적 권한 분리
기술적 제약 사항을 해결하기 위해 CSS 대체가 아닌 CSS 상위의 Shared Language 구축

실천 포인트

1. API 설계 시 모든 Edge Case 지원보다 6개월 후의 가독성 확보 여부를 우선 검토할 것

2. CSS의 표준 기능을 재구현하는 속성(Property)이 포함되었는지 체크하고 이를 의도 중심의 명칭으로 변경할 것

3. 설정 가능한 옵션의 수를 줄이고 빈번하게 사용되는 레이아웃 패턴을 기본값으로 제공하는지 확인하여 인지 부하를 최소화할 것

태그

#Design System #CSS Architecture #Abstraction #Intent-based API #Cognitive Load

원문 읽기