작성일: 2026년 2월 3일카테고리: Claude Code, AI 개발 도구, 플러그인키워드: Superpowers, Claude Code, TDD, 에이전틱 개발, Jesse Vincent요약Superpowers는 Claude Code용 공식 플러그인으로, AI 에이전트에게 체계적인 소프트웨어 개발 방법론을 학습시키는 스킬 프레임워크다. TDD(테스트 주도 개발), 체계적 디버깅, 브레인스토밍, 서브에이전트 기반 개발 등의 기능을 제공하며, 2026년 1월 Anthropic 공식 플러그인 마켓플레이스에 등록되었다. 이 글에서는 Superpowers의 핵심 개념, 설치 방법, 실전 워크플로우를 다룬다.Superpowers가 해결하는 문제AI 코딩 어시스턴트의 한계Claude Code를 사용하다 보면 익..
작성일: 2026년 2월 3일카테고리: AI, Developer Tools, Workflow키워드: Claude Code, GitHub Issues, Milestones, Projects, AI Agent, Workflow Automation요약Claude Code는 200k context window를 제공하지만, 대규모 프로젝트에서는 여전히 컨텍스트 관리가 중요하다. GitHub Issues, Milestones, Projects를 .claude 디렉토리 설정과 통합하면 컨텍스트 소모를 최소화하면서 복잡한 프로젝트를 체계적으로 관리할 수 있다. 이 글에서는 36개 특화 에이전트와 7개 슬래시 명령을 활용한 워크플로우를 공유한다.공개 저장소: github.com/junsik/.claude전체 워크플로우..
작성일: 2026년 1월 31일카테고리: Claude Code, Windows, Troubleshooting키워드: Claude Code, Windows, MINGW64, Git Bash, Shell Script, pnpm, npm, docker요약Windows Git Bash(MINGW64) 환경에서 Claude Code가 docker, pnpm, npm 등의 명령어를 실행할 때 결과가 "(No content)"로 표시되는 버그가 발생했다. 이는 이들 명령어가 실제로는 셸 스크립트 래퍼이기 때문이다. 해결책은 docker.exe, pnpm.cmd처럼 확장자를 명시하거나, CLAUDE.md에 이를 미리 설정하는 것이다.문제 상황증상최근 며칠간 Windows에서 Claude Code를 사용할 때 이상한 현..
작성일: 2026년 01월 28일카테고리: Python, Troubleshooting, Windows키워드: uvicorn, FastAPI, Windows, zombie process, port binding, CTRL_C_EVENT요약Windows 환경에서 uvicorn을 --host 0.0.0.0으로 실행한 뒤 프로세스를 종료하면, 자식 프로세스가 제대로 정리되지 않아 포트가 계속 점유된 상태로 남는다. 소스 코드를 수정해도 이전 프로세스가 응답하기 때문에 변경사항이 반영되지 않는 것처럼 보인다. 근본 원인은 Windows의 CTRL_C_EVENT 시그널이 특정 프로세스가 아닌 콘솔 전체에 브로드캐스트되는 구조적 한계에 있다.문제 상황증상FastAPI + uvicorn으로 개발 중, 다음과 같은 현상..
작성일: 2026년 01월 23일카테고리: AI-Assisted Development, Frontend, MCP키워드: Claude Code, Stitch, MCP, Google Cloud, Remote MCP Server, Frontend Development요약프론트엔드 개발에서 디자인 시안을 코드로 전환하는 과정은 반복적이고 시간 소모적이다. Google Stitch는 텍스트 프롬프트로 UI 디자인을 생성하고, 이를 HTML 또는 React 컴포넌트로 변환하는 도구다. Model Context Protocol (MCP)을 통해 Claude Code와 연동하면, IDE 내에서 디자인 생성부터 코드 변환까지 자동화할 수 있다. 이 글에서는 Stitch MCP의 아키텍처, Claude Code 연동 설정..
작성일: 2026-01-25카테고리: AI, Automation, Productivity키워드: Clawdbot, AI Assistant, Claude, Automation, Discord Bot요약Clawdbot은 Claude AI를 24시간 작동하는 개인 비서로 만들어주는 오픈소스 도구다. Discord, Telegram 등 원하는 메신저로 대화하고, 뉴스 체크부터 코드 작성까지 자동화할 수 있다. 이 글은 기술 배경 없는 일반인도 따라할 수 있도록 설치부터 실전 활용까지 안내한다.왜 Clawdbot인가?ChatGPT와 무엇이 다른가?ChatGPT는 호텔 리셉션 데스크와 같다. 필요할 때 직접 찾아가서 물어봐야 한다. 대화가 끝나면 기억이 리셋된다.Clawdbot은 집에 있는 개인 비서다. 당신이 누..
작성일: 2026-01-25카테고리: AI/ML, LangChain, Agent Engineering키워드: AI Agent, LangChain, LangGraph, Agent Harness, LLM Orchestration요약2026년 AI 에이전트 시장의 핵심은 모델이 아닌 하네스다. LangChain 설문조사에 따르면 57%의 조직이 파인튜닝 대신 오케스트레이션을 선택하고 있으며, Gartner는 멀티에이전트 시스템 문의가 1,445% 급증했다고 보고한다. 이 글은 LangChain 중심의 학습 가이드와 시장 트렌드를 종합적으로 분석한다.Part 1: 에이전트 하네스 학습 자료모델이 엔진이면 에이전트 하네스는 자동차 전체에이전트 하네스(Agent Harness)는 LLM 주변의 모든 소프트웨어 인프..
작성일: 2026년 1월 20일카테고리: AI Development, Claude Code, Developer Tools키워드: Status Line, Claude Code, PowerShell, Terminal Customization, Developer Experience요약Claude Code에서 /statusline 명령과 자연어 프롬프트 한 줄이면 터미널 하단에 모델명, 컨텍스트 사용량, Git 브랜치, 세션 비용을 표시하는 Status Line이 완성된다. 스크립트 작성도, 설정 파일 편집도 Claude가 알아서 해준다.Status Line이란?Claude Code 터미널 하단에 지속적으로 표시되는 정보 바다. Oh My Zsh의 프롬프트처럼, 작업에 필요한 정보를 한눈에 보여준다.Opus 4..
작성일: 2026년 01월 21일카테고리: Developer Tools, AI, Code Search키워드: mgrep, semantic search, Claude Code, grep, code navigation요약대규모 코드베이스에서 원하는 코드를 찾는 것은 개발자의 주요 병목 중 하나다. 기존 grep은 키워드 매칭에 의존하여 42개의 무관한 파일을 반환하거나, 정작 필요한 파일을 놓치기도 한다. mgrep은 시맨틱 검색을 통해 "무엇을 찾고 싶은지"를 자연어로 표현하면 관련성 높은 결과를 반환한다.문제: grep의 한계키워드 기반 검색의 딜레마grep은 정규표현식 기반 텍스트 매칭 도구다. 강력하지만 근본적인 한계가 있다.상황grep의 문제동의어"authentication"을 검색하면 "auth"..
작성일: 2026년 01월 19일카테고리: AI, LLM, RAG키워드: RAG, Retrieval-Augmented Generation, GraphRAG, Agentic RAG, Knowledge Graph, LLM요약LLM은 모르는 것을 그럴듯하게 지어낸다(환각). 이 문제를 해결하기 위해 2020년 RAG가 등장했고, 기본 RAG의 한계를 극복하기 위해 두 가지 방향으로 발전했다: Agentic RAG(반복 검색, 도구 선택)와 GraphRAG(관계 기반 검색). 이 글에서는 RAG 기술의 발전 흐름을 정리하고, "LLM API는 한 번 호출하면 끝인데, 누가 RAG 루프를 돌리는가?"라는 질문에 답한다.시작점: LLM의 환각 문제ChatGPT에게 "우리 회사 매출이 얼마야?"라고 물으면 두 가지 ..
작성일: 2026년 01월 19일카테고리: AI, RAG, Evaluation키워드: RAG Evaluation, RAGAS, Faithfulness, Context Recall, Ground Truth요약"이 RAG 시스템이 잘 작동하는가?"라는 질문에 "대충 괜찮아 보인다"는 답은 충분하지 않다. 전문 지식 노동자를 위한 시스템은 정량적 평가가 필수다. 이 글에서는 RAG 시스템의 품질을 측정하는 핵심 지표와 RAGAS 프레임워크를 활용한 평가 파이프라인 구축을 다룬다.왜 평가가 필요한가"그럴듯한" vs "정확한"질문: "2024년 4분기 매출은?"답변 A: "2024년 4분기 매출은 약 150억원 수준으로, 전분기 대비 성장세를 보였습니다." → 그럴듯하지만, 숫자가 맞는지..
작성일: 2026년 01월 19일카테고리: AI, RAG, Knowledge Graph키워드: Microsoft GraphRAG, Community Detection, Global Search, Local Search, Hierarchical Summarization요약Microsoft의 GraphRAG는 요약 중심의 RAG에 특화된 구현체다. 기존 RAG가 "이 문서에 뭐라고 써있어?"라는 질문에 답한다면, GraphRAG는 "전체 데이터에서 주요 테마가 뭐야?"와 같은 전역적 질문에 답할 수 있다. 이 글에서는 GraphRAG의 핵심 메커니즘인 커뮤니티 탐지와 계층적 요약을 분석한다.기존 RAG의 전역적 질문 한계문제 상황문서 집합: 호메로스의 "오디세이" 전체 텍스트질문: "이 서사시의 주요 테마는..
작성일: 2026년 01월 19일카테고리: AI, Knowledge Graph, LLM키워드: Knowledge Graph Construction, Entity Extraction, Relation Extraction, LLM, Neo4j요약지식 그래프 기반 RAG는 그래프가 존재해야 작동한다. 수동으로 그래프를 구축하는 것은 비용이 크고 확장이 어렵다. 이 글에서는 LLM을 활용하여 비정형 텍스트에서 자동으로 엔티티와 관계를 추출하고 지식 그래프를 구축하는 방법을 다룬다.수동 그래프 구축의 한계전통적인 방식1. 도메인 전문가가 온톨로지 설계2. 데이터 분석가가 문서 분석3. 수작업으로 엔티티/관계 추출4. 검증 및 품질 관리문제점:시간 소요: 문서 1개당 수 시간확장성 부재: 문서가 늘어날수록 비용 증..
작성일: 2026년 01월 19일카테고리: AI, RAG, Agent키워드: Agentic RAG, LLM Agent, Tool Calling, ReAct, Self-Correction요약기본 RAG는 "질문 → 검색 → 답변"의 고정된 파이프라인을 따른다. Agentic RAG는 이 구조를 탈피하여, LLM이 스스로 검색 도구를 선택하고, 결과를 평가하며, 필요시 재검색하는 자율적 시스템이다. 이 글에서는 Agentic RAG의 핵심 메커니즘인 에이전트 루프와 도구 호출(Tool Calling)을 분석한다.기본 RAG의 한계고정된 파이프라인[기본 RAG]질문 → 벡터 검색(1회) → LLM → 답변이 구조의 문제점:단일 검색: 검색 결과가 부족해도 재검색 불가고정 도구: 벡터 검색만 사용, 다른 도구 ..
작성일: 2026년 01월 19일카테고리: AI, RAG, Knowledge Graph키워드: Text2Cypher, Neo4j, Cypher, Knowledge Graph, Graph Query요약벡터 검색은 의미적 유사성을 찾는 데 탁월하지만, 데이터 간의 관계를 추론하지 못한다. "김철수가 완료한 업무가 몇 개인가?"와 같은 질문에 답하려면 구조화된 쿼리가 필요하다. 이 글에서는 자연어 질문을 Neo4j의 Cypher 쿼리로 변환하는 Text2Cypher 기법을 다룬다.벡터 검색이 실패하는 질문문제 상황질문: "John Doe가 완료한 업무가 몇 개인가?"벡터 검색 결과:- "John Doe는 개발팀 소속입니다."- "업무 완료 시 상태를 Completed로 변경하세요."- "John Doe가 Ta..
작성일: 2026년 01월 19일카테고리: AI, RAG, Retrieval키워드: Step-back Prompting, Parent Document Retriever, Multi-Query, HyDE요약기본 벡터 검색은 질문과 문서의 직접적인 유사도만 비교한다. 이 접근법은 단순한 질문에는 효과적이지만, 복잡하거나 추상적인 질문에서는 관련 문서를 놓치기 쉽다. 이 글에서는 검색 품질을 향상시키는 4가지 고급 전략을 분석한다.기본 검색의 한계문제 상황질문: "왜 마이크로서비스 아키텍처에서 서킷 브레이커가 중요한가?"기본 벡터 검색 결과:- "서킷 브레이커 패턴 구현 가이드" (키워드 일치)- "마이크로서비스 아키텍처 개요" (키워드 일치)누락된 문서:- "분산 시스템의 장애 전파 방지" (핵심 원리)- ..
작성일: 2026년 01월 19일카테고리: AI, RAG, Vector Search키워드: Embedding, Cosine Similarity, Vector Database, Hybrid Search, Full-text Search요약RAG 시스템의 검색 품질은 전체 시스템 성능을 결정한다. 이 글에서는 텍스트를 수학적 벡터로 변환하여 '의미'를 검색하는 벡터 유사도 검색의 메커니즘을 분석하고, 키워드 검색을 결합한 하이브리드 검색 전략을 다룬다.검색기(Retriever)의 역할RAG의 성패는 검색기가 얼마나 정확한 문서를 찾아오느냐에 달려 있다.[좋은 검색] → 관련 문서 → 정확한 답변[나쁜 검색] → 무관한 문서 → 부정확한 답변 또는 환각전통적인 키워드 검색은 단어의 정확한 일치를 찾는다. "자동..
작성일: 2026년 01월 19일카테고리: AI, LLM, RAG키워드: LLM, Hallucination, Knowledge Cutoff, RAG, Fine-tuning요약대규모 언어 모델(LLM)은 확률적 단어 예측 모델이지, 사실을 저장하고 인출하는 데이터베이스가 아니다. 이 글에서는 LLM이 그럴듯한 거짓말(환각)을 하는 구조적 원인을 분석하고, 이를 극복하기 위한 전략적 접근법으로서 RAG(Retrieval-Augmented Generation)의 필요성을 다룬다.LLM은 데이터베이스가 아니다2023년 미국에서 변호사들이 법정에 제출한 서류에 ChatGPT가 생성한 가짜 판례가 포함되어 있었다. 해당 판례는 존재하지 않았고, 변호사들은 징계와 벌금형을 받았다. 이 사건은 LLM의 환각(Hallu..
시리즈 개요: 이 시리즈는 LLM의 한계를 극복하고 신뢰할 수 있는 AI 시스템을 구축하기 위한 RAG(Retrieval-Augmented Generation) 기술의 진화 과정을 다룬다. 단순 벡터 검색부터 지식 그래프 기반 GraphRAG, 자율적 판단이 가능한 Agentic RAG까지 단계별로 학습한다.시리즈 구성Part제목핵심 주제1LLM 정확도 향상LLM의 구조적 한계와 RAG의 필요성2벡터 검색과 하이브리드 검색임베딩, 코사인 유사도, 키워드 검색 결합3고급 벡터 검색 전략Step-back Prompting, Parent Document Retriever4Text2Cypher: 자연어를 그래프 쿼리로Cypher 쿼리 생성, 스키마 활용5Agentic RAG자율적 도구 선택, 자가 교정 루프6L..
작성일: 2026년 1월 16일카테고리: AI Development, Claude Code, Developer Tools키워드: Agent Skills, Claude Code, React Best Practices, Web Accessibility, AI Automation요약AI 코딩 에이전트가 React 성능 최적화 규칙 40개를 알고 있고, UI 접근성 규칙 100개를 자동으로 검증한다면 어떨까? Agent Skills는 Claude Code를 비롯한 AI 코딩 에이전트에 전문 지식을 주입하는 오픈 스탠다드다. Anthropic이 2025년 12월 공개한 이 형식은 OpenAI도 채택하여, 벤더 락인 없이 다양한 AI 도구에서 동작한다. 이 글에서는 Agent Skills의 개념부터 Claude C..
작성일: 2026년 1월 16일카테고리: Python, 개발 도구, 패키징키워드: uv, Python, editable install, 개발 모드, pip, 패키지 개발요약uv는 Python 패키지를 기본적으로 editable mode로 설치한다. uv sync 한 번으로 프로젝트와 의존성이 모두 개발 모드로 설치되어, 코드 수정 시 재설치 없이 즉시 반영된다. 기존 pip의 pip install -e .보다 10배 빠르며, 현대적인 Python 패키지 개발의 표준이 되고 있다.왜 Editable Install이 필요한가?반복 작업의 고통Python 패키지를 개발할 때 다음 과정을 수백 번 반복한다:# 1. 코드 수정vim mypackage/utils.py# 2. 패키지 재설치pip install .# ..
작성일: 2026년 1월 16일카테고리: Claude Code, Git, 개발 도구키워드: Claude Code, Git Commit, Co-Authored-By, Attribution, Settings요약Claude Code는 기본적으로 커밋 메시지에 Co-Authored-By: Claude Sonnet 4.5 서명을 자동으로 추가한다. 이 글에서는 .claude/settings.json의 attribution 설정으로 이를 비활성화하는 방법과, CLAUDE.md 지시문으로는 이를 완전히 제어할 수 없는 이유를 설명한다.문제 상황자동으로 추가되는 Co-Authored-ByClaude Code로 커밋을 생성하면 다음과 같은 서명이 자동으로 추가된다:feat: Add user authenticationC..
작성일: 2026년 1월 16일카테고리: Python, 개발 도구, 자동화키워드: Python, watchdog, 파일 모니터링, 자동화, inotify요약Watchdog는 파일 시스템의 변경 사항(생성, 수정, 삭제)을 실시간으로 감지하는 Python 라이브러리다. Linux의 inotify, macOS의 FSEvents 등 OS별 네이티브 API를 사용하며, API와 명령줄 도구(watchmedo)를 모두 제공한다. 자동 빌드, 테스트 실행, 로그 수집 등 파일 변경 기반 자동화에 활용된다.왜 파일 모니터링이 필요한가?반복 작업의 자동화개발하다 보면 파일이 변경될 때마다 특정 작업을 반복한다:# 코드 수정$ vim app.py# 테스트 실행$ pytest tests/# 다시 코드 수정$ vim app..
작성일: 2026년 01월 16일카테고리: IDE, Troubleshooting, AI Tools키워드: Antigravity, Gemini, Agent Terminated, Usage Limit, AI IDE요약Antigravity IDE에서 반복적으로 발생하는 "Agent terminated due to error" 에러의 원인을 파악했습니다. Windows와 WSL 환경 모두에서 동일한 문제가 발생했으며, Gemini CLI의 /stats 명령어를 통해 사용 한도 도달이 근본 원인임을 확인했습니다. 다른 AI IDE들과 달리 Antigravity는 사용 한도 도달 시 명확한 안내 없이 일반적인 에러 메시지만 반복 표시하는 UX 문제가 있습니다.문제 상황증상Antigravity IDE 사용 중 다음과..
작성일: 2026년 01월 09일카테고리: Python, Developer Tools, Testing키워드: Streamlit, Python, API Testing, Developer Experience, Internal Tools요약API 테스트 도구를 Postman이나 Insomnia 없이 Python만으로 만들 수 있다. Streamlit은 데이터 앱 구축 프레임워크로, 50줄 이내의 코드로 세션 관리와 API 호출 UI를 갖춘 테스트 도구를 만들 수 있다. 이 글에서는 Streamlit의 핵심 기능을 살펴보고, 실제 API Integration Tester 구현 사례를 통해 실무에서 활용하는 방법을 다룬다.왜 Streamlit인가?Streamlit이란Streamlit은 Python 스크립트를 인터..
작성일: 2026년 1월 9일카테고리: Operations, Production, DevOps키워드: 운영, 모니터링, 비용 최적화, 장애 대응, 배포시리즈: 온톨로지 + AI 에이전트: 세무 컨설팅 시스템 아키텍처 (20부/총 20부)대상 독자: 온톨로지에 입문하는 시니어 개발자핵심 질문"모니터링, 비용 최적화, 장애 대응은?"시스템을 구현하는 것과 운영하는 것은 다르다. 이 글에서는 개발 환경을 벗어나 프로덕션에서 실제로 운영할 때 마주하는 문제들을 다룬다. 무엇을 모니터링해야 하는가? LLM 비용을 어떻게 관리하는가? 장애가 발생하면 어떻게 대응하는가?요약프로덕션 운영의 핵심은 가시성(Observability), 비용 통제, 장애 복원력이다. 모니터링은 "측정하지 않으면 관리할 수 없다"는 원칙을 ..
작성일: 2026년 1월 9일카테고리: Multi-Agent Architecture, Collaboration Pattern키워드: 멀티 에이전트, 협업 패턴, 슈퍼바이저, 상태 공유, 역할 분담시리즈: 온톨로지 + AI 에이전트: 세무 컨설팅 시스템 아키텍처 (19부/총 20부)대상 독자: 온톨로지에 입문하는 시니어 개발자핵심 질문"여러 에이전트가 어떻게 협업하는가?"단일 에이전트는 모든 작업을 혼자 처리한다. 코드가 길어지고, 병렬 처리가 어려우며, 한 부분의 수정이 전체에 영향을 준다. 이 글에서는 역할별 전문 에이전트가 슈퍼바이저의 조율 아래 협업하는 아키텍처를 설계한다.요약멀티 에이전트 시스템은 전문화, 병렬성, 확장성을 제공한다. 데이터 에이전트, 검증 에이전트, 분석 에이전트, RAG 에이전..
작성일: 2026년 1월 9일카테고리: Pipeline Architecture, Automation키워드: 파이프라인, 리포트 생성, 데이터 흐름, 계층 아키텍처시리즈: 온톨로지 + AI 에이전트: 세무 컨설팅 시스템 아키텍처 (18부/총 20부)대상 독자: 온톨로지에 입문하는 시니어 개발자핵심 질문"데이터 수집부터 PDF 출력까지의 흐름은?"세무 분석 에이전트를 구현했더라도, "매월 수동 실행"은 자동화가 아니다. 이 글에서는 월간 리포트 파이프라인의 아키텍처를 설계한다. 단순 코드 구현이 아닌, 각 계층의 역할과 설계 결정의 근거를 중심으로 살펴본다.요약회계 ERP 데이터가 CEO 책상 위의 PDF 리포트가 되기까지는 5개 계층을 통과한다. 트리거(Trigger), 수집(Collection), 분석(..
작성일: 2026년 1월 9일카테고리: AI Agent, LangGraph, Tax Analysis키워드: AI 에이전트, ReAct, 도구 활용, 자율 분석, LangGraph시리즈: 온톨로지 + AI 에이전트: 세무 컨설팅 시스템 아키텍처 (17부/총 20부)대상 독자: 온톨로지에 입문하는 시니어 개발자요약12부에서 LangGraph 기초를, 13부에서 커스텀 도구를, 16부에서 GraphRAG를 구현했다. 이제 이 모든 것을 하나의 세무 분석 에이전트로 통합한다. 데이터 조회 → SHACL 검증 → 재무 분석 → 이상 탐지 → 리포트 생성까지의 전체 워크플로우를 LangGraph로 구현하고, GraphRAG와 SHACL 검증을 도구로 연결한다.핵심 질문자율적으로 분석하는 에이전트를 어떻게 설계하는가..
작성일: 2026년 1월 9일카테고리: GraphRAG, Knowledge Graph, LLM키워드: GraphRAG, NL2SPARQL, 하이브리드 검색, Graph-aware Prompting시리즈: 온톨로지 + AI 에이전트: 세무 컨설팅 시스템 아키텍처 (16부/총 20부)대상 독자: 온톨로지에 입문하는 시니어 개발자요약15부에서 SHACL로 세무 분석 규칙을 정의했다. 이제 Knowledge Graph의 구조화된 지식을 LLM의 자연어 처리 능력과 결합한다. 이 조합을 GraphRAG라 부른다. 사용자는 "A노무법인의 부채비율이 업계 평균보다 높나요?"라고 자연어로 질문하고, 시스템은 SPARQL로 정확한 데이터를 조회한 후 LLM이 해석을 덧붙인다.핵심 질문구조화된 지식을 LLM 컨텍스트로 어..
- Total
- Today
- Yesterday
- Tailwind CSS
- 개발 도구
- architecture
- Claude Opus 4.5
- Go
- Next.js
- backend
- knowledge graph
- frontend
- Kubernetes
- Developer Tools
- authorization
- LLM
- LangChain
- troubleshooting
- authentication
- Tax Analysis
- claude code
- react
- Rag
- AI
- Ontology
- SHACL
- Development Tools
- AI agent
- workflow
- api gateway
- security
- PYTHON
- AI Development
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
