React에서 SVG 컴포넌트 형태로 사용하기

이수빈·2023년 6월 11일

React 퍼블리싱

펫모리플젝

목록 보기

8/9

각 이미지 확장자들의 특징 정리
펫모리 프로젝트에서 SVG형태의 아이콘들을 컴포넌트화 한 코드 정리

이미지 확장자

보통 많이쓰는 이미지 확장자에는 GIF, JPEG, SVG, PNG가 있다.
보통 웹에서는 SVG를 통해 이미지 작업을 많이 하지만, 상황별로 각 이미지 확장자 특성에 맞게 이미지를 사용 할 필요성을 느꼈다.
이에 각 이미지 확장자 특징들을 정리해보려고 한다.

Lossless(무손실압축) vs Lossy(손실압축)

무손실압축은 이미지를 압축해도 이미지의 퀄리티가 손상되지 않는 특징을 말한다.
손실압축은 이미지를 압축하여 크기를 줄이지만, 이미지 품질은 손상된다.

Indexed color vs Direct Color

디지털 이미지가 구현되는 이론적 내용 중 색 깊이에 대한 내용이다.
먼저 Indexed color는 컴퓨터의 저장용량과 전송속도를 절약하기 위해 한정적으로 맞춘 칼러를 제공하는 기술이다.
색깔을 256가지의 palette로만 저장 할 수 있는 속성이다.
Direct Color는 픽셀마다 색 정보를 가지고 있으며, 높은 bit depth를 가질경우 데이터 사이즈가 커지게 된다.

GIF

Lossless / Indexed only 즉 무손실압축이고 인덱스 color를 적용한다.
애니메이션 표현이 가능하므로, 간단한 이미지에 사용한다.
동영상을 움짤(움직이는 짤)로 변환할 경우 많이 사용하는 확장자이다.

JPG,JPEG(Joint Photographic Experts Group)

Lossy / Direct 즉 손실압축이고, Direct Color를 적용한다.
JPEG의 가장 큰 장점은 사진 이미지가 복잡해도 용량이 많이 나가지 않는다는 점이다.
Direct Color를 제공하기 때문에 크기가 작으면서도 비교적 선명한 사진을 제공한다.(사진이미지에 적합)
애니메이션은 제공하지 않는다.
보통 배경이미지에 JPEG 확장자를 많이 사용한다.

PNG 8,24(Portable Network Graphics)

PNG-8은 256개의 색으로 표현이 가능하고, Lossless / Indexed한 특성을 갖는다
PNG-24는 Lossless / Direct의 특성을 갖는다. JPG와 가장 큰 차이점은 무손실 압축이라는 점이다
무손실압축이지만, 파일사이즈가 JPG보다 많이 크기 때문에 웹 페이지에 사용하는 경우 페이지 로딩속도가 느려질 수 있다.
애니메이션을 지원하지 않는다

SVG(Scalable Vector Graphics)

현재 웹에서는 svg 형태의 확장자를 많이 사용한다.
SVG는 Losslesss 이며 vector형태의 파일이다.
Vector파일은 px단위로 이루어져 있는 것이 아니라 라인과 곡선단위로 이루어져 있다.
확대하거나 축소해도 이미지가 깨지지 않는 장점이 있다. 그래서 보통 로고나 아이콘에 svg 확장자를 많이 사용한다. (선명한 이미지)
애니메이션도 제공하며, XML로 작성되므로 코드편집기에서 값을 즉시 조작 할 수 있다.(width, height, fill값 , 애니메이션 등등)
보통 파일 사이즈는 작은 편에 속하나, 모양이 복잡할수록 사이즈가 커지는 단점이 있다.

프로젝트 이미지 작업방식

초기에는 모든 이미지파일을 svg로 작업하였으나, 파일 사이즈에서 문제가 생겨 일부를 jpg로 교체하였다.

배경이미지 => JPG

초기에는 SVG로 작업했으나, 이미지 크기가 너무 커서 페이지 로드속도가 너무 느린 문제가 발생하였다.
SVG를 압축시켰으나 사이즈가 거의 줄어들지 않았고, 이에 크기가 큰 모든 배경이미지(메인,로그인,배너..등등)를 JPG로 교체하는 과정을 통해 번들사이즈를 줄여 페이지 로드속도를 개선하였다.

아이콘,로고,크기작은 이미지 => SVG

SVG의 가장 큰 장점은 확대거나 축소해도 이미지가 깨지지 않는다는 점(선명함)과 코드형태로 재사용 할 수 있다는 점이다.
대부분의 아이콘은 컴포넌트 형태로 재사용하였다.

SVG 컴포넌트

width 와 height를 prop으로 넘겨받아 svg태그의 width, height 값에 넣어준다.
색상을 변경해주는 방식은 두가지가 존재한다.
첫번째는 => 컴포넌트의 path의 fill값을 모두 변경하면 svg아이콘의 색상을 변경 할 수 있다.
두번째는 => css Filter 속성을 사용하는 방법이다.
https://codepen.io/sosuke/pen/Pjoqqp => 이 사이트에 들어가 Target Color를 입력하면 그 색상과 비슷한 색상으로 CSS filter속성값을 만들어준다.

// AlbumIcon.tsx
type AlbumIconProps = {
  width?: string;
  height: string;
};

