Skip to main content
Tilnote
T
tilnote
책에 포함된 노트비개발자를 위한 Next.js 입문

이미지, 아이콘, 폰트, SEO 설정하기

Views 1약 8분생성형 AI 활용
Summary

완성도는 작은 시각 요소에서 시작됩니다

같은 내용의 웹사이트라도 로고가 있고, 이미지가 또렷하고, 글자가 읽기 편하면 더 신뢰감 있게 보입니다. 검색 결과나 카카오톡 공유 화면에 제목과 설명이 제대로 나오면 '관리되는 사이트'라는 인상도 줍니다.

이번 장에서는 화면의 겉모습과 검색 결과의 첫인상을 함께 다룹니다. 크게 다섯 가지를 설정합니다.

  • 본문과 카드에 들어갈 이미지

  • 사이트 로고

  • 브라우저 탭에 보이는 파비콘

  • 검색 결과와 공유 미리보기에 쓰이는 제목, 설명, 대표 이미지

  • 읽기 편한 폰트와 글자 크기 규칙

이미지와 폰트는 단순한 장식이 아닙니다. 방문자가 사이트를 믿어도 되는지 판단하는 첫 단서입니다.

이미지, 아이콘, 폰트, SEO 설정하기AI 생성 이미지

public 폴더에 이미지를 넣는 흐름

Next.js에서 가장 쉽게 이미지를 쓰는 방법은 public 폴더를 이용하는 것입니다. public 폴더는 웹사이트의 공개 보관함이라고 생각하면 됩니다. 이 안에 넣은 파일은 화면에서 바로 불러올 수 있습니다.

예를 들어 아래처럼 파일을 넣어 봅시다.

public/
  logo.svg
  cafe-main.jpg
  icon-bean.svg

이때 화면에서 파일을 부를 때는 /public을 쓰지 않습니다.

public/logo.svg      → /logo.svg
public/cafe-main.jpg → /cafe-main.jpg

즉, public 폴더는 주소에서는 생략됩니다. 이 규칙은 꼭 기억해 두세요.

일반 HTML에서는 이미지를 넣을 때 <img>를 자주 씁니다. 하지만 Next.js에서는 가능하면 next/image의 Image 컴포넌트를 사용하는 편이 좋습니다. Image 컴포넌트는 필요한 크기의 이미지를 더 효율적으로 불러오도록 돕고, 느린 로딩을 처리하며, 이미지가 늦게 뜰 때 화면이 흔들리는 문제를 줄이는 기능을 제공합니다.1

app/page.tsx에 다음처럼 넣어 봅니다.

import Image from 'next/image';

export default function Home() {
  return (
    <main className='min-h-screen bg-stone-50 px-6 py-16'>
      <section className='mx-auto max-w-5xl'>
        <div className='grid gap-10 md:grid-cols-2 md:items-center'>
          <div>
            <p className='mb-3 text-sm font-semibold text-amber-700'>동네에서 만나는 좋은 커피</p>
            <h1 className='text-4xl font-bold tracking-tight text-stone-950 md:text-5xl'>바른커피</h1>
            <p className='mt-5 text-lg leading-8 text-stone-700'>직접 로스팅한 원두와 조용한 작업 공간을 제공하는 로컬 카페입니다.</p>
          </div>

          <Image
            src='/cafe-main.jpg'
            alt='햇빛이 들어오는 카페 테이블 위의 커피 한 잔'
            width={1200}
            height={800}
            className='rounded-3xl object-cover shadow-xl'
          />
        </div>
      </section>
    </main>
  );
}

여기서 중요한 속성은 네 가지입니다.

  • src: 이미지 파일 경로입니다. public/cafe-main.jpg는 /cafe-main.jpg로 씁니다.

  • alt: 이미지를 설명하는 문장입니다. 이미지가 안 보일 때, 또는 화면 읽기 도구를 쓸 때 도움이 됩니다.

  • width, height: 이미지의 가로와 세로 비율을 알려 줍니다. 화면에서 반드시 이 크기로만 보인다는 뜻은 아닙니다.

  • className: 둥근 모서리, 그림자, 정렬 같은 디자인을 정합니다.

