简体中文 · English · 日本語 · 한국어 · Español · Français · Deutsch · Português · Русский · 繁體中文

• ❌ 공식 문서 업데이트가 지연되어 따라 해도 실행되지 않나요?
• ❌ 온라인 튜토리얼이 모두 복사 붙여넣기라 코드가 실행되지 않나요?
• ❌ 에러가 발생했을 때 해결책을 찾지 못했나요?
• ❌ 더 깊이 학습하고 싶지만 소스 코드 수준의 실전 가이드를 찾지 못했나요?

OpenCodeDocs는 이러한 문제를 전문적으로 해결합니다.

인터넷에서 복사한 것이 아니라 실제 소스 코드에서 유도한 핵심 로직

우리는 오픈 소스 프로젝트의 소스 코드를 심층 분석하여 모든 코드 라인이 자동화 검증을 거치도록 합니다. 튜토리얼은 특정 Git Commit 버전을 표시하여 어떤 버전을 기반으로 하는지 명확히 알 수 있습니다.

도구가 업데이트되면 튜토리얼도 자동으로 업데이트됩니다.

프로젝트가 릴리스되면 우리의 튜토리얼도 동시에 업데이트됩니다. 튜토리얼이 구버전인지 걱정할 필요가 없으며, 항상 최신 콘텐츠를 학습할 수 있습니다.

💡 우리의 튜토리얼은 빠르게 업데이트되고 있으며, 더 많은 고품질 프로젝트를 계속 추가하고 있습니다!

중국어, 영어, 일본어, 한국어, 스페인어, 프랑스어, 독일어, 포르투갈어, 러시아어, 번체 중국어...

어디에서 왔든 모국어로 AI 도구를 학습할 수 있습니다.

따라 하면 한 번에 성공하며, 추측하거나 시도할 필요가 없습니다.

튜토리얼의 모든 단계는 검증되었으며, 설치부터 배포까지 따라 하기만 하면 실행됩니다. 불필요한 삽질, 함정, 우회 경로가 없습니다.

설치 방법을 모르나요? 설정이 어렵나요? 걱정하지 마세요, 단계별 튜토리얼이 있습니다.

• 기초 지식 없이도 시작 가능
• 모든 단계에 자세한 설명 제공
• 일반적인 에러에 대한 해결책 제공

더 깊이 학습하고 싶나요? 소스 코드를 함께 탐구해 봅시다.

• 다중 계정 전환 기법
• 토큰 절약 비결
• 에이전트 자동화 실전
• 소스 코드 수준의 심층 분석

팀 협업에 통일된 규범이 필요하신가요?

• 재사용 가능한 모범 사례
• 완전한 프로젝트 구조
• 프로덕션 환경 배포 가이드

git clone https://github.com/vbgate/opencodedocs.git
cd opencodedocs/site

npm install

npm run dev

http://localhost:5173에 접속하여 AI 도구 학습 여정을 시작하세요! 🎉

💡 팁: opencodedocs.com에 직접 접속하여 온라인 문서를 볼 수도 있습니다.

site/
├── docs/                      # 문서 루트 디렉토리
│   ├── zh/                    # 중국어 튜토리얼 🇨🇳
│   ├── en/                    # 영어 튜토리얼 🇺🇸
│   ├── ja/                    # 일본어 튜토리얼 🇯🇵
│   ├── ko/                    # 한국어 튜토리얼 🇰🇷
│   ├── es/                    # 스페인어 튜토리얼 🇪🇸
│   ├── fr/                    # 프랑스어 튜토리얼 🇫🇷
│   ├── de/                    # 독일어 튜토리얼 🇩🇪
│   ├── pt/                    # 포르투갈어 튜토리얼 🇵🇹
│   ├── ru/                    # 러시아어 튜토리얼 🇷🇺
│   ├── zh-tw/                 # 번체 중국어 튜토리얼 🇹🇼
│   ├── .vitepress/            # VitePress 구성
│   │   ├── config.mts         # 주 구성 파일
│   │   ├── sidebar.config.ts  # 사이드바 자동 생성
│   │   └── theme/             # 사용자 정의 테마 컴포넌트
│   ├── about.md               # 회사 소개
│   └── terms.md               # 서비스 약관
├── scripts/                   # 유틸리티 스크립트
│   ├── add-order-to-md.ts     # 정렬 필드 추가
│   ├── check-frontmatter.ts   # Frontmatter 검사
│   └── create-category-indexes.ts  # 카테고리 인덱스 생성
├── package.json               # 프로젝트 구성
├── tailwind.config.js         # Tailwind CSS 구성
└── postcss.config.js          # PostCSS 구성

기술	버전	설명
	1.x	정적 사이트 생성기 · 초고속 빌드
	3.4+	프론트엔드 프레임워크 · Composition API
	4.x	스타일 시스템 · CSS-first 구성
	5.9+	타입 안전성 · 컴파일 타임 검사
	11.x	차트 지원 · 플로우차트 시각화
	Pages	글로벌 CDN · 200+ 엣지 노드

