사이트 구조 - 확장 가능한 웹사이트 구조 만들기 — Claude Skill

Mermaid 다이어그램 템플릿

시각적 사이트맵에 바로 복사해 쓸 수 있는 Mermaid 다이어그램입니다. 사이트에 맞게 노드 라벨과 연결을 조정하세요.

기본 계층

단순한 위에서 아래로의 페이지 계층입니다.

graph TD
    HOME["홈페이지<br/>/"] --> FEAT["기능<br/>/features"]
    HOME --> PRICE["가격<br/>/pricing"]
    HOME --> BLOG["블로그<br/>/blog"]
    HOME --> ABOUT["소개<br/>/about"]

    FEAT --> F1["분석<br/>/features/analytics"]
    FEAT --> F2["자동화<br/>/features/automation"]
    FEAT --> F3["연동<br/>/features/integrations"]

    BLOG --> B1["글: SEO 가이드<br/>/blog/seo-guide"]
    BLOG --> B2["글: 전환 최적화 팁<br/>/blog/cro-tips"]

내비게이션 영역이 있는 계층

어떤 페이지가 어떤 내비게이션 영역에 나타나는지 subgraph로 보여줍니다.

graph TD
    subgraph "헤더 내비게이션"
        HOME["홈페이지"]
        FEAT["기능"]
        PRICE["가격"]
        BLOG["블로그"]
        CTA["시작하기 ★"]
    end

    subgraph "기능 페이지"
        F1["분석"]
        F2["자동화"]
        F3["연동"]
    end

    subgraph "푸터 내비게이션"
        ABOUT["소개"]
        CAREERS["채용"]
        CONTACT["문의"]
        PRIVACY["개인정보"]
        TERMS["약관"]
    end

    HOME --> FEAT
    HOME --> PRICE
    HOME --> BLOG
    FEAT --> F1
    FEAT --> F2
    FEAT --> F3
    HOME --> ABOUT
    ABOUT --> CAREERS
    HOME --> CONTACT

URL 라벨이 있는 계층

각 노드에 페이지 이름과 URL 경로를 표시합니다.

graph TD
    HOME["홈페이지<br/><small>/</small>"] --> PROD["제품<br/><small>/product</small>"]
    HOME --> PRICE["가격<br/><small>/pricing</small>"]
    HOME --> BLOG["블로그<br/><small>/blog</small>"]
    HOME --> DOCS["문서<br/><small>/docs</small>"]
    HOME --> ABOUT["소개<br/><small>/about</small>"]

    PROD --> P1["분석<br/><small>/product/analytics</small>"]
    PROD --> P2["보고서<br/><small>/product/reports</small>"]

    DOCS --> D1["시작하기<br/><small>/docs/getting-started</small>"]
    DOCS --> D2["API 참조<br/><small>/docs/api</small>"]

허브-스포크 콘텐츠 모델

허브 페이지가 스포크 글과 연결되고, 스포크끼리도 서로 링크되는 구조를 보여줍니다.

graph TD
    HUB["SEO 가이드<br/>(허브 페이지)"]

    HUB --> S1["키워드 리서치"]
    HUB --> S2["페이지 내 SEO"]
    HUB --> S3["기술 SEO"]
    HUB --> S4["링크 구축"]

    S1 -.-> S2
    S2 -.-> S3
    S3 -.-> S4

    style HUB fill:#f9f,stroke:#333,stroke-width:2px

범례:

• 실선 = 기본 허브-스포크 링크
• 점선 = 스포크 사이의 교차 링크

내부 링크 흐름

서로 다른 사이트 섹션이 어떻게 연결되는지 보여줍니다.

graph LR
    subgraph "마케팅"
        HOME["홈페이지"]
        FEAT["기능"]
        PRICE["가격"]
    end

    subgraph "콘텐츠"
        BLOG["블로그"]
        GUIDE["가이드"]
        CASE["사례 연구"]
    end

    subgraph "제품"
        DOCS["문서"]
        API["API 참조"]
        CHANGE["변경 기록"]
    end

    BLOG --> FEAT
    BLOG --> CASE
    CASE --> FEAT
    CASE --> PRICE
    FEAT --> DOCS
    GUIDE --> BLOG
    GUIDE --> DOCS
    HOME --> FEAT
    HOME --> BLOG
    HOME --> CASE

