컴포넌트 관리

아이콘 크기별 사용 방식

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

질문사항

실무에서 아이콘을 사용할 때, 각각 크기별로 만들어서 사용하나요 아니면 하나의 크기만 만들어서 스케일로 조절하나요?

답변

실무에서 아이콘을 관리하는 방법은 회사나 디자인 시스템의 복잡성에 따라 다를 수 있습니다.

하나의 크기로 만들고 스케일 조절: 피그마와 같은 벡터 기반 툴에서는 하나의 마스터 아이콘을 만들고 필요에 따라 스케일(Scale) 도구(단축키 K)를 사용하여 크기를 조절하는 방식이 보편화되고 있습니다. 이 방법은 관리의 효율성이 높고, 파일 용량을 줄일 수 있다는 장점이 있습니다.

주의사항: 선(Stroke)으로 이루어진 아이콘의 경우, 스케일 조절 시 선의 굵기도 함께 변합니다. 만약 특정 크기에서 선 굵기를 일정하게 유지해야 한다면, 스케일 조절 후 선 굵기를 수동으로 조정하거나, 아예 선을 면(Outline Stroke)으로 변환하여 사용하는 것을 고려할 수 있습니다.

크기별로 아이콘 제작: 특정 크기(예: 16px, 24px, 32px)에서 아이콘의 시각적 일관성과 가독성을 최적화해야 하는 경우, 각 크기별로 아이콘을 별도로 제작하기도 합니다. 특히 작은 크기에서는 픽셀 그리드에 맞춰 수동으로 조정하여 선명도를 높이는 '픽셀 퍼펙트(Pixel Perfect)' 디자인을 적용하기도 합니다.

장점: 각 크기에서 최적화된 시각적 품질을 보장합니다.

단점: 관리해야 할 아이콘의 수가 많아지고, 업데이트 시 작업량이 늘어납니다.

결론: 최근에는 하나의 마스터 아이콘을 만들고 스케일로 조절하는 방식이 더 많이 사용되지만, 중요한 아이콘이나 특정 크기에서 시각적 품질이 매우 중요한 경우에는 크기별로 최적화된 아이콘을 별도로 제작하는 하이브리드 방식을 사용하기도 합니다. 어떤 방법을 선택할지는 프로젝트의 요구사항과 디자인 시스템의 규모에 따라 결정하는 것이 좋습니다.