개발 모드 & 핸드오프내보내기 & 인쇄협업 & 프로세스

개발자 아이콘 합쳐달라 요청 의미

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

질문사항

Figma에서 개발자분들이 '아이콘을 합쳐달라'고 요청하시는데, 이것이 어떤 의미이며 어떻게 대응해야 할까요? (예: PNG 추출)

답변

개발자분들이 '아이콘을 합쳐달라'고 요청하는 것은 주로 이미지 스프라이트(Image Sprite) 형태로 아이콘을 제공해달라는 의미일 가능성이 높습니다. 이는 웹/앱 성능 최적화를 위한 일반적인 방법입니다.

이미지 스프라이트란?

여러 개의 작은 아이콘 이미지를 하나의 큰 이미지 파일로 합쳐서 사용하는 기법입니다. 웹페이지에서 여러 아이콘을 로드할 때, 각각의 아이콘마다 서버에 요청을 보내는 대신, 하나의 큰 스프라이트 이미지를 한 번만 로드하고 CSS를 이용해 필요한 아이콘 부분만 잘라서 보여줍니다. 이렇게 하면 서버 요청 횟수를 줄여 로딩 속도를 향상시킬 수 있습니다.

어떻게 대응해야 할까요?

개발자와 구체적으로 논의: 먼저 개발자에게 어떤 형식(PNG, SVG 등)과 어떤 방식으로 합치기를 원하는지 정확히 물어보는 것이 좋습니다. (예: 특정 아이콘 그룹만 합칠지, 모든 아이콘을 합칠지 등)

Figma에서 아이콘 정리:

모든 아이콘을 벡터 형태로 유지하고, 불필요한 레이어는 정리합니다.

아이콘 컴포넌트를 만들고, 각 아이콘이 명확한 이름을 가지도록 합니다.

아이콘 간의 간격을 일정하게 유지하여 스프라이트 생성 시 용이하게 합니다.

스프라이트 이미지 생성:

수동: Figma에서 모든 아이콘을 하나의 프레임에 배치하고, 적절한 간격을 둔 후 PNG 또는 SVG로 내보냅니다. 개발자가 이 이미지를 받아 CSS로 각 아이콘의 위치를 지정하여 사용합니다.

플러그인 활용: Figma 커뮤니티에는 이미지 스프라이트를 생성해주는 플러그인들이 있습니다. 예를 들어 'Sprite Sheet Generator' 같은 플러그인을 검색하여 활용할 수 있습니다. 이 플러그인들은 아이콘들을 자동으로 정렬하고 하나의 이미지로 내보내는 기능을 제공합니다.

SVG 스프라이트: SVG 아이콘의 경우, 여러 SVG를 하나의 SVG 파일 내 `<symbol>` 태그를 사용하여 SVG 스프라이트로 만들 수도 있습니다. 이는 벡터 기반이므로 해상도에 구애받지 않는 장점이 있습니다.

PNG로 개별 추출하는 것도 하나의 방법이지만, 개발자가 '합쳐달라'고 요청했다면 성능 최적화를 염두에 둔 것이므로 이미지 스프라이트 방식을 고려하는 것이 좋습니다.