브레드크럼 내비게이션 구현: Claude Code 활용 가이드

브레드크럼으로 UX와 SEO를 동시에 개선하기

브레드크럼(Breadcrumb)은 사용자가 사이트 내에서 현재 어디에 있는지 시각적으로 알려 주는 내비게이션 요소입니다. 제대로 구현하면 사용성을 높이는 동시에 SEO까지 개선할 수 있죠.

기본 브레드크럼 컴포넌트

> 브레드크럼 컴포넌트를 만들어줘.
> 구조화 데이터(JSON-LD) 대응, 접근성, 반응형까지 고려해서.

// components/Breadcrumb.tsx
interface BreadcrumbItem {
  label: string;
  href?: string;
}

interface BreadcrumbProps {
  items: BreadcrumbItem[];
}

export function Breadcrumb({ items }: BreadcrumbProps) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: items.map((item, index) => ({
      '@type': 'ListItem',
      position: index + 1,
      name: item.label,
      item: item.href ? `https://example.com${item.href}` : undefined,
    })),
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <nav aria-label="브레드크럼" className="breadcrumb">
        <ol className="flex flex-wrap items-center gap-1 text-sm text-gray-600">
          {items.map((item, index) => (
            <li key={index} className="flex items-center">
              {index > 0 && (
                <span className="mx-2 text-gray-400" aria-hidden="true">/</span>
              )}
              {item.href && index < items.length - 1 ? (
                <a
                  href={item.href}
                  className="text-blue-600 hover:underline"
                >
                  {item.label}
                </a>
              ) : (
                <span aria-current="page" className="text-gray-800 font-medium">
                  {item.label}
                </span>
              )}
            </li>
          ))}
        </ol>
      </nav>
    </>
  );
}

URL에서 브레드크럼 자동 생성

// utils/breadcrumb.ts
const labelMap: Record<string, string> = {
  blog: '블로그',
  category: '카테고리',
  tags: '태그',
  about: '소개',
};

export function generateBreadcrumbs(pathname: string): BreadcrumbItem[] {
  const segments = pathname.split('/').filter(Boolean);

  const items: BreadcrumbItem[] = [
    { label: '홈', href: '/' },
  ];

  let currentPath = '';
  segments.forEach((segment, index) => {
    currentPath += `/${segment}`;
    const isLast = index === segments.length - 1;

    items.push({
      label: labelMap[segment] || decodeURIComponent(segment),
      href: isLast ? undefined : currentPath,
    });
  });

  return items;
}

Astro에서의 통합 예시

---
// layouts/BlogPost.astro
import { Breadcrumb } from '../components/Breadcrumb';

const { frontmatter } = Astro.props;
const breadcrumbItems = [
  { label: '홈', href: '/' },
  { label: '블로그', href: '/blog' },
  { label: frontmatter.category, href: `/blog/category/${frontmatter.category}` },
  { label: frontmatter.title },
];
---

<Breadcrumb items={breadcrumbItems} />

스타일링 변형

/* 화살표 스타일 */
.breadcrumb-arrow li + li::before {
  content: '›';
  margin: 0 0.5rem;
  color: #9ca3af;
}

/* 아이콘 스타일 */
.breadcrumb-icon li:first-child a::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('/icons/home.svg') no-repeat center;
  margin-right: 4px;
  vertical-align: middle;
}

/* 모바일: 마지막 2개만 노출 */
@media (max-width: 640px) {
  .breadcrumb li:not(:nth-last-child(-n+2)) {
    display: none;
  }
  .breadcrumb li:nth-last-child(2)::before {
    content: '... / ';
  }
}

테스트

import { describe, it, expect } from 'vitest';
import { generateBreadcrumbs } from './breadcrumb';

describe('generateBreadcrumbs', () => {
  it('홈 페이지', () => {
    const result = generateBreadcrumbs('/');
    expect(result).toEqual([{ label: '홈', href: '/' }]);
  });

  it('블로그 글 페이지', () => {
    const result = generateBreadcrumbs('/blog/my-article');
    expect(result).toHaveLength(3);
    expect(result[1]).toEqual({ label: '블로그', href: '/blog' });
    expect(result[2].href).toBeUndefined();
  });
});

정리

브레드크럼은 SEO 최적화와 접근성 양쪽 모두에서 중요한 컴포넌트입니다. Claude Code에 구조화 데이터 대응까지 포함해 요청하면 Google 검색 결과에 브레드크럼이 노출되도록 만들 수 있습니다. 구조화 데이터에 대한 자세한 내용은 Google Search Central을 참고하세요.