const AlbumIcon = ({ width, height }: AlbumIconProps) => {
  return (
    <svg
      width={width}
      height={height}
      viewBox="0 0 30 28"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M6.47353 19.0137C5.94411 18.5627 5.93393 18.5935 7.44074 17.0866C10.2711 14.2677 12.8775 12.4431 15.6874 15.3235C16.8175 16.4819 17.0721 16.8304 18.0699 18.5012C18.3142 18.9112 18.2938 19.0855 17.9986 18.9932C17.7339 18.9112 10.1184 18.86 7.93965 18.9112C6.97245 18.9317 7.27784 19.4033 7.94979 19.4443C9.62968 19.5468 14.1196 19.598 17.235 19.762C19.9635 19.9158 21.8267 20.1515 23.1909 19.8645C25.7668 19.3213 24.9217 19.1367 25.4308 12.4841C25.5733 10.5775 25.4817 7.15387 25.2882 6.7541C24.321 4.868 19.9737 4.10946 12.4091 4.49898C9.76201 4.63224 8.13303 4.868 8.13303 5.11402C8.13303 5.47278 9.39553 5.52404 12.908 5.31903C15.3718 5.17552 16.5426 5.19602 19.485 5.46253C22.3357 5.7188 23.9545 6.03656 24.2803 6.40558C24.8301 7.03086 24.9115 7.28713 24.8097 8.07642C24.6773 9.07072 24.5959 12.0126 24.5755 12.5252L24.2803 12.0639C21.9896 8.44544 17.8764 8.86571 14.6388 13.0582L14.3843 13.3862L13.8243 13.1709C11.5845 12.2894 8.65233 13.6835 6.41248 16.7176L5.73033 17.6299L5.6489 17.0251C5.56745 16.4101 5.61832 12.1766 5.76085 8.26093C5.8423 5.91356 5.92379 5.7598 6.5652 5.47278C7.01317 5.27802 6.99273 4.98076 6.48367 4.98076C5.76081 4.98076 5.46556 5.31903 5.16013 6.19032C4.65107 7.65615 4.11151 16.3999 4.89546 18.2757C5.20089 19.0137 5.50631 19.3828 6.14772 19.475C6.80949 19.598 6.93168 19.4135 6.47353 19.0137ZM15.2293 13.8885C15.2904 13.786 18.2022 11.4283 18.5687 11.1926C19.5664 10.5365 20.9307 10.3725 21.9284 10.7826C22.6208 11.0696 23.0993 11.4796 23.6592 12.2279C24.545 13.4374 24.5247 13.3759 24.3618 14.7905C24.2803 15.4671 24.1683 16.5024 24.1072 17.0866C23.8833 19.3418 23.5676 19.2188 18.925 18.9112L18.4363 18.0399C17.9273 17.1276 16.9601 15.8771 15.83 14.688C15.4737 14.2985 15.1886 13.9397 15.2293 13.8885Z"
        fill="white"
      />
      <path
        d="M3.12465 25.9883C1.56465 24.6563 1.46874 22.4843 1.42074 20.9243C1.25274 14.9723 1.80465 9.18826 1.80465 6.83627C1.81665 4.05227 2.39267 2.84027 3.26867 1.94027C3.80867 1.37627 3.55672 1.00427 2.83672 1.28027C2.00872 1.60427 1.50465 2.12026 1.14465 3.58426C0.232648 7.34026 0.00464784 19.5443 0.304648 22.9283C0.472648 24.8123 1.42067 26.2163 2.72867 26.4923C3.61667 26.7083 3.74865 26.5283 3.12465 25.9883Z"
        fill="white"
      />
      <path
        d="M29.5487 5.88818C30.0167 4.35218 28.7328 1.94018 25.9008 1.34018C24.0648 0.944176 20.2487 0.884173 9.97674 0.692173C8.45274 0.668173 6.68871 0.680175 6.05271 0.716175C4.88871 0.800175 4.48076 0.944173 4.78076 1.17217C5.18876 1.48417 6.50874 1.56818 12.3167 1.62818C26.4887 1.78418 27.6407 1.98817 28.5527 4.36417C28.7207 4.80817 28.6487 12.9682 28.4567 15.0682C28.3607 16.1962 28.2167 18.5122 28.1567 20.2282C27.9767 25.1962 27.4607 26.0842 24.9287 25.8922C23.7047 25.7962 15.4727 26.0122 9.01674 26.1082C2.35674 26.2042 4.76867 27.0442 5.82467 27.1642C9.80867 27.6082 26.4527 26.9962 27.9167 26.2522C30.8087 24.8002 29.5007 6.04418 29.5487 5.88818Z"
        fill="white"
      />
      <path
        d="M10.2327 6.36108C7.60751 7.35724 8.57631 11.0098 11.4619 10.9997C13.5663 10.9897 14.8893 8.34333 13.5767 7.31699C12.9933 6.85413 12.9308 7.16606 13.1496 7.72954C13.7538 9.25899 12.0453 10.9293 10.4202 10.2652C8.70132 9.57091 10.0556 6.88432 12.1287 6.88432L12.5141 6.89438C12.7849 6.90444 12.8682 6.53214 12.6182 6.43152C12.0349 6.17996 10.9203 6.09947 10.2327 6.36108Z"
        fill="white"
      />
    </svg>
  );
};

export default AlbumIcon;