alt에는 '이미지'라고만 쓰지 마세요. 좋은 예는 '커피 사진'보다 '햇빛이 들어오는 카페 테이블 위의 커피 한 잔'입니다. 보이지 않는 사람에게 설명한다고 생각하면 쉽습니다. 다만 정말 꾸밈용으로만 쓰이는 이미지라면 설명을 비워 두는 경우도 있습니다. 처음에는 중요한 이미지에만이라도 구체적인 설명을 붙이는 것부터 시작하세요.

로고와 아이콘은 브랜드의 이름표입니다

로고는 사이트의 이름표입니다. 복잡할 필요는 없습니다. 처음에는 텍스트 로고만으로도 충분합니다. 다만 이미 로고 파일이 있다면 public/logo.svg처럼 넣고 상단 메뉴에서 사용하면 됩니다.

예를 들어 components/Header.tsx가 있다면 이렇게 바꿀 수 있습니다.

import Image from 'next/image';
import Link from 'next/link';

export default function Header() {
  return (
    <header className='border-b bg-white'>
      <div className='mx-auto flex max-w-5xl items-center justify-between px-6 py-4'>
        <Link href='/' className='flex items-center gap-2 font-bold text-stone-950'>
          <Image src='/logo.svg' alt='바른커피 로고' width={32} height={32} />
          <span>바른커피</span>
        </Link>

        <nav className='flex gap-5 text-sm text-stone-700'>
          <Link href='/about'>소개</Link>
          <Link href='/services'>메뉴</Link>
          <Link href='/contact'>문의</Link>
        </nav>
      </div>
    </header>
  );
}

아이콘은 의미를 빠르게 전달하는 작은 그림입니다. 커피 사이트라면 원두, 컵, 위치 표시 아이콘이 어울립니다. 다만 초보 단계에서는 아이콘 라이브러리를 여러 개 섞기보다, 같은 스타일의 SVG 파일 몇 개만 public 폴더에 넣어 쓰는 편이 관리하기 쉽습니다.

좋은 로고와 아이콘의 기준은 화려함이 아닙니다.

  • 작게 보여도 알아볼 수 있는가?

  • 배경색이 바뀌어도 잘 보이는가?

  • 사이트의 분위기와 맞는가?

  • 너무 많은 아이콘 스타일을 섞지 않았는가?

이 네 가지만 지켜도 화면이 훨씬 정돈됩니다.

파비콘은 브라우저 탭의 작은 간판입니다

파비콘은 브라우저 탭 왼쪽에 보이는 작은 아이콘입니다. 즐겨찾기나 검색 결과 일부 화면에서도 사용될 수 있습니다. 크기는 작지만, 사이트가 완성되어 보이게 만드는 중요한 요소입니다.

Next.js App Router에서는 app 폴더 안에 favicon.ico 파일을 넣으면 기본 파비콘으로 사용할 수 있습니다.2

app/
  favicon.ico
  layout.tsx
  page.tsx

여기서 헷갈리기 쉬운 점이 있습니다.

  • 본문에 넣는 일반 이미지는 보통 public 폴더에 넣습니다.

  • 파비콘처럼 Next.js가 특별히 인식하는 파일은 app 폴더에 넣습니다.

처음에는 이 정도만 구분하면 충분합니다.

파비콘이 바로 바뀌지 않을 때도 있습니다. 브라우저가 예전 아이콘을 기억하고 있기 때문입니다. 이럴 때는 새로고침을 여러 번 하거나, 시크릿 창에서 확인해 보세요.

검색 결과에 보이는 제목과 설명 설정하기

