Skip to content
게으른 엔지니어의 기술 블로그
Go back

AstroPaper 수정하다가 3편 — 항목 개수가 같다고 폭까지 같은 건 아니었다

AstroPaper 수정하다가 · 3/4편

지난 글에서 시리즈 페이지의 최종 리뷰가 breadcrumb 버그를 잡아낸 이야기를 썼다. 그 뒤로 한동안 이 시리즈를 다시 안 열었는데, 얼마 전 블로그를 훑어보다가 직접 겪었다 — 시리즈 글은 /series에서 잘 찾아지는데, 어느 시리즈에도 안 속한 “독립글”은 찾을 방법이 없었다.

독립글이 안 보인다

지금 /posts는 시리즈 글이든 독립글이든 다 섞어서 최신순으로만 보여준다. /tags로 주제별 필터는 되지만, “독립글이라는 카테고리 자체”로 모아보는 길은 없었다. 세어보니 발행 22개 + 초안 5개, 총 27개가 이 상태로 묻혀 있었다.

하단 링크로 될 줄 알았다

첫 번째 안은 단순했다. /series 페이지 맨 아래에 “독립글은 여기서 보기” 링크 한 줄을 추가하는 것. 그런데 /series 목록을 다시 보니, 각 시리즈가 그냥 텍스트 링크가 아니라 제목+최근 날짜+최신 글 미리보기가 붙은 카드형으로 나열되고 있었다. 그 카드 목록 사이에서 작은 텍스트 링크 하나는 상대적으로 묻힐 게 뻔했다.

시리즈 카드처럼 넣어볼까 했는데

그럼 독립글도 “가상 시리즈”처럼 같은 목록 안에 똑같은 카드 형태로 넣으면 어떨까 하는 대안이 나왔다. 시각적 무게는 맞출 수 있었다. 그런데 그러면 독립글이 마치 하나의 시리즈인 것처럼 보인다는 문제가 있었다 — “이것도 시리즈인가?” 하는 혼동을 만들면서까지 눈에 띄게 만드는 건 본말전도였다.

결국 nav로 — 근데 자리가 없었다

남은 방법은 /series, /tags와 동급으로 nav에 바로 넣는 것뿐이었다. 문제는 nav가 이미 Posts / Series / Tags / About 텍스트 항목에 아카이브·검색·테마 아이콘까지 꽉 차 있었다는 것. 이 블로그는 시리즈 페이지를 처음 만들 때도 “nav가 좁아져서 하나를 뺐다”를 이미 한 번 겪었다. 같은 실수를 반복하지 않으려면 뭔가를 빼야 했다.

Archive와 Posts, 뭐가 다른가부터 봤다

뺄 후보를 찾다가 Archive 코드를 다시 열어봤다. /posts는 전체 발행글을 최신순 한 줄로 페이지네이션해서 보여주고, /archives는 정확히 같은 글 집합을 연도→월로 그룹핑해서 한 페이지에 펼쳐 보여줄 뿐이었다 — 필터링 로직은 사실상 동일하고, 카테고리 축으로 거르는 기능은 둘 다 없었다. 이미 Posts와 콘텐츠가 겹치는 보조 기능인 셈이라, 새로운 필터 축(독립글)을 넣기 위해 빼는 명분으로는 충분했다.

”아이콘 하나 빼면 텍스트 하나 들어가겠지” — 틀렸다 (Tailwind size-8 vs px-2+gap-x-5)

Archive를 빼고 독립글을 넣으면 항목 개수는 그대로니까 폭도 얼추 비슷할 거라고 생각했다. 그런데 실제 스타일을 다시 보니 계산 자체가 틀려 있었다. Archive는 정사각형 아이콘 슬롯 하나였고, 텍스트 항목은 글자 폭에 좌우 패딩과 항목 사이 간격까지 따로 붙는다. 아이콘 하나 빼고 텍스트 하나 넣는 건 폭이 상쇄되는 게 아니라 순수하게 늘어나는 쪽이었다 — 항목 수가 같다고 폭까지 같은 게 아니었다.

VPS라 브라우저로 직접 확인할 수 없어서, 이 계산만으로 넘어가는 대신 일단 만들어서 실제 배포 후에 눈으로 보기로 하고 진행했다.

