CSS를 재창조하지 않고 디자인 시스템 구축하기
디자인 시스템은 종종 함정에 빠지곤 합니다.
유틸리티 클래스를 추가하는 것으로 시작합니다. 반응형 옵션을 추가하고, 레이아웃 도우미를 추가합니다. 곧 새로운 문법을 만들게 됩니다. 결국 CSS가 이미 하고 있는 일을 똑같이 반복하게 됩니다.
CSS를 대체하려고 하지 마세요.
대신, CSS 위에 레이어를 구축하세요. 의도(intent)에 집중하세요.
개발자는 유연성을 원합니다. 하지만 유연성은 복잡성을 동반합니다. 많은 시스템이 모든 브레이크포인트와 레이아웃 옵션을 노출합니다. 이는 마크업을 읽기 어렵게 만듭니다. 코드는 레이아웃이 무엇을 하는지보다 레이아웃을 어떻게 만드는지 설명하는 데 더 많은 시간을 소비하게 됩니다.
시스템이 모든 것을 설명하려 하기 때문에 이해하기 어려워집니다.
초점을 바꾸세요. 레이아웃이 어떻게 구축되는지보다는, 레이아웃이 무엇을 달성하는지에 대해 더 많이 생각하세요.
이 예시를 보세요:
이것은 CSS를 대체하는 것이 아닙니다. 의도를 표현하는 것입니다.
- 콘텐츠가 그리드에 맞춰 조정됩니다.
- 모바일에서는 스택(stack) 구조로 쌓입니다.
구현은 시스템 내부에 머뭅니다. 이것은 더 많은 추상화에 관한 것이 아닙니다. 더 나은 소통에 관한 것입니다.
끝없는 설정보다는 좋은 기본값(defaults)이 더 낫습니다. 대부분의 레이아웃은 공통적인 패턴을 따릅니다. 대부분의 개발자는 새로운 레이아웃 시스템을 발명하는 것이 아니라 콘텐츠를 정리하기를 원합니다.
디자인 시스템은 사려 깊은 기본값을 제공해야 합니다. 모든 CSS 기능을 노출하려고 하면 실패합니다. CSS는 이미 강력하고 표준화되어 있습니다.
디자인 시스템의 역할은 다음과 같습니다:
- 인지 부하 감소.
- 일관성 생성.
- 의도 전달.
- 공통 패턴을 쉽게 만들기.
API를 설계할 때 스스로에게 이 질문을 던져보세요: "6개월 뒤에도 이것을 이해할 수 있을까?"
다음과 같이 묻지 마세요:
- "모든 것을 설정할 수 있는가?"
- "모든 예외 케이스를 지원할 수 있는가?"
가독성은 확장 가능하지만, 복잡성은 그렇지 않습니다.
단순함은 제약이 아닙니다. 목표는 제어권(power)을 적절한 위치에 두는 것입니다. 일반적인 워크플로우는 단순하게 유지되어야 하며, 고급 워크플로우는 여전히 가능해야 합니다.
최고의 디자인 시스템은 공유된 언어를 만듭니다. 구현 대신 의도에 집중합니다. 개발자가 목적을 전달할 수 있도록 돕습니다.
개발자는 레이아웃을 만들고 싶어 하는 것이 아닙니다. 제품을 만들고 싶어 합니다. 레이아웃은 업무의 일부일 뿐입니다.
출처: https://dev.to/stinklewinks/building-a-design-system-without-recreating-css-1a41