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

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

Pixso의 디자인 시스템 관리를 시작할 때는 한 화면에서 반복되는 리소스부터 정리하는 편이 좋습니다. 여기서는 문의 폼의 입력 필드, 주 버튼, 오류 색상을 같은 이름으로 찾아 쓸 수 있도록 연결해 보겠습니다.

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. 업데이트 내용을 게시합니다.

   

에일리어스는 제품에서 허용하는 영문 이름 규칙에 맞춰 정하고, 스타일·디자인 토큰·컴포넌트 사이에서 중복되지 않게 관리하세요. 컴포넌트 세트의 속성과 값도 각각 구분할 수 있어야 합니다. 표시용 한글 이름과 코드에서 식별할 이름을 나누고, 개발팀이 이미 쓰는 이름과 대응시키면 관리하기 쉽습니다.

문의 폼으로 에일리어스 대응 관계 만들기

디자인 파일의 ‘주 버튼’과 개발 코드의 PrimaryButton이 같은 역할인지 먼저 확인합니다. 이름만 비슷하다고 연결하지 말고, 필수 속성, 크기, 오류나 비활성 상태를 비교하세요. 다른 기능을 하는 리소스에 같은 이름을 붙이면 전달 과정에서 더 큰 혼동이 생깁니다.

위 이름은 대응 관계를 설명하는 예입니다. 팀에 이미 안정적으로 쓰는 코드 이름이 있다면 새 규칙을 한꺼번에 만들기보다 그 이름과 연결하세요. 컴포넌트와 색상 토큰의 이름을 명확히 구분하면 코드 패널에서 무엇을 가져오는지 알아보기 쉽습니다.

에일리어스를 정한 뒤 일반 상태와 오류 상태에서 같은 리소스를 가리키는지 확인합니다. 이메일 입력 필드의 오류 문구만 바뀌어야 하는데 다른 버튼 색상까지 달라진다면 이름을 더 만드는 것보다 잘못 연결된 리소스를 먼저 찾는 것이 좋습니다.

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

디자인 시스템에서 설정한 에일리어스는 생성되는 코드에 사용됩니다. 코드 패널에서 이름과 속성이 의도대로 나타나는지 확인한 뒤 필요한 스니펫을 가져올 수 있습니다. 기존 프로젝트에서는 컴포넌트 경로, 의존성, 속성 이름이 맞는지 확인해 통합해야 합니다.

지원되는 프런트엔드 프레임워크로 전환한 후 재생성(Regenerate)을 클릭하면 해당 형식의 코드를 다시 미리 볼 수 있습니다. 코드 패널의 출력이 달라지는 것과 이미 배포한 서비스가 바뀌는 것은 별개입니다.

1. 에일리어스 설정 확인

   

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

   

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

일괄 내보내기로 디자인 시스템(DSM)의 스타일과 디자인 토큰을 코드로 출력할 수 있습니다. 설정한 에일리어스는 생성 결과에 반영됩니다. 이를 다운로드해 프로젝트에 적용하는 과정은 따로 진행해야 하며, 기존 서비스의 코드가 자동으로 바뀌는 것은 아닙니다. 제공되는 내보내기 기능은 다음과 같습니다:

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

워크플로우:

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

   

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

   

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

리소스를 바꿀 때는 디자인과 코드의 반영 범위를 나누세요

문의 폼의 오류 색상을 바꾸는 상황을 생각해 보세요. 먼저 담당자가 디자인 리소스를 수정하고, 에일리어스가 그대로 유지되는지 확인한 뒤 업데이트를 게시합니다. 변경 내용은 ‘오류 텍스트 색상 변경, 버튼 색상 변경 없음’처럼 영향을 받는 역할로 설명하면 됩니다.

사용하는 파일에서는 어떤 라이브러리를 참조하는지, 적용한 리소스가 무엇인지 확인합니다. 비슷한 색을 직접 입력한 요소나 별도 토큰을 쓰는 요소는 같은 변경에 포함되지 않을 수 있습니다. 디자인 파일에서 색이 바뀌었다고 모든 화면과 구현 코드가 함께 반영됐다고 판단해서는 안 됩니다.

개발자는 새 내보내기 결과와 현재 코드의 차이를 비교합니다. ColorError 값이 바뀌었다면 문의 폼의 오류 메시지, 다른 배경 위의 표시, 라벨과 입력창의 대비를 실제 화면에서 확인합니다. 기존 코드를 통째로 덮어쓰지 말고 바뀐 리소스를 필요한 위치에 적용하세요.

에일리어스 이름 자체를 바꿀 때는 값 변경보다 영향을 넓게 살펴야 합니다. 이전 이름을 참조하는 컴포넌트나 스타일이 남아 있을 수 있기 때문입니다. 새 이름과 이전 이름의 대응, 적용할 코드 위치, 함께 변경할 파일을 개발자와 정한 뒤 진행하세요.

처음부터 모든 리소스를 정리할 필요는 없습니다. 문의 폼 하나에서 이름을 찾고, 코드로 내보내고, 값 변경을 반영하는 과정이 연결되면 같은 방법을 다른 화면으로 확장할 수 있습니다.