Series와 Standalone을 나란히, About은 footer로

nav 순서도 다시 짰다. Series와 Standalone은 “전체 글을 시리즈냐 아니냐로 나눈” 짝 개념이라 나란히 두고, Tags는 그것과 무관한 별도 축(주제별 교차 필터)이라 뒤로 뺐다. About도 다시 봤다 — 이건 콘텐츠를 훑어보는 링크가 아니라 Privacy Policy처럼 사이트 메타 정보에 가까웠다. 그래서 About을 nav에서 footer로 옮겼다. 덤으로 nav 폭도 그만큼 줄었다.

구조를 바꾸면 색인을 다시 제출해야 하나

여기서 걸린 게 하나 더 있었다. 지금 이 블로그는 애드센스 재심사를 준비하면서 매일 Search Console에 색인 요청을 넣고 있는 중이었다. nav 구조를 통째로 바꾸는 게 이 작업에 지장을 줄까 걱정됐다 — 특히 지난 카테고리 폴더 재구성 때 실제 URL이 바뀌어서 리다이렉트와 재색인 확인이 필요했던 기억이 있어서였다.

Google Search Central 문서를 확인했다. 내부 링크 구조를 바꾼다고 이미 색인된 페이지들을 다시 제출해야 하는 건 아니었다 — Google은 다음 크롤 때 자연스럽게 새 링크 구조를 반영한다. 이번 변경은 기존에 발행된 글 URL을 하나도 안 건드렸다 — 새 URL(/standalone) 하나가 추가되고, nav 링크 하나가 바뀔 뿐이었다. 실제 URL이 바뀌었던 카테고리 재구성과는 성격이 다른 변경이라는 걸 확인하고 나서야 진행했다.

VPS라 눈으로 못 봐서, curl과 빌드 결과물로 봤다 — showArchives 플래그

구현은 기존 /posts 페이지를 거의 그대로 복사해서 독립글만 걸러내는 방식으로 끝났다. 문제는 검증이었다 — VPS라 브라우저가 없어서, dev 서버를 띄우고 curl로 상태 코드만 확인했다. /standalone은 200, 새 Archive 없는 /archives는 404. 그다음 실제로 프로덕션 빌드를 돌려서 결과물 파일을 직접 열어봤다.

여기서 뜻밖의 확인이 하나 나왔다. Archive를 끄는 설정 플래그가 몇 달 전 이 기능을 처음 만들 때부터 사이트맵 생성 로직에도 이미 연결돼 있었다 — 플래그를 끄니 빌드된 사이트맵 파일에서 /archives/가 자동으로 빠졌고, archives/index.html 파일을 열어보니 실제로 404 페이지 콘텐츠가 그대로 들어 있었다. 새로 뭔가를 더 짤 필요 없이, 이미 있던 코드가 정확히 필요한 일을 하고 있었다.

배운 점

이번엔 극적인 버그는 없었다. 대신 처음 낸 답이 세 번 뒤집혔다 — 하단 링크(눈에 안 띔), 시리즈 카드처럼 섞기(혼동을 만듦), 그리고 “항목 수가 같으니 괜찮다”는 계산(순전히 틀림). 매번 실제로 코드를 다시 열어보거나 빌드해서 결과물을 까본 다음에야 진짜 답이 나왔다. 화면을 눈으로 볼 수 없는 환경이라고 검증을 생략할 이유는 안 됐다 — curl과 빌드 산출물만으로도 확인할 수 있는 건 생각보다 많았다.


Share this post:

AstroPaper 수정하다가

  1. 1. AstroPaper 수정하다가 — 시리즈 페이지, 목록 대신 미리보기 하나만 보여주기로 했다
  2. 2. AstroPaper 수정하다가 2편 — 시리즈 페이지 검증은 다 통과했는데 최종 리뷰가 버그를 잡았다
  3. 3. AstroPaper 수정하다가 3편 — 항목 개수가 같다고 폭까지 같은 건 아니었다
  4. 4. AstroPaper 수정하다가 4편 — 최신편으로 바꾸는 것도 같은 종류의 문제였다