아이콘 폰트를 SVG로 대체하기
Delivering Octicons with SVG
GitHub.com은 더 이상 아이콘 폰트를 이용하여 아이콘을 구현하지 않게 되었습니다. 대신 모든 Octicons을 코드베이스의 SVG로 대체했습니다. 변경 사항은 대부분 감추어져(under-the-hood) 있지만 SVG 아이콘의 장점을 바로 경험할 수 있습니다.
SVG로 전환하면 아이콘이 텍스트(글리피콘) 대신 이미지로 렌더링 되어 모든 해상도에서 전체 픽셀 값에 따라 맞아떨어집니다. 왼쪽의 확대된 아이콘 폰트와 오른쪽의 선명한 SVG 버전을 비교해 보면 이해하기 쉬울 겁니다.
왜 SVG 인가요?
아이콘 폰트 렌더링 문제
아이콘 폰트는 편리하게 사용(hack)할 수 있습니다. 초기에는 유니코드 심벌로 커스텀 폰트를 사용했었습니다. 이렇게 함으로 CSS 번들에 아이콘 폰트를 가져다 사용할 수 있었습니다. element에 class를 추가하기만 하면 아이콘을 쉽게 화면에 표시되는데 그렇게 해서 CSS만을 이용해서 크기와 색상을 변경할 수 있습니다.
그런데 이러한 아이콘은 벡터임에 불구하고 종종 1x 디스플레이에서 제대로 렌더링 되지 않았습니다. Webkit 기반 웹브라우저에서는 브라우저의 창 너비에 따라 뿌옇게 보이는 증상이 나타나기도 합니다. 이유인즉 아이콘이 텍스트화 시켜 구현하였기 때문에 텍스트 가독성을 높이기 위한 sub-pixel(*소수점 단위 픽셀) 렌더링이 아이콘 폰트의 아이콘 사용하는 상황을 악화시켰습니다.
페이지 렌더링 개선
SVG가 마크업(html)에 직접 삽입되기 때문에 (이 접근법을 약간 사용한 이유에 대해 자세히) SVG를 적용하면 기존의 아이콘 폰트가 다운로드되고 캐싱되고 렌더링 되기 전 상태의 깜박거림을 더 이상 안 보게 되어도 됩니다.
접근성
아이콘 폰트의 죽음(Death to Icon Fonts)에 나와 있듯이 일부 사용자는 GitHub의 폰트를 덮어 사용합니다. 난독증이 있는 경우 특정 서체가 가독성이 좋은데 위와 같이 폰트를 바꾸는 사람들에게는 폰트 기반의 아이콘이 빈 사각형으로 표시됩니다. 그 뜻은 GitHub 페이지 레이아웃을 엉망으로 만들고 어떤 의미나 정보도 제공하지 못하게 됩니다. 그러나 SVG를 사용하게 되면 폰트를 텊어도 잘 표현이 됩니다. 특히 스크린 리더의 경우 SVG 아이콘은 발음을 추가할 수 있는 기능을 제공하기도 합니다. alt 속성을 사용하거나 아니면 그냥 놔두면 됩니다.
상황에 맞게 크기 맞춰주는 아이콘
각 아이콘에 대해 현재 모든 크기의 단일 글리프(glyph)를 제공합니다. 웹사이트 로딩은 아이콘 폰트 다운로드에 따라 다르므로 아이콘을 16px 크기로 제한해야 했습니다. 16px 그리드 용으로 최적화되었으므로 각 심벌의 비주얼에 약간의 타협이 생기게 되었습니다. 빈칸이나 마케팅 페이지에서 아이콘 크기를 조정해도 아이콘이 여전히 16px 버전으로 표시됩니다. SVG를 사용하면 전체 아이콘 세트를 쉽게 호출(fork) 할 수 있으며 지정한 모든 크기로 더 적절한 글리프를 제공할 수 있습니다. 아이콘 폰트를 사용해도 작업을 수행할 수 있었지만 사용자는 두 배의 데이터를 다운로드해야 했습니다. 어쩌면 더 많은 데이터를 다운로드해야 할지 모릅니다.
손쉬운 저작(authoring)
커스텀 폰트 제작은 어렵습니다. 몇몇 웹앱들이 이런 문제를 해결해 주기는 하지만 저희는 내부에서 직접 만들었습니다. SVG에서 새 아이콘을 추가하는 것은 다른 SVG 파일 디렉터리로 드래그해서 옮기는 거만큼이나 쉽습니다.
애니메이션 구현
애니메이션을 굳이 구현하라고 말하고 싶진 않지만 가능은 하답니다. SVG 애니메이션으로 프리로더 같은 애니메이션을 만들 수 있습니다.
그러면 어떻게 만드나요?
Octicons는 GitHub의 코드베이스에서 거의 2,500번 노출됩니다. SVG 적용 전에는 Octicons를 아래와 같이 단순한 span으로 처리를 했는데:
<span class = "octicon octicon-alert"> </ span>
SVG로 전환하기 위해 먼저 SVG 경로를 직접 html에 삽입하기 위한 Rails helper를 추가했습니다. Rails helper를 이용해서 SVG를 일반에 공개하기 전 내부 직원들에게 SVG를 전달하는 다양한 방법을 테스트할 수 있었습니다. SVG에 대한 더 나은 대안이 필요하거나 어떤 이유에서든 아이콘 폰트로 돌아가야 한다면 (Rails) helper의 출력(output)만 변경하면 됩니다.
Helper usage
Input
<%= octicon(:symbol => "plus") %>
Output
<svg aria-hidden="true" class="octicon octicon-plus" width="12" height="16" role="img" version="1.1" viewBox="0 0 12 16">
<path d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path>
</svg>
우리의 접근법
우리가 SVG를 직접 페이지 html 코드에 직접 삽입하는 방법을 보셨다시피 이렇게 해서 CSS의 fill: 을사용하여 SVG 아이콘 색상을 자유롭게 바로 변경할 수 있었습니다.
아이콘 폰트 대신에 우리는 SVG shape가 있는 파일 디렉토리에서 helper를 통해 symbol 을 선택 후 html 코드에 직접 삽입합. 예를 들어 alert 아이콘을 사용하고 싶은 경우
<% = octicon (: symbol => "alert") %> helper를 통해 원하는 symbol 을 호출하면 동일한 파일 이름의 아이콘을 찾아 SVG를 삽입하게 됩니다.
저희는 SVG 아이콘으로 대체하면서 많은 시도를 해봤습니다. GitHub의 제품 환경의 제약 조건을 감안하면 일부는 해결할 수 없었습니다.
External .svg — 우리는 처음에 하나의 외부(external) "svgstore"를 제공하려고 시도했습니다. <use> 를 사용하여 개별 스프라이트를 포함시켰는데 현재의 cross domain 보안 정책과 asset pipeline을 사용하여 외부에서 SVG 스프라이트를 제공하기가 어려웠습니다.
SVG 배경 이미지 — 색 적용이 불가능했습니다.
SVGs를 <img> 태그에서 src를 사용하여 링크걸기 — 색 적용이 불가능했습니다.
“svgstore”의 모든 SVG 아이콘을 <use>를 사용하여 모든 페이지에 임베드 시키는 것은 효율적이 않은 거 같습니다. 예를 들어 아이콘이 없는 페이지에도 임베드를 한다던가..
퍼포먼스
SVG로 전환할 때 페이지 로드 또는 퍼포먼스에는 별다른 부정적인 영향이 없었습니다. 우리는 렌더링 시간을 좀 더 극적으로 줄이기 위해 기대했지만 퍼포먼스라는 건 지각(perception)과 관련이 있는 거 같습니다. 페이지에서 SVG 아이콘은 높이/폭을 정의해서 기존 이미지처럼 렌더링 되기 때문에 jank(모니터 프레임과 브라우저 렌더링 프레임이 안 맞아서 생기는 증상)가 거의 없습니다. 뿐만 아니라 CSS를 이용해서 글꼴을 제공하지 않기 때문에 CSS 번들에서 CSS 폰트 코드를 없앨 수 있었습니다.
문제점 그리고 대응 안
Firefox 브라우저에서는 아직도 SVG에서 pixel-rounding 에러가 있고 아이콘 폰트도 동일한 에러가 있습니다.
배경색을 지정하려면 SVG를 다른 div 태그로 wrap 해야 할 수 도 있습니다.
SVG가 이미지로 표현되기 때문에 일부 CSS 코드를 재정의를 해야 될지도 모릅니다.
IE에서는 svg 요소의 너비와 높이 attributes을 제대로 정의해야 원하는 크기로 보입니다.
저희는 SVG로 전환 동안 SVG와 아이콘 폰트를 모두 제공했는데 이렇게 하니 각 SVG 아이콘을 글꼴 패밀리에 적용하는 동안 IE에서는 깨져 보일 수 있습니다. 이는 SVG로 완전히 전환하자마자 해결되었습니다.
*2016년 2월 포스트입니다. 몇몇은 이미 개선되었을지 모릅니다.
요약
아이콘 폰트를 SVG로 전환하면 아이콘을 더 쉽고, 빠르고, 접근(accessibly)이 수월해집니다. 그리고 더 좋아 보입니다.
출처: https://github.com/blog/2112-delivering-octicons-with-svg
저도 2년 전에 glyphicon으로 프로젝트를 했었는데 아이콘을 따로 관리할 수 있어서 편리하구나 생각했는데 실제로 UI 작업을 하면서 느낀 문제는 정확한 px 크기나 위치에 아이콘 폰트를 배치하기 쉽지 않다는 것을 알았습니다. 이제는 svg가 답을 찾아준 거 같네요.
