[양해각서] 이 블로그를 만들 때 건축 결정 및 고려 사항

📅 작성일: 2023/01/01, 수정일: 2023/04/08 ⏱️ 예상 읽기 시간 약 9분 (3,778자)

정적 및 동적 사이트 선택, 호스팅 플랫폼 평가, 사용자 정의 Pandoc SSG 아키텍처, Confluence에서 영감을 얻은 UI 디자인 및 다국어 SEO를 포괄하는 포괄적인 각서입니다.

목차

(고려1) 정적 사이트 vs. 동적 사이트?
1. 정적 사이트와 동적 사이트의 차이점
(고려사항 2) 정적 사이트 호스팅 플랫폼 선택
(고려사항 3) 정적 사이트 생성기 선택
(고려사항 4) 맞춤형 UI 및 정보 디자인
(고려사항 5) SEO 전략 및 모범 사례
요약

(고려1) 정적 사이트 vs. 동적 사이트?

정적 사이트 생성기 또는 동적 CMS가 기술 요구 사항에 더 잘 맞는지 평가하는 것은 웹 사이트를 구축할 때 중요한 아키텍처 결정입니다.
이 두 패러다임 사이의 선택은 기본적으로 기능 세트, 개발자 경험, 유지 관리 가능성, 확장성 및 보안 상태에 영향을 미칩니다.

정적 사이트와 동적 사이트의 차이점

정적 사이트
사전 렌더링된 정적 자산(HTML, CSS, JavaScript, 미디어 파일)으로만 구성됩니다.콘텐츠를 변경하려면 파일을 직접 재구축하거나 편집해야 합니다.
콘텐츠가 상대적으로 일관되게 유지되고 실시간 사용자별 데이터베이스 쓰기가 필요하지 않은 기술 문서, 개인 블로그 및 정보 제공 사이트에 이상적입니다.
동적 사이트
모든 HTTP 요청 시 서버 측 런타임, 데이터베이스 및 애플리케이션 프레임워크를 통해 즉시 콘텐츠를 렌더링합니다.
대화형 애플리케이션, 다중 테넌트 협업 플랫폼, 전자 상거래 또는 실시간 사용자 상호 작용이 빈번한 시나리오에 이상적입니다.
아래는 정적 아키텍처와 동적 아키텍처의 장단점을 비교한 것입니다.우선순위가 높은 기준은 이탤릭체로 표시됩니다.

정적 사이트의 장점

빠른 페이지 로딩 속도와 뛰어난 사용자 경험(TTFB/Core Web Vitals).
원본 서버에 컴퓨팅 부하가 없으며 CDN 캐싱을 통해 높은 트래픽 급증으로 쉽게 확장됩니다.
다운타임이나 서버 충돌 위험이 거의 없는 안정적인 콘텐츠 전달.
공격 표면을 최소화한 견고한 보안 태세(직접 데이터베이스 주입 또는 백엔드 취약점 없음).
동적 서버 인스턴스에 비해 실행 및 호스팅 비용이 매우 낮습니다.

정적 사이트의 단점

콘텐츠 업데이트를 위해서는 빌드/배포 파이프라인을 실행해야 합니다.
클라이언트 측 API 없이 임의의 백엔드 로직을 실행할 수 없어 대화형 서버 측 워크플로우가 제한됩니다.
트랜잭션 데이터베이스 쓰기 또는 개인화된 서버 세션이 필요한 복잡한 애플리케이션에는 적합하지 않습니다.

동적 사이트의 장점

활발한 사용자 커뮤니케이션 및 커뮤니티 기능을 촉진하는 풍부한 실시간 상호 작용.
관계형 또는 문서 데이터베이스가 지원하는 브라우저 GUI에서 직접 콘텐츠를 쉽게 편집할 수 있습니다.
동적 플러그인과 주문형 서버 측 스크립팅을 통한 높은 확장성.

동적 사이트의 단점

공격적인 캐싱 없이는 페이지 응답 시간이 느려지고 사용자 경험이 저하될 수 있습니다.
과도한 서버 및 데이터베이스 로드로 인해 인프라 및 운영 비용이 높아집니다.
지속적인 보안 유지 관리(CMS 취약점 패치, SQL 주입, CVE).

