새 블로그를 소개합니다

개요

이전 블로그는 관리가 힘들고 글을 잘 안 쓰게 돼서 새 블로그를 만들게 되었습니다. Astro 로 만들었고, CMS를 떼냈습니다.

변경되는 규모가 커서 마이그레이션보다는 새로 만드는 일에 가까웠습니다.

이전 블로그는 blog-old.te6.in 에서 계속 볼 수 있지만, 내용은 업데이트되지 않습니다. 2026년에는 접속되지 않도록 할 예정입니다.

비교

빌드 시간이 절반 이상 줄었는데 Gatsby에서 Astro로의 전환 덕분인지 아니면 CMS API 호출과 Algolia 인덱싱 과정이 빠진 덕분인지는 검증이 안 되었습니다.

Lighthouse 점수는 모바일/데스크톱, 인덱스 페이지/본문 페이지 모두 전반적으로 비슷하게 나오거나 높게 나옵니다. 다만 Netlify가 Contentful에 비해 이미지를 보내주는 속도가 느린 것 같아서 이 부분은 더 지켜봐야 할 것 같습니다.

이전 버전의 블로그에는 있으나 지금은 빠진 기능

우선 순위 높은 것부터 적어봅니다.

• 다크 모드
• 본문 바로가기 anchor
• 목차에서 지금 읽고 있는 부분 표시
• Algolia 검색
  • 본문 검색이 되는 건 좋지만 당장은 글도 많지 않고 검색량도 적어서 아예 제외할 수도 있겠습니다

살펴보기

CMS는 불필요했습니다

이전 블로그는 Contentful 을 CMS로 사용했습니다.

Obsidian에서 초안을 쓰고 나서 Contentful로 옮겨 마무리하는 과정이 마냥 나쁘지는 않았지만 귀찮았습니다. 무엇보다 이전 구성상 Contentful로 본문을 옮기기 전까지 프리뷰를 볼 수 없다는 게 큰 단점이었고, Contentful 본문 에디터에 내용이 중복되어 입력되는 버그가 있어서 더 불편한 점이 많았습니다.

새 블로그에서는 CMS를 떼어내고, 본문과 이미지 등 모든 내용을 파일로 직접 관리합니다. 이 콘텐츠들은 블로그 코드와 분리된 별도의 레포지토리에 저장되지만, 콘텐츠 레포지토리가 블로그 레포지토리에 서브모듈 로 등록되어 있습니다.

개발 환경에서는 블로그 레포지토리 밖에 존재하는 콘텐츠 레포지토리를 참조함으로써 실시간으로 파일 변화를 확인할 수 있게 하고, 빌드 환경에서는 블로그 레포지토리 안에 동기화된 서브모듈을 참조해서 리모트에 푸시된 컨텐츠만 배포되도록 하여 환경이 깔끔하게 분리됩니다. 블로그에서 Git submodule을 활용하는 전략에 대해서는 Tania Rascia의 글 에 잘 설명되어 있습니다.

덕분에, 당연한 기능이지만 이전 블로그에서는 불가능했던, “초안을 작성할 때부터 개발 서버를 띄워서 확인하기”를 할 수 있습니다. 배포할 준비가 되었다면, 컨텐츠 레포지토리에서 변경사항을 푸시한 뒤, 블로그 레포지토리에서 submodule을 업데이트하고 푸시하면 Netlify가 빌드를 해 줍니다.

컨텐츠 레포지토리에서 초안 작성용 브랜치를 따로 만들어서 작업하는 등 워크플로우를 더 자유롭게 구성할 수도 있게 되었습니다.

마이그레이션 과정에서 Contentful에 업로드한 데이터를 import해 오는 건 Contentful CLI 가 잘 되어 있어서 어렵지 않았습니다.

이제 사용하지 않게 되었지만 Contentful은 여전히 무료로 쓰기 좋은 CMS 중 하나라고 생각합니다.

디자인 개선

블로그가 예뻐졌습니다. 덜 중요한 요소는 더 작게 만들어 눈에 덜 띄게 했습니다. 본문을 읽는 동안에도 불필요하게 자리를 차지하던 헤더는 스크롤하기 전에만 보이도록 바꾸고, 본문 폭을 줄여 글이 더 잘 읽히도록 했습니다.

