디자인시스템 컴포넌트 라이브러리 생성 – 피그마 강좌 3-7

이번 강의에서는 자주 사용하는 컴포넌트를 라이브러리로 만들어 활용하는 방법을 알아보겠습니다. 이번 예제는 모바일 앱을 기준으로 제작할 예정이며, 이전에 생성한 컬러 시스템, 타이포그래피, 아이콘, 스페이싱 & 사이징을 활용하여 일관된 컴포넌트 디자인을 구성하겠습니다.

라이브러리 정리 및 명명 규칙

디자인 시스템을 효율적으로 관리하기 위해 기존에 만든 컬러, 타이포그래피, 아이콘, 스페이싱 & 사이징 라이브러리를 dds- 로 직관적인 이름으로 정리했었죠. 이제 이 부분 역시 컴포넌트에 연결해서 컴포넌트 라이브러리로 만들어보겠습니다.

• dds-typography (타이포그래피 라이브러리)
• dds-colorsystem (컬러 시스템 라이브러리)
• dds-icons (아이콘 라이브러리)
• dds-spacing-sizing (스페이싱 및 사이징 라이브러리)

기존 라이브러리 연결하기

컴포넌트 파일을 열고, 기존에 생성한 컬러 시스템, 타이포그래피, 아이콘, 스페이싱 및 사이징 라이브러리를 연결합니다. 피그마의 라이브러리 패널에서 해당 라이브러리를 활성화한 후, 새롭게 제작하는 컴포넌트에서 각 요소를 적용합니다.

컴포넌트 추가 작업

샘플로 카드 UI를 하나 만들어보겠습니다. 카드 UI는 여러 요소를 포함할 수 있으며, 디자인 시스템에서 재사용이 용이하도록 설정해야 합니다.

1. 카드의 기본 형태를 구성합니다.
2. 기존 컬러 시스템의 색상을 적용합니다.
3. 타이포그래피 스타일을 활용하여 텍스트를 설정합니다.
4. 아이콘 라이브러리에서 아이콘을 추가합니다.
5. 스페이싱 및 사이징 값을 적용하여 일관된 간격을 유지합니다.

이렇게 설정하면, 전체적인 디자인 시스템 내에서 동일한 스타일을 유지하면서 재사용이 가능한 컴포넌트를 만들 수 있습니다.

배포하기

완성된 컴포넌트를 팀원들이 활용할 수 있도록 라이브러리로 배포합니다.

1. Assets 패널에서 Publish Library 버튼을 클릭합니다.
2. 업데이트된 컴포넌트를 검토하고 배포합니다.
3. 배포 후, 팀원들이 해당 컴포넌트를 라이브러리에서 불러와 활용할 수 있도록 설정합니다.

이번 강의에서는 디자인 시스템의 컴포넌트 라이브러리를 생성하는 과정과 기존 라이브러리를 연결하여 활용하는 방법을 알아보았습니다. 또한, 카드 UI 컴포넌트를 예제로 제작하여 디자인 시스템의 일관성을 유지하는 방법을 실습했습니다.