GatsbyJS에서 이미지 최적화 및 동적 이미지 로딩하기

GatsbyJS에서 이미지 최적화 및 동적 이미지 로딩하기

GatsbyJS는 이미지 최적화 기능을 기본적으로 제공하여 웹사이트의 로딩 속도를 개선하고 성능을 향상시킵니다.
이번 글에서는 Gatsby에서 이미지를 관리하는 방법과 동적 이미지 로딩 기법을 알아보겠습니다.

---

1. 왜 이미지 최적화가 중요한가?

웹사이트에서 고해상도 이미지가 많아질수록 페이지 로딩 속도가 느려지고 SEO 성능도 저하될 수 있습니다.
✅ Gatsby는 이미지 최적화를 자동으로 처리하여 다음과 같은 장점을 제공합니다.

기능 설명

📉 자동 리사이징	필요에 따라 다양한 크기의 이미지 생성
🔄 포맷 변환	JPG → WebP 변환으로 용량 최적화
🚀 Lazy Loading	사용자가 이미지를 보기 전까지 로딩하지 않음
🏎 Blur-Up 효과	저해상도 블러 이미지 먼저 표시 후 고해상도 이미지 로딩

👉 Gatsby의 gatsby-plugin-image를 활용하면 위 기능을 쉽게 적용할 수 있습니다.

---

2. Gatsby 이미지 플러그인 설치 및 설정

반응형

✅ 플러그인 설치

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp

🚀 Gatsby의 gatsby-plugin-image는 성능 최적화를 위해 gatsby-plugin-sharp 및 gatsby-transformer-sharp와 함께 사용됩니다.

✅ gatsby-config.js에서 플러그인 활성화

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`
  ]
};

---

3. 정적인 이미지 삽입하기 (StaticImage)

정적인 이미지를 추가할 때는 StaticImage 컴포넌트를 사용하면 최적화된 이미지를 자동으로 적용할 수 있습니다.

✅ 이미지 추가하기 (src/images/gatsby-logo.png)

1. src/images/gatsby-logo.png 파일을 프로젝트에 추가합니다.
2. StaticImage를 사용하여 이미지 표시하기:

import React from "react";
import { StaticImage } from "gatsby-plugin-image";

const ImageComponent = () => {
  return (
    <main>
      <h1>Gatsby 이미지 최적화</h1>
      <StaticImage
        src="../images/gatsby-logo.png"
        alt="Gatsby 로고"
        width={300}
        height={300}
        placeholder="blurred"
      />
    </main>
  );
};

export default ImageComponent;

✅ 설명

• src="../images/gatsby-logo.png" → 이미지 경로 설정
• width와 height → 원하는 크기로 자동 조정
• placeholder="blurred" → Blur-Up 효과 적용
• alt="Gatsby 로고" → 접근성을 위한 설명 추가

🚀 결과: 고해상도 이미지를 로딩하기 전, 저해상도 블러 이미지가 먼저 표시됨

---

4. 동적인 이미지 삽입하기 (GatsbyImage)

페이지에서 동적으로 로딩되는 이미지를 최적화하려면 GatsbyImage와 GraphQL을 함께 사용해야 합니다.

✅ GraphQL을 이용하여 이미지 데이터 가져오기

1. src/pages/image-query.js 파일을 생성하고 다음 코드를 추가합니다.

import React from "react";
import { graphql } from "gatsby";
import { GatsbyImage, getImage } from "gatsby-plugin-image";

const ImageQueryPage = ({ data }) => {
  const image = getImage(data.file.childImageSharp);

  return (
    <main>
      <h1>GraphQL을 이용한 동적 이미지 로딩</h1>
      <GatsbyImage image={image} alt="Gatsby 예제 이미지" />
    </main>
  );
};

export const query = graphql`
  query {
    file(relativePath: { eq: "gatsby-logo.png" }) {
      childImageSharp {
        gatsbyImageData(layout: CONSTRAINED, placeholder: BLURRED)
      }
    }
  }
`;

export default ImageQueryPage;

1. http://localhost:8000/image-query에서 최적화된 이미지가 로드되는 것을 확인하세요! 🚀

✅ 설명

• GraphQL을 사용하여 이미지 파일을 쿼리
• GatsbyImage를 사용하여 고해상도 이미지를 최적화
• getImage()를 활용하여 GatsbyImage의 image 속성으로 변환

---

5. 외부 이미지 로딩 (gatsby-source-filesystem 사용)

웹사이트에서 외부 이미지 URL을 가져와 Gatsby에서 최적화하려면 gatsby-source-filesystem을 사용하면 됩니다.

✅ 외부 이미지 가져오기 설정

1. 플러그인 설치

npm install gatsby-source-filesystem

1. gatsby-config.js 파일 수정

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`
      }
    }
  ]
};

1. GraphQL에서 이미지 가져오기

query {
  allFile(filter: { sourceInstanceName: { eq: "images" } }) {
    nodes {
      childImageSharp {
        gatsbyImageData(layout: CONSTRAINED)
      }
    }
  }
}

🚀 결과: Gatsby는 외부 이미지도 내부 파일처럼 관리하여 최적화된 상태로 로딩할 수 있습니다.

---

6. 배경 이미지 최적화 (GatsbyImage 활용)

페이지의 배경 이미지를 최적화하려면 GatsbyImage를 CSS 스타일과 함께 사용하면 됩니다.

✅ 배경 이미지 설정 예제

const BackgroundImage = ({ data }) => {
  const image = getImage(data.file.childImageSharp);

  return (
    <div
      style={{
        backgroundImage: `url(${image.images.fallback.src})`,
        backgroundSize: "cover",
        height: "400px"
      }}
    >
      <h1 style={{ color: "white", textAlign: "center", paddingTop: "150px" }}>
        배경 이미지 적용 예제
      </h1>
    </div>
  );
};

export const query = graphql`
  query {
    file(relativePath: { eq: "background.jpg" }) {
      childImageSharp {
        gatsbyImageData(layout: FULL_WIDTH)
      }
    }
  }
`;

export default BackgroundImage;

🚀 결과: 배경 이미지를 최적화된 상태로 적용 가능

---

7. 결론

이번 글에서는 Gatsby에서 이미지 최적화를 수행하는 방법을 배웠습니다.
✔ StaticImage를 사용하여 정적인 이미지 최적화
✔ GatsbyImage와 GraphQL을 활용하여 동적인 이미지 로딩
✔ gatsby-source-filesystem을 통해 외부 이미지 불러오기
✔ CSS 스타일과 함께 배경 이미지 최적화 적용

🚀 다음 글에서는 Gatsby 플러그인을 활용하여 사이트의 기능을 확장하는 방법을 알아보겠습니다!