데스크톱을 닮은 블로그를 만들었다.

나는 단정한 화면을 좋아한다. 터미널에서 일하는 시간이 길고, 색은 에디터부터 셀까지 한 벌로 맞춰 둔다. 군더더기 없이 검고 차분한 화면이 편하다. 그런데 정작 블로그는 늘 남의 템플릿이었다. 떠 있는 카드, 큼직한 히어로, 어디서 본 듯한 폰트, 내가 매일 보는 화면과 내가 글을 올리는 공간의 결이 따로 놀았다. 그게 계속 걸려서, 내가 좋아하는 데스크톱의 미감을 블로그에 그대로 옮기기로 했다.

ruehanix는 그 결과다. 부팅 로그가 한 줄씩 흐르고, 위에 상태 바가 붙고, 창이 타일로 나뉘고, 아래 독에서 앱을 연다. Files에서 글을 고르고 Reader에서 읽는다. 블로그라기보다 나를 표현하기 위한 작은 운영체제에 가깝다.

만들면서 가장 오래 붙든 결정은 하나였다. 이런 화면은 통째로 클라이언트에서 돈다. 창을 드래그하고 테마를 바꾸고 키보드로 화면을 넘기는 건 전부 브라우저 안의 상태다. 문제는 검색 엔진이 그걸 읽지 못한다는 것이다. 셸만 있으면 그럴듯한 데모이지 블로그는 아니다. 그래서 둘로 쪼갰다. 탐색과 분위기는 셸이 맡고, 글 하나하나는 `/posts/[slug]`라는 서버 페이지로 따로 가진다. 셸의 Reader에서 글을 열면 같은 글의 서버 페이지로 가는 링크가 붙는다. 그 페이지는 메타데이터와 공유 카드, 구조화 데이터를 갖춘 평범한 글 문서다. 검색에 잡히고 공유도 된다. 보이는 화면은 데스크톱이지만, 글은 제대로 된 웹 문서로 따로 존재한다.

스택은 이 구조를 위해 골랐다. Next의 App Router를 쓴 건 서버 컴포넌트 때문이다. 글은 서버에서 그려 내려보내고, 인터랙티브한 셸만 잘라서 클라이언트로 보낸다. 경계가 분명하니 검색에 노출돼야 할 곳과 상태가 사는 곳이 깔끔하게 갈린다. 글은 Sanity에 둔다. 콘텐츠를 코드 밖으로 빼서, 배포 없이 글을 쓰고 고친다. 새 글은 재빌드 없이 1분 안에 반영된다. 이 선택에는 대가도 있었다. Sanity를 붙이려다 보니 React와 Next를 한 단계씩 끌어올려야 했고, 그 과정에서 빌드가 한 번 통째로 흔들렸다. 그래도 글을 코드에서 떼어 낸 값은 그만큼 했다고 본다.

여기에는 네 가지가 쌓인다. 개발을 위한 지식 (코드)와 개인 취미 (모터스포츠, 음악, 베이스). 결국 한 사람의 기록이다.