JAMstack 기반 포트폴리오 사이트 최적화 및 추가 기능 구현

JAMstack 기반 포트폴리오 사이트 최적화 및 추가 기능 구현

1. 프로젝트 최적화 개요

JAMstack 기반 포트폴리오 사이트의 성능을 극대화하고, SEO 및 사용자 경험을 향상시키기 위해 다음과 같은 최적화 작업을 진행한다.
✅ SEO 최적화 → 검색 엔진 가시성 향상
✅ 퍼포먼스 최적화 → 로딩 속도 및 이미지 최적화
✅ CMS 연동 및 콘텐츠 자동화 → 콘텐츠 관리 효율성 증가
✅ 방문자 분석 및 트래킹 → 사용자 행동 데이터 분석
✅ 다국어 지원(i18n) → 글로벌 접근성 강화

---

2. SEO 최적화 (Search Engine Optimization)

① 메타 태그 및 Open Graph 설정

SEO 최적화를 위해 next-seo 패키지를 사용하여 메타 태그 및 Open Graph(OG) 태그를 설정한다.

🔹 next-seo 패키지 설치

npm install next-seo

🔹 SEO 설정 파일 (components/SEO.js)

import { NextSeo } from "next-seo";

export default function SEO({ title, description }) {
  return (
    https://my-portfolio.com",
        images: [{ url: "https://my-portfolio.com/og-image.png" }]
      }}
    />
  );
}

🔹 각 페이지에 SEO 적용 (pages/index.js)

import SEO from "../components/SEO";

export default function Home() {
  return (
    <>
      <SEO title="JAMstack 기반 포트폴리오" description="Next.js + JAMstack으로 만든 포트폴리오 사이트" />
      <h1>환영합니다!</h1>
    </>
  );
}

---

3. 퍼포먼스 최적화 (Performance Optimization)

① 이미지 최적화 (next/image 활용)

Next.js의 next/image를 사용하면 자동으로 WebP 변환 및 Lazy Loading 적용이 가능하다.

🔹 이미지 최적화 예제 (components/ProfileImage.js)

import Image from "next/image";

export default function ProfileImage() {
  return (
    <Image
      src="/profile.jpg"
      alt="프로필 사진"
      width={200}
      height={200}
      priority
    />
  );
}

---

② 코드 스플리팅 및 Lazy Loading

불필요한 자바스크립트 로드를 줄이기 위해 다이내믹 임포트(Dynamic Import) 및 Lazy Loading을 적용한다.

🔹 페이지별 코드 스플리팅 (pages/blog.js)

import dynamic from "next/dynamic";

const BlogPosts = dynamic(() => import("../components/BlogPosts"), {
  loading: () => <p>로딩 중...</p>,
  ssr: false,
});

export default function Blog() {
  return <BlogPosts />;
}

---

③ CDN(Content Delivery Network) 활용

정적 파일 및 API 응답 속도를 높이기 위해 Cloudflare CDN 또는 Vercel Edge Network를 활용한다.

🔹 Cloudflare CDN 적용

1. Cloudflare에서 정적 자산 캐싱 활성화
2. Cache-Control 헤더 설정 (next.config.js)

module.exports = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [{ key: "Cache-Control", value: "public, max-age=31536000, immutable" }],
      },
    ];
  },
};

---

4. CMS 연동 및 콘텐츠 자동화

① CMS(Content Management System) 연동

반응형

Strapi 또는 Contentful을 사용하여 블로그 콘텐츠를 CMS에서 자동 관리하도록 설정한다.

🔹 CMS API 호출 예제 (lib/cms.js)

export async function getBlogPosts() {
  const res = await fetch("https://cms.my-portfolio.com/api/posts");
  return await res.json();
}

🔹 블로그 페이지에서 CMS 데이터 가져오기 (pages/blog.js)

import { getBlogPosts } from "../lib/cms";

export default function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

export async function getStaticProps() {
  const posts = await getBlogPosts();
  return { props: { posts } };
}

---

5. 방문자 분석 및 트래킹

① Google Analytics 연동

Google Analytics를 사용하여 방문자 행동 데이터를 수집한다.

🔹 Google Analytics 스크립트 추가 (_app.js)

import Script from "next/script";

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script
        id="google-analytics"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'UA-XXXXXXXXX-X');
          `,
        }}
      />
      <Component {...pageProps} />
    </>
  );
}

---

6. 다국어 지원(i18n) 적용

① next-intl을 활용한 다국어 지원

JAMstack 포트폴리오 사이트가 글로벌 유저를 타겟으로 할 경우 다국어 지원이 필요하다.

🔹 패키지 설치

npm install next-intl

🔹 다국어 데이터 파일 (locales/en.json, locales/ko.json)

// en.json
{
  "greeting": "Hello, Welcome to my Portfolio!"
}
// ko.json
{
  "greeting": "안녕하세요! 제 포트폴리오에 오신 것을 환영합니다!"
}

🔹 다국어 적용 (pages/_app.js)

import { NextIntlProvider } from "next-intl";

export default function MyApp({ Component, pageProps }) {
  return (
    <NextIntlProvider messages={pageProps.messages}>
      <Component {...pageProps} />
    </NextIntlProvider>
  );
}

🔹 다국어 텍스트 적용 (pages/index.js)

import { useTranslations } from "next-intl";

export default function Home() {
  const t = useTranslations();

  return <h1>{t("greeting")}</h1>;
}

---

7. 결론

✅ SEO 최적화 적용 (next-seo)
✅ 이미지 최적화 및 Lazy Loading 적용 (next/image)
✅ CDN 활용 및 코드 스플리팅으로 성능 개선
✅ CMS(Contentful, Strapi) 연동으로 콘텐츠 자동화
✅ 방문자 분석 및 트래킹 (Google Analytics)
✅ 다국어 지원 (next-intl)로 글로벌 접근성 확보