블로그

아이콘과 SVG 작업을 위한 실용 가이드·팁·트러블슈팅 — 색상, 크기, React 컴포넌트, 그리고 라이브러리 선택까지.

SVG vs PNG 아이콘: 언제 무엇을 써야 할까?

SVG와 PNG 모두 아이콘으로 쓰이지만 동작 방식이 전혀 다릅니다. 웹·앱·이메일·인쇄에 맞는 포맷을 고르는 기준을 정리했습니다.

SVG 아이콘 색상을 바꾸는 확실한 4가지 방법 — currentColor를 쓰는 CSS 한 줄부터 마크업 직접 수정까지.

React에서 SVG를 쓰는 3가지 방법 — 인라인 JSX, props를 받는 재사용 컴포넌트, SVGR 같은 도구 — 그리고 오류를 부르는 함정까지.

인기 오픈소스 아이콘 세트 3종 비교 — 규모·스타일·선 두께 제어, 그리고 각각 어떤 프로젝트에 맞는지.

흐릿한 아이콘은 거의 항상 몇 가지 고칠 수 있는 원인에서 비롯됩니다 — 잘못된 viewBox, 반픽셀 위치, 래스터로 내보낸 파일. 체크리스트로 정리했습니다.

인라인 SVG, <img> 태그, 아이콘 폰트/컴포넌트 라이브러리 — 페이지에 아이콘을 넣는 실전 3가지 방법과 각각의 장단점.