1. 디렉토리 구조 생성

   docs/zh/[owner]/[repo]/
   ├── index.md          # 프로젝트 홈페이지
   ├── start/            # 빠른 시작
   ├── features/         # 기능 소개
   └── faq/              # 자주 묻는 질문
   

2. Frontmatter 작성

   ---
   title: "튜토리얼 제목"              # 2-6 자
   order: 10                          # 정렬 (10, 20, 30...)
   sidebarTitle: "사이드바 제목"       # 선택 사항
   description: "SEO 설명"            # 검색 엔진 최적화
   ---

3. 빌드 검증

   npm run docs:build

docs/.vitepress/sidebar.config.ts에 프로젝트를 추가하세요:

const projects = [
  'owner/repo',  // 프로젝트 추가
]

그런 다음 home-config.[lang].json 파일을 번역하세요.

• 컴포넌트 위치: docs/.vitepress/theme/components/
• 스타일 파일: docs/.vitepress/theme/custom.css
• Tailwind v4: CSS-first 구성 방식 사용

npm run docs:build

빌드 결과물은 docs/.vitepress/dist/ 디렉토리에 있습니다.

# 자동 배포
npm run deploy

npm run docs:preview

• 이미지 최적화: WebP 형식 사용, 200KB 미만으로 압축
• 코드 분할: VitePress가 라우트별로 자동 분할
• CDN 가속: 정적 리소스를 Cloudflare CDN에 자동 업로드
• 사전 렌더링: 핵심 페이지 사전 렌더링, 첫 화면 로딩 < 500ms

✅ 우리의 사이트는 글로벌 CDN에 배포되어 있으며, 접속 속도가 번개처럼 빠릅니다!

커뮤니티 기여를 환영합니다! 튜토리얼을 제출하고, 오류를 수정하며, 새로운 기능을 추가하세요.

1. 이 저장소 포크

   # GitHub 페이지의 포크 버튼 클릭

2. 기능 브랜치 생성

   git checkout -b feature/amazing-feature

3. 변경 사항 커밋

   git commit -m 'Add amazing feature'

4. 브랜치에 푸시

   git push origin feature/amazing-feature

5. Pull Request 제출

   • GitHub 페이지의 "Pull Request" 버튼 클릭
   • PR 설명을 작성하고 변경 사항 설명

🌟 당신의 기여는 전 세계 개발자가 AI 도구를 더 잘 사용할 수 있도록 도와줍니다!

프로젝트에 고품질 튜토리얼이 있었으면 합니까? 단 3단계면 됩니다!

첫 번째 단계: Issue 제출

1. GitHub Issues 방문
2. "New Issue" 클릭
3. 다음 템플릿 사용:

**프로젝트 이름**: [프로젝트 이름]
**GitHub 저장소**: https://github.com/[owner]/[repo]
**프로젝트 소개**: [프로젝트 용도를 1-2문장으로 설명]
**대상 독자**: [초보자/중급자/전문가/모두]
**튜토리얼 언어**: [중국어/영어/기타]
**참고 사항**: [기타 추가 설명]

두 번째 단계: 팀 검토

• 신청을 1-3 영업일 내에 검토합니다
• 프로젝트가 등록에 적합한지 평가합니다
• 프로젝트 소스 코드 품질과 활동도를 확인합니다

세 번째 단계: 튜토리얼 출시

• 검토 통과 후 자동으로 튜토리얼을 생성합니다
• 각 단계의 실행 가능성을 검증합니다
• 공식 웹사이트에 게시하고 다국어를 지원합니다

• 검토 기간: 1-3 영업일
• 튜토리얼 생성: 3-7 영업일
• 출 시 시간: 검토 통과 후 즉시 게시

Q: 어떤 프로젝트가 등록에 적합합니까? A: 오픈 소스 AI 도구, 개발 도구, 라이브러리, 프레임워크 등입니다. 일정 수준의 기술적 깊이와 사용 가치가 있어야 합니다.

Q: 튜토리얼은 무료인가요? A: 네, 우리의 튜토리얼은 완전히 무료이며 지속적으로 업데이트 및 유지보수됩니다.

Q: 튜토리얼 언어를 지정할 수 있나요? A: 네, 10개 언어를 지원합니다. Issue에 필요한 언어를 명시할 수 있습니다.

🎯 지금 신청: Issue 생성 →

MIT License

CC-BY-NC-SA 4.0

저작자표시 - 비영리 - 동일조건변경허락

✅ 할 수 있는 것:

• 📋 공유: 자유롭게 공유 및 수정
• 🔧 변경: 튜토리얼 콘텐츠 기반 2차 창작
• 👥 기여: 개선 사항 제출

❌ 할 수 없는 것:

• 💰 상업적 사용: 허가 없이 상업적 목적으로 사용 불가

💡 튜토리얼을 상업적 목적으로 사용하고 싶다면 문의하세요: [email protected]

질문이나 제안이 있으신가요? 언제든지 문의하세요!

• 📧 Email: [email protected]
• 🐦 Twitter: @codingzys
• 💻 GitHub: vbgate/opencodedocs
• 📥 튜토리얼 제출: GitHub Issues
• 🌐 공식 웹사이트: opencodedocs.com