힙하고 멋진 개인 블로그 만들기

클라우드플레어로 블로그를 이전했다. 기존에는 벨로그를 사용했는데 자율성이 떨어진다는 생각이 들었다. 물론 간단한 글 작성하는 데는 그만한 플랫폼이 없지만… 블로그 글감거리를 찾다보니 개발 뿐만 아니라 다양한 취미 생활도 좀 공유했으면 좋겠고, 내가 찍은 사진도 좀 자랑하고 싶고, 트래픽이 좋으면 광고도 좀 붙여보고 싶고… 인간의 욕심은 끝이 없었다는 게 진짜다.

또 클라우드플레어나 깃허브 페이지 같은 정적 호스팅 서비스를 통해 개발 블로그를 구축하는게 유행이라고 하니 그 유행에 탑승해보고 싶어졌다. 그래서 블로그 이전이 시작됐다.

클라우드플레어가 그렇게 좋아?

주변에 어떤 서비스가 제일 괜찮아? 하고 물어봤을 때 가장 많은 표를 얻은 게 클라우드플레어였다. 일단 무료 사용량이 넉넉하다는 이야기에 냅다 클라우드플레어로 시작했다. 정 마음에 안들면 호스팅 서비스야 이사가면 그만이라고 생각했다. 어차피 복잡한 서비스가 아니고 정적 호스팅이니까.

클라우드플레어를 실사용하며 제일 만족한 부분은 (1) Security 설정이 간편하다 (2) 도메인을 쉽게 사서 쉽게 연결할 수 있다 (3) 상업용 이용이 가능하다. 정도로 추릴 수 있을 것 같다.

보안 설정이 가장 크게 체감된 게 사이트를 열고 보니 존재하지도 않는 /wp-admin이나 *.php 경로를 두드리는 스캐너 트래픽이 아주 상당해서이다. 정적 사이트라 DB도 서버 코드도 없으니 실질적인 위험은 없지만 분석 대시보드가 지저분한 게 싫었고, 영 의미없는 트래픽이 쌓이는 것도 마음에 안 들었다. 알아보니 대시보드에서 WAF 커스텀 룰 하나 저장하면 끝난다고 하길래 냉큼 설정했다. 정적 사이트 하나에 과한 설정일 수도 있는데, 무료 플랜에 딸려 오는 기능이니 안 쓸 이유가 없었다. wildcard를 사용해서 커스텀 룰 하나로 스캔 시도를 차단하고 Bot Fight Mode도 켜두었다. 이것 외에도 보안 설정이 다양하게 제공되고 있고 대시보드도 보기 쉽게 제공되고 있어서 필요할 때 하나씩 설정해볼 생각이다.

도메인도 연에 2만원정도로 상당히 저렴한데 연결도 자동 수준으로 상당히 간단하고 SSL/TLS 설정도 자동으로 되니 부담없이 사서 연결할 수 있었다. 상업용 이용은 구글 애드센스를 붙이고 싶어서 나중에 추가로 알아봤는데 특별한 제한이 없다고 하니 트래픽이 괜찮게 발생하면 고려해볼만한 옵션인 것같다.

앞에서 언급한 3가지 외에도 리모트 레포의 푸쉬를 감지해서 자동 배포가 되는 worker도 참 마음에 들었다. 사실 CICD 파이프라인 만지는거야 실무에서 하는 일이니 이정도의 작은 사이즈는 부담 없다만 뭐든 기본으로 제공이된다고 하면 사족을 못쓰겠는 건 어쩔 수 없다.

이것 저것 조금씩 만지고 나니 다른 서비스들은 어떨지 궁금해서 찾아봤다.

깃허브 페이지는 IP 차단이나 봇 방어, 방화벽 룰 같은 게 사실상 없다. 순수 정적 파일 호스팅이라, 필요하면 앞에 클라우드플레어를 프록시로 얹는 게 정석이라고 한다. 도메인 구매 기능도 없다.

