# Chirpy 테마 완전 분석 가이드 Jekyll Chirpy 테마는 정적 블로그 사이트를 위한 최고의 선택 중 하나입니다. 이 가이드에서는 Chirpy의 모든 기능과 디자인 시스템을 분석해보겠습니다. ## 디자인 시스템 분석 ### 색상 팔레트 Chirpy는 깔끔하고 미니멀한 색상 시스템을 사용합니다: - **라이트 모드**: 밝은 회색 톤 (#f6f8fa) - **다크 모드**: 어두운 회색 톤 (#1e1e1e) - **액센트**: 블루 계열의 포인트 컬러 ### 타이포그래피 ```css /* 기본 폰트 스택 */ font-family: system-ui, -apple-system, sans-serif; /* 헤딩 크기 */ h1: 2rem (32px) h2: 1.5rem (24px) h3: 1.25rem (20px) ``` ## 레이아웃 구조 ### 사이드바 (Sidebar) - **고정 너비**: 260px - **구성 요소**: 프로필, 네비게이션, 소셜 링크 - **반응형**: 모바일에서는 햄버거 메뉴 ### 메인 콘텐츠 - **레이아웃**: 사이드바 옆에 배치 - **최대 너비**: 768px (중앙 정렬) - **패딩**: 반응형 패딩 ## 수학 표현식 지원 Chirpy는 KaTeX를 사용하여 수학 표현식을 렌더링합니다: ### 블록 수식 $$ E = mc^2 $$ ### 인라인 수식 아인슈타인의 질량-에너지 등가원리는 $E = mc^2$로 표현됩니다. ### 복잡한 수식 $$ \begin{align} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &= \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} &= 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} &= \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} &= 0 \end{align} $$ ## 기능 분석 ### 1. 다크 모드 - 시스템 설정 자동 감지 - 수동 토글 지원 - 로컬 스토리지에 설정 저장 ### 2. 검색 기능 - 클라이언트 사이드 검색 - 실시간 결과 표시 - 키보드 단축키 지원 (Ctrl+K) ### 3. 목차 (TOC) - 자동 생성 - 스크롤 따라가기 - 중첩 구조 지원 ### 4. 댓글 시스템 - Giscus 통합 - GitHub 기반 댓글 - 다크 모드 지원 ## 성능 최적화 ### 이미지 최적화 - WebP 형식 지원 - 지연 로딩 - 반응형 이미지 ### 번들 최적화 - 필요한 기능만 로드 - 코드 스플리팅 - Tree shaking ## 결론 Chirpy 테마는 단순하면서도 강력한 기능을 제공합니다. SvelteKit으로 마이그레이션할 때는 이러한 디자인 원칙과 기능을 그대로 유지하면서도 현대적인 웹 기술의 장점을 활용할 수 있습니다.