SEO는 Search Engine Optimization의 줄임말입니다. 어렵게 들리지만, 처음에는 '검색 결과에 내 페이지가 어떻게 소개될지 정하는 일'이라고 이해하면 됩니다.

검색 결과에는 보통 제목과 설명이 나옵니다. 이 내용이 너무 모호하면 방문자는 클릭하지 않습니다. 검색엔진이 항상 내가 적은 설명을 그대로 보여 주는 것은 아니지만, 기본 제목과 설명을 잘 적어 두는 것은 여전히 중요합니다.

나쁜 예:

제목: Home
설명: Welcome to my website

좋은 예:

제목: 바른커피 | 직접 로스팅하는 동네 카페
설명: 조용한 작업 공간과 직접 로스팅한 원두를 제공하는 서울 연남동 로컬 카페입니다.

Next.js App Router에서는 layout.tsx나 page.tsx에서 metadata를 설정하면 Next.js가 필요한 <head> 정보를 자동으로 만들어 줍니다.2

전체 사이트의 기본 제목과 설명은 app/layout.tsx에 넣습니다.

import type { Metadata } from 'next';
import './globals.css';

export const metadata: Metadata = {
  title: {
    default: '바른커피 | 직접 로스팅하는 동네 카페',
    template: '%s | 바른커피',
  },
  description: '조용한 작업 공간과 직접 로스팅한 원두를 제공하는 서울 연남동 로컬 카페입니다.',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang='ko'>
      <body>{children}</body>
    </html>
  );
}

default는 기본 제목입니다. template은 개별 페이지 제목을 넣을 때 쓰는 형식입니다. 예를 들어 소개 페이지에서 제목을 '소개'로 설정하면 최종 제목은 '소개 | 바른커피'처럼 보일 수 있습니다.

개별 페이지에 다른 제목을 주고 싶다면 해당 페이지 파일에 metadata를 추가합니다.

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: '소개',
  description: '바른커피가 어떤 원두를 고르고 어떤 공간을 지향하는지 소개합니다.',
};

export default function AboutPage() {
  return <main>소개 페이지 내용</main>;
}

제목은 짧고 분명하게 씁니다. 설명은 한두 문장으로 충분합니다. 검색엔진을 속이려고 키워드를 반복하기보다, 실제 방문자가 클릭하기 전에 알아야 할 내용을 적는 편이 좋습니다.

주의할 점도 있습니다. 파일 맨 위에 'use client'가 있는 페이지에서는 metadata를 바로 내보낼 수 없습니다. 이런 오류가 보이면 해당 페이지가 꼭 클라이언트 컴포넌트여야 하는지 확인하거나, metadata를 가까운 layout.tsx로 옮기는 편이 안전합니다.

Open Graph 이미지로 공유 미리보기 개선하기

Open Graph는 링크를 공유했을 때 보이는 미리보기 정보입니다. 카카오톡, 슬랙, 페이스북, 링크드인 같은 곳에 URL을 붙여 넣으면 제목, 설명, 대표 이미지가 카드처럼 보입니다. 쉽게 말해 '공유용 명함'입니다.

Next.js에서는 app 폴더에 opengraph-image.jpg를 넣는 간단한 방식으로 공유 대표 이미지를 설정할 수 있습니다.2

app/
  opengraph-image.jpg
  favicon.ico
  layout.tsx
  page.tsx

이미지 파일 이름은 정확해야 합니다. 대표적으로 다음 확장자를 사용할 수 있습니다.

opengraph-image.jpg
opengraph-image.jpeg
opengraph-image.png
opengraph-image.gif

이런 파일을 해당 경로에 넣으면 Next.js가 공유 미리보기에 필요한 태그를 자동으로 처리합니다. 특정 페이지마다 다른 공유 이미지를 쓰고 싶다면 그 페이지 폴더 안에 넣을 수도 있습니다.3

app/
  opengraph-image.jpg        ← 사이트 기본 공유 이미지
  about/
    page.tsx
    opengraph-image.jpg      ← /about 전용 공유 이미지

