이 블로그를 개설하게 된 생각의 흐름
블로그를 개설하면서 고려한 목적, 프론트엔드 프레임워크 및 헤드리스 CMS 선정 기준 등 전반적인 기획 과정을 공유합니다.
이 블로그를 구축하면서 가장 먼저 했던 고민들을 정리해 보았습니다.
【목적】
제가 습득한 기술을 블로그에 기록함으로써 기술에 대한 정확하고 깊은 이해를 돕고, 부수적으로 소소한 수익을 내어 서버 유지비에 보태고자 합니다. 이에 따라 다음과 같이 우선순위를 정했습니다.
- 최신 기술 습득하기
- 운영 비용을 최소화하기. 배보다 배꼽이 더 크면 지속하기 어렵기 때문입니다.
- 글 작성 이외의 작업(운영 번거로움, 포스팅 관리 등)을 최소화하기
- 콘텐츠는 주로 기술 관련 내용을 다루고, 취미 생활을 부차적으로 다룰 예정입니다.
【운영 환경에 대한 검토】
블로그를 시작하기 위해 고려했던 운영 방식들을 나열해 보았습니다.
<무료 블로그 서비스의 단점>
- 최신 기술을 습득하는 것과 연결되지 않습니다.
- 무료 서비스는 자체 광고가 자동으로 붙어, 나에게 수익이 되지 않는 광고 노출이 늘어납니다. 또한 의도치 않은 광고가 표시될 수 있습니다.
- 플랫폼이 제공하는 환경을 그대로 쓰기 때문에 관리 리소스는 가장 적게 듭니다.
<유료 가입형 서비스의 단점>
- 최신 기술을 습득하는 것과 연결되지 않습니다.
- 비용이 발생한다는 점이 가장 큰 문제입니다. 지속하지 못하고 중간에 그만둘 확률이 높습니다.
- 관리 리소스가 매우 적게 듭니다.
<자체 구축: WordPress + 홈 서버 + Cloudflare Tunnel>
- Cloudflare Tunnel을 활용하는 부분만 다소 참신합니다.
- 기본적으로 비용이 들지 않아 지속하기 쉽습니다.
- WordPress 자체의 기능이 무거워지면서 글 업데이트 및 관리 작업이 번거로워져 학습 비용이 발생합니다. *허용 범위 내일까요?
<자체 구축: JS 프레임워크 + GitHub + Headless CMS + Cloudflare Pages>
- 새로운 CMS 형태인 Headless CMS로 콘텐츠를 관리하고, JS 프레임워크를 연동하는 방식입니다.
- 기본적으로 비용이 들지 않아 목적에 부합합니다.
- SaaS 서비스를 그대로 활용하면 편리하지만, 서비스가 종료될 경우 대안을 찾기 어렵고 이전에 따른 리소스가 증가합니다.
【개발 환경】
이에 따라 위의 검토 내용과 아래의 프레임워크 정보를 바탕으로, 향후 대규모 앱 개발을 위한 사전 학습의 일환으로 프론트엔드 프레임워크 + 헤드리스 CMS + Cloudflare Pages 조합으로 블로그 사이트를 구축해 보기로 결정했습니다.
<에디터에 관하여>
일반적인 개발 환경에서는 IDE라고 불리는 통합 개발 환경을 설치하고 개발 언어와 스택에 맞는 확장 기능을 추가하여 코딩을 진행합니다. VS Code가 가장 대중적이지만, 가볍고 빠른 Zed 에디터에 Astro 확장이 지원되기 때문에 이번에는 Zed를 사용하기로 했습니다.
<개발용 데스크톱 환경>
코드 개발을 하려면 npm(Node Package Manager)이나 GitHub 같은 외부 클라우드 서비스와의 연동이 필수적입니다. (참고: npx는 "Node Package Execute"의 약자로, npm과 달리 로컬에 패키지를 영구 설치하지 않고 임시로 Node.js 패키지를 실행할 수 있게 해주는 커맨드라인 툴입니다. 환경을 더럽히지 않고 가볍게 테스트할 수 있습니다.)
OS 종류 | 특징 |
Linux | 전 세계 웹 서버의 약 70%가 Linux 기반이라고 합니다. 서버 시장 점유율이 압도적이며 풍부한 개발 도구를 지원합니다. 다만, 데스크톱 GUI의 완성도나 일반 앱 지원 수준이 Mac이나 Windows에 비해 현저히 낮아 개발용 메인 PC로 쓰기에는 다소 아쉽습니다. |
macOS | 유닉스(Unix) 계열 OS를 기반으로 하여 터미널에서 Linux 명령어 호환성이 매우 우수합니다. 데스크톱 UI가 직관적이고 세련되어 많은 개발자가 선호합니다. |
Windows | 비즈니스 및 사무용으로 압도적인 점유율을 차지하고 있으며 게이밍 환경에도 적합하여 전체 데스크톱 시장 1위입니다. WSL(Windows Subsystem for Linux)을 설치하면 Windows 위에 완전한 Linux 환경을 구현할 수 있습니다. 가상 머신 형태로 구동되며 파일 공유가 유기적으로 작동하여 Linux와 Windows의 장점을 모두 누릴 수 있습니다. v2.0 이후 사용자가 크게 늘었습니다. |
블로그 운영은 고성능 개발 환경을 요구하지 않으므로 Mac과 Windows 어느 쪽이든 무방하지만, WSL 설치 등의 번거로움을 덜기 위해 이번에는 macOS를 활용하여 진행하기로 했습니다.
【Dev Container】
여러 개발자가 참여하는 프로젝트에서는 DevContainers를 사용하여 개발 환경을 통일하는 편이 좋지만, 블로그처럼 1인 개발 환경에서는 DevContainers를 도입 및 유지보수하는 리소스가 더 클 수 있다고 판단하여 이번 도입은 보류했습니다.
【프론트엔드 프레임워크의 특징】
보통 사이트 제작에 필요한 유용한 기능과 라이브러리를 특정 '설계 철학'에 맞춰 묶어놓은 것을 프레임워크라고 부릅니다. 이 철학에 맞춰 코드를 작성하면 생산성을 극대화할 수 있습니다. 프레임워크 고유의 설계 철학과 문법을 새로 학습해야 하지만, 적응하고 나면 일관된 코딩이 가능하여 가독성이 좋아지고 버그를 줄일 수 있어 대규모 사이트 개발에는 필수적입니다.
프레임워크 이름 | 제작 주체 | 특징 |
React (최다 사용자) | Meta (Facebook) | UI를 컴포넌트 기반으로 관리하며 가상 DOM을 이용해 바뀐 부분만 빠르게 렌더링합니다. 엄밀히는 프레임워크라기보다는 UI 라이브러리에 가깝습니다. *개인적으로 좋아하지 않습니다. |
Vercel | React 기반의 풀스택 프레임워크입니다. React가 클라이언트 사이드 역할에 국한되는 반면, Next.js는 서버 사이드 영역까지 다루어 최적화된 렌더링과 빠른 페이지 로딩을 구현합니다. *현재는 사용을 지양하고 있습니다. (CEO의 경영 방침이 맘에 들지 않아 기피하게 되었습니다.) | |
Vue.js (많은 사용자) | Evan You | 개인 개발자가 다루기에 직관적이며 진입 장벽이 낮습니다. 자유로운 라이브러리 조합이 가능하고 컴포넌트 구조를 지원합니다. 가볍게 쓰기 좋으며 국내외 기술 자료가 풍부합니다. 개인적으로 선호합니다. |
Alexandre Chopin 등 | Vue.js 기반의 풀스택 프레임워크입니다. 특히 SPA(Single Page Application) 구조로 웹 사이트를 구축할 때 유용합니다. | |
Astro Technology Company | Astro는 페이지 전체를 정적 HTML로 렌더링하고 불필요한 JavaScript를 걷어내어 극강의 성능을 끌어냅니다. React나 Vue 같은 다양한 UI 프레임워크를 동시에 사용할 수 있게 설계되었습니다. SPA보다는 MPA에 특화되어 첫 페이지 로딩 속도가 매우 빠르며 블로그 구축에 가장 최적화되어 있습니다. |
<참고>
- Next.js에서 Astro로 전환한 이관 사례
- React는 React Native라는 파생 스택이 있어 모바일 네이티브 앱 개발도 가능합니다. 넓은 범위를 커버해야 할 경우 상대적인 학습 비용이 절감됩니다.
- 다만 iOS/Android 크로스 플랫폼 개발 환경에서는 최근 Google의 Flutter가 React Native보다 강세를 보이고 있습니다. UI를 공유하여 기기별 파편화가 적기 때문에 특히 비즈니스용 앱 구축에 편리합니다. 따라서 굳이 React를 고집할 필요는 없어 보입니다.
【오픈소스(무료) 헤드리스 CMS】
자체 서버에 올려 설치형으로 쓸 수 있는 오픈소스 헤드리스 CMS는 종류가 많지 않습니다. 많은 기업들이 microCMS처럼 SaaS 형태의 클라우드 서비스로 제공하기 때문입니다. 그럼에도 오픈소스는 데이터 주권을 내부에 두고 싶거나 사용량 증가에 따른 비용 부담을 피할 수 있어 장점이 큽니다. 다만 자체 서버 환경이 요구됩니다.
이름 | 특징 |
가장 널리 알려진 오픈소스 헤드리스 CMS입니다. MIT 라이선스로 개인 및 상업적 이용이 모두 무료이며 고기능 유료 플랜도 지원합니다. *코어 시스템은 React 기반인 것으로 보입니다. | |
Sanity | 유연한 데이터 스키마 설계와 실시간 협업 편집 기능이 강점입니다. 동적 콘텐츠 관리에 강하며 클라우드(SaaS) 기반으로 무료 티어를 지원합니다. |
Node.js 환경의 JavaScript로 작성되었으며 MIT 라이선스입니다. Docker Hub에 공식 이미지가 업로드되어 있습니다. 블로그 타입에 최적화된 설계로 WordPress와 구조가 유사합니다. | |
구 Netlify CMS입니다. MIT 라이선스로 배포됩니다. 관련 한국어 정보는 적은 편입니다. Git 저장소와 직접 연동하여 작동하는 Git 기반 오픈소스 CMS입니다. | |
대기업 도입 사례가 많습니다. Node.js 위에서 JavaScript로 구동됩니다. 기존 SQL DB를 고속 API 환경으로 즉시 구축해 주어 DB 구조를 그대로 API화합니다. | |
Python 기반입니다. NASA와 Google 등에서 도입했습니다. | |
데이터베이스가 MongoDB에 최적화되어 있습니다. JavaScript 기반입니다. | |
Unity 등에서 도입했습니다. Apache 2.0 라이선스입니다. | |
기업 주도로 개발되고 있습니다. | |
GPL 3.0 라이선스입니다. DB를 연동하지 않고 JSON 파일 형태로 데이터를 저장합니다. |
<헤드리스 CMS의 최종 선택>
개인 블로그는 무료로 운영할 수 있어야 지속 가능하므로 MIT 라이선스로 공개된 Strapi, Ghost, Directus 정도로 좁혀집니다. 그중에서 추후 기능 확장이나 커머스 연동을 고려했을 때 Strapi가 가장 활용도가 높을 것으로 판단하여 최종적으로 결정했습니다.
【결론】
그리하여 이 블로그의 기술 스택으로 Astro + Strapi + AlloyDB (PostgreSQL) + TailwindCSS + Cloudflare Pages + MacBook Pro + Zed 에디터 조합을 낙점했습니다. 핵심은 빌드 파이프라인입니다.
- Mac 로컬 환경에서 Strapi 컨테이너를 실행하여 글을 작성합니다.
- 블로그 빌드 과정에서 Strapi로부터 정적 페이지 데이터와 이미지를 복사하여 빌드 결과물에 포함하므로, 프로덕션 환경에서는 Strapi를 구동하지 않습니다(실제 서버 운영 비용이 들지 않습니다!).
- 빌드를 통해 생성된 정적 결과물 전체를 Cloudflare Pages에 업로드(배포)합니다. 순수 정적 데이터에 JavaScript가 최소화되어 페이지 렌더링이 비정상적으로 빠릅니다.
가장 큰 포인트는 실제 프로덕션 서버는 **완전한 정적 파일로만 구동된다**는 것입니다. Strapi는 글을 쓸 때만 로컬에서 켜는 식입니다.