정적 사이트 제작 결심, 그리고 찾아온 2차 멘붕
앞선 포스팅에서 서버비 0원의 정적 사이트(SSG)로 블로그를 만들겠다고 최종 결론을 내렸습니다.
하지만 기쁨도 잠시, 본격적인 제작 방법을 검색해 보다 또다시 멘붕에 빠졌습니다.
Next.js, Gatsby, Hugo, Jekyll… 태어나서 처음 듣는 영어 단어들이 쏟아졌습니다.
비전공자인 저로서는 검색을 해봐도 도무지 무슨 소리인지, 그래서 내 블로그를 만들려면 뭘 써야 하는지 알 길이 없었습니다.
그래서 현시대 가장 똑똑한 비서인 AI(제미나이)에게 저의 상황을 설명했습니다. “나는 코딩을 잘 모르는 비전공자고, 복잡한 기능 없이 오직 ‘글’을 써서 수익을 내는 가벼운 블로그를 만들고 싶어.”
그러자 AI는 여러 선택지 중 한 치의 망설임도 없이 **‘Astro(아스트로)‘**라는 프레임워크를 추천했습니다.
수많은 유명한 도구들을 제치고, 왜 하필 Astro였을까요? AI의 추천을 검증하며 알게 된 3가지 명확한 이유를 비전공자의 언어로 쉽게 풀어보겠습니다.
1. 우주선이 아닌 ‘자전거’가 필요하니까 (콘텐츠 중심)
React나 Next.js 같이 유명한 프레임워크들은 페이스북, 에어비앤비처럼 복잡한 기능과 화려한 애니메이션이 들어간 ‘무거운 웹 서비스’를 만들 때 주로 쓰입니다. 비유하자면 조종석이 복잡한 ‘우주선’ 같은 도구입니다.
하지만 저는 회원가입이나 장바구니 기능이 필요 없습니다. 오직 방문자가 들어와서 ‘글’을 읽고 나가는 심플한 블로그가 필요할 뿐이죠. Astro는 태생부터가 ‘콘텐츠(글) 중심의 웹사이트’를 만들기 위해 태어났습니다.
불필요하게 복잡한 기능을 걷어내고, 오직 글을 보여주는 데 특화된 가볍고 튼튼한 ‘자전거’입니다. 코딩 초보자가 블로그를 만들기엔 이보다 직관적인 도구가 없었습니다.
화려한 부가 기능은 블로그 초기에 전혀 필요하지 않습니다.
내 목적이 ‘글을 통한 수익 창출’이라면, 오직 텍스트를 가장 빠르고 직관적으로 전달하는 도구를 선택하는 것이 실패를 줄이는 지름길입니다.
2. 글쓰기에 마법을 부리는 MDX의 무한한 자유도
Astro를 사용하면 일반적인 텍스트 에디터가 아니라, ‘마크다운(Markdown)‘이라는 방식으로 글을 쓰게 됩니다. 처음엔 코드를 짜는 것 같아 낯설었지만, MDX라는 기능을 알게 된 순간 신세계가 열렸습니다.
일반적인 티스토리나 네이버 블로그는 제공해 주는 폰트 크기나 색상 정도만 바꿀 수 있습니다. 표나 예쁜 박스를 넣으려면 한계가 뚜렷하죠.
하지만 MDX를 사용하면 제가 원하는 디자인의 ‘안내 문구 박스’, ‘시리즈 목차’, ‘버튼’ 등을 레고 블록(컴포넌트)처럼 미리 만들어두고, 글을 쓰다가 원할 때 언제든지 툭툭 끼워 넣을 수 있습니다. 제한된 블로그 플랫폼에서는 상상도 할 수 없는 엄청난 자유도와 확장성입니다.
플랫폼이 제공하는 제한된 에디터 툴에 갇힐 필요가 없습니다.
내가 상상하는 디자인이나 독자를 위한 특수 버튼들을 글 속에 자유자재로 꽂아 넣을 수 있다는 것은, 타 블로그들과의 완벽한 차별점이 됩니다.
<Aside type="tip" title="제목입니다">내용입니다</Aside>위와 같은 코드가 아래와 같이 변합니다.
3. 구글 SEO가 사랑하는 ‘0.1초’의 미친 속도
Astro의 가장 큰 무기는 압도적인 ‘로딩 속도’입니다. Astro는 사이트를 띄울 때 무거운 자바스크립트 코드를 기본적으로 전부 덜어내고, 아주 가벼운 순수 HTML 텍스트만 전송합니다. (개발자들은 이를 ‘아일랜드 아키텍처’라는 멋진 말로 부르더군요.)
덕분에 독자가 링크를 클릭하면 0.1초 만에 화면이 뜹니다. 스마트폰으로 검색했을 때 화면이 늦게 뜨면 바로 뒤로 가기를 눌러버리는 요즘 시대에, 이 엄청난 속도는 구글 검색 엔진(SEO)에서 어마어마한 가산점을 받게 해줍니다. 검색 상위 노출이 생명인 수익형 블로그에 가장 필요한 완벽한 무기인 셈입니다.
구글은 로딩이 느린 사이트를 상위 노출시켜주지 않습니다.
아무것도 안 해도 기본적으로 90점대 이상의 압도적인 최적화 점수를 먹고 들어간다는 것은, 남들보다 한참 앞선 출발선에서 블로그를 시작한다는 뜻입니다.
4. 뼈대부터 다크 모드까지 다 퍼주는 ‘Starlight’
사실 순수하게 텅 빈 Astro만 가지고 처음부터 블로그를 만들라고 했다면, 비전공자인 저는 아마 도중에 포기했을지도 모릅니다. 하지만 Astro 생태계에는 공식 문서형 템플릿인 ‘Starlight(스타라이트)‘가 존재했습니다. 저는 이 Starlight를 블로그 형태로 개조하여 사용하기로 했습니다.
제가 굳이 Starlight 템플릿을 베이스로 선택한 이유는 압도적인 ‘기본기’ 때문이었습니다.
완벽한 모바일 최적화(반응형): 스마트폰, 태블릿, PC 어떤 화면에서 접속해도 화면이 깨지지 않고 완벽하게 맞춰집니다.
다크 모드 기본 탑재: 요즘 블로그의 필수인 라이트/다크 모드 전환 버튼 기능이 아예 내장되어 있습니다.
체계적인 CSS 변수: 다크 모드에 맞춰 색상이 자동으로 변하는 CSS 변수 세팅이 이미 다 짜여 있어서, 디자인을 조금 수정할 때도 너무나 편리했습니다.
물론, 제공해 주는 기본 템플릿만 그대로 쓴 것은 아닙니다. 제 입맛에 맞게 다양한 UI 컴포넌트들을 직접 추가하고 수정하는 과정을 거쳤지만, Starlight라는 이토록 튼튼하고 완벽한 ‘기초 공사’가 되어 있었기에 초보자인 저도 과감하게 커스텀에 도전할 수 있었습니다.
반응형 화면이나 다크 모드를 맨땅에서 개발하려면 몇 달이 걸릴 수도 있습니다.
Starlight는 이러한 프론트엔드 기초 공사를 미리 끝내둔 ‘풀옵션 하우스’이기에, 우리는 오직 콘텐츠 기획에만 에너지를 쏟을 수 있습니다.
결론: 코딩 초보에게 최고의 선택지
이러한 이유들을 종합해 보니, 왜 AI가 저에게 그토록 Astro를 강력히 권했는지 고개가 끄덕여졌습니다. 무겁고 어려운 도구 대신, 빠르고 글쓰기 편한 Astro를 이용해 본격적인 사이트 뼈대를 만들어 보기로 했습니다.
그런데 막상 코드를 만지려니 덜컥 겁이 났습니다. “내가 실수로 코드를 잘못 지워서 기껏 만든 사이트가 통째로 날아가면 어떡하지?”
이런 초보자의 공포를 완벽하게 없애줄 ‘안전망’이자 필수 도구가 있습니다. 다음 포스팅에서는 코딩 초보의 든든한 구명조끼인 **GitHub(깃허브)**를 왜 꼭 세팅해야 하는지 알아보겠습니다.
시리즈 전체 목차 열기/닫기
- 1티스토리, 워드프레스 대신 정적 사이트(SSG)를 선택한 이유
- 2수많은 프레임워크 중 Astro와 Starlight를 선택한 이유
- 3코딩 초보의 구명조끼, GitHub
- 4서버 비용 0원, Cloudflare Pages 배포(예정)
- 5워드보다 쉬운 글쓰기의 혁신, 마크다운(Markdown)과 MDX 이해하기(예정)
- 6복잡한 폴더는 그만! Astro의 직관적인 파일 기반 라우팅(Routing)(예정)
- 7레고 블록처럼 조립하는 UI, 컴포넌트(Component)의 개념(예정)
- 8개발자의 무기 장착하기: Node.js와 VS Code 설치 가이드(예정)
- 9명령어 한 줄로 내 컴퓨터에 Astro & Starlight 블로그 띄우기(예정)
- 10블로그의 뇌를 건드리다: astro.config.mjs 기본 설정 해독하기(예정)
- 11구글을 유혹하는 첫걸음, SEO 프론트매터(Frontmatter) 최적화(예정)
- 12다크 모드도 내 마음대로! Starlight CSS 변수(Variables) 뜯어고치기(예정)
- 13가독성을 200% 올리는 커스텀 알림 박스(<Aside>) 활용법(예정)
- 14독자의 이탈을 막아라: '시리즈 목차(<SeriesToc>)' 컴포넌트 개발기(예정)
- 15스쳐 가는 독자도 붙잡는 '블로그 메인(Home) 화면' 개조기(예정)
- 16저작권 걱정 없는 썸네일과 Astro 이미지 최적화(Image 컴포넌트)(예정)
- 17비전공자의 멘붕 일지: 자주 겪는 빌드 에러와 트러블슈팅 모음(예정)
- 18나만의 문패 달기: Cloudflare DNS로 커스텀 도메인(개인 주소) 연결하기(예정)
- 19전 세계에 내 블로그 신고하기: 구글 서치 콘솔 및 사이트맵(Sitemap) 등록(예정)
- 20수익형 블로그의 완성: 방문자 통계(Analytics) 분석과 애드센스의 방향성(예정)
