드디어 미루고 미루던 개인 블로그를 만들게 되었다. 그동안 velog를 이용해 간간히 글을 기록해왔지만, 이제는 좀 더 체계적으로 블로그를 운영하기로 마음먹은 만큼 블로그를 직접 만들어 보게 되었다.

Astro를 사용한 이유

우선 블로그를 개발하는 것이니 SSR을 이용해서 SEO를 최적화 하는 것이 중요하다고 생각했다.(최근 구글 봇이 성능이 좋아서 CSR도 상관없어 보이긴 하지만..)

또한, 블로그는 변화가 거의 없는 콘텐츠를 다루기 때문에 SSG가 더욱 적합하다고 생각했다. 그래서 SSR을 주로 사용하는 Remix, Next 보다는 Gatsby, Astro를 살펴보게 되었다.

그 중에서도 Astro를 선택하게 되었는데, Astro를 선택한 가장 큰 이유는 유연성이다. Gatsby는 React 기반으로 되어있지만, Astro는 React, Vue, Svelte 등 다양한 프레임워크를 사용할 수 있어서 나중에 Vue나 Svelte와 같은 새로운 기술을 배우고 싶을 때 기존 프로젝트에 쉽게 적용할 수 있다는 점이 좋았다.

Islands Architecture

Astro를 선택한 또 다른 이유는 Islands Architecture이다. Astro의 뛰어난 성능은 이 아키텍처를 통해 얻을 수 있었다.

Islands Architecture는 2019년 Etsy의 프론트 설계자인 Katie Sylor-Miller에 의해 처음 고안된 “Component Island” 개념에서 시작되었고, 이후 2020년 Jason Miller에 의해 확장되어 이 포스트를 통해 소개되었다.

위 문장에서 설명된 대로 Islands Architecture의 개념은 생각보다 간단하다. 정적인 동작만을 하는 컴포넌트들은 서버 측에서 정적 HTML로 렌더링하고, 동적 컴포넌트는 정적 HTML 렌더링과 함께 클라이언트에서 하이드레이션을 유도하는 스크립트를 포함시킨다.

이러한 접근 방식 덕분에 정적과 동적 렌더링 처리를 따로 하여 클라이언트 측에서 로드되는 자바스크립트 양을 줄이고, 최초 콘텐츠풀 페인트 수치와 SEO를 최적화할 수 있는 장점이 있어 블로그에 적합한 프레임워크라고 생각하게 되었다.

링크

Tailwind CSS를 선택한 이유

다음으로는 스타일링으로 Tailwind css를 선택하게 되었다.

Tailwind css를 선택한 이유는 개인적으로 사용해보고 싶었기 때문이다. 그래서 이는 설계할 때 특별한 이유는 없었다.

그렇지만 블로그를 만들면서 Tailwind의 직관적이라는 점에 매료되게 되었다. 나는 주로 css를 설정할 때 UI로직과 따로 분리하여 작업을 하기에 파일을 왔다갔다 해야하는 불편함이 있었다. 그렇지만 Tailwind를 사용할 때는 이런 불편함이 없어졌고, 특정 태그에 어떤 style이 적용되어 있는지 직관적으로 볼 수 있어서 작업 효율이 많이 좋아졌던 것 같다.

마치며

계속해서 미루기만 하던 블로그를 드디어 만들게 되어 정말 기쁘다. 앞으로 적용하고 싶은 기능(태그, 검색, SEO 최적화 등)이 많아서 지속적으로 유지보수하며 다양한 기능들을 추가할 예정이다. 최근 개발에 재미를 느끼게 되어, 이 기회를 통해 많은 것을 배우고 기록할 수 있기를 바란다. 글을 읽으면서 잘못된 정보나 피드백이 있다면 언제든지 연락바란다.