DesignSystems.com의 새로운

DesignSystems.com은 디자인 시스템을 만들고 운영하는 디자이너·개발자·관리자를 위한 지식 공유 플랫폼으로 자리 잡고 있다. 이 글은 2019년 6월에 공개된 주요 콘텐츠 네 가지를 소개하며, 아이콘 설계부터 접근성 높은 React 컴포넌트, 에이전시 협업, 화이트라벨링까지 디자인 시스템의 실무 범위를 보여준다. 핵심은 재사용성과 일관성을 유지하면서도 다양한 사용자와 제품 요구에 유연하게 대응하는 것이다.

아이콘 시스템 설계와 구현

• 아이콘 제작의 기본 원칙부터 개발자 전달까지 다루는 종합 가이드를 소개한다.
• 주요 내용은 다음과 같다.
  • 아이콘의 스트로크와 필(fill) 설계
  • Boolean 연산을 활용한 아이콘 제작
  • 아이콘을 체계적으로 구성하고 관리하는 방법
  • 개발자 핸드오프를 위한 파일 및 자산 준비
• 아이콘은 단순한 그래픽 요소가 아니라 디자인 시스템의 일관성과 사용성을 좌우하는 핵심 자산으로 설명된다.

에이전시 관점의 디자인 시스템 구축

• Instrument는 Nike, Google, Airbnb 등과 협업하며 일회성 결과물이 아닌 확장 가능한 디자인 시스템을 구축한다.
• 재사용 가능한 기능성 컴포넌트를 여러 애플리케이션과 규모에 걸쳐 활용하는 것을 중시한다.
• 디자인 시스템의 성공을 위해서는 다음 과정이 중요하다.
  • 클라이언트와 시스템의 목표 및 범위에 대한 공통 이해 형성
  • 높은 수준의 협업을 통한 요구사항 조율
  • 특정 프로젝트를 넘어 장기적으로 활용 가능한 구성요소 설계
• 디자인 시스템은 산출물 하나가 아니라 브랜드, 제품, 기술을 연결하는 협업 프로세스로 제시된다.

접근성을 공유하는 React 컨테이너

• Zendesk의 오픈소스 디자인 시스템 Garden은 접근성 및 키보드 조작을 공통 패턴으로 관리하기 위해 “컨테이너” 패턴을 사용한다.
• 컨테이너는 화면 UI를 직접 렌더링하지 않고 다음 기능을 담당한다.
  • 키보드 및 마우스 상호작용 처리
  • React 컴포넌트 간 접근성 로직 공유
  • RTL(오른쪽에서 왼쪽으로 읽는 언어) 레이아웃 지원
• 새 라이브러리인 react-containers는 스타일이 포함된 전체 패키지를 설치하지 않아도 비시각적 로직만 사용할 수 있도록 별도 저장소로 분리됐다.
• 기존 패턴보다 더 작고 효율적으로 다시 작성됐으며, WAI-ARIA Authoring Practices 1.1에 더욱 가깝게 구현됐다.

사용자에게 권한을 제공하는 화이트라벨링

• Dawn Labs는 제3자가 디자인 시스템을 직접 커스터마이즈할 수 있으면서도 제품 전체의 일관성을 유지해야 하는 문제를 다뤘다.
• 사용한 기술은 다음과 같다.
  • styled-components
  • styled-system
  • GraphQL 백엔드
  • CSS 변수와 전역 CSS 주입
• 기본 디자인 토큰과 구조는 통제하면서도, 최종 사용자가 클라이언트의 개입 없이 원하는 스타일을 수정할 수 있도록 “스타일링 탈출구”를 제공했다.
• 화이트라벨 시스템은 일관된 기본 경험과 사용자별 커스터마이징 사이의 균형이 중요하다.

커뮤니티 중심의 지식 공유

• DesignSystems.com은 디자인 시스템 제작자, 디자이너, 개발자, 관리자가 경험과 실무 지식을 공유하는 것을 목표로 한다.
• 다양한 분야의 기고를 통해 디자인 시스템을 시각 디자인에만 한정하지 않고 다음 영역까지 확장한다.
  • 접근성
  • 컴포넌트 아키텍처
  • 협업과 운영
  • 사용자 커스터마이징
• 플랫폼의 성장은 운영팀뿐 아니라 커뮤니티 구성원의 사례와 기여에 기반한다.

디자인 시스템을 구축할 때는 재사용 가능한 컴포넌트와 명확한 시각 규칙뿐 아니라 접근성, 협업 프로세스, 확장 가능한 커스터마이징 구조까지 함께 설계하는 것이 좋다. 특히 공통 로직은 별도 모듈로 분리하고, CSS 변수나 디자인 토큰을 활용하면 일관성과 유연성을 동시에 확보할 수 있다.