SVG 아이콘, 이미지 로딩 문제

§

웹에 구현되는 이미지는 크게 vector 형태와 raster 형태로 나눌 수 있습니다.

gif, jgp, png 등이 raster 이미지고 .eps, .ai, svg 등이 vector 형식의 이미지 입니다.

아이콘이나 이미지를 vectorize 된 형태인 svg 로 웹에 올리는 이유는 두가지 입니다.

raster 이미지 형식들과 달리 svg 는 크기를 키우거나 줄여도 이미지가 깨지지 않아서 모바일폰, 테블렛등 어느 기기에서나 선명하게 구현되기 때문입니다. 특히 retina display 를 쓰는 아이폰, 아이패드 같은 기기에서는 jpg 나 png 가 심하게 깨지기 때문에 요즘 웹에 png 나 jpg 로 아이콘등을 만들어 올리는 경우는 없습니다. (물론 아직 아이폰이나 아이패드를 많이 쓰지 않는 한국에서는 큰 문제가 아닐지도 모르겠습니다.)

또 다른 이유는 로딩속도 때문입니다. png 나 jpg 같은 이미지는 크기가 커지면 파일사이즈가 exponentially (제곱으로? 기하급수적으로?) 커지지만, svg 는 파일 사이즈가 전혀 커지지 않습니다.

그런데 문제는, 이 svg 의 디자인 형태가 복잡해지면, 다시말해 svg 파일에 포함된 vector definition 들이 복잡한 경우, 이 vector definition 을 브라우저가 읽는데 많은 시간이 걸리게 됩니다.

오래전이지만 Adobe 에서는 플래시에서 발생하는 이 속도문제를 vector definition 을 bitmap 형태로 cache 했다가 제공하는 방식으로 해결했었습니다. 하지만 브라우저에는 이런 기능이 존재하지 않는다는.

svg 관련 브라우저 기능이 개선되기를 물론 기다릴 수 있지만, 문제는 지금 당장 어떻게 하냐고?

해결책은 아이콘폰트를 사용하는 것 입니다.

svg -> icon font 변환.

svg 를 icon font 로 변환하는 작업은 폰트 만들어 보신분들은 다들 하실 줄 아는 작업이니 설명은 생략하고, 무료 폰트 생성기는 하나 소개합니다.

https://github.com/fontforge/fontforge

또 다른 방법은 온라인 아이콘 폰트 생성기를 사용하는 것 입니다. IcoMoon 도 있는데 이거는 유료라서… 소개안합니다. Fontello 좋습니다. Fontello 쓰세요. 랭커님도 이거 쓰시는 것 같던데.. ㅎㅎㅎ

정말 골때리는 건, 아이콘 폰트 사용하다가 svg 로 바꾸는 사람들이 있다는. ㅎㅎㅎ

http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/

속도문제 때문에 아이콘폰트를 svg 로 바꾸는거죠.

조금 혼동이 오실 수 있는데 (아니 svg 가 빠르다는거야, 아이콘폰트가 빠르다는거야? 대체 뭔말이야?) 간단명료하게 이렇게 설명드리겠습니다.

jpg/png -> font awesome 같은 아이콘 폰트 -> svg -> 직접 제작한 아이콘폰트

아이콘폰트가 느린게 아니라 font awesome 이 느린겁니다. 느린 이유는, font awesome 에는 무려 675개나 되는 아이콘폰트가 포함되어 있기 때문입니다.

css 가 느린게 아니죠. bootstrap 이 느린거죠. 같은 이치.

하나의 사이트에 많아봐야 아이콘 5-6개 밖에 안쓰거든요. 그런데 아이콘 몇개 쓰자고 수백개나 되는 아이콘들을 로딩하는게 font awesome 인겁니다.

물론 front-end 의 진정한 고수라면 html unicode 를 쓰겠죠. 라고 말하고 싶으나, unicode 는 아재들이나 쓰던거라서.. 😅

아마 30대줄에 들어서신 분들은 이런 unicode 를 한 15년전쯤에 보셨을 수도… ㅋㅋㅋ

♣ ♤ ♥ ♦

IE5 에서도 지원합니다. 그리고 css 를 조금 적용해 주면 촌스럽지도 않구요. (조금 고급기법 삽질이지만, 두개의 unicode 를 겹쳐 쓸수도 있습니다.)

요즘 젊은 개발자들은 이런 unicode 존재도 몰라서 아이콘 폰트 안써도 되는 경우에도 아이콘폰트를 가져다 쓰더라구요. chevron, 화살표 등등, html unicode 도 다 합하면 수백개는 되거든요. 그리고 브라우져 자체에서 지원하는 거라서 속도에 아무런 영향도 주지 않습니다. 속도측면에서는 정상적인 html rendering 속도와 동일하게 읽혀진다고 보시면 됩니다.

TL;DR

가능하면 html unicode 를 사용하고 적절한 unicode 가 없는 경우에는 svg 를 icon font 로 만들어 쓴다. – 이게 best practice 되겠습니다.

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: , ,

카테고리: ,

Ω

8 Comments

  • bastcode says:

    장인 정신이 느껴집니다 -_-b

    • Matthew says:

      왠 장인이요? ㅠㅠㅠㅠ

      지금 돌려까기 시전하시는건가요?

      https://uploads.disquscdn.com/images/d59f6774a1b0334769b41a9ed011e443b564004d1d8c1086758200f60f09cb39.jpg

      이 얘기가 하고 싶으셔서? ㅋㅋㅋㅋ

      • bastcode says:

        헬조선에선 장인정신 이라 하면 master class 의 뜻으로 사용되고 있습니다 ㅎㅎ

        • Matthew says:

          훔… 아닌것 같던데…

          뭐 그렇게 주장하시면 제가 그렇게 믿어야지 어떻게 확인할 수 있는 것
          도 아니고 별수 있겠습니까? ㅎㅎㅎㅎ

          장인정신 이러니까 왠지 노인장 같은 단어가 떠올라서… ㅋㅋㅋ

          • bastcode says:

            노인장 이라고 하면 홍준표가 막말한 “경상도는 장인어른을 공경의 의미를 담아 영감탱이 라고 부른다!” 라는 말로 해야죠 ㅋㅋㅋ

            왜 가만히 있는 경상도 사위들을 전부 패륜으로 만드냐고 유승민이 반박 했었죠 ㅋㅋㅋ

            아참. 장인정신의 장인은 장인어른의 장인(丈人)이 아니라 job master 혹은 예술가를 두르이르는 말로 장인(匠人) 입니다.

            Trust me~

          • Matthew says:

            ok. I trust you. ㅎㅎㅎ

          • Word says:

            장인정신을 한영사전을 찾아보니까 artisan spirit라고 되어 있네요.ㅎㅎ 의미가 전달되는지 모르겠습니다.

            장인정신이란 자기가 하고 있는 일에 전념하거나 한 가지 기술에 전공하여 그 일에 최고의 경지에 이르고자 하는 철저한 직업 정신을 말한다.

          • Matthew says:

            네. 엄청난 고수들을 artist, wizard (이건 좀 예전에 쓰던 표현) 라고 하기도 합니다.

            아마, “이거 예술이다.” 라는 식의 표현이 영어에서 한글로 옮겨간게 아닌가 생각됩니다.

            물론 저는 예술과 거리가 멉니다. 끝없는 삽질을 할뿐 입니다. ㅎㅎ

Leave a Reply

Your email address will not be published. Required fields are marked *