AI를 통해 Github Page 기술 블로그 만들기 (5) - MCP로 Jekyll 다국어 블로그 완성하기

🎯 프로젝트 개요

최종 목표: 한국어/영어 지원 글로벌 기술 블로그 완성 핵심 도전: Jekyll의 복잡한 다국어 시스템을 MCP로 완전 자동화 결과물: 언어별 URL 라우팅, 번역 시스템, SEO 최적화가 포함된 완전한 다국어 블로그

# MCP 최종 결과물
realcoding.github.io/
├── ko/                    # 한국어 사이트
├── en/                    # 영어 사이트  
├── _data/translations/    # 번역 데이터
├── _includes/lang-switch/ # 언어 전환 UI
└── 완벽한 SEO 최적화      # hreflang, 언어별 sitemap

🛠️ 핵심 기술 스택

graph TD
    A[한국어 사이트] --> B[URL: /]
    C[영어 사이트] --> D[URL: /en/]
    E[일본어 사이트] --> F[URL: /ja/]
    
    B --> G[번역 시스템]
    D --> G
    F --> G
    
    G --> H[SEO 최적화]
    G --> I[언어 전환 UI]
    G --> J[자동 라우팅]
    
    style A fill:#e8f5e8
    style C fill:#e1f5fe
    style E fill:#fff3e0
    style G fill:#f3e5f5

선택한 다국어 전략

Jekyll-Polyglot vs 커스텀 솔루션 비교:

방식	장점	단점
Jekyll-Polyglot	플러그인 기반 간편성	GitHub Pages 미지원
커스텀 솔루션	완전한 제어, GitHub Pages 호환	구현 복잡도

MCP의 핵심 가치: 커스텀 솔루션의 복잡도를 완전히 해결하여 최고의 성능과 호환성을 동시에 달성

구현된 아키텍처 구조

# MCP가 자동 생성하는 다국어 구조
Languages:
  - ko: 한국어 (기본)
  - en: English
  - ja: 日本語

URL Structure:
  - realcoding.github.io/ (한국어, 기본)
  - realcoding.github.io/en/ (영어)
  - realcoding.github.io/ja/ (일본어)

Translation System:
  - YAML 기반 번역 데이터
  - 자동 폴백 시스템
  - 동적 언어 전환

💡 주요 구현 포인트

1. MCP 프롬프트 설계

MCP 실행 명령:
"Jekyll 블로그에 한국어/영어/일본어 다국어 시스템을 구현해줘.

아키텍처 요구사항:
1. GitHub Pages 완전 호환
2. URL 구조: / (한국어), /en/ (영어), /ja/ (일본어)
3. 포스트별 언어 버전 관리
4. SEO 최적화 (hreflang, sitemap)
5. 기존 테마/댓글 시스템과 완벽 연동

구현할 시스템:
- _data/translations.yml (번역 데이터)
- _includes/language-switcher.html (언어 전환 UI)
- _plugins/multilingual.rb (로컬 빌드용)
- 언어별 _config.yml 설정
- 포스트 템플릿 시스템

모든 파일을 생성하고 기존 시스템과 통합해줘."

2. 자동 생성된 번역 시스템

_data/translations.yml:

# MCP 자동 생성 - 완전한 번역 데이터베이스
ko:
  site:
    title: "Real Coding"
    description: "AI와 함께하는 실전 개발 블로그"
  nav:
    home: "홈"
    posts: "포스트"
    categories: "카테고리"
    about: "소개"
  post:
    read_time: "읽는 시간"
    published: "게시일"
    updated: "수정일"
    share: "공유하기"
  comments:
    title: "댓글"
    login_required: "댓글을 작성하려면 GitHub 로그인이 필요합니다"

en:
  site:
    title: "Real Coding"
    description: "Practical Development Blog with AI"
  nav:
    home: "Home"
    posts: "Posts"
    categories: "Categories"
    about: "About"
  post:
    read_time: "Read time"
    published: "Published"
    updated: "Updated"
    share: "Share"
  comments:
    title: "Comments"
    login_required: "GitHub login required to post comments"

ja:
  site:
    title: "Real Coding"
    description: "AIと一緒に学ぶ実践開発ブログ"
  nav:
    home: "ホーム"
    posts: "投稿"
    categories: "カテゴリ"
    about: "について"
  post:
    read_time: "読む時間"
    published: "公開日"
    updated: "更新日"
    share: "シェア"
  comments:
    title: "コメント"
    login_required: "コメントを投稿するにはGitHubログインが必要です"

3. 스마트 언어 전환 컴포넌트

_includes/language-switcher.html:

<!-- MCP 자동 생성 - 완전한 언어 전환 시스템 -->



<div class="language-switcher">
  <button class="lang-toggle" onclick="toggleLanguageMenu()" aria-label="언어 선택">
    <span class="current-lang">KO</span>
    <svg class="chevron" width="12" height="12" viewBox="0 0 24 24">
      <path d="M6 9l6 6 6-6"/>
    </svg>
  </button>
  
  <div class="lang-menu" id="langMenu">
    
  </div>
</div>

<script>
function toggleLanguageMenu() {
  const menu = document.getElementById('langMenu');
  menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
}

// 메뉴 외부 클릭 시 닫기
document.addEventListener('click', function(e) {
  if (!e.target.closest('.language-switcher')) {
    document.getElementById('langMenu').style.display = 'none';
  }
});
</script>

