컴포넌트 관리

아이콘 컬러 관리 방법

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

질문사항

아이콘을 관리할 때, 모든 아이콘을 블랙으로 관리하고 앱에서 컬러가 들어가야 하는 경우에만 인스턴스에서 색깔을 바꾸는 방식으로 작업하시나요?

네, 많은 디자이너들이 아이콘을 관리할 때 유연성과 효율성을 위해 다음과 같은 방법을 사용합니다.

모든 아이콘을 독립된 컴포넌트로 관리: `Assets` 패널에서 쉽게 검색하고 재사용할 수 있도록 각 아이콘을 개별 컴포넌트로 만듭니다.

아이콘 패스 아웃라인 처리 (Outline Stroke): 아이콘의 스트로크를 패스로 변환하여(Outline Stroke) 일관된 형태로 관리하고, 크기 조절 시 왜곡을 방지합니다.

모든 패스의 이름 동일하게 설정: 아이콘 컴포넌트 내의 모든 패스 레이어 이름을 동일하게 설정하면, 인스턴스에서 색상을 변경할 때 모든 패스에 일괄적으로 색상이 적용되어 편리합니다. (예: `Vector`, `Path` 등)

메인 컴포넌트의 아이콘 색상은 블랙으로 설정: 기본 상태의 메인 컴포넌트 아이콘 색상을 블랙(또는 가장 기본이 되는 색상)으로 설정합니다.

인스턴스에서만 색상 변경: 실제 디자인에 적용할 때는 메인 컴포넌트의 인스턴스를 가져와서 필요한 색상으로 오버라이드하여 사용합니다. 이는 메인 컴포넌트의 무결성을 유지하면서 다양한 색상 변형을 가능하게 합니다.

스태틱한 컬러를 사용하는 아이콘: 만약 아이콘 자체가 특정 고정된 컬러(예: 브랜드 로고 아이콘, 특정 상태를 나타내는 아이콘)를 가져야 한다면, 메인 컴포넌트 단계에서부터 해당 컬러를 적용하여 관리할 수도 있습니다.

이러한 방식을 통해 아이콘의 재사용성을 높이고, 디자인 시스템 내에서 일관된 아이콘 관리를 할 수 있습니다.