블로그 개요 — 기술 스택 및 아키텍처
이 블로그는 완전 자동화된 다국어 기술 블로그입니다. 텔레그램 봇과의 대화나 뉴스 코멘트를 기반으로 Gemini AI가 블로그 포스트를 작성 및 번역하고, GitHub Pages로 자동 배포됩니다.
🏗️ 전체 아키텍처
[텔레그램 봇] → [Gemini AI] → [마크다운 생성]
↓
[자동 번역 (EN/JA)]
↓
[Git Commit & Push]
↓
[GitHub Actions → GitHub Pages]
↓
[VitePress 정적 사이트]📦 프론트엔드 (블로그)
| 기술 | 버전 | 용도 |
|---|---|---|
| VitePress | v1.6.4 | 정적 사이트 생성기 (SSG) |
| Vue.js | v3.4 | VitePress 내부 프레임워크, 커스텀 컴포넌트 |
| Markdown | — | 블로그 본문 작성 포맷 |
왜 VitePress인가?
- 뛰어난 성능 — 클라이언트 사이드 JavaScript를 최소화하여 빠른 로딩 속도 달성
- 높은 보안성 — 순수 정적 파일만 호스팅하므로 서버 사이드 취약점 원천 차단
- 개발 친화적 환경 — 문서(Docs) 스타일 레이아웃으로 본문 작성에 집중
🌍 다국어 지원
| 언어 | 경로 | 자동 번역 |
|---|---|---|
| 🇰🇷 한국어 | /blog/ | 원본 |
| 🇺🇸 영어 | /en/blog/ | ✅ Gemini AI |
| 🇯🇵 일본어 | /ja/blog/ | ✅ Gemini AI |
- VitePress의
locales설정을 활용하여 각 언어별 독립된 사이드바와 내비게이션 구성 - 텔레그램 봇의
/post또는/sync명령어로 번역 파이프라인 트리거
🎨 디자인 시스템
6:3:1 색상 비율 적용:
| 비율 | 역할 | 색상 |
|---|---|---|
| 60% | 기본 베이스 | #ffffff (라이트) / #0f172a (다크) |
| 30% | 서브 보조색 | #2563eb (블루) |
| 10% | 포인트 강조 | #f97316 (오렌지) |
- 라이트/다크 모드 전환 완벽 지원
- CSS Custom Properties 기반 테마 관리
🤖 백엔드 (텔레그램 봇)
| 기술 | 용도 |
|---|---|
| Python 3.9+ | 봇 메인 런타임 |
| python-telegram-bot | 텔레그램 봇 API 연동 |
| Google Gemini API | AI 대화, 블로그 본문 작성, 다국어 번역 |
| feedparser | 구글 뉴스 RSS 수집 |
| schedule | 뉴스 자동 전송 스케줄러 (매일 09:00 KST) |
| GitPython | 블로그 저장소 자동 커밋 및 푸시 |
주요 봇 명령어
| 명령어 | 기능 |
|---|---|
/post [제목] | 대화 기반 블로그 자동 작성 + 다국어 번역 + 배포 |
/write | 마크다운 직접 입력하여 즉시 포스팅 |
/sync | 미번역된 포스트 일괄 다국어 번역 |
/usage | API 토큰 사용량 확인 |
/reset | 대화 세션 초기화 |
AI 모델 분리 전략
| 모델 | Temperature | 용도 |
|---|---|---|
chat_model | 0.7 | 자연스러운 일상 및 질의응답 대화 |
post_model | 0.2 | 사실 기반 블로그 글 작성 (환각 최소화) |
🔗 서드파티 연동
| 서비스 | 용도 |
|---|---|
| Giscus | GitHub Discussions 기반 무서버 댓글 시스템 |
| Google Analytics 4 | 국가별/언어별 방문자 트래픽 및 통계 추적 |
| RSS Feed | 3개 국어 독립 구독 피드 자동 생성 (feed.xml) |
| Sitemap | 검색엔진 최적화(SEO)를 위한 sitemap.xml 자동 생성 |
| Google Search Console | 구글 검색 노출 관리 및 색인 최적화 |
🚀 CI/CD 파이프라인
코드 푸시 (main 브랜치)
↓
GitHub Actions 트리거
↓
npm ci → vitepress build
↓
sitemap.xml + feed.xml 자동 생성
↓
GitHub Pages 자동 배포- 빌드 소요 시간: 약 4초
- 배포 방식: GitHub Pages (정적 호스팅)
- 브랜치 전략:
main브랜치 푸시 시 자동 배포
🛡️ 보안
| 항목 | 관리 방식 |
|---|---|
| API 키 관리 | .env + .gitignore (Git 저장소에 미포함) |
| 봇 소스 자동 백업 | 1시간 간격 자동 커밋/푸시 (auto_push.py) |
| 정적 사이트 구조 | 서버 사이드 런타임 없음 → 공격 접점(Attack Surface) 최소화 |
| 댓글 시스템 | GitHub OAuth 기반 인증 (Giscus) |
📁 프로젝트 디렉토리 구조
uoosnn.github.io/ ← 블로그 (VitePress)
├── .vitepress/
│ ├── config.mjs ← 사이트 설정, 사이드바, RSS, Sitemap
│ └── theme/
│ ├── custom.css ← 6:3:1 컬러 테마
│ ├── index.mjs ← Giscus 레이아웃 확장
│ └── components/
│ └── GiscusComment.vue ← 댓글 컴포넌트
├── blog/ ← 한국어 원본 포스트
├── en/blog/ ← 영어 번역 포스트
├── ja/blog/ ← 일본어 번역 포스트
├── resume.md ← 이력서 (다국어 지원)
└── .github/workflows/
└── deploy.yml ← CI/CD 파이프라인
telegram_bot/ ← 텔레그램 봇
├── bot_main.py ← 메인 진입점
├── ai_processor.py ← Gemini AI 처리
├── github_uploader.py ← Git 업로드
├── news_scraper.py ← 뉴스 수집
└── auto_push.py ← 자동 커밋/푸시본 블로그는 완전 자동화된 서버리스 시스템입니다. 텔레그램에서의 대화가 블로그 포스트가 되고, AI가 다국어로 번역하며, GitHub Actions가 자동으로 배포합니다.
게시일: 2026-05-09수정일: 2026-08-15