블로그
아이콘과 SVG 작업을 위한 실용 가이드·팁·트러블슈팅 — 색상, 크기, React 컴포넌트, 그리고 라이브러리 선택까지.
SVG vs PNG 아이콘: 언제 무엇을 써야 할까?
SVG와 PNG 모두 아이콘으로 쓰이지만 동작 방식이 전혀 다릅니다. 웹·앱·이메일·인쇄에 맞는 포맷을 고르는 기준을 정리했습니다.
가이드 읽기SVG 아이콘 색상 바꾸는 방법
SVG 아이콘 색상을 바꾸는 확실한 4가지 방법 — currentColor를 쓰는 CSS 한 줄부터 마크업 직접 수정까지.
가이드 읽기SVG 아이콘을 React 컴포넌트로 만드는 방법
React에서 SVG를 쓰는 3가지 방법 — 인라인 JSX, props를 받는 재사용 컴포넌트, SVGR 같은 도구 — 그리고 오류를 부르는 함정까지.
가이드 읽기Lucide vs Tabler vs Heroicons: 어떤 아이콘 라이브러리?
인기 오픈소스 아이콘 세트 3종 비교 — 규모·스타일·선 두께 제어, 그리고 각각 어떤 프로젝트에 맞는지.
가이드 읽기SVG 아이콘이 흐릿한 이유 (그리고 해결법)
흐릿한 아이콘은 거의 항상 몇 가지 고칠 수 있는 원인에서 비롯됩니다 — 잘못된 viewBox, 반픽셀 위치, 래스터로 내보낸 파일. 체크리스트로 정리했습니다.
가이드 읽기웹사이트에 아이콘 넣는 3가지 방법
인라인 SVG, <img> 태그, 아이콘 폰트/컴포넌트 라이브러리 — 페이지에 아이콘을 넣는 실전 3가지 방법과 각각의 장단점.
가이드 읽기아이콘 크기, 몇 px이 맞을까?
자주 쓰는 UI 아이콘 크기, 24px 그리드가 기본인 이유, 그리고 텍스트와 정렬되고 선명하게 크기를 잡는 법.
가이드 읽기SVG 선 두께(stroke width): 개념과 고르는 법
외곽선 아이콘에서 stroke-width가 동작하는 방식, 크기에 따라 함께 커지는 이유, 타이포그래피에 맞는 두께 고르는 법.
가이드 읽기아이콘으로 파비콘 만드는 방법
2026년 기준 현대적·최소 파비콘 세팅 — SVG 하나, PNG/ICO 폴백, 180px Apple 터치 아이콘 — 그리고 연결 마크업까지.
가이드 읽기SVG 파일 크기 줄이는 방법
에디터에서 내보낸 SVG는 메타데이터와 과한 정밀도로 무겁습니다. SVGO와 몇 가지 수동 정리로 줄이는 법을 정리했습니다.
가이드 읽기접근성 있는 SVG 아이콘 만드는 법
장식용 vs 정보용 아이콘, 스크린 리더에서 숨겨야 할 때, 그리고 아이콘만 있는 버튼을 올바르게 레이블하는 법.
가이드 읽기SVG가 안 보일 때: 흔한 원인과 해결법
아무것도 안 보이는 SVG는 보통 몇 가지 원인 중 하나입니다 — 크기 없음, 색 없음, 깨진 viewBox, 서버 MIME 타입 문제.
가이드 읽기SVG를 PNG로 변환하는 법
벡터 SVG를 선명한 PNG로 — 온라인, 브라우저 canvas, 또는 sharp·ImageMagick·Inkscape 커맨드라인으로 변환하는 법.
가이드 읽기CSS로 SVG 아이콘 애니메이션 넣기
순수 CSS로 SVG 아이콘에 모션을 — 호버 효과, 스피너, 라인 드로잉 애니메이션 — 그리고 이 모든 걸 가능하게 하는 한 가지 규칙.
가이드 읽기SVG 스프라이트: <symbol>과 <use>로 아이콘 재사용
아이콘을 한 번 정의하고 SVG 스프라이트로 어디서나 재사용 — 마크업 절감, currentColor 테마, 캐시되는 단일 파일.
가이드 읽기2026년 최고의 무료 아이콘 라이브러리
2026년 최고의 무료 오픈소스 아이콘 라이브러리 정리 — 각각의 강점, 라이선스, 선택 기준까지.
가이드 읽기