Web 2024. 5. 19. 07:10

들어가기 전에

이 글은 Next.js - Chapter 3 : Optimizing Fonts and Images를 번역한 글입니다.

폰트와 이미지 최적화

이전 챕터에서, 우리는 Next.js 어플리케이션에서 스타일하는 방법을 배웠습니다. 이번엔 커스텀 폰트와 히어로 이미지를 추가하면서 계속해서 홈페이지에서 작업을 해봅시다.

이번 챕터에서...

여기 우리가 다룰 주제들이 있습니다.

next/font에 커스텀 폰트를 추가하는 방법
next/image에 이미지를 추가하는 방법
Next.js에 이미지와 폰트들을 최적화 하는 방법

왜 폰트를 최적화 하나요?

폰트는 웹사이트 디자인에서 중요한 역할을 합니다. 그러나 만약 폰트를 가져오고 불러와야 한다면, 커스텀 폰트를 사용하는것은 웹 퍼포먼스에 영향을 미칠 수 있습니다.

Cumulative Layout Shift는 웹사이트의 퍼포먼스와 유저 경험을 평가할때 사용하는 측정항목 입니다. 폰트를 쓰면, 브라우저가 처음에 대체 폰트나 시스템 폰트로 렌더링을 하고 커스텀 폰트가 다 불러온 후 이것을 대체할때 레이아웃의 변형이 일어납니다.

Next.js는 어플리케이션 내에서 next/font 모듈을 쓸 때, 자동으로 최적화를 해줍니다. 이것은 빌드시간에 미리 폰트를 다운로드 받고 다른 정적 assets과 함께 호스팅합니다. 이것은 유저가 당신의 어플리케이션을 방문할때, 폰트때문에 퍼포먼스에 영향을 미칠 추가적인 네트워크 요청은 하지 않는다는것을 의미합니다.

퀴즈할 시간입니다!

익힌걸 테스트해보고 무엇을 배웠는지 봅시다.

Next.js는 어떻게 폰트 최적화를 하나요?

A 퍼포먼스를 향상시킬 추가적인 네트워크에 의해

B 모든 커스텀 폰트를 불가능하게 함으로서

C 동작시간에 모든 폰트를 미리 불러옵니다.

D 추가적인 네트워크 요청이 필요없도록 다른 정적파일과 함께 폰트를 호스팅합니다.

주 폰트 추가하기

어플리케이션에 커스텀 구글 폰트를 추가하고 어떻게 동작하는지 봅시다!

/app/ui 폴더 내에, fonts.ts란 이름으로 파일을 만듭시다. 어플리케이션 전반에 사용될 폰트들을 저장한 파일입니다.

next/font/google모듈에서 Inter폴트를 불러오세요(import) - 이것은 주 폰트가 될겁니다. 그리고는 불러오고 싶은 subset을 명시하세요. 여기서는 latin입니다:

/app/ui/fonts.ts

import { Inter } from 'next/font/google';

export const inter = Inter({ subsets: ['latin'] });

마지막으로, /app/layout.tsx에 <body>에 폰트를 추가하세요

/app/layout.tsx

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

Inter클래스를 <body>에 추가함으로서, 어플리케이션 전반에 해당 폰트가 적용이 됩니다. 또한 폰트를 부드럽게 나타나게해주는 Tailwind의 antialiased도 불러오고 있습니다. 이 강의에서 필수는 아니지만, 글을 보기 좋게 만들어줍니다.

브라우저로 가서, 개발 툴을 열고 body를 선택하세요. Inter와 Inter_Fallback이 스타일에 적용된걸 볼 수 있습니다.

실습해보기: 두번째 폰트 추가하기

어플리케이션의 특정 요소에 폰트를 더 추가할 수 있습니다.

이제 당신의 차례입니다! fonts.ts 파일에서, Lusitana라고 불리는 두번째 폰트를 불러오세요 그리고 /app/page.tsx파일의 <p>태그에 넘겨주세요. 전에 했던것처럼 폰트의 서브셋을 명시하는것 외에도, 폰트의 weigiht를 명시해야 합니다.

준비가 되면, 정답을 보려면 아래 코드를 펼치세요.

Hints:

