웹사이트를 제작할 때 메뉴 아이콘, 버튼 심볼, 서비스 특징을 설명하는 일러스트는 방문자의 이해를 돕고 사이트의 완성도를 결정짓는 핵심 요소입니다. 하지만 PNG나 JPG 같은 비트맵 이미지를 아이콘으로 쓰면 모바일이나 고해상도 모니터(레티나)에서 화면이 뿌옇게 깨지거나, 로딩 속도가 느려지는 문제가 발생합니다.
초보 나 디자이너가 아니어도 깨짐 없는 선명한 아이콘과 벡터 그래픽을 무료로 구하고자 할 때 가장 유용한 도구가 바로 SVG Repo(https://www.svgrepo.com/)입니다입니다). 50만 개 이상의 고품질 벡터 아이콘과 일러스트를 제공하는 무료 오픈 라이브러리입니다. 때때로 이미지가 부족하다고 생각하는 분들이 사이트 디자인을 아이콘 등을 많이 사용하면 디자인이 좋은 것을 판단하시는 분도 있습니다. Brizy에는 어떤 빌더보다 많은 종류의 아이콘을 제공하지만 그럼에도 더 많은 종류의 아이콘은 원할 때가 있습니다. 그 때 사용하면 좋은 사이트 입니다.
SVG Repo의 장점
확대해도깨지지않는선명함:
SVG(Scalable Vector Graphics)는 픽셀이 아닌 수학적 좌표 기반의 벡터 그래픽입니다. 화면을 아무리 확대해도 선과 면이 칼같이 선명하게 유지됩니다.
압도적으로가벼운파일용량:
대부분의 SVG 파일은 수 KB에 불과해 웹사이트 로딩 속도를 전혀 저해하지 않으며, 검색엔진 최적화(SEO) 및 코어 웹 바이탈 점수 유지에 매우 유리합니다.
상업적무료이용과명확한라이선스:
개인 프로젝트는 물론 회사 홈페이지, 쇼핑몰 등 상업용 웹사이트에서 무료로 쓸 수 있는 아이콘이 대다수를 차지하며, 각 아이콘마다 라이선스가 투명하게 표기되어 있습니다.
코딩및웹빌더친화적구조:
파일 다운로드뿐만 아니라 'SVG 코드 복사' 기능을 제공하여, 파일 업로드 없이 HTML 블록이나 페이지 빌더에 코드를 그대로 붙여넣어 즉시 렌더링할 수 있습니다.
하지만 이런 SVG 파일을 사용하기 위해서는 문제가 있는데 바로 워드프레스 사이트는 SVG 업로드를 못하게 하는 설정이 되어 있기 때문입니다. 그래서 해당 SVG 파일을 사용하기 위해서는 해당 설정을 변경해야 합니다. 이런 과정이 번잡스럽다고 판단되면 어차피 아이콘은 작은 사이즈 이미지로 주로 사용하기 때문에 SVG 파일이 아니라 PNG 파일로 다운받아 바로 업로드 할 수도 있습니다.
워드프레스는 기본 보안 설정상 악성 XML 코드(XSS 해킹)가 포함될 위험 때문에 SVG 파일 업로드를 기본적으로 차단합니다. 미디어 라이브러리에 그대로 올리려고 하면 *"보안상의 이유로 이 파일 형식을 업로드할 수 없습니다"*라는 오류가 발생합니다.
SVG Support' 또는 'Safe SVG' 플러그인 사용
워드프레스 관리자 화면에서 **[플러그인] > [새로 추가]**로 이동한 뒤, 검색창에 SVG Support (또는 Safe SVG)를 검색하여 설치하고 활성화합니다.
관리자 메뉴 **[설정] > [SVG Support]**로 이동합니다. Restrict to Administrators: 보안을 위해 '관리자(Administrator)' 권한만 SVG를 업로드할 수 있도록 체크해 두는 것을 권장합니다.
이렇게 하면 SVG파일이 업로드가 가능하며 파일을 업로드해서 제대로 업로드 되는 확인 합니다.
초보자를 위한 4단계 검색 및 다운로드 방법
영문키워드로검색:
[https://www.svgrepo.com/](https://www.svgrepo.com/)에 접속해 상단 검색창에 찾고자 하는 아이콘의 영문 단어(예: cart, search, user, arrow, delivery)를 입력합니다.
스타일필터링으로통일감유지:
웹사이트의 분위기에 맞게 상단 스타일 필터를 활용해 원하는 시각적 톤을 통일합니다.
-Monotone / Line: 깔끔하고 미니멀한 라인 중심의 모던 아이콘 (테크, 포트폴리오, 비즈니스 추천)
-Solid / Glyph: 두껍고 채워진 형태의 묵직한 아이콘
-Multi Color / Flat: 친근하고 캐주얼한 다채로운 색상의 일러스트형 아이콘
아이콘상세옵션확인:
마음에 드는 아이콘을 클릭한 뒤, 우측 상세 패널에서 원하는 방식을 선택합니다.
-Download SVG: 벡터 원본 파일(.svg)을 PC로 저장합니다.
-Copy SVG: 텍스트 형태의 SVG XML 코드를 클립보드에 복사합니다. (HTML 위젯이나 코드 블록에 바로 붙여넣을 때 유용)
-Download PNG: 벡터 형식이 낯설다면 원하는 해상도(32px, 64px, 128px 등)를 지정해 일반 투명 배경 PNG로도 받을 수 있습니다.
디자인완성도를높이는컬렉션(Collections) 활용법
-SVG Repo 상단 메뉴의 [Collections] 탭을 이용하면 한 디자이너가 같은 규격, 굵기, 색감으로 제작한 '아이콘 세트'를 한 번에 둘러볼 수 있습니다.
-마음에 드는 하나의 컬렉션을 통째로 북마크해 두고 사이트 전체에 동일한 세트의 아이콘만 사용하면, 전문 디자이너가 작업한 듯 일관된 사용자 경험을 완성할 수 있습니다.
사용시반드시주의해야할 팁
개별아이콘의라이선스확인:
대부분 CC0(퍼블릭 도메인)나 MIT 라이선스로 출처 표기 없이 상업적 이용이 가능하지만, 극히 일부 아이콘은 CC-BY(출처 표기 의무)를 요구합니다. 다운로드 버튼 아래에 적힌 라이선스 표기(예: CC0 License, MIT License)를 가볍게 확인하고 사용하는 것이 안전합니다.
빌더내색상변경활용:
Monotone(단색) 라인 아이콘의 경우, 웹 빌더나 CSS에서 fill 또는 color 값을 조정하여 내 사이트의 메인 브랜드 컬러로 자유롭게 색상을 바꿀 수 있습니다.
SVG Repo 리뷰를 마무리하며
아이콘은 서비스 특징을 한눈에 이해되도록, 그리고 디자인적으로도 도움이 되는 제작 요소입니다. 하지만 중요한 건 특징을 연상 할 수 있는 형태의 아이콘이면 충분합니다. 왜냐면 아무도 아이콘 디자인과 서비스의 동일성을 일일히 따지는 사람은 없기 때문입니다. 그렇기 때문에 50만개의 아이콘도 원하는 아이콘을 찾지 못할 수도 있습니다. 되도록 Brizy에 있는 아이콘은 사용하는 것을 추천하고 부족하다면 충분히 검토해 볼만한 사이트입니다.