디자인 시안을 아홉 장 먼저 잡아 놓고, 그걸 Next.js로 그대로 옮기는 것부터 했습니다. 데이터는 전부 파일에 박아 둔 가짜였어요. 어차피 나중에 갈아 끼울 거라, 초반엔 화면이 어떻게 생겼는지만 확정하고 싶었거든요.

최근 글이 카테고리·태그와 함께 한 줄씩 깔립니다

커버 위에 제목이 얹히고 목차가 본문을 따라 붙습니다

쌓인 글 전부를 카테고리로 좁혀 가며 봅니다

만든 프로젝트를 화면 표본처럼 네 장씩 늘어놓습니다

원고 한 장이 섹션별 전용 화면으로 펼쳐집니다

작성중인 글을 위에 두고 상태별로 훑습니다

왼쪽에 마크다운, 오른쪽에 발행 화면과 똑같은 미리보기가 섭니다

프로젝트를 발행 전에 감춰 두고 미리 봅니다

어떤 글이 실제로 읽히는지 글별로 셉니다
어떤 서비스인가요?
제가 보고 읽은 걸 요약해 쌓아 두는 개인 기록 블로그예요. 읽는 화면부터 어드민·에디터·통계까지 필요한 걸 직접 만들어 붙였습니다
어떤 계기로 만들게 됐나요?
처음엔 그냥 기록용 블로그가 갖고 싶었어요. 그런데 기존 블로그 플랫폼은 커뮤니티 기능이 대부분이라 저한테는 필요가 없더라고요. 어차피 안 쓸 기능에 화면을 맞추느니, 원하는 걸 원하는 대로 붙일 수 있는 사이트를 직접 세우는 게 낫겠다 싶었습니다
주로 어떤 분이 쓰나요?
쓰는 쪽은 저 혼자고, 읽는 쪽은 검색으로 들어오는 사람들이에요
만들면서 배운 게 있다면요?
글의 결을 잡아 주는 건 코드가 아니라 규약 문서였어요. 제목·문단·인용을 어떻게 쓸지 `POSTING.md` 한 장에 못 박아 두니, 편마다 흔들리던 결이 잡혔습니다. 지금도 코드보다 이 문서를 더 자주 고쳐요
지금도 쓰고 계신가요?
네, 계속 쓰고 계속 고치는 중입니다
영상이든 글이든, 남겨두고 싶은 게 보이면 주소만 복사해 둡니다.
영상이면 소제목마다 그 시점의 장면을, 문서면 인용할 대목을 미리 챙겨 둡니다.
왼쪽에서 마크다운을 고치면 오른쪽 미리보기가 발행 화면 그대로 따라옵니다.
카테고리와 작성일을 정하고 내보냅니다.
디자인 시안을 아홉 장 먼저 잡아 놓고, 그걸 Next.js로 그대로 옮기는 것부터 했습니다. 데이터는 전부 파일에 박아 둔 가짜였어요. 어차피 나중에 갈아 끼울 거라, 초반엔 화면이 어떻게 생겼는지만 확정하고 싶었거든요.
글을 하나 고치겠다고 배포를 다시 하는 게 말이 안 됐어요. 파일 기반으로 갈까 하다가, 결국 폰에서도 글을 쓰고 싶어질 게 뻔해서 서버에 상태를 두기로 했습니다. 여기서부터 어드민이 생겼고, 마크다운 본문·이미지 업로드·카테고리 트리가 차례로 붙었어요.
글에 넣을 자료를 모으는 일 — 영상에서 장면을 뽑고, 이미지를 받아 다시 올리고 — 이 한 번에 몇 분씩 걸렸어요. 처음엔 어드민이 요청을 받은 자리에서 그대로 처리하게 했는데, 그동안 화면이 멈춰 있었습니다. 응답 시간 제한에도 걸렸고요.
그래서 어드민은 작업 줄에 한 칸 적어 두기만 하고, 제 컴퓨터에서 도는 워커가 그 줄을 가져가 처리하도록 나눴습니다. 폰에서는 던져 놓고 닫아도 되고, 워커는 밖으로 나가는 접속만 쓰니 포트를 열 일도 없었어요. 작업 상태는 같은 테이블에 적히니, 어드민은 목록에서 진행중 표시만 보면 됐습니다.
스무 편쯤 넘어가니까 제가 쓴 글을 제가 못 찾겠더라고요. 검색·태그·시리즈·연관 글 추천을 붙이고, 글별 조회수도 직접 세기 시작했습니다. 이 무렵 영어 자동 번역과 /en 라우팅도 만들어 뒀는데, 관리할 게 두 배로 늘어서 노출만 걷어내고 배선은 남겨 뒀어요.
대신 회원가입도 좋아요도 댓글도 안 붙였습니다. 읽고 가는 자리라 거기까지는 안 가기로 했어요. 기존 블로그 플랫폼을 안 쓴 이유가 그 기능들이었으니까요.
편마다 결이 달랐어요. 어떤 편은 개조식이고 어떤 편은 번역투고, 소제목을 어디서 끊는지도 그때그때 달랐습니다. 제목·문단 길이·인용 표기·이미지 배치를 그때그때 감으로 정하니 그랬던 거였어요. 그래서 규약을 통째로 POSTING.md 한 장으로 빼 두고, 글을 쓸 때마다 그걸 기준으로 삼았습니다. 적재 스크립트도 같은 문서를 근거로 슬러그·메타를 검사하게 했어요. 지금은 코드보다 이 문서를 훨씬 자주 고칩니다.
원래 실험실은 프로젝트 카드 몇 장이 전부였어요. 다른 레포에서 만든 것들을 여기 모으려니 매번 상세 화면을 새로 짜게 되더라고요. 그래서 원고 한 장의 ## 제목이 곧 렌더러가 되게 규약을 정했습니다. ## 화면이면 폰 목업 갤러리, ## 구조면 다이어그램 밴드, ## 시행착오면 스크롤 따라 펼쳐지는 부검 카드로요. 원고를 넘기면 화면이 알아서 나오니, 프로젝트를 하나 더 얹는 게 마크다운 한 장 쓰는 일이 됐어요.
만들어 두고 아무도 안 들어오면 의미가 없으니, 사이트맵·구조화 데이터·canonical을 정리하고 서치콘솔에 물렸습니다. 태그 표기가 대소문자·공백 때문에 갈라져 있던 것도 이때 하나로 합치고 옛 주소는 301로 넘겼어요.