디자인 시스템(DSM) 가이드: uiux 디자인 시스템 구축 및 협업 효율화

Pixso의 디자인 시스템(DSM)은 컴포넌트, 스타일과 디자인 토큰을 팀의 공통 기준으로 관리하는 공간입니다. 디자이너와 개발자가 같은 리소스를 참고하고, 에일리어스(Alias)로 디자인 요소와 코드의 이름을 연결할 수 있습니다. 이 글에서는 DSM을 열고 에일리어스를 설정한 뒤, 코드와 스타일을 개발 작업에 활용하는 방법을 소개합니다.

1부. 디자인 시스템(DSM)이란 무엇인가요?

디자인 시스템은 버튼과 입력창 같은 컴포넌트, 색상과 글자 스타일, 디자인 토큰을 함께 관리합니다. 팀원이 서로 다른 파일을 기준으로 작업할 때 생기는 차이를 줄이기 위해서입니다. 픽소(Pixso)의 DSM에서는 팀이 같은 리소스를 확인하고 디자인과 구현에 활용할 수 있습니다. 공통 기준을 한곳에서 관리하는 방식을 단일 진실 공급원(Single Source of Truth)이라고도 합니다. 에일리어스는 디자인 요소와 코드에서 쓰는 이름을 연결해 두 작업 사이의 대응 관계를 분명하게 만듭니다.

1. 스타일 (Style)

   

2. 디자인 토큰 (Design token)

   

3. 컴포넌트 (Component)

   

2부. 디자인 시스템(DSM) 접속 방법

리소스가 게시된 라이브러리 파일을 선택합니다. DSM을 여는 세 가지 경로가 있습니다.
경로 1: 에디터의 파일명 드롭다운 메뉴에서 디자인 시스템 모드(Design system mode)를 클릭합니다.

경로 2: 팀 대시보드 > 리소스(Resources) 페이지에서 디자인 시스템에서 열기(Open in Design System)를 클릭합니다.

경로 3: 에디터의 라이브러리 목록에서 디자인 시스템 열기(Open design system)를 클릭합니다.

3부. 리소스 에일리어스(Alias) 설정하기

에일리어스(Alias)는 디자인 리소스를 코드에서 식별할 이름입니다. 디자이너와 개발자가 색상, 스타일, 컴포넌트의 용도에 맞는 이름을 정하면 어떤 리소스를 구현에 사용할지 쉽게 알 수 있습니다. 팀의 명명 규칙에 따라 이름을 정하고, 같은 이름이 다른 리소스에 중복되지 않도록 관리하세요.

에일리어스 설정 방법:

1. DSM에서 해당 리소스를 찾습니다.

2. 에일리어스 정보를 수동으로 설정합니다.

3. 업데이트 내용을 게시합니다.

   

한글 및 특수 기호는 지원되지 않습니다. 스타일, 디자인 토큰 및 컴포넌트의 에일리어스는 중복될 수 없습니다. 컴포넌트 세트 내에서 서로 다른 속성과 값에 대한 에일리어스는 고유해야 합니다. (충돌을 방지하기 위해 팀에서는 일반적으로 계층 구조를 사용하는 등의 네이밍 규칙을 수립하여 고유성을 보장합니다.)

4부. 컴포넌트 코드 사용 방법

디자인 시스템에서 컴포넌트에 에일리어스가 할당되면, 해당 코드는 자동으로 기존 속성 이름 대신 시맨틱 에일리어스를 사용합니다. 개발자는 코드 패널에서 스니펫을 직접 복사하여 기존 엔지니어링 프로젝트에 붙여넣을 수 있어 개발 효율성이 대폭 향상됩니다.

이 기능은 다양한 프론트엔드 프레임워크의 코드 형식을 지원합니다. 프레임워크를 변경한 후 '재생성(Regenerate)'을 클릭하면 해당 코드 구조를 새로고침하여 미리 볼 수 있습니다.

1. 에일리어스 설정 확인

   

2. 에일리어스가 포함된 컴포넌트 코드

   

5부. 스타일 및 디자인 토큰 내보내기

일괄 내보내기 기능을 사용하여 디자인 시스템(DSM) 스타일과 디자인 토큰을 클릭 한 번으로 프론트엔드 코드로 변환할 수 있습니다. 디자인 시스템에 에일리어스가 설정되어 있으면 코드에 동기화되어 반영됩니다. 상세 기능은 다음과 같습니다:

• 내보내기 형식: CSS 및 SCSS를 지원하여 다양한 기술 스택의 프로젝트에 쉽게 통합할 수 있습니다.
• 내보내기 범위: 필요에 따라 특정 디자인 리소스(색상, 텍스트, 효과 등)를 선택하여 내보낼 수 있습니다.

워크플로우:

1. 미리보기 생성: 범위를 선택하고 생성(Generate)을 클릭하여 해당 코드를 미리 확인합니다.

   

2. 다운로드 및 사용: 확인 후 코드 패키지를 다운로드하여 로컬 코드 에디터에서 바로 사용합니다.

   

스타일과 디자인 토큰을 코드로 내보내면, 개발자가 화면마다 값을 다시 입력하는 작업을 줄일 수 있습니다. 팀의 코드 구조에 맞춰 적용하고 디자인과 구현에서 같은 값을 사용하세요.