재구조화 전/후

현재 구조와 제안 구조를 나란히 비교합니다.

graph TD
    subgraph "이전"
        B_HOME["홈페이지"] --> B_P1["페이지 1"]
        B_HOME --> B_P2["페이지 2"]
        B_HOME --> B_P3["페이지 3"]
        B_HOME --> B_P4["페이지 4"]
        B_HOME --> B_P5["페이지 5"]
        B_HOME --> B_P6["페이지 6"]
        B_HOME --> B_P7["페이지 7"]
        B_HOME --> B_P8["페이지 8"]
    end

    subgraph "이후"
        A_HOME["홈페이지"] --> A_S1["기능"]
        A_HOME --> A_S2["리소스"]
        A_HOME --> A_S3["회사"]
        A_S1 --> A_P1["기능 A"]
        A_S1 --> A_P2["기능 B"]
        A_S2 --> A_P3["블로그"]
        A_S2 --> A_P4["가이드"]
        A_S3 --> A_P5["소개"]
        A_S3 --> A_P6["문의"]
    end

색상 규칙

스타일을 사용해 페이지 상태, 우선순위, 유형을 강조하세요.

graph TD
    HOME["홈페이지"] --> FEAT["기능"]
    HOME --> PRICE["가격"]
    HOME --> BLOG["블로그"]
    HOME --> NEW["새 섹션"]
    HOME --> REMOVE["사용 중단 페이지"]

    FEAT --> F1["기존 기능"]
    FEAT --> F2["새 기능"]

    style HOME fill:#4CAF50,color:#fff
    style PRICE fill:#4CAF50,color:#fff
    style FEAT fill:#4CAF50,color:#fff
    style BLOG fill:#4CAF50,color:#fff
    style F1 fill:#4CAF50,color:#fff
    style NEW fill:#2196F3,color:#fff
    style F2 fill:#2196F3,color:#fff
    style REMOVE fill:#f44336,color:#fff

색상 키:

