svg

피그마 커뮤 (새 탭에서 열림)

피그마(Figma)는 2022년 처음으로 개최된 '피그마 커뮤니티 어워즈(Figma Community Awards)'의 최종 우승작들을 발표하며 전 세계 디자인 생태계의 혁신을 공유했습니다. 이 어워즈는 전 세계 디자이너들이 매일 1,600개 이상 업로드하는 UI 키트, 플러그인, 위젯 등의 리소스 중 커뮤니티의 투표를 통해 가장 가치 있는 도구들을 선정하는 행사입니다. 이를 통해 피그마는 제작자들의 공로를 기리는 동시에, 협업 디자인의 미래를 이끌어갈 우수한 리소스들을 공식적으로 조명했습니다. #### 생산성을 극대화하는 플러그인과 위젯 * **Similayer (Dave Williames):** 다양한 레이어 속성을 기준으로 유사한 레이어를 한꺼번에 선택할 수 있게 해주어 복잡한 편집 작업을 비약적으로 단축합니다. * **Content Reel (Microsoft/Eugene Gavriloff):** 텍스트 스트링, 이미지, 아이콘 등 디자인에 필요한 더미 데이터를 한데 모아 실시간으로 적용할 수 있는 유틸리티를 제공합니다. * **FigJenda (PG Gonni):** 피그잼(FigJam) 타이머와 연동되는 인터랙티브 아젠다 위젯으로, 워크숍이나 회의의 흐름을 효율적으로 관리할 수 있도록 돕습니다. * **Rock Paper Scissors (Alex Einarsson):** 팀원 간의 간단한 의사결정을 돕는 가위바위보 게임 위젯으로, 협업 과정에 재미 요소를 더했습니다. #### 디자인 자산 및 시스템 리소스 * **Ant Design Open Source (Mr Biscuit/Vinh Bui):** 유연한 인스턴스 활용과 구조적 단순함을 갖춘 대규모 오픈소스 디자인 시스템으로, 완성도 높은 UI 구축을 지원합니다. * **css.gg (Lona/Astrit):** 순수 CSS, SVG 및 피그마용 UI 아이콘 700여 개를 포함한 방대한 아이콘 세트입니다. * **Sketch Elements Brushes Set (Streamline):** 추상적인 요소와 스케치 주석 테마를 제공하여 그래픽 디자인의 디테일을 살려주는 리소스입니다. #### 협업 및 교육용 템플릿 * **Remote Design Sprint (Miranda Mazzara 외):** 사전 경험이 없는 팀도 5일간의 디자인 스프린트를 원활하게 진행할 수 있도록 설계된 피그잼 전용 템플릿입니다. * **Customer Journey Map (Fuad Aslan):** 고객의 경험을 심도 있게 분석하고 시각화할 수 있는 프레임워크를 제공합니다. * **Micro interactions - Prototyping (Rusmir Arnautovic):** 피그마의 프로토타이핑 기능을 활용해 정교한 마이크로 인터랙션을 구현하는 방법을 보여주는 교육 자료입니다. #### 커뮤니티 어워즈의 운영 방식과 의의 * **사용자 참여 기반 선정:** 피그마 커뮤니티 프로필을 보유한 사용자들이 직접 후보를 추천하고 최종 후보군에 대해 투표를 진행하여 투명성을 확보했습니다. * **창작자 지원 및 보상:** 최종 우승자에게는 피그마 컨퍼런스인 'Config'에서 수상의 영예와 함께 데스크톱에 전시할 수 있는 실물 트로피, 특별 굿즈가 제공됩니다. * **공유 생태계 장려:** 누구나 자신의 작업을 퍼블리싱하여 후보가 될 수 있도록 장려함으로써 디자인 지식의 공유와 개방성을 강조합니다. 이번 어워즈에서 선정된 도구들은 피그마 전문가들이 검증한 최상의 리소스들입니다. 업무 효율을 높이고 싶거나 팀의 협업 프로세스를 개선하고자 한다면, 위에서 언급된 플러그인과 템플릿들을 커뮤니티에서 검색하여 실무에 직접 활용해 보시는 것을 적극 추천합니다.

피그마의 PDF 내보 (새 탭에서 열림)

피그마는 최근 SVG 내보내기(Export) 엔진을 재설계하여 시각적 품질은 그대로 유지하면서 코드의 양을 획기적으로 줄이는 업데이트를 진행했습니다. 불필요한 메타데이터와 중복된 패스 데이터를 제거함으로써 파일 크기를 최적화하고 웹 성능을 개선하는 데 중점을 두었습니다. 이번 개편의 핵심은 별도의 최적화 도구 없이도 개발자가 바로 실무에 사용할 수 있는 깨끗하고 효율적인 SVG 결과물을 제공하는 것입니다. **불필요한 메타데이터 및 구조 정리** * 피그마 전용 네임스페이스(`xmlns:figma`)와 같은 비표준 속성을 제거하여 표준 SVG 문법에만 집중하도록 코드를 정제했습니다. * 기본값과 동일한 속성(예: `fill="none"`)이나 렌더링에 영향을 주지 않는 불필요한 그룹(`<g>`) 태그를 삭제하여 코드 구조를 단순화했습니다. * 레이어 이름이나 편집용 데이터 등 브라우저 렌더링에 필요 없는 정보를 과감히 생략하여 파일 용량을 줄였습니다. **패스 데이터 최적화와 정밀도 제어** * 좌표값의 소수점 자릿수를 지능적으로 제한하여 데이터 길이를 줄이면서도 시각적 왜곡이 발생하지 않도록 정밀도를 조정했습니다. * 절대 좌표를 상황에 따라 상대 좌표로 변환하거나, 중복된 선분 및 곡선 명령어를 결합하는 방식으로 패스(`d`) 속성 내의 문자열을 최적화했습니다. * 연속된 직선을 하나의 명령어로 합치는 등 수학적 계산을 통해 패스 데이터를 재작성하여 가독성과 성능을 동시에 높였습니다. **트랜스폼 베이킹과 클리핑 효율화** * `transform` 속성을 별도로 사용하는 대신, 회전이나 크기 조절 값을 좌표 데이터에 직접 반영(Baking)하여 브라우저의 렌더링 계산 부하를 줄였습니다. * 복잡하게 중첩된 클립 패스(Clip-path)와 마스크 구조를 논리적으로 결합하거나 단순화하여 불필요한 레이어 계층을 제거했습니다. * `viewBox` 설정을 최적화하여 아이콘이나 그래픽 요소가 의도한 크기대로 정확하고 효율적으로 렌더링되도록 개선했습니다. 이번 업데이트를 통해 피그마에서 내보낸 SVG는 외부 최적화 도구(예: SVGO)를 거치지 않고도 즉시 프로덕션 환경에 적용하기 적합한 수준이 되었습니다. 개발자는 더 가볍고 읽기 쉬운 코드를 다룰 수 있게 되었으며, 웹 서비스의 에셋 로딩 속도를 향상시키는 데 기여할 것으로 보입니다. 가급적 최신 버전의 피그마에서 SVG를 다시 내보내어 기존 프로젝트의 에셋을 경량화하는 것을 권장합니다.