동적 사이트를 사용하면 태그 지정 및 검색과 같은 교차 기능을 더 쉽게 구현할 수 있지만 유지 관리 오버헤드를 제거하고 운영 비용을 거의 0에 가깝게 유지하기 위해 정적 사이트 아키텍처가 선택되었습니다.
참조:
정적 사이트와 동적 사이트의 차이점, 장단점 |Xserver 비즈니스

(고려사항 2) 정적 사이트 호스팅 플랫폼 선택

정적 사이트를 구축하려면 안정적인 스토리지와 CDN 배포 인프라가 필요합니다.
GCP에 익숙하기 때문에 Google Cloud의 Firebase 호스팅이 주요 후보였지만 대체 플랫폼은 체계적으로 평가되었습니다.
정적 사이트 호스팅 플랫폼 비교 |JavaScript 공지 , 주요 호스팅 제공업체는 다음과 같습니다.

넷티파이
베르셀
Firebase 호스팅
Cloudflare 페이지
GitHub 페이지
GitLab 페이지

“일본의 Edge CDN PoP”, “GitHub/Cloud Build를 통한 자동 배포”, “충분한 프리 티어 할당량”, “상업적 사용 허용”이라는 네 가지 주요 기준에 따라 평가되었습니다.

호스팅 서비스	일본 CDN PoP	GitHub/클라우드 빌드 배포	넉넉한 프리 티어	상업적인 사용
넷티파이	×	⚪︎	⚪︎	⚪︎
베르셀	⚪︎	⚪︎	⚪︎	×
Firebase 호스팅	⚪︎	⚪︎	⚪︎	⚪︎
Cloudflare 페이지	⚪︎	⚪︎	⚪︎	⚪︎
GitHub 페이지	⚪︎	×	⚪︎	×
GitLab 페이지	⚪︎	×	⚪︎	?

Firebase 호스팅과 Cloudflare 페이지가 최고의 경쟁자로 등장했습니다.
Cloudflare 페이지는 Cloudflare 페이지와 Firebase 호스팅 |Bejamas , Firebase 호스팅은 기존 Google Cloud 계정 인프라를 활용하고 Google Analytics와 원활하게 통합되며 Cloud Build 파이프라인과 기본적으로 연결되기 때문에 선택되었습니다.

(고려사항 3) 정적 사이트 생성기 선택

정적 사이트 생성기(SSG)는 소스 마크업(Markdown, AsciiDoc) 및 템플릿을 프로덕션에 바로 사용할 수 있는 정적 자산으로 컴파일합니다.
세 가지 대표적인 정적 사이트 생성기가 평가되었습니다.
초기 의도는 설정 오버헤드를 최소화하기 위해 Hugo를 채택하는 것이었습니다.
그러나 Atlassian Confluence 문서 미학과 밀접하게 일치하는 기존 테마를 찾는 것은 어려웠습니다.결과적으로 Pandoc 을 활용하는 맞춤형 Python 기반 빌드 파이프라인이 개발되었습니다.

지킬의 장점

기본 GitHub 페이지 통합.
Liquid 및 Markdown을 통한 직관적인 템플릿.
풍부한 플러그인 생태계.

지킬의 단점

Ruby 환경 관리 및 대규모 사이트의 빌드 시간 지연.

휴고 프로

Go로 작성된 컴파일 속도가 매우 빠릅니다.
테마와 내용을 깔끔하게 분리하세요.
간단한 마크다운 작성 워크플로.

휴고 단점

템플릿 구문 학습 곡선을 사용하고 전문적인 커뮤니티 테마가 상대적으로 적습니다.

개츠비 프로

강력한 GraphQL 데이터 계층과 풍부한 React 구성 요소 생태계.
헤드리스 CMS 백엔드를 통합하는 방대한 플러그인 라이브러리.

개츠비 단점

높은 아키텍처 복잡성, 종속성 팽창 및 가파른 학습 곡선.

(고려사항 4) 맞춤형 UI 및 정보 디자인

Pandoc은 다양한 형식(Markdown, HTML, PDF, Word)으로 문서를 변환합니다. --template 플래그로 사용자 정의 HTML 템플릿을 지정하면 정적 페이지를 사용자 정의 레이아웃과 CSS 스타일로 형식화할 수 있습니다.
Pandoc 사용자 가이드 - 템플릿