공유 이미지는 보통 가로형이 좋습니다. 처음에는 1200×630 비율로 만들면 여러 서비스에서 무난하게 보입니다. 이미지 안에는 다음 정보를 크게 넣으세요.

  • 사이트명 또는 브랜드명

  • 한 줄 핵심 문장

  • 로고나 대표 사진

작은 글자를 많이 넣으면 모바일 공유 화면에서 읽기 어렵습니다. 공유 이미지는 포스터가 아니라 명함입니다. 짧고 강하게 보여 주는 것이 좋습니다.

Open Graph 이미지가 바로 바뀌지 않는 경우도 많습니다. 카카오톡이나 슬랙 같은 서비스가 예전 미리보기를 저장해 두기 때문입니다. 배포 후에도 예전 이미지가 보이면 잠시 기다리거나, 각 서비스의 공유 디버거 도구를 이용해 캐시를 갱신해야 할 수 있습니다.

폰트는 분위기보다 읽기 쉬움이 먼저입니다

폰트는 사이트의 목소리입니다. 하지만 초보자가 가장 많이 하는 실수는 예쁜 폰트를 너무 많이 쓰는 것입니다. 웹사이트에서는 폰트가 많을수록 화면이 산만해지고 로딩도 무거워질 수 있습니다.

처음에는 한 가지 폰트만 정해도 충분합니다. Next.js는 next/font 기능으로 폰트를 최적화해서 불러올 수 있습니다. 공식 학습 자료에서도 next/font를 사용해 폰트를 프로젝트에 적용하는 흐름을 안내합니다.1

한국어 사이트라면 다음처럼 Noto Sans KR을 적용해 볼 수 있습니다.

import type { Metadata } from 'next';
import { Noto_Sans_KR } from 'next/font/google';
import './globals.css';

const notoSansKr = Noto_Sans_KR({
  weight: ['400', '500', '700'],
  preload: false,
});

export const metadata: Metadata = {
  title: '바른커피 | 직접 로스팅하는 동네 카페',
  description: '조용한 작업 공간과 직접 로스팅한 원두를 제공하는 서울 연남동 로컬 카페입니다.',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang='ko'>
      <body className={`${notoSansKr.className} antialiased`}>
        {children}
      </body>
    </html>
  );
}

한국어 폰트는 포함해야 할 글자 수가 많아서 영어 폰트보다 파일이 커질 수 있습니다. 그래서 처음에는 굵기를 너무 많이 넣지 말고, 본문용 400, 중간 강조용 500, 제목용 700 정도로 시작하는 편이 좋습니다. 버전이나 환경에 따라 폰트 설정에서 오류가 난다면 weight 값을 하나로 줄여 보거나, 개발 서버를 다시 켜서 확인해 보세요.

여기서 antialiased는 글자 가장자리를 조금 더 부드럽게 보이게 하는 Tailwind CSS 클래스입니다. 필수는 아니지만 함께 쓰면 깔끔합니다.

폰트를 고를 때는 다음 규칙을 추천합니다.

  • 본문 글자는 너무 얇게 쓰지 않습니다.

  • 본문 크기는 보통 text-base 또는 text-lg부터 시작합니다.

  • 긴 문단에는 leading-7, leading-8처럼 줄 간격을 넉넉히 줍니다.

  • 제목은 굵게, 본문은 편안하게 둡니다.

  • 한 페이지에서 폰트는 1개, 많아도 2개까지만 사용합니다.

예를 들어 본문 문단은 이렇게 정리할 수 있습니다.

<p className='text-lg leading-8 text-stone-700'>
  직접 로스팅한 원두와 조용한 작업 공간을 제공하는 동네 카페입니다.
</p>

글자가 작고 줄 간격이 좁으면 내용이 좋아도 읽기 어렵습니다. 반대로 글자 크기와 줄 간격만 정리해도 사이트의 인상이 크게 좋아집니다.

