팩스 한 장에서 시작된 나비효과

모든 것의 시작은 아주 사소했습니다. 특허 출원 제안서를 팩스로 보내려는데, 왠지 종이 한 장으로는 내 진심이 전해지지 않을 것 같았습니다. “그럴듯한 웹사이트 주소라도 하나 박혀 있으면 좀 있어 보이지 않을까?”

그렇게 스크롤 방식의 기다란 1페이지 홈페이지가 탄생했습니다. 2000년대 초반, 잠시 웹 에이전시에서 곁눈질로 배웠던 HTML/CSS 지식에 제미나이 3.0 Pro의 두뇌를 빌려 메모장에 코드를 붙여넣기 하며 만든 순수 결정체였죠. 도메인을 사고, 깃허브(GitHub)에 연결해 팩스를 보냈을 때의 그 뿌듯함이란!

하지만 인간의 욕심은 끝이 없고, 같은 실수를 반복한다고 했던가요?

뱁새가 황새 쫓다가 가랑이 찢어진다 (v1의 탄생)

시간이 흐르고 보니 그 1페이지 사이트가 너무 초라해 보이기 시작했습니다. “이왕 하는 거 정식으로 만들어보자!”라는 생각에 무작정 제미나이 3.0 Pro를 다시 소환했습니다.

메모장을 졸업하고 VS Code라는 신세계를 영접했고, 실시간으로 변경 사항이 반영되는 Live Server의 마법에 빠졌습니다. 바벨(Babel)이 뭔지, 테일윈드(Tailwind)가 뭔지도 모르면서 AI가 시키는 대로 복사하고 붙여넣으며 꿈에 그리던 ‘다크 모드’ 홈페이지를 구축하기 시작했죠.

깃허브 네임서버를 Vercel로 돌리고, ImprovMX로 도메인 이메일을 포워딩하고, StaticForms로 문의 폼을 달고, Giscus로 댓글창까지… 남들 좋다는 건 다 가져다 붙였습니다. 트렌드? 아키텍처? 그런 건 중요하지 않았습니다. 일단 돌아가면 장땡이었으니까요.

결과는 어땠냐고요? 수정의 수정을 거듭한 끝에, 누더기처럼 기워진 v1 홈페이지가 탄생했습니다. 겉보기엔 그럴듯한 다크 모드였지만, 속은 꼬일 대로 꼬인 CSS 덩어리였죠.

아스트로(Astro)와의 첫 만남, 그리고 두 번의 좌절

그러던 어느 날, ‘아스트로(Astro)’라는 프레임워크를 알게 되었습니다. 정적 사이트 생성기의 끝판왕이라니, 내 누더기 사이트도 이걸 만나면 명품 옷을 입을 수 있을 것 같았습니다.

VS Code 터미널에서 제미나이 CLI(나의 든든한 AI 파트너)를 불러내 당당하게 외쳤습니다. “이 v1 사이트를 아스트로로 이식해 줘!”

말 안 해도 척척 알아듣는 똑똑한 녀석이지만, 원판 불변의 법칙은 AI도 어쩔 수 없었나 봅니다. v1의 배배 꼬인 CSS 덩어리를 그대로 가져가려다 보니, 레이아웃은 무너지고 스타일은 충돌하고… 제미나이 CLI가 아무리 애를 써도 수습이 불가능했습니다.

“더 잘해보려고 했는데…” 화면 속 깨진 레이아웃을 보며 한숨만 쉬다, 결국 프로젝트 폴더를 통째로 휴지통에 던져버렸습니다. 그것도 두 번이나요.

결단: 갈아엎자!

휴지통을 비우며 생각했습니다. ‘여기저기 꿰매서 겨우 목숨만 붙어 있는 이 다크 모드 좀비(v1)를 살리는 건 의미가 없다.’

그래서 결심했습니다. 완전히 갈아엎기로. 기존의 누더기 옷(CSS)을 벗어던지고, 아스트로라는 고성능 스포츠카에 걸맞은 새로운 뼈대와 엔진을 얹기로 말이죠.

그렇게 크리스마스의 악몽이 아닌, 크리스마스의 대공사가 시작되었습니다. (다음 편에 계속)