만약 폰트의 옵션으로 어떤 weight를 넘겨야 할지 잘 모르겠다면, 코드에디터의 에러표시를 확인하세요.
Google Fonts페이지를 방문해서 어떤 옵션들이 가능한지 Lustina폰트를 검색해보세요.
여러가지 폰트 추가하기와 옵션 전체리스트 문서를 확인하세요.

/app/ui/fonts.ts

import { Inter, Lusitana } from 'next/font/google';

export const inter = Inter({ subsets: ['latin'] });

export const lusitana = Lusitana({
  weight: ['400', '700'],
  subsets: ['latin'],
});

/app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import { lusitana } from '@/app/ui/fonts';

export default function Page() {
  return (
    // ...
    <p
      className={`${lusitana.className} text-xl text-gray-800 md:text-3xl md:leading-normal`}
    >
      <strong>Welcome to Acme.</strong> This is the example for the{' '}
      <a href="https://nextjs.org/learn/" className="text-blue-500">
        Next.js Learn Course
      </a>
      , brought to you by Vercel.
    </p>
    // ...
  );
}

마지막으로, <AcmeLogo /> 컴퍼넌트 Lusitana를 씁니다. 이것은 에러를 안나게 하려고 주석처리 되어있었고, 이제 주석을 풀 수 있습니다.

/app/page.tsx

// ...

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
        <AcmeLogo />
        {/* ... */}
      </div>
    </main>
  );
}

훌륭합니다. 이제 2개의 커스텀 폰트를 당신의 어플리케이션의 추가했습니다. 이제 홈페이지에 히어로 이미지를 추가해봅시다.

왜 이미지를 최적하나요?

Next.js는 최상단 /public 폴더 하위에 정적 파일들을(assets) 제공할 수 있습니다. /public 안에 있는 파일들은 어플리케이션에서 참조될 수 있습니다.

표준 HTML로는, 아래와 같이 이미지를 추가할 수 있을겁니다.

<img
  src="/hero.png"
  alt="Screenshots of the dashboard project showing desktop version"
/>

그러나, 이것은 당신이 몇가지 메뉴얼 작업을 해야한다는걸 의미합니다.

다른 화면 사이즈에 맞게 이미지가 responsive 되도록 해야합니다.
다른 디바이스들에 맞게 이미지 사이즈를 명시해야합니다.
이미지가 불러와지면서 레이아웃 변형이 되는걸 막아야합니다.
유저의 보이는 영역 넘어의 이미지를 늦게 로딩되에 해야합니다.

이미지 최적화는 웹 개발에서 그것 자체만으로도 고려할것이 많은 주제입니다. 이러한 최적화들을 일일이 작업하는것보다는, 자동으로 이미지를 최적화 해주는 next/image 컴퍼넌트를 사용할 수 있습니다.

컴퍼넌트

컴퍼넌트는 HTML <img>태그의 확장이고, 다음과 같은 이미지 최적화가 자동으로 됩니다.

이미지를 불러올때 레이아웃 변형을 막아줍니다.
작은 화면 사이즈에 큰 사이즈의 이미지가 전달되지 않도록 리사이징 해줍니다.
이미지들은 기본적으로 늦게 불러와집니다(뷰포트에 들어오면 이미지를 로드합니다)
브라우저가 지원을 한다면, WebP 그리고 AVIF 같은 현대 포맷을 제공해줍니다.

PC화면 히어로 이미지 추가하기

<Image> 컴퍼넌트를 사용해봅시다. /public폴더를 들여다보면, 두 이미지가 있다는걸 볼겁니다: hero-desktop.png, hero-mobile.png. 이 두 이미지들은 완전히 다릅니다 그리고 이 이미지는 유저의 디바이스가 PC냐 mobile이냐에 따라 다르게 뜰겁니다.

/app/page.tsx 파일내에, next/image 컴퍼넌트를 불러옵시다(import). 그리고 주석 부분 아래 이미지를 추가합니다.

/app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import { lusitana } from '@/app/ui/fonts';
import Image from 'next/image';

export default function Page() {
  return (
    // ...
    <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
      {/* Add Hero Images Here */}
      <Image
        src="/hero-desktop.png"
        width={1000}
        height={760}
        className="hidden md:block"
        alt="Screenshots of the dashboard project showing desktop version"
      />
    </div>
    //...
  );
}

