이 블로그, Claude Code랑 같이 만든 이야기

왜 만들었나

개발/여행/캠핑/낚시 기록이랑 직접 만든 프로젝트(KafkaPilot, ShellPilot 같은)를 한곳에 모아두고 싶었다. 깃허브 README만으로는 "이런 이유로 이런 걸 만들었다"는 맥락이 잘 안 남고, 노션 같은 곳에 쓰면 검색도 안 되고 남한테 보여주기도 애매했다. 그래서 그냥 직접 블로그 겸 포트폴리오를 만들기로 했다.

어떤 스택으로 만들었나

• Next.js 14 (App Router) + Tailwind + MDX — 글은 그냥 .mdx 파일로 관리, 카테고리별 레이아웃 분기(개발 글은 좁은 컬럼+목차, 여행/캠핑/낚시는 와이드+갤러리)
• FlexSearch — 서버사이드에서 제목/요약/태그 인덱싱, Ctrl+K 모달 검색
• Waline — 댓글
• Upstash Redis — 글 조회수(세션당 1회), 사이트 방문자 수(IP+하루 기준)
• Vercel — 배포, 커스텀 도메인

Claude Code랑 어디까지 같이 했나

솔직히 말하면 이 블로그 코드는 거의 다 Claude Code가 짰다. 나는 디자인 톤(웜톤 팔레트, 모스그린/테라코타), 카테고리 구조, 기능 우선순위 같은 걸 정하고, 화면 보면서 "여기 이상해 보이는데", "이건 이렇게 바꿔줘" 하는 식으로 계속 피드백을 주는 쪽이었다. 코드 한 줄 한 줄을 내가 짠 건 아니지만, 어떤 걸 만들지·어떻게 보일지에 대한 판단은 계속 내가 했다.

재밌었던 건, 큰 기능(SEO, 검색, 카테고리 분리)은 오히려 별 문제 없이 순조롭게 끝났는데, 정작 디테일한 UI 미세조정(헤더 로고랑 글자 정렬, 검색창 위치, 목차 위치)에서 훨씬 많은 대화가 오갔다는 거다. "느낌이 이상한데"를 말로 설명하는 것보다 직접 스크린샷 찍어서 보여주는 게 훨씬 빨랐다.

오늘 만난 진짜 이상한 버그

글 상세 페이지에 목차(TOC)를 넣으면서, 모바일에서는 접혔다 펼쳐지는 토글로, 데스크톱에서는 항상 펼쳐진 사이드바로 보이게 만들려고 했다. 방법은 간단해 보였다 — <details> 하나로 두 가지 모습을 다 만들고, 데스크톱에서는 CSS로 display: flex !important를 강제해서 "항상 열린 것처럼" 보이게 하면 될 것 같았다.

그런데 데스크톱에서 보면 "▶ 목차"라는 글자만 보이고, 그 밑에 있어야 할 헤딩 링크들이 하나도 안 보였다. 개발자 도구로 찍어보니 더 이상했다 — 링크 요소들은 분명히 실제 좌표값을 갖고 있었다(getBoundingClientRect()가 정상적인 숫자를 반환). display 속성도 내가 강제한 대로 flex였다. 그런데 화면엔 안 보인다.

원인은 CSS 밖에 있었다. 크롬은 <details>가 닫혀 있을 때 summary를 제외한 내용을 content-visibility: hidden으로 처리하는데, 이건 display 속성을 아무리 덮어써도 이길 수 없는 별도의 렌더링 단계였다. 즉 open 속성이 실제로 붙어 있지 않으면, display를 아무리 flex !important로 우겨도 브라우저는 애초에 "이건 그릴 필요 없다"고 판단해버리는 것이다.

결국 데스크톱용은 <details>를 아예 포기하고 평범한 <nav>로 따로 만들어서 해결했다. 모바일에서만 보이는 접이식 <details>와, 데스크톱에서만 보이는 고정 <nav>를 CSS hidden/lg:hidden으로 나눠 관리하는 식으로 — "네이티브 <details> 상태를 CSS로 속이려 하지 말자"는 교훈을 하나 얻었다.

앞으로

기능은 지금 수준에서 당분간 충분한 것 같고, 이제 진짜 콘텐츠(글)를 채우는 게 남았다. KafkaPilot, ShellPilot 관련 글은 이미 썼고, 앞으로 여행/캠핑/낚시 기록도 하나씩 올릴 생각이다.