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

디자인 시스템(DSM)은 디자인 사양의 생성, 협업 및 반복 작업을 중앙 집중화하는 동시에 팀 전체에 일관된 디자인 언어를 보장합니다. 엔터프라이즈 워크플로우에서 디자인 도구와 개발 도구 간의 불일치는 디자인 구현의 정확도를 떨어뜨리고 커뮤니케이션 비용을 증가시킵니다. Pixso의 DSM은 '단일 진실 공급원(Single Source of Truth)'을 제공하여 이러한 문제를 해결하며, 에일리어스(Alias) 매핑을 통해 디자인 정의를 엔지니어링 구현과 연결합니다. 이를 통해 시각적 요소와 코드 사이의 간극을 메우고, 더욱 효율적이고 일관된 uiux 디자인 시스템 구축 및 제품 인도를 가능하게 합니다.

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

디자인 시스템(DSM)은 디자인 사양의 중앙 집중식 게시, 협업 및 반복 작업을 위한 플랫폼입니다. 컴포넌트 스타일 및 디자인 토큰과 같은 자산을 관리할 뿐만 아니라, 팀 전체에서 디자인 언어가 지속적으로 동기화되고 통일되도록 보장하여 효율적인 디자인 시스템 개선을 이끕니다.

실제 기업의 워크플로우에서 디자이너와 개발자는 서로 다른 도구, 언어 및 사양을 사용합니다. 디자이너는 디자인 컴포넌트 라이브러리를 구축하고, 개발자는 이를 구현하기 위해 코드 컴포넌트 라이브러리에 의존합니다. 이 둘 사이에 통일된 정렬 기준이 부족하면 디자인 재현율이 낮아지고 소통 비용이 높아집니다.

픽소(Pixso)의 DSM은 단일 소스 관리(Single Source management)를 통해 이 핵심 문제를 해결합니다. 디자인 팀과 프론트엔드 팀이 동일한 플랫폼에서 하나의 사양 세트를 공동으로 구축하고 유지 관리하여 양측 모두에게 명확한 가이드라인을 제공합니다. 에일리어스 매핑을 통해 '디자인 정의'는 원자 단위에서 '엔지니어링 구현'과 결합됩니다. 이는 앞서 언급한 '언어의 장벽'을 허물고, 소스 단계에서 시각적 요소와 코드를 일치시켜 협업 장벽을 제거하며, 팀이 고품질의 ui 디자인 시스템을 기반으로 제품을 효율적으로 구축하도록 돕습니다.

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) 설정하기

디자인 시스템(DSM) 내에서 사용자(디자이너 또는 개발자)는 컴포넌트와 코드 간의 대응 관계를 명시적으로 선언합니다. 에일리어스 시스템을 통해 디자인 팀과 개발 팀은 시맨틱 매핑 관계를 공동으로 구축하고 유지 관리하며 디자인 시스템 개선을 이룰 수 있습니다.

에일리어스는 고유한 'ID 번호'와 같다고 생각하면 됩니다. 시스템은 이 'ID 번호'를 사용하여 특정 하위 리소스(예: 색상 값 또는 컴포넌트)를 빠르고 정확하게 찾아냅니다.

에일리어스 설정 방법:

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

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

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

   

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

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

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

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

1. 에일리어스 설정 확인

   

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

   

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

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

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

워크플로우:

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

   

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

   

이 기능을 통해 디자인 토큰을 사용 가능한 코드로 빠르게 변환하여, 디자인과 개발 간의 핸드오프 효율성을 효과적으로 높이고 uiux 디자인 시스템의 완성도를 강화할 수 있습니다.