git log를 열어보면 이 블로그의 역사가 한눈에 보입니다. 2023년 1월 10일, 의욕 넘치게 리포를 만들고 세팅 커밋을 찍었어요. 그리고 6월까지 띄엄띄엄 40여 커밋을 남긴 뒤, 잠수를 탔죠. 그 40여 커밋마저 열어보면 대부분 세팅입니다. 린트 규칙을 고르고, 폴더 구조를 잡고, 컴포넌트 이름을 고민했어요. 정작 글은 한 편도 쓰지 않았고요.
그렇게 3년간 아무 일도 일어나지 않았습니다.
그러다 2026년 7월 20일에 다시 열었고, 22일에 끝냈습니다. 사흘간 커밋 69개가 쌓였는데, 둘째 날 하루에만 46개였어요. 3년을 미룬 일치고는 허무할 만큼 금방 끝나서, 그동안 대체 뭐가 그렇게 겁이 났나 싶더라고요.
사흘의 성격은 저마다 달랐습니다
커밋 로그를 날짜별로 훑으면 사흘이 다 다른 얼굴을 하고 있습니다.
첫째 날은 공사판이었어요. 패키지 매니저를 bun으로 갈고, 디자인 토큰과 다크 테마를 잡고, i18next를 걷어내고 자체 i18n을 만들어 일본어까지 붙였습니다. 블로그 목록·상세·태그 페이지, Supabase 기반 무서버 댓글, OG 이미지·사이트맵·RSS 같은 SEO 기반, 404 페이지까지. 저녁쯤엔 뼈대가 서 있었죠.
둘째 날은 46커밋짜리 폭주였습니다. ⌘K 검색, 다크모드 리디자인, 문장 하이라이트 공유, 읽기 설정, 모바일 스와이프, 댓글 랜덤 닉네임, 코나미 커맨드. 이 글에서 자랑하고 싶은 것들이 거의 다 이날 나왔어요. 중간에 Next.js 16 업그레이드와 Biome 전환 같은 공사까지 끼어 있는데, 예전 같으면 이것만으로 주말 하나가 통째로 갔을 겁니다.
셋째 날은 마감이었습니다. 파비콘을 두 눈 디자인으로 갈고, 서치콘솔과 네이버에 등록하고, OG 카드를 다듬었어요. 그리고 지금 읽고 계신 이 글을 썼고요.
물론 이 리듬을 저 혼자 낸 건 아닙니다.
달라진 건 제가 아니라 도구였습니다
이번엔 처음부터 끝까지 AI와 함께 만들었습니다.
작년에 MVP는 아직도 유효한가라는 글에서 "AI 덕분에 '최소'의 기준이 올라갔다"고 썼는데, 그 글의 증거물이 제 블로그가 될 줄은 몰랐어요. 페이지 전환, 스와이프 제스처, 문장 단위 공유, 댓글 시스템. 예전 같으면 하나하나가 "언젠가 붙이고 싶은 것" 목록에 들어갔을 기능들이, 사흘짜리 개인 블로그에 다 들어 있습니다. 개인 블로그의 "최소"도 올라간 셈이죠.
만드는 방식도 바뀌었어요. 예전의 저라면 토스트 라이브러리를 고르느라 반나절을 썼을 텐데, 이번엔 고르는 대신 만들었습니다.
허세가 아니라 경제적인 판단이었어요. AI와 같이 짜면 웬만한 인터랙션은 200줄 안에서 나옵니다. 라이브러리 문서를 읽고 설정과 씨름하는 시간이나, 원하는 동작을 처음부터 만드는 시간이나 이제 비슷해졌거든요. 그럼 자연스럽게 손에 맞는 쪽을 고르게 되더라고요. 이 블로그의 토스트도, 제스처도, 댓글도 전부 그렇게 직접 만든 코드입니다. 덤으로, 전부 제가 동작을 설명할 수 있는 코드이기도 하고요.
지금 이 페이지에서 해볼 수 있는 것들
사흘 동안 만든 것 중 세 개만 골라봤어요. 셋 다 지금 읽고 있는 이 페이지에서 그대로 작동합니다. 모바일이면 화면을 옆으로 당겨보시고, 데스크탑이면 ⌘K를 눌러보세요.
모바일에서 글 넘기기
모바일에서 글을 다 읽으면 목록으로 돌아가 다음 글을 찾아야 하잖아요. 그 동선이 싫어서, 책장 넘기듯 옆으로 당겨 넘어가게 만들었습니다.
제스처 라이브러리 없이 터치 이벤트 세 개로 만들었는데, 정작 코드보다 판정 규칙 정하는 게 일이었어요.
- 가로 이동이 10px을 넘고 세로의 1.2배보다 클 때만 스와이프로 봅니다
- 판정 전에 세로로 12px 이상 움직이면 스크롤 의도로 보고 끝까지 무시합니다
- 코드블록이나 표처럼 자체 가로 스크롤이 있는 요소에서 시작한 터치도 무시하고요
- 일단 스와이프로 인정되면 그때부터
preventDefault()로 스크롤을 잠급니다
당기는 "감각"은 함수 하나가 만듭니다.
const THRESHOLD = 88;
const damp = (p: number) =>
0.32 * Math.min(p, THRESHOLD) + 0.14 * Math.max(0, p - THRESHOLD);손가락이 움직인 만큼 화면을 그대로 밀면 싸 보여요. 임계점까지는 0.32배, 그 뒤로는 0.14배로 눌러야 고무줄 같은 저항감이 생기더라고요. 그런데 이 계수는 AI가 정해주지 못합니다. 실제 폰에서 손으로 당겨보며 맞춘 값이거든요. 놓으면 뷰 전환의 슬라이드가 이어받아, 당기던 방향 그대로 페이지가 넘어갑니다. 이동할 수 있는 글은 미리 prefetch해 두니 놓는 순간 기다림도 없고요.
녹화하다 웃긴 일도 있었어요. 분명 제가 만든 기능인데 왼쪽으로 당겨도 반응이 없어서 버그인 줄 알고 한참을 들여다봤습니다. 알고 보니 최신 글이라 다음 글이 없었고, 갈 곳이 없으면 제스처를 거부하도록 제가 그렇게 짜뒀던 거예요.
토스트 대신 캡슐
이 사이트엔 알림 토스트가 없습니다. 링크 복사든 테마 변경이든, 모든 알림은 상단의 내비게이션 캡슐이 늘어나며 보여줘요. 글에 들어가면 "읽는 데 약 4분 걸려요" 하고 먼저 알려주는 것도 이 캡슐이고요.
CSS는 width: auto로 가는 애니메이션을 못 합니다.
그래서 현재 폭을 픽셀로 고정하고 다음 프레임에 목표 폭을 지정하는 FLIP 방식으로 만들었어요.
상태 관리는 70줄짜리 자체 스토어 하나입니다.
어느 컴포넌트에서든 islandStore.notify() 한 줄이면 캡슐이 말을 대신 해주죠.
기능이 돌아간 뒤엔 오히려 자잘한 규칙에 시간을 더 썼어요. 스크롤을 내리면 숨고 올리면 나타나되, 6px 이하 움직임은 무시해 떨리지 않게 했습니다. 말하는 중에는, 그러니까 메시지가 떠 있는 동안에는 스크롤해도 숨지 않게 했고요.
반나절짜리 버그도 여기서 나왔습니다.
어느 날 캡슐의 블러가 통째로 사라졌는데, 캡슐 코드는 아무리 봐도 멀쩡한 거예요.
범인은 레이아웃을 정리하며 부모 래퍼에 넣은 overflow 한 줄이었습니다.
조상 요소에 클리핑이 생기면 backdrop-filter가 조용히 죽는다는 걸 이날 배웠어요.
버그는 늘 제가 안 보고 있는 파일에 있더라고요.
도메인의 비밀
⌘K를 누르면 검색 팔레트가 뜨는데, 사실 이건 터미널이기도 합니다.
help, theme dark, whoami 같은 명령이 통하고, 그중 qwerty가 핵심이에요.
qwerty 최민기를 치면 chlalsrl이 나옵니다.
한영키를 안 누른 채 "최민기"를 치면 그대로 chlalsrl이거든요.
이 도메인이 왜 chlalsrl.com인지에 대한 답을 팔레트 안에 숨겨뒀습니다.
도메인을 불러줄 때마다 설명이 길어지는 게 단점이지만, 한 번 설명을 들은 사람은 한 번에 기억하더라고요.
방향키로 코나미 커맨드를 치면 캡슐이 반겨주고, 콘솔에는 배포된 커밋 해시가 찍혀 있어요.
아무도 못 찾아도 상관없습니다.
그래도 언젠가 누가 ⌘K에 sudo를 쳐보고 피식 웃는다면, 만든 보람은 충분하죠.
하나 더, 문장 공유
셋만 고르겠다고 했는데 이건 도저히 못 지나가겠어요. 본문에서 문장을 드래그하면 공유 버튼이 뜨고, 누르면 그 문장으로 바로 이동하는 링크가 복사됩니다.
글 링크를 통째로 받는 것보다, 누가 제 글의 한 문장을 긁어 보내주는 쪽이 훨씬 기분 좋아요. 그 문장이 그 사람에게 남았다는 뜻이니까요.
재미있는 건 이 기능에서 서버가 하는 일이 없다는 점입니다.
링크는 브라우저 표준인 Text Fragment(#:~:text=) 문법이라, 여는 쪽 브라우저가 알아서 그 문장까지 스크롤하고 하이라이트해줘요.
제 코드는 선택 영역을 감지해 URL을 만드는 게 전부고요.
공유된 문장은 모아뒀다가, 여러 명이 겹치면 글 하단에 "독자들이 밑줄 그은 문장"으로 보여줍니다.
어떤 문장이 남을지는 저도 궁금해요.
AI와 일해보니, 역할이 달랐습니다
사흘 중 AI가 코드를 쓴 시간이 압도적으로 깁니다. 그런데 돌아보면 제가 한 일이 없었냐면, 그건 또 아니에요. 그저 역할이 달랐을 뿐이죠.
AI는 만드는 걸 잘합니다. 스와이프의 터치 이벤트 처리, 캡슐의 FLIP, Supabase 연동 같은 건 설명하면 금방 나와요. 다크 모드에서 새로고침할 때 흰 화면이 번쩍이는 걸 막으려 첫 페인트 전에 인라인 스크립트를 심는, 알 만한 사람만 아는 요령도 알아서 챙기더라고요.
대신 "얼마나"는 정해주지 못합니다. 감쇠 계수 0.32, 캡슐이 숨는 스크롤 기준 6px, 닉네임이 바뀌는 간격 70ms. 이런 숫자들은 전부 직접 만져보며 정한 값이에요. 화면을 만져보지 않고 좋은 값을 낼 방법은 없고, 그 손끝의 판단까지 맡길 수는 없었습니다.
미묘한 버그를 잡는 것도 결국 함께 했어요. 한글 태그 페이지가 전부 404가 난 적이 있는데, 빌드 시점에 태그를 미리 인코딩해 넘긴 게 원인이었습니다. 프레임워크가 한 번 더 인코딩해서, 이중 인코딩된 경로로 페이지가 만들어진 거죠. 증상만 보면 원인을 짐작하기 어려운 종류라, 이런 건 여전히 사람이 상황을 좁혀줘야 잡히더라고요.
정작 본업은 지우는 일이었습니다
이번 작업에서 제일 뜻밖이었던 건, 빼는 결정을 이렇게 많이 하게 될 줄 몰랐다는 겁니다. 커밋 로그에 영수증이 다 남아 있어요.
- 방명록 페이지를 만들었다가 몇 시간 만에 지웠습니다
- 좋아요를 멀티 이모지 리액션 바로 바꿨다가 커밋 하나 만에 되돌렸고요
- 홈에 프로젝트 섹션과 업데이트 히스토리를 붙였다가 그날 밤에 뗐습니다
- 스와이프 프리뷰는 화살표 칩에 라벨 카드까지 요란했는데, 두 번 갈아엎고 오버레이와 제목만 남겼어요
- 댓글 입력 카드는 스타일 커밋만 네 개 쌓였고요
- OG 카드는 여섯 번째 버전까지 갔다가 결국 세 번째 버전으로 롤백했습니다
하이라이트는 OG 카드예요. 공유될 때 보이는 그 카드에 두 눈 마스코트를 넣었는데, 커밋 기록 기준 3분 만에 뺐습니다. 00:51 추가, 00:54 제거. 1200×630 안에서는 제목이 주인공이어야 하는데, 눈이 자꾸 시선을 가져가더라고요.
만드는 게 싸지니 일단 만들어보고 판단하는 게 가능해졌고, 그러다 보니 뭘 남기고 뭘 버릴지 고르는 일이 본업이 됐습니다. 코드는 AI가 쓰고, 저는 지우는 걸 결정했어요. 셋 중 무엇이 제품을 만드는 일이냐 물으신다면, 저는 지우는 쪽이라고 답하겠습니다.
그 밖에 조용히 들어간 것들
여기까지 쓰고도 남은 게 있어요.
댓글 폼은 이름 칸이 빈 채로 열리지 않습니다. 처음부터 랜덤 닉네임이 들어 있고, 옆의 버튼을 누르면 슬롯처럼 돌아가요. 아바타는 이름 해시로 그리기 때문에, 같은 이름은 언제나 같은 얼굴이 나오고요. 이름 칸이 비어 있으면 뭘 쓸지 고민하다 창을 닫게 된다는 게 제 가설인데, 맞는지는 댓글이 쌓여봐야 알겠습니다.
읽는 쪽에도 손을 댔어요. 집중 모드를 켜면 화면 중앙 근처의 문단만 밝게 남는데, 긴 글에서 눈이 자꾸 딴 줄로 새는 제가 첫 사용자입니다. 다크 모드에서 텍스트를 긁으면 기본 반전 셀렉션이 흰 면으로 번쩍이길래, 액센트 색을 살짝 섞은 면으로 바꿔 눌렀고요.
파비콘의 두 눈은 이미지 파일 없이 코드로 그립니다. 원안 SVG의 비율을 상수로 옮겨둬서, 64px 파비콘부터 512px 홈 화면 아이콘까지 같은 코드에서 나와요. 언어는 한국어, 영어, 일본어 셋을 지원하고, 번역이 없는 글은 원문으로 폴백됩니다. 이 글은 셋 다 있고요.
사흘이면 됐습니다
3년을 미룬 이유를 이제 와 생각해보면, 머릿속 견적이 2023년에 멈춰 있었어요. 블로그 개편을 몇 달짜리 일로 적어뒀으니 엄두가 안 났고, 엄두가 안 나니 열어보지도 않았던 겁니다. 도구는 바뀌었는데, 견적만 옛날 것을 들고 있었던 셈이죠. 열어보니 사흘이었습니다.
문득 미루는 일이 이것 하나뿐일까 싶더라고요. "언젠가 제대로 해야지" 하고 접어둔 것들이, 사실은 이미 사흘짜리가 됐는데 아직 몇 달짜리로 기억하고 있는 건 아닐까요. 여러분의 목록에도 그런 게 하나쯤 있지 않나요.
그래서 이 글은 자랑이라기보다 저한테 하는 메모에 가깝습니다. 견적을 다시 재보라고. 만들 건 다 만들었으니, 이제 진짜 글을 쓸 차례네요.