개요

Style Dictionary 개요

Style once, use everywhere.

스타일 사전(Style Dictionary)은 모든 플랫폼이나 언어에서 사용할 수 있도록 스타일을 단일 소스로 관리하는 시스템이다. 한 곳에서 스타일을 생성하고 편집할 수 있으며, 명령 한 번으로 iOS, Android, CSS, JS, HTML, sketch 파일, 스타일 문서 등 필요한 모든 곳에 해당 스타일을 내보낼 수 있다. NPM을 통해 CLI로 사용할 수 있지만, 기능을 확장하려는 경우 일반 NPM 모듈처럼 사용할 수도 있다.

사용자 경험을 관리할 때 여러 개발 플랫폼과 디바이스에서 스타일을 일관성 있게 유지하고 동기화하는 것은 상당히 어려울 수 있다. 동시에 디자이너, 개발자, PM 등은 효과적인 작업과 커뮤니케이션을 위해 일관되고 최신의 스타일 문서를 보유할 수 있어야 한다. 그럼에도 불구하고 실수가 발생하고 디자인이 정확하게 구현되지 않을 수 있다. 스타일 사전은 단일 소스에서 모든 플랫폼에 걸쳐 디자인 토큰을 자동으로 생성하여 워크플로우 전반의 장애물, 오류 및 비효율성을 제거함으로써 이러한 문제를 해결한다.

유튜브 데모 영상

플레이그라운드에서 체험해보기

플레이그라운드 확인하기

예제

예제 확인하기

기초

스타일 사전은 다음과 같이 구성된다:

1. JSON, JSONC, JSON5, JS 파일로 구조화된 디자인 토큰
2. 구조화된 폴더에서 관리되는 정적 에셋들(e.g. 폰트, 아이콘, 이미지, 음원 등...)
3. 각 플랫폼에 대한 토큰과 에셋의 변환(transformation) 및 형식(formatting)을 정의하고 구성한다.

스타일 사전의 기능:

1. 디자인 토큰과 에셋을 플랫폼별 결과물로 변환한다.
2. 사람이 읽을 수 있는 아티팩트(예: 문서, 디자인 라이브러리 등)를 생성한다.

스타일 사전으로 만들 수 있는 것들:

1. 모든 플랫폼에 맞는 파일 스타일링
2. 이미지 및 그래픽
3. 스케치 파일
4. 문서 웹사이트
5. 그 밖의 스타일이나 스타일 데이터를 원하는 모든 것

스타일 사전을 사용하여 이 모든 것을 구축할 때 얻을 수 있는 이점은 모두 일관되고 최신 상태를 유지할 수 있다는 점이다.

스타일 사전 프레임워크는 확장 가능한 모듈 형식이다. 스타일 사전에서 모든 유형의 파일을 만들 수 있다. 새로운 언어, 플랫폼 또는 파일 유형이 필요한 경우 스타일 사전 프레임워크를 쉽게 확장하여 필요한 파일을 만들 수 있다.