여기에서, width를 1000px 그리고 height 760px 으로 세팅하고 있습니다. 레이아웃 변형을 피하기 위해 width와 height를 명시하는건 좋은 활용입니다. 이 값들은 원본 이미지와 같은 비율을 갖고 있어야 합니다.

또한 모바일 화면에서 안 보여지기 위한 hidden 클래스, 그리고 PC화면에서 보여지기 위한 md:block를 볼겁니다.

이것은 이제 홈페이지에서 보여질 화면입니다:

실습해보기: 모바일 히어로 이미지 추가하기

이제 당신의 차례입니다! 방금 막 추가한 이미지 아래에 또다른 hero-mobile.png를 위한 <Image> 컴퍼넌트를 추가하세요.

이미지는 width 560px height 620px를 가져야 합니다.
모바일 화면에서 보여야하며, PC화면에선 안 보여야 합니다. - 모바일과 PC화면에서 이미지들이 적절히 바뀌는지 개발툴로 확인할 수 있습니다.

준비가 되면 정답을 보기위해 아래 코드를 펼쳐보세요.

/app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import { lusitana } from '@/app/ui/fonts';
import Image from 'next/image';

export default function Page() {
  return (
    // ...
    <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
      {/* Add Hero Images Here */}
      <Image
        src="/hero-desktop.png"
        width={1000}
        height={760}
        className="hidden md:block"
        alt="Screenshots of the dashboard project showing desktop version"
      />
      <Image
        src="/hero-mobile.png"
        width={560}
        height={620}
        className="block md:hidden"
        alt="Screenshot of the dashboard project showing mobile version"
      />
    </div>
    //...
  );
}

훌륭합니다! 당신의 홈페이지에 커스텀 폰트와 히어로 이미지가 생겼습니다.

퀴즈할 시간입니다!

익힌걸 테스트해보고 무엇을 배웠는지 봅시다.

참 혹은 거짓: 크기가 없는 이미지와 웹 폰트들은 레이아웃 변형의 일반적인 원인들입니다.

A 참

B 거짓

읽을거리

원격이미지 최적화 그리고 지역 폰트 파일 사용 같은, 이 주제에 대해 수많은 익힐것들이 있습니다. 만약 좀더 폰트와 이미지들에 대해 깊게 공부하고 싶다면,

챕터 3을 완료했습니다.

Next.js에서 이미지와 폰트를 최적화 하는 방법을 배웠습니다.

4: 레이아웃과 페이지 생성

대시보드 라우트와, 중첩된 레이아웃과 페이지를 만들어 봅시다.

챕터 4 시작하기

Ref

[https://nextjs.org/learn/dashboard-app/optimizing-fonts-images]

'Web' 카테고리의 다른 글

[NextJS] 튜토리얼 챕터 5 - 페이지간 이동 (0)	2024.05.23
[NextJS] 튜토리얼 챕터 4 - 레이아웃과 페이지 생성 (0)	2024.05.21
[NextJS] 튜토리얼 챕터 2 - CSS 스타일하기 (0)	2024.05.14
[NextJS] 튜토리얼 Intro - Next.js 배우기 (0)	2024.05.13
[NextJS] 튜토리얼 챕터 1 - 시작하기 (0)	2024.05.13

ABOUT ME

튜이의 블로그 튜이의 블로그

들어가기 전에

폰트와 이미지 최적화

이번 챕터에서...

왜 폰트를 최적화 하나요?

주 폰트 추가하기

실습해보기: 두번째 폰트 추가하기

왜 이미지를 최적하나요?

컴퍼넌트

PC화면 히어로 이미지 추가하기

실습해보기: 모바일 히어로 이미지 추가하기

읽을거리

Ref

'Web' 카테고리의 다른 글

티스토리툴바

ABOUT ME

들어가기 전에

폰트와 이미지 최적화

이번 챕터에서...

왜 폰트를 최적화 하나요?

주 폰트 추가하기

실습해보기: 두번째 폰트 추가하기

왜 이미지를 최적하나요?

컴퍼넌트

PC화면 히어로 이미지 추가하기

실습해보기: 모바일 히어로 이미지 추가하기

읽을거리

Ref

'Web' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바