튜토리얼5 분 읽기
온라인으로 SVG 아이콘 만들기
2026년 6월 게시 · Svggram 팀
아이콘은 웹과 앱 디자인에서 핵심적인 요소입니다. 이 가이드에서는 Svggram의 온라인 SVG 편집기를 이용해서 아이콘을 만드는 방법을 소개합니다.
아이콘에 왜 SVG를 사용할까?
- 확장성 — 어떤 크기로 확대/축소하더라도 셔프게 남습니다
- 파일 크기가 작음 — PNG보다 작습니다
- 편집이 쉬움 — 색상과 모양을 쉬우게 변경할 수 있습니다
Steps
Step 1: 캔버스 설정하기
정사각형 캔버스로 시작하세요 (24×24, 32×32, 48×48 픽셀이 표준 아이콘 크기입니다).
Step 2: 사용할 도구 선택하기
기본 모양은 직사각형 도구, 커스텀 모양은 경로 도구, 조정은 선택 도구를 활용하세요.
Step 3: 아이콘 디자인하기
직사각형, 원, 선을 조합해 아이콘을 만드세요. 대칭을 위한 정렬 도구를 활용하세요.
Step 4: 색상과 스타일 추가하기
일관된 색상 패리트를 선택하고 채우기와 스토릭 색상 픽서를 이용하세요.
Step 5: 아이콘 내보낰기
웹에서 쓰려면 SVG로 저장하고, 특별한 경우는 PNG로 내보내세요.
최고의 실용 팁
- 간단하게 설계하기
- 일관된 스토릭 두께 사용하기
- 그리드에 말아 설계하기
- 작은 크기에서도 테스트하기