• 초록 (#4CAF50): 기존 페이지(변경 없음)
• 파랑 (#2196F3): 새로 만들 페이지
• 빨강 (#f44336): 제거하거나 리디렉션할 페이지
• 노랑 (#FFC107): 재구조화하거나 이동할 페이지
• 보라 (#9C27B0): 높은 우선순위 / 행동 유도 페이지

내비게이션 패턴

사이트 유형과 맥락별 상세 내비게이션 패턴입니다.

헤더 내비게이션

단순 헤더(4-6개 항목)

적합한 경우: 소기업, 단순 SaaS, 포트폴리오.

[Logo]   기능   가격   블로그   소개   [행동 유도 버튼]

규칙:

• 로고는 항상 홈페이지로 연결
• 행동 유도 버튼은 가장 오른쪽에 두고 시각적으로 구분(채운 버튼, 대비 색상)
• 항목은 우선순위 순서로 정렬(가장 많이 방문되는 항목부터)
• 현재 페이지에는 시각적 표시 제공(밑줄, 굵게, 색상)

메가 메뉴 헤더

적합한 경우: 기능이 많은 SaaS, 카테고리가 있는 전자상거래, 큰 콘텐츠 사이트.

[Logo]   제품 ▾   솔루션 ▾   리소스 ▾   가격   문서   [행동 유도]

"제품"에 hover/click했을 때:

┌─────────────────────────────────────────────────┐
│  기능               플랫폼          연동         │
│  ─────────          ─────────       ──────────── │
│  분석               보안            Slack        │
│  자동화             API             HubSpot      │
│  보고               컴플라이언스     Salesforce   │
│  대시보드                           Zapier       │
│                                                   │
│  [모든 기능 보기 →]                               │
└─────────────────────────────────────────────────┘

메가 메뉴 규칙:

• 최대 2-4열
• 항목을 논리적으로 묶기(기능 영역, 사용 사례, 대상 고객별)
• 하단에 "모두 보기" 링크 포함
• 메가 메뉴 안에 드롭다운을 다시 중첩하지 않기
• 라벨만으로 명확하지 않은 항목에는 설명 표시

분할 내비게이션

적합한 경우: 마케팅 내비게이션과 제품 내비게이션이 모두 있는 앱.

[Logo]   기능   가격   블로그        [로그인]   [가입]
├── 마케팅 내비게이션(왼쪽) ──────┘          └── 인증 내비게이션(오른쪽) ──┤

오른쪽은 인증 동작을 처리합니다. 왼쪽은 페이지 내비게이션을 처리합니다.

푸터 내비게이션

열 기반 푸터(표준)

적합한 경우: 대부분의 사이트. 링크를 3-5개의 주제별 열로 정리합니다.

┌──────────────────────────────────────────────────────────┐
│                                                          │
│  제품              리소스          회사          법무     │
│  ─────────        ──────────       ─────────     ─────   │
│  기능              블로그          소개          개인정보 │
│  가격              가이드          채용          약관     │
│  연동              템플릿          문의          GDPR     │
│  변경 기록         사례 연구       언론                   │
│  보안              웨비나          파트너                 │
│                                                          │
│  [Logo]  © 2026 Company Name                             │
│  소셜: [Twitter] [LinkedIn] [GitHub]                     │
│                                                          │
└──────────────────────────────────────────────────────────┘

최소형 푸터

적합한 경우: 단순 사이트, 랜딩 페이지.

┌──────────────────────────────────────────────────────────┐
│  [Logo]                                                  │
│  © 2026 Company  ·  개인정보  ·  약관  ·  문의          │
└──────────────────────────────────────────────────────────┘

확장 푸터

적합한 경우: 비교 페이지, 위치 페이지, 리소스 링크 등 SEO에 푸터를 사용하는 사이트.

┌──────────────────────────────────────────────────────────┐
│  제품         리소스       비교              사용 사례    │
│  기능         블로그       vs 경쟁사 A        스타트업용   │
│  가격         가이드       vs 경쟁사 B        엔터프라이즈용│
│  API          템플릿       vs 경쟁사 C        에이전시용   │
│                                                          │
│  연동                     인기 글                       │
│  Slack       Zapier       X를 하는 방법                  │
│  HubSpot     Salesforce   Y 가이드                      │
│                           템플릿: Z                     │
│                                                          │
│  [Logo]  © 2026  ·  개인정보  ·  약관  ·  보안          │
└──────────────────────────────────────────────────────────┘

사이드바 내비게이션

문서 사이드바

접을 수 있는 섹션이 있는 고정 왼쪽 사이드바입니다.

시작하기
  ├── 설치
  ├── 빠른 시작
  └── 설정

가이드
  ├── 인증
  ├── 데이터 모델
  └── 배포

API 참조
  ├── REST API
  │   ├── 사용자
  │   ├── 프로젝트
  │   └── 웹훅
  └── GraphQL

예시
  ├── Next.js
  ├── Rails
  └── Python

변경 기록

규칙:

• 현재 페이지 강조
• 섹션은 접을 수 있음(현재 섹션은 기본으로 펼침)
• 사이드바 상단에 검색
• 콘텐츠 영역 하단에 "이전 / 다음" 페이지 내비게이션
• 스크롤 시 고정(사라지지 않음)

블로그 카테고리 사이드바

카테고리
  ├── SEO (24)
  ├── 전환 최적화 (18)
  ├── 콘텐츠 (15)
  ├── 유료 광고 (12)
  └── 분석 (9)

인기 글
  ├── SEO 개선 방법
  ├── 랜딩 페이지 가이드
  └── 분석 설정

뉴스레터
  └── [이메일 가입 양식]

Breadcrumbs

표준 형식

홈 > 기능 > 분석
홈 > 블로그 > SEO 카테고리 > 키워드 리서치 방법
홈 > 문서 > API 참조 > 인증

규칙:

• 구분자: > 또는 /(일관되게 사용)
• 현재 페이지를 제외한 모든 구간은 링크
• 현재 페이지는 일반 텍스트(링크 없음)
• 제목이 이미 H1로 보이면 현재 페이지를 포함하지 않아도 됨

Schema 마크업 포함

<nav aria-label="Breadcrumb">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/"><span itemprop="name">홈</span></a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/features"><span itemprop="name">기능</span></a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">분석</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

또는 JSON-LD를 사용하세요(권장).

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "홈", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "기능", "item": "https://example.com/features" },
    { "@type": "ListItem", "position": 3, "name": "분석" }
  ]
}

모바일 내비게이션

햄버거 메뉴

모바일의 표준입니다. 모든 내비게이션 항목이 메뉴 아이콘 안으로 접힙니다.

규칙:

• 햄버거 아이콘(세 줄)은 오른쪽 위 또는 왼쪽 위
• 전체 화면 또는 슬라이드 아웃 패널
• 메뉴를 열지 않아도 행동 유도 버튼이 보임(고정 헤더)
• 모바일 메뉴에서 검색 접근 가능
• 중첩 항목에는 아코디언 패턴 사용

하단 탭 바

적합한 경우: 웹 앱, PWA, 모바일 우선 제품.

┌──────────────────────────────────────┐
│                                      │
│           [페이지 콘텐츠]            │
│                                      │
├──────────────────────────────────────┤
│  홈      검색      만들기    프로필  │
│   🏠       🔍        ➕       👤    │
└──────────────────────────────────────┘

규칙:

• 최대 3-5개 항목
• 아이콘 + 라벨(아이콘만 쓰지 않기)
• 활성 상태를 명확하게 표시
• 가장 중요한 동작을 중앙에 배치

피해야 할 패턴

피할 것

• 너무 많은 헤더 항목(8개 이상): 결정 피로를 만들고 작은 화면에서 읽기 어려워짐
• 드롭다운 중첩: 드롭다운 안의 드롭다운 안의 드롭다운
• 알 수 없는 아이콘: 라벨 없는 아이콘은 사용자가 의미를 모름
• 숨겨진 주요 내비게이션: 데스크톱에서 중요한 페이지를 햄버거 메뉴 안에 묻기
• 페이지마다 다른 내비게이션: 앱 vs 마케팅을 제외하면 사이트 전체에서 내비게이션은 동일해야 함
• 모바일 고려 없음: 모바일로 옮겨지지 않는 데스크톱 내비게이션
• 사이트맵 덤프 푸터: 정리 없이 푸터에 50개 이상 링크 넣기
• URL과 맞지 않는 breadcrumb: breadcrumb는 "제품 > 위젯"이라고 하는데 URL은 /shop/widget-pro

흔한 수정

SEO를 위한 내비게이션

내비게이션 안의 내부 링크는 PageRank를 전달합니다. 이를 전략적으로 사용하세요.

• 헤더 내비게이션 링크가 가장 강함 - 가장 중요한 페이지를 여기에 배치
• 푸터 링크는 전달 가치가 낮지만 여전히 중요함 - 비교 페이지, 위치 페이지에 좋음
• 사이드바 링크는 섹션 수준 권위에 도움 - 블로그 카테고리, 문서 섹션에 좋음
• Breadcrumbs는 검색 엔진에 구조 신호 제공 - schema 마크업으로 구현
• JavaScript 전용 내비게이션 사용 금지 - 검색 엔진에는 크롤링 가능한 HTML 링크가 필요
• 설명적인 앵커 텍스트 사용 - 단순히 "기능"이 아니라 "분석 기능"

사이트 유형 템플릿

흔한 사이트 유형을 위한 전체 페이지 계층 템플릿입니다. ASCII 트리, URL 맵, 내비게이션 권장 사항을 포함합니다.

SaaS 마케팅 사이트

페이지 계층

홈페이지 (/)
├── 기능 (/features)
│   ├── 기능 A (/features/feature-a)
│   ├── 기능 B (/features/feature-b)
│   └── 기능 C (/features/feature-c)
├── 가격 (/pricing)
├── 고객 (/customers)
│   ├── 사례 연구 1 (/customers/company-name)
│   └── 사례 연구 2 (/customers/company-name-2)
├── 리소스 (/resources)
│   ├── 블로그 (/blog)
│   │   └── [글] (/blog/post-slug)
│   ├── 템플릿 (/resources/templates)
│   │   └── [템플릿] (/resources/templates/template-slug)
│   └── 가이드 (/resources/guides)
│       └── [가이드] (/resources/guides/guide-slug)
├── 연동 (/integrations)
│   └── [연동] (/integrations/integration-name)
├── 문서 (/docs)
│   ├── 시작하기 (/docs/getting-started)
│   ├── 가이드 (/docs/guides)
│   └── API 참조 (/docs/api)
├── 소개 (/about)
│   ├── 채용 (/about/careers)
│   └── 문의 (/contact)
├── 비교 (/compare)
│   └── [경쟁사] (/compare/competitor-name)
├── 개인정보 (/privacy)
└── 약관 (/terms)

URL 맵

내비게이션

헤더(6개 항목 + 행동 유도): 기능 | 가격 | 고객 | 리소스 | 연동 | 문서 | [시작하기]

푸터 열:

• 제품: 기능, 가격, 연동, 변경 기록, 보안
• 리소스: 블로그, 템플릿, 가이드, 사례 연구
• 회사: 소개, 채용, 문의, 언론
• 법무: 개인정보, 약관, 보안

콘텐츠 / 블로그 사이트

페이지 계층

홈페이지 (/)
├── 블로그 (/blog)
│   ├── [카테고리: 주제 A] (/blog/category/topic-a)
│   ├── [카테고리: 주제 B] (/blog/category/topic-b)
│   ├── [카테고리: 주제 C] (/blog/category/topic-c)
│   └── [글] (/blog/post-slug)
├── 뉴스레터 (/newsletter)
├── 리소스 (/resources)
│   ├── 가이드 (/resources/guides)
│   │   └── [가이드] (/resources/guides/guide-slug)
│   └── 도구 (/resources/tools)
│       └── [도구] (/resources/tools/tool-slug)
├── 소개 (/about)
├── 문의 (/contact)
├── 개인정보 (/privacy)
└── 약관 (/terms)

URL 맵

내비게이션

헤더(4개 항목 + 행동 유도): 블로그 | 리소스 | 소개 | 문의 | [구독]

사이드바(블로그): 카테고리, 인기 글, 뉴스레터 가입

전자상거래

페이지 계층

홈페이지 (/)
├── 쇼핑 (/shop)
│   ├── 카테고리 A (/shop/category-a)
│   │   ├── 하위 카테고리 (/shop/category-a/subcategory)
│   │   │   └── [상품] (/shop/category-a/subcategory/product-slug)
│   │   └── [상품] (/shop/category-a/product-slug)
│   ├── 카테고리 B (/shop/category-b)
│   │   └── [상품] (/shop/category-b/product-slug)
│   └── 카테고리 C (/shop/category-c)
│       └── [상품] (/shop/category-c/product-slug)
├── 컬렉션 (/collections)
│   └── [컬렉션] (/collections/collection-slug)
├── 할인 (/sale)
├── 블로그 (/blog)
│   └── [글] (/blog/post-slug)
├── 소개 (/about)
│   └── 우리 이야기 (/about/our-story)
├── 도움말 (/help)
│   ├── FAQ (/help/faq)
│   ├── 배송 (/help/shipping)
│   ├── 반품 (/help/returns)
│   └── 문의 (/contact)
├── 장바구니 (/cart)
├── 계정 (/account)
├── 개인정보 (/privacy)
└── 약관 (/terms)

URL 맵

내비게이션

헤더(5개 항목 + 장바구니/계정): 쇼핑(메가 메뉴) | 컬렉션 | 할인 | 블로그 | 도움말 | [장바구니 아이콘] [계정 아이콘]

쇼핑 아래 메가 메뉴: 추천 상품/이미지가 있는 카테고리 열

문서 사이트

페이지 계층

문서 홈 (/docs)
├── 시작하기 (/docs/getting-started)
│   ├── 설치 (/docs/getting-started/installation)
│   ├── 빠른 시작 (/docs/getting-started/quick-start)
│   └── 설정 (/docs/getting-started/configuration)
├── 가이드 (/docs/guides)
│   ├── 가이드 A (/docs/guides/guide-a)
│   ├── 가이드 B (/docs/guides/guide-b)
│   └── 가이드 C (/docs/guides/guide-c)
├── API 참조 (/docs/api)
│   ├── 인증 (/docs/api/authentication)
│   ├── 엔드포인트 (/docs/api/endpoints)
│   └── 웹훅 (/docs/api/webhooks)
├── 예시 (/docs/examples)
│   └── [예시] (/docs/examples/example-slug)
├── 변경 기록 (/docs/changelog)
└── FAQ (/docs/faq)

URL 맵

내비게이션

헤더: 문서 | API | 블로그 | 커뮤니티 | GitHub | [대시보드]

사이드바(고정, 왼쪽): 시작하기, 가이드, API 참조, 예시, 변경 기록 - 펼칠 수 있는 하위 섹션 포함

페이지 안: 각 문서 페이지 하단의 이전/다음 내비게이션

혼합형 SaaS + 콘텐츠

페이지 계층

홈페이지 (/)
├── 제품 (/product)
│   ├── 기능 A (/product/feature-a)
│   ├── 기능 B (/product/feature-b)
│   └── 기능 C (/product/feature-c)
├── 솔루션 (/solutions)
│   ├── 사용 사례별 (/solutions/use-case-slug)
│   └── 업종별 (/solutions/industry-slug)
├── 가격 (/pricing)
├── 블로그 (/blog)
│   ├── [카테고리] (/blog/category/slug)
│   └── [글] (/blog/post-slug)
├── 리소스 (/resources)
│   ├── 가이드 (/resources/guides)
│   ├── 템플릿 (/resources/templates)
│   ├── 웨비나 (/resources/webinars)
│   └── 사례 연구 (/resources/case-studies)
├── 문서 (/docs)
│   ├── 시작하기 (/docs/getting-started)
│   └── API (/docs/api)
├── 연동 (/integrations)
│   └── [연동] (/integrations/slug)
├── 비교 (/compare)
│   └── [경쟁사] (/compare/competitor-slug)
├── 소개 (/about)
│   ├── 채용 (/about/careers)
│   └── 문의 (/contact)
├── 개인정보 (/privacy)
└── 약관 (/terms)

내비게이션

헤더(7개 항목 + 행동 유도): 제품 | 솔루션 | 가격 | 리소스 | 블로그 | 문서 | 연동 | [무료 체험 시작]

제품(기능 목록), 솔루션(사용 사례 + 업종), 리소스(블로그, 가이드, 템플릿, 웨비나, 사례 연구)에는 메가 메뉴를 사용하세요.

소기업 / 지역 비즈니스

페이지 계층

홈페이지 (/)
├── 서비스 (/services)
│   ├── 서비스 A (/services/service-a)
│   ├── 서비스 B (/services/service-b)
│   └── 서비스 C (/services/service-c)
├── 소개 (/about)
├── 추천사 (/testimonials)
├── 블로그 (/blog)
│   └── [글] (/blog/post-slug)
├── 문의 (/contact)
├── 개인정보 (/privacy)
└── 약관 (/terms)

URL 맵

내비게이션

헤더(5개 항목 + 행동 유도): 서비스 | 소개 | 추천사 | 블로그 | [문의하기]

단순하게 유지하세요. 소기업 사이트는 평평해야 합니다(최대 1-2단계). 모든 페이지는 헤더에서 접근 가능해야 합니다.