대시보드에서의 SVG 아이콘 로드를 빠르게 만든 방법

제가 운영중인 SaaS의 대시보드 아이콘들은 몇가지를 제외하면 모두 SVG 형식으로 되어있는데, 기존에는 이것들을 모두 하나씩 home.svg 불러오고 settings.svg 불러오고 하는식으로 되어있었습니다.

이렇게 하니까 파일 하나만 불러오는것보다 모두 로드되는데 걸리는 시간이 오래걸리고 대시보드가 다 뜬 후에도 아직 로드되지 않은 아이콘들이 남아있는 등의 문제가 있었습니다.

1. SVG 스프라이트 방식 (실패)

여기서 SVG를 하나로 합치는 방법중 가장 널리 쓰이는 스프라이트 방식을 처음에 사용해 봤습니다.

단순한 하얀색의 SVG 파일들은 모두 잘 작동하였지만, 브라우저 아이콘과 같은 복잡한 SVG 아이콘들은 제대로 적용이 안되고 검은색으로 깨지거나 색이 날아가는등의 문제가 있는것을 확인했습니다.

이를 해결하기 위해 찾아보니 이 방식은 여러 SVG를 하나로 합친것이다 보니 복잡한 아이콘들은 원래 깨지고, 해결할수 없다는 Claude의 답변을 보고 다음 방법으로 넘어갔습니다.

icons.css와 browsers.css라는 파일을 만들고 그 안에 background-image에 url()를 넣는 방법을 이용하여 SVG를 삽입했습니다.

이게 가능한 이유는 CSS의 url()은 일반 파일 경로 외에도 data:로 시작하는 인라인 데이터도 넣을수 있기 때문입니다.

기존에 단일 SVG 파일을 이렇게 CSS에 넣을수 있는 형태로 만드는 방법도 간단한데 아래처럼 코드를 실행하면 됩니다.

node -e “const fs=require(’fs’); const s=fs.readFileSync(’./파일이름.svg’,’utf8’); console.log(’data:image/svg+xml,’ + encodeURIComponent(s));”

이 스크립트를 터미널에서 실행하면 SVG 파일을 data:image/svg+xml 형태로 만들어 주는데 이걸 CSS에 background-image: url(”여기에 붙여넣기”) 처럼 넣으면 됩니다.

2번 방법을 이용해서 적용했을떄 대시보드가 로드될때 SVG 파일 10개 이상을 받아오던거에서 이제는 CSS 파일 하나만 받아오면 되니 훨씬 속도가 빨라졌고, 더이상 순차적으로 표시되는 문제도 없어졌습니다.

적용 전의 로드 속도를 저장해둔게 없어서 정확한 비교는 못하지만 체감상으로는 2배 이상 차이날정도로 탁월한 성능 개선이 있는것은 확실합니다.