디자인 시스템의 HTML

디자인 시스템은 조직의 제품 전반에서 사용하는 컴포넌트, 토큰, 패턴 및 지침의 공유 라이브러리입니다. 시스템의 HTML 측면은 마크업 규칙을 캡슐화하여 모든 제품이 일관된 버튼, 모달, 양식 및 카드 구조를 렌더링하도록 합니다.

토큰은 원자적인 디자인 값입니다(색상: blue-500, 간격: 16px). 컴포넌트는 재사용 가능한 HTML+CSS+JS 단위입니다(버튼, 모달, TextField). 패턴은 더 높은 수준의 구성입니다(로그인 양식, 아바타가 있는 콘텐츠 카드). HTML 구조는 컴포넌트 수준에서 고정되고, 패턴은 컴포넌트를 조합합니다.

컴포넌트에는 모범 사례가 반영되어 있습니다. 모든 버튼은 적절한 type 속성을 갖춘 <button> 요소를 사용합니다(div가 아님). 모든 모달은 포커스를 가두고 Escape 키를 지원하며 올바른 ARIA 역할을 가집니다. 컴포넌트를 도입하면 각 제품 기능마다 접근성을 다시 구현할 필요가 없습니다.

Storybook은 다양한 속성과 변형을 사용해 각 컴포넌트를 독립적으로 렌더링합니다. 디자이너와 제품 관리자는 코드를 읽지 않고도 사용할 수 있는 컴포넌트를 확인할 수 있고, 개발자는 소스에서 검색하지 않고도 사용 예시를 볼 수 있습니다. Storybook은 디자인 시스템 문서화의 사실상 표준입니다.

디자인 시스템을 유의적 버전 관리 방식으로 게시되는 패키지처럼 다루세요. 호환성을 깨뜨리는 HTML/CSS 변경(사용자가 의존하는 CSS 클래스 이름 변경, 컴포넌트 슬롯 제거)은 주 버전을 올립니다. 사용자는 갑작스럽게 변경되는 것이 아니라 자신의 일정에 따라 의도적으로 업데이트합니다.

컴포넌트 속성, 슬롯 및 외부에 공개된 부분은 공개 인터페이스입니다. 사용자에게 배포한 후에는 이를 변경하는 데 큰 비용이 든다고 생각하세요. 단계적으로 지원을 중단하려면 기존 인터페이스와 함께 새 인터페이스를 추가하고, 기존 사용에 대한 경고를 기록한 뒤, 충분히 측정한 기간이 지난 후에만 제거하세요.

토큰을 사용하면 테마를 적용할 수 있습니다. 색상 토큰 맵을 교체하면 모든 컴포넌트가 새 팔레트를 사용합니다. 토큰이 모든 것을 제어하고 컴포넌트가 하드코딩된 값 대신 토큰을 참조하면, 서로 다른 시각적 스타일을 사용하는 여러 브랜드가 컴포넌트를 공유하는 화이트 라벨링도 간단해집니다.

여러 프레임워크(React, Vue, Angular)를 사용하는 조직에서는 웹 컴포넌트를 통해 어디서나 작동하는 하나의 구현을 제공할 수 있습니다. Lit, FAST 또는 순수 JS로 만들고, 어떤 프레임워크에서도 동일하게 사용하세요. 계약은 프레임워크가 아니라 HTML 구조입니다.

디자인 시스템은 키보드 처리, ARIA 역할, 포커스 관리, 색상 대비 같은 접근성을 각 컴포넌트에 한 번씩 내장합니다. 시스템을 도입한 제품 팀은 각 기능을 처음부터 만드는 대신 접근성을 물려받으므로, 회사 전체의 접근성 버그를 측정 가능하게 줄일 수 있습니다.

어떤 제품이 디자인 시스템의 어떤 버전을 사용하는지 추적하세요. Backstage의 컴포넌트 카탈로그, package.json을 모니터링하는 맞춤형 Slack 봇 또는 간단한 내부 대시보드를 사용하면 최신 버전이 아직 적용되지 않은 위치를 확인할 수 있습니다. 도입 지표는 지속적인 투자를 뒷받침합니다.

누가 컴포넌트를 추가할 수 있는지 결정하세요. 중앙 디자인 시스템 팀만 추가할 수 있을까요? 제품 팀이 분산하여 기여할까요? 각 모델에는 장단점이 있습니다. 중앙 팀은 더 느리게 배포하지만 품질을 유지하고, 분산된 팀은 빠르게 움직이지만 파편화될 위험이 있습니다. 조직 규모에 따라 신중하게 선택하세요.

디자인 시스템은 계속 발전하는 제품입니다. 제품에 새로운 패턴이 나타나면 컴포넌트를 추가하고, 더 이상 적합하지 않은 컴포넌트는 지원을 중단하며, 근본적인 결정을 바꿔야 할 때는 리팩터링하세요. 시스템을 완성된 결과물이 아니라 로드맵이 있는 소프트웨어로 다루세요.

컴포넌트 내부에 값을 하드코딩하는 것보다 디자인 토큰(예: 색상: blue-500, 간격: 16px)을 선호하는 이유는 무엇인가요?

디자인 시스템은 토큰(원자적 값), 컴포넌트(재사용 가능한 HTML 단위), 패턴(더 높은 수준의 구성)을 제품 전반에서 공유하는 버전 관리 라이브러리로 묶습니다. 문서화에는 Storybook을 사용하고, 프레임워크 간 사용에는 웹 컴포넌트를 사용하며, 안정성을 위해 유의적 버전 관리를 사용하세요. 모든 컴포넌트에 접근성을 내장하고, 도입 현황을 추적하며, 시스템을 계속 발전하는 제품으로 관리하세요.