Design System
클라우드포레 프로젝트의 디지털 경험을 통합하기 위한 오픈 소스 디자인 시스템입니다.
Overview
점점 더 많은 제품들이 더 나은 사용자 경험을 추구하기 시작했습니다. 이러한 상황에서 우리는 아래의 원칙을 기반으로 디자인 시스템을 구축했습니다.
디자인 시스템은 프로덕트 제작에 참여하는 모두가 디자인 문제를 더 빠르고 효율적으로 해결할 수 있도록 돕습니다.
또한 우리의 디자인 시스템은 여러 작업자가 모두 하나의 목소리로 이야기할 수 있도록 돕는 Single source of truth이며, 같은 방식으로 논의할 수 있도록 협의한 문법을 제공합니다.
Principle
사용자 중심
우리의 디자인은 제품의 최접점에서 고객과 커뮤니케이션 하는 언어로 사용자를 우선으로 합니다. 프로덕트를 개발하는 방식에서 포괄성, 접근성, 투명성을 중요하게 생각하며 개방적이고 접근하기 쉬운 디자인을 위해 노력합니다.
명확한 시각화
사용자는 멀티 클라우드의 복잡성 안에서 다양한 과업을 수행합니다. 어려운 문제를 간소화하고 복잡한것을 명확하게 표현해 사용자가 고민하지 않고 서비스를 사용할 수 있도록 도와주는것이 기본 원칙입니다. 필요할 때 필요한 것을 제공하는 디자인과 메시지로 고객의 목표 달성을 돕기 위해 노력합니다.
완벽 너머 지속성
언어는 상황과 환경을 반영해 계속해서 발전합니다. 우리의 디자인 시스템도 최선을 목표로 끊임없이 사용성을 검증 해 나가며 완벽 너머의 지속하는 힘을 지향합니다.
디자인 시스템의 발전에 기여하고 싶다면 아래의 리소스를 확인해주세요.
Resources
GitHub
디자인 시스템 저장소Storybook
컴포넌트 라이브러리Figma
공개 준비중
1 - 시작하기
개발 환경 세팅
Fork
현재 스페이스원의 콘솔은 오픈소스로 운영중에 있습니다.
개발에 기여하기위해 먼저 Design System 레포지토리를 개인 github 계정에 포크해 줍니다.
Clone
이후 포크해온 레포지토리를 로컬로 클론해 줍니다.
서브모듈로 assets과 번역 관련 레포지토리가 사용중이기 때문에 함께 초기화합니다.
git clone --recurse-submodules https://github.com/[github username]/spaceone-design-system
cd console
Run Storybook
콘솔을 실행 실행시키기 위해 npm으로 의존성을 설치하고, 스크립트를 실행해 줍니다.
npm install --no-save
npm run storybook
Build
배포 가능한 zip을 생성하려면 아래의 스크립트를 실행하시면 됩니다.
스토리북
SpaceOne Design system은 Storybook을 제공하고 있습니다.
컴포넌트를 생성하면 해당 컴포넌트의 기능 정의를 Storybook을 통해 문서화합니다.
기본적으로 한 컴포넌트가 아래와 같은 구조로 구성되어 있습니다.
- component-name
- [component-name].stories.mdx
- [component-name].vue
- story-helper.ts
- type.ts
[component-name].stories.mdx 와 story-helper.ts
컴포넌트의 설명, 사용예시, Playground를 제공합니다.
mdx 포멧을 사용중이며 사용방법은 문서를 참고하십시오.
playground에 명시되는 props, slots, events와 같은 속성들은 가독성을 위해 story-helper를 통해 분리하여 작성하는 방식을 지향합니다.
차트 라이선스
SpaceONE 디자인 시스템은 내부적으로 amCharts for Dynamic Chart를 사용합니다.
디자인 시스템을 사용하기 전에 amCharts의 라이선스를 확인해주십시오.
자신에게 적합한 amCharts 라이선스를 구입하여 애플리케이션에서 사용하려면 라이선스 FAQ를 참조하십시오.
스타일
스타일 정의에 있어 SpaceOne Console은 tailwind css와 postcss를 사용중에 있습니다.
SpaceOne의 color palette에 따라 tailwind 커스텀을 통해 적용되어 있습니다. (세부 정보는 storybook을 참고해주세요)