워드프레스(WordPress)는 그대로, 정적 사이트의 속도와 보안을!
워드프레스(WordPress)의 편의성과 정적 사이트의 성능 및 보안을 결합하기 위해 자동 동기화 플러그인(Automatic Sync Plugin) 개발
GitHub API를 활용하여 워드프레스 게시물을 마크다운(Markdown) 형식으로 변환하고, GitHub Actions을 통해 정적 사이트 배포 자동화
이미지 최적화(Image Optimization)를 통해 GitHub Actions의 빌드 시간 단축 및 GitHub Pages를 활용한 배포 비용 절감
GitHub Copilot CLI를 활용하여 개발 시간을 단축했지만, 아키텍처 설계 및 워드프레스(WordPress) 규정 준수(Compliance)는 여전히 개발자의 역할
워드프레스(WordPress)와 정적 사이트의 통합 아키텍처
본문에서 제시된 아키텍처는 워드프레스(WordPress)를 CMS(Content Management System)로, 정적 사이트를 배포 타겟(Deployment Target)으로 활용한다.
플러그인(Plugin): 게시물 작성 시 자동으로 마크다운(Markdown) 변환 및 이미지 최적화 수행
GitHub API: 원자적 커밋(Atomic Commit)을 통해 마크다운(Markdown) 파일과 최적화된 이미지를 GitHub 저장소에 업로드
GitHub Actions: 정적 사이트 생성 및 GitHub Pages 배포 자동화
이러한 구조는 워드프레스(WordPress)의 편리한 편집 환경을 유지하면서, 정적 사이트의 빠른 로딩 속도와 보안성을 확보한다.
GitHub Copilot CLI를 활용한 개발 과정
저자는 GitHub Copilot CLI를 사용하여 코드 생성 속도를 높였지만, 아키텍처 설계(Architecture Design) 및 규정 준수(Compliance)는 여전히 개발자의 몫임을 강조한다.
사양 정의(Specification): 개발 시작 전, 기능 정의 및 제약 조건 명확화의 중요성 강조
코드 생성(Code Generation): Copilot CLI는 구조화된 코드(Structured Code) 생성에 효과적
지속적인 검증(Continuous Verification): 생성된 코드의 정확성 및 규정 준수 여부 검증
결과적으로 Copilot CLI는 개발 속도를 가속화하는 도구이지만, 개발자의 역할(Developer's Role)은 여전히 중요하다.
이미지 최적화 파이프라인(Image Optimization Pipeline)
플러그인은 워드프레스(WordPress) 서버에서 이미지를 최적화하여 GitHub Actions의 빌드 시간(Build Time)을 단축하고, GitHub Pages의 비용을 절감한다.
WebP 및 AVIF: 다중 형식 이미지(Multi-format Image)를 생성하여 다양한 브라우저 환경 지원
로컬 처리(Local Processing): 이미지 최적화를 워드프레스(WordPress) 서버에서 수행하여 GitHub Actions의 리소스 사용량(Resource Usage) 최소화
WordPress ID 기반 파일명: 이미지 파일 경로를 고유 ID(Unique ID)로 관리하여 링크 깨짐 방지
이러한 전략은 GitHub Actions의 실행 시간(Execution Time)을 줄여, 개발 효율성을 높인다.
GitHub Trees API를 활용한 원자적 커밋(Atomic Commit)
플러그인은 GitHub Trees API를 사용하여 여러 파일을 하나의 커밋으로 묶어, 부분적인 상태(Partial State)를 방지하고 코드베이스(Codebase)의 일관성(Consistency)을 유지한다.
단일 커밋(Single Commit): 마크다운(Markdown) 파일과 최적화된 이미지를 하나의 트랜잭션(Transaction)으로 처리
트랜잭션 보장(Transaction Guarantee): 모든 파일이 성공적으로 커밋되거나, 전체 작업이 롤백(Rollback)
Git 기록 관리(Git History Management): 클린한 Git 기록(Clean Git History)을 유지하여 유지보수성 향상
이러한 방식은 배포 과정의 안정성(Deployment Stability)을 높이고, 롤백(Rollback)을 용이하게 한다.
다중 SSG(Static Site Generator) 지원을 위한 아키텍처
플러그인은 어댑터 패턴(Adapter Pattern)을 사용하여 여러 정적 사이트 생성기(SSG)를 지원하도록 설계되었다.
유연한 템플릿 엔진(Flexible Template Engine): 사용자 정의 가능한 템플릿(Customizable Template)을 통해 다양한 SSG의 요구사항 충족
어댑터 클래스(Adapter Class): 각 SSG에 맞는 변환 로직(Conversion Logic)을 캡슐화하여 코드 중복 방지
확장성(Extensibility): 새로운 SSG 지원 시, 새로운 어댑터 클래스(Adapter Class) 추가만으로 가능
이러한 아키텍처는 플러그인의 유연성(Flexibility)을 높이고, 다양한 환경에서 활용할 수 있도록 한다.
실제 개발 과정에서 발생한 문제점과 해결 방법
프로젝트 개발 과정에서 다양한 기술적 문제에 직면했으며, 각 문제에 대한 해결책을 제시한다.
Hugo 테마 버전 문제: 버전 고정(Version Pinning)을 통해 빌드 환경의 일관성 유지
GitHub Pages URL 문제: baseURL 설정(baseURL Configuration)을 통해 내부 링크 문제 해결
이미지 파이프라인 메모리 제한: 메모리 제한 증가(Increase Memory Limit) 및 배치 처리(Batch Processing)를 통해 문제 해결
Action Scheduler 경합 조건: 데바운싱 로직(Debouncing Logic), 트랜지언트 락(Transient Locks), 포스트 메타 플래그(Post Meta Flags)를 사용하여 중복 커밋 방지
이러한 문제 해결 과정을 통해 프로덕션 환경(Production Environment)에서의 안정성을 확보했다.
