1. 이미지 스프라이트 기법은?
웹에서 성능을 향상할 수 있는 방법 중 하나는 스프라이트 기법을 사용하는 것이다.
스프라이트 기법은 여러 개의 이미지를 하나의 이미지로 만들어 놓는 것을 말한다. 보통 img 태그를 사용하여 이미지를 넣는 것이 아닌 background속성을 이용하여 삽입한다.
하나의 이미지에 여러개의 이미지를 넣은 후 그 이미지의 position (좌표의 범위)를 기억해서 가져오는 것이라고 설명할 수 있다.
자주 교체되지 않는 아이콘들을 모아 스프라이트 이미지로 제작하고 각 위치에 해당되는 이미지만 잘라 사용하여 호출하는 횟수를 줄일 수 있다.
2. SVG + 스프라이트 기법?
SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어입니다. SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 서술하며 CSS, DOM, JavaScript, SMIL (en-US) 등 다른 웹 표준과도 잘 동작하도록 설계됐습니다. SVG는 달리 말하자면 HTML과 텍스트의 관계를 그래픽에 적용한 것입니다. -MDN
SVG는 로딩속도가 빠르고 크기에 따라서 이미지가 왜곡되지 않아서 좋다. CSS로 디자인을 수정할 수 있다는 장점이 있다.
3. SVG Sprite (Spritebot)
SVG 파일로 Sprite 이미지를 제작하기 위해 Spritebot 이라는 Tool을 사용하였다.
사용방법은 다음과 같다.
1. 깃허브에 들어가서 스프라이트봇을 다운받는다.
2. 스프라이트봇이 다음과 같이 뜨면 이곳에 스프라이트 파일로 만들어줄 SVG파일을 모두 담아준다.
-
오른쪽 아래
Save Sprite Sheet버튼을 눌러서 스프라이트 이미지 파일을 생성한다. export 하면 이런 식으로 각각의 SVG 파일이 태그로 묶여있는 모습을 확인할 수 있다.
-
GlobalSvgSprite 컴포넌트를 만들어 html파일에 정적으로 삽입한다. createPortal을 이용해서 돔요소에 접근하여 svg스프라이트 코드를 넣어준다. 이 컴포넌트는 App 컴포넌트에 넣었다.
<GlovalSvgSprite.tsx>
<App.tsx>
-
SvgIcon을 만들어 필요한 id를 입력시 반환되는 컴포넌트를 구현한다. id는 입력값들에 대한 타입을 지정해줘야한다. (id가 많을수록 가독성이 떨어지고 답이 없다..)
타입스크립트를 사용했기 때문에 svg id들을 유니온 타입으로 지정했다.
-
SvgIcon컴포넌트 사용하려면 다음과 같이 id를 넘겨주면 된다.
<SVGIcon id='icon-check-on' width="20" fill="white"/>width값으로 크기를 다르게 할 수도 있다. 그리고 뒤에 자꾸 검정색이 섞여서 나타나서 fill부분에 white로 하니 원래 아이콘으로 변하였다.
처음에 id값의 타입 지정을 안해서 오류가 떴지만 저런 식으로 유니온타입을 지정하니 오류가 사라졌다..!
SVG 스프라이트 기법을 통해서 성능을 올렸고 이미지 용량도 줄일 수 있었다.