자주 만나는 문제와 확인 순서

이미지가 안 보일 때는 먼저 파일 위치와 이름을 확인하세요.

확인 순서
1. 파일이 public 폴더 안에 있는가?
2. 코드에서 /public/logo.svg가 아니라 /logo.svg로 썼는가?
3. 파일 이름의 대소문자가 정확한가?
4. jpg, png, svg 확장자를 잘못 쓰지 않았는가?

Image 컴포넌트에서 오류가 나면 width와 height가 빠졌는지 확인하세요. 외부 이미지 주소를 직접 넣는 경우에는 추가 설정이 필요할 수 있으므로, 초보 단계에서는 먼저 public 폴더 이미지를 사용하는 편이 안전합니다.

metadata가 적용되지 않는 것처럼 보이면 브라우저 화면만 보지 말고, 배포 후 검색 결과나 공유 미리보기가 반영되기까지 시간이 걸릴 수 있다는 점도 기억하세요. 검색엔진과 메신저는 내 사이트를 즉시 다시 확인하지 않을 수 있습니다.

폰트가 적용되지 않으면 layout.tsx의 <body>에 className이 들어갔는지 확인하세요. 그리고 개발 서버를 껐다가 다시 켜면 해결되는 경우도 있습니다.

직접 할 수 있는 일과 맡기면 좋은 일

직접 할 수 있는 일은 분명합니다.

  • public 폴더에 이미지 넣기

  • Image 컴포넌트로 사진 표시하기

  • 로고와 파비콘 교체하기

  • metadata의 제목과 설명 작성하기

  • opengraph-image.jpg 만들기

  • 폰트와 글자 크기 정리하기

전문가에게 맡기면 좋은 일도 있습니다.

  • 브랜드 로고를 처음부터 설계하는 일

  • 검색 유입 전략 전체를 설계하는 일

  • 수백 개 페이지의 SEO 구조를 자동화하는 일

  • 이미지가 많은 대형 사이트의 성능을 세밀하게 최적화하는 일

  • 다국어 사이트의 SEO를 설계하는 일

이번 장의 목표는 전문가 수준의 SEO를 완성하는 것이 아닙니다. 방문자가 사이트를 처음 봤을 때 '믿을 만하다'고 느끼게 만드는 기본을 갖추는 것입니다.

마무리 체크리스트

배포하기 전에 아래 항목을 확인해 보세요.

  • 대표 이미지가 흐릿하지 않은가?

  • 모든 중요한 이미지에 alt 설명이 있는가?

  • 로고가 상단에서 잘 보이는가?

  • 브라우저 탭에 파비콘이 보이는가?

  • 검색 결과용 제목이 Home처럼 남아 있지 않은가?

  • 설명 문장이 실제 사이트 내용을 잘 요약하는가?

  • 공유했을 때 대표 이미지가 어색하지 않은가?

  • 본문 글자가 모바일에서도 읽기 편한가?

이제 사이트는 단순히 '화면이 나오는 상태'를 넘어, 다른 사람에게 보여 줄 준비가 된 모습에 가까워졌습니다. 다음 장에서는 이렇게 만든 페이지의 내용을 더 쉽게 관리할 수 있는 구조를 만들어 보겠습니다.

참고

1Next.js Learn - Optimizing Fonts and Images

2Next.js - Metadata and OG images

3Next.js - opengraph-image and twitter-image file conventions

책 목록

비개발자를 위한 Next.js 입문

전체 목차 보기

이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.

틸노트는 사용자가 AI를 활용해 노트를 쉽게 작성하거나 편집할 수 있는 서비스입니다.

회원 가입

AI 스퀘어 단톡방에 함께해요

AI 활용과 틸노트 사용 팁을 나누는 오픈채팅방입니다. 입장 비밀번호는 tilnote입니다.

참여하기
이용약관·개인정보처리방침