Vercel은 보안 쪽이 생각보다 잘 갖춰져 있었다. 무료 플랜에서도 DDoS 완화, IP 차단, 커스텀 룰이 되고, 봇 차단도 손쉬운 편이라고 한다. 보안 기능만 놓고 보면 개인 블로그 수준에서는 클라우드플레어와 큰 체감 차이는 없었을 것 같다. 그래도 보안 설정시 커스텀 룰을 사용한 확장성은 클라우드플레어가 좋은 편이고 무엇보다 Vercel 무료(Hobby) 플랜은 비상업적 용도로만 쓸 수 있는데, 약관에서 애드센스 같은 광고 게재를 상업적 사용으로 명시하고 있다. 광고를 붙이려면 Pro(월 $20)로 올려야 한다는 이야기인데… 그럴거면 광고를 안붙이고 말지싶다.

Astro가 뭐야?

정적 사이트 생성기는 Astro로 정했다. 사실 익숙한 건 Vue나 React였는데 정적 사이트에 그정도는 너무 과하다는 생각이 들었다. 복잡한 서비스를 만들게 아니니 사실 최소한의 허들만 통과하면 뭐든 상관 없었다. 블로그처럼 읽는 사이트에 특화되어 있고, 마크다운이 그대로 글이 되고, 이미지도 잘 다룰 수 있고, 무엇보다 Claude Code로 편하게 만질 수 있으니까 부담없이 선택했다. 글이야 내가 편하게 쓸 수 있을 정도만 되면 그만하고, 코드야 Claude Code가 작성할테니까. 심지어 클라우드플레어에서 인수했다니 굳이 다른 걸 선택할 이유가 없었다.

미감은 없지만 예쁜게 좋아

디자인은 Claude Design으로 뽑았다. 디자인 분위기만 적당히 잡아주니 나름 결과물이 마음에 들게 나왔다. 완성된 시안을 HTML 파일 하나로 내보냈더니 5.7MB짜리 번들이 나왔다. 이걸 그대로 만들어달라고 했다간 제대로 안될 게 뻔해서 클로드에게 시안에서 디자인 토큰(색상·타이포·스페이싱 변수 등)과 컴포넌트 소스만 추출해서 별도 파일로 만드는 프롬프트를 제공해달라고 했다. 이렇게 디자인 가이드를 미리 뽑아놓고 시작하니 실제 구현도 크게 벗어남 없이 나왔다. 물론 컴포넌트 세부 구현이나 헤더 크기나 자잘자잘한 것들은 각 단계별로 확인하고 추가로 손을 보아야했지만… 실무에서 겪어본 바에 의하면 이정도면 아주 양반이었다.

그 외 자잘한 결정 사항

깃허브 레포지토리는 프라이빗으로 뒀다. 퍼블릭이 아니어도 worker가 접근가능하고 코드 레벨에는 아직 초안 상태인 컨텐츠들까지 포함되어 있어서 프라이빗으로 두는게 나을 것 같았다. 컨텐츠 시스템을 구현할 때 draft: true인 문서는 공개하지 않는다는 규칙을 넣어뒀는데, 이걸 굳이 깰 필요는 없으니까.

광고 자리도 미리 컴포넌트로 만들어뒀다. 나중에 광고가 붙었을 때 레이아웃이 많이 깨지면 또 수정을 해야하니까 처음부터 미리 placeholder를 파두었다. 지금은 애드센스를 신청해둔 상태라서 애드센스 코드도 들어가있고 광고 자리도 회색으로 노출된다.

사진 첨부시에 활용할 메타 데이터 지우기용 스크립트도 추가해뒀다. 핸드폰 사진에는 위치 정보가 포함되어있는 경우가 많은데 이걸 매번 사진 글을 쓸 때마다 지우기 번거로우니까… 단, 카메라 기종이나 조리개 값 같은 정보는 살려서 사진 캡션에 사용하기로 했다. 멋있으니까.

생각보다 만족스러워…!

큰 노고를 들이지 않고 개인 취향에 맞는 블로그를 호스팅할 수 있다는 건 참 힙하고 멋진 일이다. 거기다가 심심하면 디자인도 쉽게 갈아엎을 수 있으니 미감이 없지만 예쁜 건 참 좋아하는 내겐 적절한 선택이었다고 생각한다. 더불어 다양한 취미 활동도 쉽게 공유 가능하다는 것도 꽤 이득이다. 나중엔 내 작고 소중한 맛집 탐방기도 이 블로그에서 공유해볼 생각이다. 끝!