2000년대 웹에이전시 사장님, AI를 만나다
“홈페이지? 그거 나모 웹에디터로 뚝딱 만들어서 FTP로 올리면 되는 거 아니야?”
…라고 생각했던 시절이 제게도 있었습니다. 2000년대 초반, 웹에이전시를 운영하며 인터넷의 여명기를 달렸던 기억을 안고 20여 년이 흘렀습니다. 강산이 두 번 변하는 동안 저는 ‘특허’라는 또 다른 전문 영역을 구축했고, 코딩과는 거리를 두고 살았죠.
그러다 문득, AI에 푹 빠져 지내던 어느 날이었습니다.
“내 지식재산(IP) 전문성을 담은 나만의 디지털 영토를 다시 만들어보자.”
이 단순하고도 위험한(?) 생각 하나가 저를 험난한 ‘삽질의 대서사시’로 이끌 줄은 꿈에도 몰랐습니다.
1장: 맨땅에 헤딩, 그리고 메모장
요즘 개발 트렌드? 모던 웹? 그런 건 알 리가 없었습니다. 제 곁엔 오직 든든한(가끔은 엉뚱한) 파트너, ‘제미나이(Gemini)’ 뿐이었죠.
깃허브(GitHub)라는 신문물을 접하고, “좋아, 20년 전 실력 발휘 한번 해볼까?” 하며 호기롭게 시작했습니다. 그런데 도구가… 윈도우 메모장이었습니다.
나: “제미나이, 이거 색깔 좀 바꾸고 싶은데 코드 좀 짜줘.”
제미나이: “네,class에text-blue-500을 추가해보세요.”
나: (메모장에서 한 땀 한 땀 타이핑하며) “오… 된다!”
바벨(Babel)? 테일윈드(Tailwind)? 그게 뭔지도 모르면서 제미나이가 던져주는 코드를 메모장에 붙여넣기 바빴습니다. VS Code라는 위대한 발명품을 알기 전까지, 저는 2025년에 1999년의 방식으로 코딩을 하고 있었던 겁니다.
2장: VS Code의 축복, 그리고 시작된 ‘욕심’
VS Code를 처음 깔고, Live Server로 실시간 수정 화면을 보았을 때의 그 충격이란!
“세상에, 요즘 애들은(?) 이렇게 편하게 개발했단 말이야?”
자신감이 붙자 욕심이 생겼습니다. 단순히 깃허브 URL(nan-ip.github.io)로 띄우는 건 멋이 안 나더군요.
- 가비아 도메인 등록:
nan-ip.me도메인을 지르고 깃허브 페이지에 연결했습니다. (여기까진 순조로웠습니다.) - 이메일 욕심:
admin@nan-ip.me같은 멋진 이메일을 갖고 싶어 ImprovMX로 포워딩을 설정하고, Static Forms를 붙여 상담 폼까지 구현했습니다. (성공의 쾌감!) - 댓글 욕심: “블로그엔 댓글이 있어야지!”라며 Giscus를 도입했습니다. 그런데 기본 디자인이 마음에 안 드네요?
- CSS 수정에만 꼬박 24시간을 태웠습니다.
- 겨우겨우 내 입맛에 맞게 고쳤을 때의 그 짜릿함! 하지만 이건 시작에 불과했죠.
3장: 레이아웃 분리의 늪과 FOUC의 저주
더 빠르고 좋은 환경을 찾아 Vercel로 DNS를 옮겼습니다. 그러다 문득 소스 코드가 눈에 들어왔습니다.
헤더, 사이드바, 푸터가 모든 페이지마다 중복되어 있는 게 거슬리기 시작한 거죠.
“그래, 유지보수를 위해 파일별로 분리하자!”
호기롭게 JS를 이용해 include 방식으로 레이아웃을 분리했습니다. 그런데… 페이지를 로딩할 때마다 헤더와 푸터가 깜빡! 하고 늦게 뜨는 겁니다.
나중에 알았지만 이게 그 유명한 FOUC(Flash of Unstyled Content) 현상이더군요.
- 스크립트 위치를 바꿔보고,
- CSS를 인라인으로 넣어보고,
- 제미나이를 붙잡고 하소연을 해봐도…
또다시 꼬박 하루를 밤새워 씨름했지만, 결국 해결하지 못했습니다.
결론: “구관이 명관이다.” (다시 원복했습니다. 😂)
4장: 뒤늦게 깨달은 진실들
삽질은 여기서 끝이 아니었습니다.
- Tailwind CLI의 배신(?): 알고 보니 터미널에 테일윈드 감시(Watch) 모드를 켜놓고 작업했어야 했는데, 그걸 몰라 CSS가 뒤죽박죽 꼬여버린 채 빌드만 하고 있었습니다.
- 구시대적 유물: 제가 만든 홈페이지가 요즘 트렌드인 정적 사이트 생성기(SSG) 방식이 아니라, 20년 전 감성의 ‘수제 HTML’ 덩어리였다는 사실을 깨달았을 때의 허탈함이란…
에필로그: 제미나이 CLI, 그리고 새로운 시작
그 수많은 우여곡절 끝에, 저는 지금 완전히 새로운 환경에 정착했습니다.
3일 전, 운명처럼 ‘제미나이 CLI’를 알게 되었습니다.
이제는 메모장 대신 터미널에서 AI 에이전트와 대화하며, Jekyll(제킬)과 Netlify(넷리파이)라는 강력한 무기로 무장한 지금의 nan-IP .Blog를 구축하고 있습니다.
20년 전 웹에이전시 사장은 이제 ‘AI를 활용하는 디지털 아키텍트’로 진화 중입니다.
비록 CSS가 꼬이고, 레이아웃이 깜빡거리는 삽질의 연속이었지만, 그 모든 과정이 있었기에 지금 이 글을 쓰고 있는 것이겠죠.
이 카테고리 [디지털 아키텍처]에서는 저의 이런 좌충우돌 경험담과, AI와 함께 만들어가는 새로운 개발 이야기를 가감 없이(유쾌하게!) 풀어낼 예정입니다.
앞으로의 여정도 기대해 주세요. (이번엔 삽질 좀 덜 하겠죠? 😅)