컴포넌트 관리

아이콘 제작: Flatten vs Union

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

질문사항

아이콘 제작 시 'Flatten'과 'Union' 중 어떤 방식을 사용하는 것이 적합할까요? 상황에 따라 다르게 적용해야 할까요?

답변

아이콘 제작 시 'Flatten'과 'Union'은 각각 장단점이 있어 상황에 따라 다르게 활용하는 것이 좋습니다.

Union (합치기): 여러 셰이프를 하나의 벡터 레이어로 합치지만, 원본 셰이프의 속성(크기, 위치 등)을 유지하며 언제든지 분리하여 수정할 수 있습니다.

장점: 비파괴적 편집이 가능하여 수정이 용이합니다.

단점: 레이어 구조가 복잡해질 수 있고, 파일 크기가 약간 커질 수 있습니다.

적합한 경우: 아이콘의 형태가 자주 변경될 가능성이 있거나, 여러 셰이프의 조합을 유지하며 유연하게 수정하고 싶을 때.

Flatten (평탄화): 선택된 모든 셰이프를 하나의 단일 벡터 패스로 변환합니다. 원본 셰이프의 개별 속성은 사라집니다.

장점: 레이어 구조가 단순해지고 파일 크기가 최적화됩니다. 개발자 핸드오프 시 깔끔한 SVG 코드를 얻을 수 있습니다.

단점: 한 번 평탄화하면 원본 셰이프를 개별적으로 수정하기 어렵습니다. 수정하려면 펜 툴로 직접 패스를 편집해야 합니다.

적합한 경우: 아이콘의 최종 형태가 확정되어 더 이상 개별적인 수정이 필요 없을 때, 또는 성능 최적화가 중요할 때.

권장 사항:

일반적으로는 Union으로 작업하여 원본 수정 가능성을 열어두고, 최종적으로 라이브러리에 발행하거나 개발자에게 전달하기 직전에 Flatten하는 워크플로우를 추천합니다. 또는 Union 상태의 원본 아이콘을 별도로 보관하고, Flatten된 버전을 컴포넌트로 사용하는 방식도 좋습니다.