Confluence 스타일 사이드바

Atlassian Confluence 공간 사이드바의 깔끔한 탐색을 복제하기 위해 Python 및 JavaScript를 사용하여 개발되어 사용자가 카테고리와 게시물 사이를 쉽게 이동할 수 있습니다.
참고: Atlassian Confluence Space 사이드바 문서

목차(ToC)

HTML 제목 태그( h2 , h3 )를 구문 분석하고 대화형 목차를 동적으로 생성하는 Python 스크립트를 구현했습니다.
참조: DevelopersIO - Python을 통해 HTML 제목에서 목차 생성

코드 블록의 구문 강조

“내일 밤” 테마 및 사용자 정의 CSS 색상 조정이 포함된 Prism.js가 통합되었습니다.
참고자료: Prism.js 공식 사이트
언어 번들에는 Bash, Python, Docker, YAML, JSON, Git 및 Markdown이 포함됩니다.

사이트 검색

통합된 Google 맞춤 검색 엔진(CSE)은 메모리 내 검색 서버 없이도 색인화된 모든 블로그 페이지에 강력한 검색 기능을 제공합니다.

파비콘

김프를 사용하여 생성하고 온라인 파비콘 도구(512x512에서 256x256, 32x32, 16x16)를 통해 크기를 조정하여 데스크탑과 모바일 장치에서 선명한 렌더링을 보장합니다.

(고려사항 5) SEO 전략 및 모범 사례

검색 엔진 최적화(SEO)는 검색 엔진 결과 페이지(SERP)에서 기술 기사의 순위를 높이고 솔루션을 찾는 개발자에게 다가가도록 보장합니다.

1. 다국어 및 글로벌 SEO

처음에는 일본어 독자층에 초점을 맞췄으나 보다 폭넓은 글로벌 엔지니어링 독자층에 다가가기 위해 사이트를 이중 언어(영어/일본어) 아키텍처로 전환했습니다.
Google이 올바른 현지화된 페이지를 제공하는 데 도움이 되도록 <html> 루트에 적절한 lang 속성을 구성하고 상호 <link rel="alternate" hreflang="..."> 태그를 구현했습니다.
포괄적인 검색 크롤러 검색을 위해 고유한 XML 사이트맵( sitemap.xml 및 sitemap_en.xml )을 배포했습니다.

2. 이미지 최적화

반응형 크기로 최적의 콘텐츠 너비 786px를 목표로 했습니다.
복잡한 사진 미디어에는 JPG를 활용하고 기술 아키텍처 다이어그램에는 압축된 PNG/SVG를 활용했습니다.
핵심 웹 바이탈 레이아웃 변경(CLS)을 최소화하고 신속한 LCP(Largest Contentful Paint)를 보장하기 위해 Google PageSpeed Insights를 지속적으로 모니터링했습니다.

3. 시맨틱 HTML 및 태그 최적화

적절한 제목 계층 구조를 유지하고 사용자 정의 OGP(Open Graph Protocol) 메타 태그(제목, 설명, 이미지, URL)를 활용하여 X(Twitter) 및 Slack에서 소셜 카드 미리 보기를 최적화했습니다.
깔끔한 화면 판독기 접근성 및 크롤링 가능성을 위해 탐색 구조를 단일 의미 체계 <nav> 컨테이너로 간소화했습니다.

4. 소셜 공유 및 확대

개발자 신디케이션 및 토론을 장려하기 위해 각 게시물에 빠른 소셜 공유 버튼(X, Hatena 북마크 및 기본 URL 복사)을 장착했습니다.

5. 영구링크 최적화

URL 퍼센트 인코딩 문제를 방지하고 크롤링 인덱싱 무결성을 보호하기 위해 표준화된 깔끔한 영숫자 영구 슬러그입니다.

요약

정적 사이트 단순성(Pandoc + Python)을 Firebase 호스팅 및 자동화된 Cloud Build CI/CD와 결합하여 블로그는 일본어와 영어 사용자 모두에게 거의 0에 가까운 운영 비용, 1초 미만의 로드 시간, 견고한 안정성을 달성했습니다.

URL이 클립보드에 복사되었습니다!