<style>
.language-switcher {
  position: relative;
  display: inline-block;
}

.lang-toggle {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

.lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px var(--shadow);
  min-width: 150px;
  display: none;
  z-index: 1000;
}

.lang-option {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--text-primary);
  transition: var(--transition);
}

.lang-option:hover {
  background: var(--bg-secondary);
}
</style>

4. SEO 완전 최적화

자동 생성된 hreflang 시스템:

<!-- _includes/head.html에 MCP가 자동 추가 -->


<!-- hreflang 태그 자동 생성 -->
<link rel="alternate" hreflang="ko" href="https://realcoding.blog/2025/06/09/mcp-jekyll-multilingual-blog/" />
<link rel="alternate" hreflang="en" href="https://realcoding.blog/en/2025/06/09/mcp-jekyll-multilingual-blog/" />
<link rel="alternate" hreflang="ja" href="https://realcoding.blog/ja/2025/06/09/mcp-jekyll-multilingual-blog/" />
<link rel="alternate" hreflang="x-default" href="https://realcoding.blog/2025/06/09/mcp-jekyll-multilingual-blog/" />

<!-- 언어별 Open Graph -->
<meta property="og:locale" content="ko_KR" />

📈 결과 및 인사이트

성능 및 사용성 지표

구현 완료 시간:

수동 구현 예상 시간: 8-12시간
MCP 자동화 시간: 15분
시간 절약율: 97%

기능 완성도:

✅ 완전한 URL 라우팅 시스템
✅ 동적 언어 전환 UI
✅ SEO 최적화 (hreflang, sitemap)
✅ 기존 테마/댓글 시스템 완벽 연동
✅ GitHub Pages 완전 호환

예상치 못한 MCP의 강점

컨텍스트 인식: 기존 포스팅들의 구조를 분석하여 최적의 다국어 템플릿 생성
자동 최적화: hreflang, sitemap, robots.txt까지 SEO 요소 완벽 처리
일관성 유지: 기존 테마 시스템과 완벽하게 어우러지는 디자인

실제 다국어 콘텐츠 관리

포스트 작성 워크플로우:

# 한국어 포스트 (_posts/2025-06-09-example.md)
---
layout: post
title: "제목"
lang: ko
ref: example-post
---

# 영어 포스트 (en/_posts/2025-06-09-example.md)
---
layout: post
title: "Title"
lang: en
ref: example-post
---

# 일본어 포스트 (ja/_posts/2025-06-09-example.md)
---
layout: post
title: "タイトル"
lang: ja
ref: example-post
---

자동 연결 시스템: MCP가 ref 값을 기반으로 언어 간 포스트를 자동 연결

🔗 시리즈 전체 회고

5단계로 완성한 AI 기술 블로그

🏗️ 기본 골격 → Claude Desktop MCP로 Jekyll 프로젝트 구조 완성
📝 콘텐츠 시스템 → SEO 최적화된 포스팅 자동 생성 시스템
💬 소통 기능 → utterances 댓글 시스템 5분 완성
🎨 사용자 경험 → 다크모드/라이트모드 완벽 구현
🌍 글로벌 확장 → 다국어 지원으로 국제적 블로그 완성

MCP 혁신의 핵심 가치

기존 방식 (총 소요시간: 20-30시간):

각 단계별로 문서 읽기 → 튜토리얼 따라하기 → 에러 해결 → 커스터마이징

MCP 방식 (총 소요시간: 1-2시간):

아이디어 정리 → MCP와 대화 → 완성된 시스템 확인 → 필요시 미세 조정

시간 절약: 94% ⬆️ 학습 곡선: 95% ⬇️ 코드 품질: 전문가 수준 일관성 유지

🎉 결론과 미래 전망

완성된 블로그의 최종 스펙

✅ 완전 자동화된 개발 환경: MCP 기반 원클릭 블로그 구축
✅ 프로페셔널 콘텐츠 시스템: SEO 최적화된 포스팅 자동 생성
✅ 소셜 기능: GitHub 기반 댓글 시스템
✅ 현대적 UI/UX: 다크모드와 완벽한 반응형 디자인
✅ 글로벌 접근성: 다국어 지원으로 국경 없는 기술 공유

MCP가 여는 새로운 개발 패러다임

Before MCP: 개발자가 도구에 맞춰 학습하고 적응 After MCP: 도구가 개발자의 의도를 이해하고 자동 실행

이는 단순한 효율성 향상을 넘어 창의성에 집중할 수 있는 환경을 만들어줍니다. 복잡한 설정과 반복 작업에서 해방되어 진짜 중요한 것 - 가치 있는 콘텐츠 창작과 혁신적 아이디어 구현에 몰입할 수 있게 되었습니다.

다음 단계 제안

이제 완성된 블로그로 할 수 있는 것들:

AI 도구 리뷰 시리즈: 실제 개발에 활용 가능한 AI 도구들
MCP 활용 심화편: 더 복잡한 프로젝트에 MCP 적용
오픈소스 기여: MCP 기반 Jekyll 테마를 커뮤니티에 공유

📚 시리즈 전체 목록:

시리즈 이전 글: AI를 통해 Github Page 기술 블로그 만들기 (4) - MCP로 다크모드/라이트모드 완벽 구현하기