컴포넌트 관리

아이콘 컴포넌트 작업 방식

피그마 오픈카톡방2026. 3. 7.

질문사항

디자인 시스템 구축 시 아이콘 컴포넌트는 어떤 방식으로 작업하는 것이 효율적인가요? 일일이 개별 아이콘을 만드는 것이 정석인가요?

디자인 시스템에서 아이콘 컴포넌트를 효율적으로 관리하는 방법은 여러 가지가 있지만, 개별 아이콘을 일일이 만드는 것보다는 베리언트(Variants)와 컴포넌트 프로퍼티(Component Properties)를 활용하는 것이 일반적입니다.

효율적인 아이콘 컴포넌트 관리 방법:

기본 아이콘 컴포넌트 생성: 모든 아이콘의 베이스가 될 마스터 컴포넌트를 만듭니다. 이 컴포넌트는 아이콘의 크기, 색상, 패딩 등을 제어하는 오토 레이아웃 프레임으로 구성될 수 있습니다.

아이콘 세트 구성: 각 아이콘 SVG를 개별 컴포넌트로 만듭니다.

베리언트 활용:

모든 아이콘 컴포넌트를 하나의 큰 컴포넌트 세트로 묶고, 이를 베리언트로 만듭니다.

프로퍼티 설정:

`iconName` (아이콘 종류): 각 아이콘의 이름을 프로퍼티 값으로 설정합니다 (예: `home`, `settings`, `arrow-right`).

`state` (상태값): 아이콘의 상태(예: `default`, `hover`, `active`, `disabled`)나 테마(예: `light`, `dark`)를 나타내는 프로퍼티를 추가할 수 있습니다.

`size` (크기): 24px, 20px 등 자주 사용되는 아이콘 크기를 프로퍼티로 정의할 수 있습니다.

`color` (색상): 아이콘의 색상을 변경할 수 있는 프로퍼티를 추가하여 디자인 토큰과 연결할 수 있습니다.

인스턴스 사용: 이렇게 설정된 마스터 아이콘 컴포넌트 세트의 인스턴스를 가져와서, 오른쪽 패널에서 `iconName`, `state`, `size`, `color` 등의 프로퍼티를 변경하여 원하는 아이콘을 손쉽게 선택하고 커스터마이징할 수 있습니다.

장점:

중앙 집중식 관리: 모든 아이콘을 한 곳에서 관리할 수 있습니다.

일관성 유지: 모든 아이콘에 동일한 크기, 색상, 상태 규칙을 적용하여 일관성을 유지하기 쉽습니다.

효율적인 사용: 디자이너가 필요한 아이콘을 빠르게 찾고 적용할 수 있어 작업 효율이 높아집니다.

개발 핸드오프: 개발자도 아이콘의 종류와 상태를 명확하게 파악하고 코드로 구현하기 용이합니다.