글 목록 페이지는 그리드에서 리스트로 바꿔 시선이 시작되는 위치가 좌측으로 고정될 수 있도록 했습니다.

무슨 생각이었는지 모르겠는데 이전 블로그에서는 본문 영역을 직접 스타일링했습니다. 이번에는 tailwindcss-typography 에서 제공하는 검증된 스타일을 그대로 사용했습니다.

‘글을 혼자 읽는 느낌’이 안 들도록 만들고 싶었습니다. 본문 맨 끝까지 스크롤하기 전에도 글에 달린 댓글과 반응의 수를 우측 하단에서 항상 볼 수 있도록 했습니다 ↘️. Giscus에서 던져주는 메시지를 잘 받아서 띄워주면 됩니다. Giscus 문서 에 방법이 나와 있습니다.

본문 컴포넌트

본문에 사용되는 귀여운 컴포넌트를 몇 개 만들었습니다.

<ImageStack>

![](../assets/7nt5vgetlzakabiuox2p.jpeg)
![](../assets/4sn9zag95mgcvaqnfnbo.jpeg)

</ImageStack>

구분선은 아래처럼 보입니다.

---

링크 미리보기에도 신경을 썼습니다.

2024년 돌아보기

나는 뭐지?

이 블로그의 글 blog.te6.in 새 탭에서 열립니다.

Astro

Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.

Astro astro.build 새 탭에서 열립니다.

<LinkPreviewCard href="/post/2024-recap" />

<LinkPreviewCard href="https://astro.build" />

본문에 블로그 글을 링크하면 hover/focus했을 때 팝오버가 표시됩니다. 이렇게 또는 이렇게 보입니다.

astro-embed 에서 지원하는 BaselineStatus도 넣을 수 있습니다.

<BaselineStatus id="link-rel-prefetch" />

접근성 챙기기

이전 블로그가 그랬듯 본문 이미지를 포함하여 의미를 가진 모든 이미지에 적절한 대체 텍스트가 들어가 있습니다. 이미지가 재사용되는 경우가 있어, 이미지:대체 텍스트 맵을 Astro의 content collection 으로 정의해두었습니다. 이미지를 사용할 때는 src만 던져주면 맵에서 찾아서 alt를 넣어줍니다. 맵을 관리하는 게 처음에는 귀찮을 것 같았는데, Gemini CLI 시켜서 이미지 추가 - 대체 텍스트 생성 - 맵 갱신 - MDX에 삽입까지 한 번에 하도록 만들어두니 전혀 불편하지 않습니다.

마찬가지로, 이전 버전과 동일하게 대부분의 기능이 JavaScript를 끈 상태에서도 동작합니다. 사이드바에 있는 접을 수 있는 태그 목록은 JavaScript 로드 전에는 <details>와 <summary>로 렌더링되고, JavaScript 로드 후 Hydrate 과정에서 열림/닫힘 상태를 맞춰 React 컴포넌트로 대체됩니다. JavaScript가 꼭 필요한 기능은 scripting 미디어 쿼리 를 써서 JavaScript를 끈 경우 애초부터 안 보이게 해 두었습니다.

몇 가지 접근성 관련 미디어 쿼리를 지원합니다. 사용하는 기기 설정에 따라 다르게 보입니다. 시각 보조 관련 옵션을 켜고 끄면서 한번 살펴보세요.

앞으로 할 일

버그 수정

• 본문에 anchor가 들어갈 때 아이콘으로 인해 세 번 클릭해서 문단을 선택할 수 없는 문제
• 팝오버가 살짝 버벅거리는 문제

로드맵

• index 페이지 꾸미기: GitHub Discussions API로 최근 댓글 띄우기, …
• 글 쓰기 더 쉽게 만들기: GFM/Obsidian syntax로 Callout 넣기
• OG 이미지 꾸며보기 ( Satori )
• 오픈소싱

2022년 말에 블로그의 첫 버전을 만들 때도 느낀 거지만 ‘블로그 만들기’라는 과제는 웹 개발의 다양한 분야를 건드려볼 수 있는 좋은 경험이 되는 것 같습니다.

글 쓰기 좋은 환경을 만들었으니 이제 글을 더 자주 쓸 수 있겠죠? (제발)