프로젝트 소개

헬싱키 디자인 시스템, 즉 HDS는 헬싱키 시에서 구축한 오픈소스 디자인 시스템이다. 이는 개발과 설계를 위한 도구와 지침, 그리고 도시의 사용자 친화적이고 접근 가능한 디지털 서비스를 만들 때 참고할 수 있는 리소스를 하나로 묶은 것이다. 제공 기능: - 내장된 접근성. 컴포넌트는 설계 단계부터 최대한 접근 가능하도록 구성되며, 출시 전에 제3자의 접근성 심사 과정을 거친다. - React 및 CSS. 컴포넌트는 React 구현체와 CSS 스타일 형태로 모두 제공되므로 팀은 프로젝트에 적합한 방식을 선택할 수 있다. - 사용자 지정 가능한 컴포넌트. 컴포넌트는赫尔싱키 브랜드를 반영하도록 커스터마이즈할 수 있도록 구축됐다. - 디자인과 구현의 동기화. 디자이너는 구현 내용과 항상 맞물린 Sketch 라이브러리 컬렉션을 사용한다. 패키지: HDS는 npm에 배포되는 세 가지 패키지로 구성된다. hds-core는赫尔싱키 시의 브랜드 색상, 타이포그래피, 기본 스타일을 CSS 스타일과 변수 형태로 제공한다. hds-react는 React로 구현된 HDS 컴포넌트를 담고 있다. hds-design-tokens는 기본 색상과 타이포그래피를 포함한 시스템의 기반을 디자인 토큰 형태로 저장한다. hds.hel.fi에 위치한 프로젝트 사이트에는 문서, 사용 가능한 컴포넌트 목록, React 및 core 패키지의 Storybook 인스턴스가 게시된다. 개발자와 디자이너를 위한 별도의 시작 가이드도 제공한다. 개발 및 기여: 모노레포는 Lerna를 사용해 패키지 간 스크립트 실행, 버전 관리 및 릴리스를 처리하며, pnpm 워크스페이스는 로컬 개발 중 별개 패키지가 심플링크를 통해 서로 참조할 수 있도록 의존성 관리를 담당한다. 개발 가이드에는 로컬 환경 설정에 대한 내용이 포함된다. 이슈, 풀 리퀘스트, 제안된 컴포넌트 디자인 형태로 기여를 환영하며, 프로젝트를 kontak할 수 있는 방법도 문서를 통해 안내한다. 저장소는 MIT 라이선스 하에 릴리스된다.