프롬프트 2개와 스크린샷 1장: AI 에이전트와 블로그 CSS 라이브러리 마이그레이션

Perplexity Discover 피드를 스크롤하다가 눈에 들어온 라이브러리가 있었습니다. oat.ink, 8KB짜리 시맨틱 CSS 라이브러리였습니다. 의존성도 없고, 빌드 스텝도 필요 없고 다크모드가 기본 내장되어 있었습니다.

스크린샷을 찍어서 Hermione한테 보냈습니다. 질문은 딱 하나였습니다.

“우리 블로그 이걸로 마이그레이션할 수 있을까?”

Hermione는 우리 코드베이스를 읽고 oat의 CSS를 받아서 분석한 뒤, 컴포넌트별 매핑 결과를 깔끔하게 정리해 왔습니다. 블로그는 Astro 파일 5개에 직접 짠 CSS가 약 240줄 정도였는데 oat가 거의 대부분을 기본으로 커버하는 구조였습니다.

두 번째 프롬프트:

“하자.”

3분 뒤, 빌드 통과, 커밋, 푸시, Vercel 자동 배포까지 끝났습니다.

그게 전부였습니다.

실제로 바뀐 것

마이그레이션 자체는 솔직히 대단한 기술적 성취가 아닙니다.

수작업 CSS 약 260줄 삭제
oat.min.css + oat.min.js 추가 (gzip 기준 8KB)
보너스: 다크모드 토글, 태그를 뱃지 스타일로 깔끔하게 정리
순감소: 코드 170줄

글 4개, 레이아웃 2개짜리 작은 블로그였으니 거창한 리팩터링은 전혀 아니었습니다.

하지만 그 과정이 주는 느낌은 꽤 강렬했습니다.

내가 한 것 vs. Hermione가 한 것

내가 한 일:

Perplexity에서 스크린샷을 봤다
에이전트에게 전달했다
“마이그레이션 가능한지 봐줘”라고 했다
“하자”라고 했다
배포된 결과를 확인했다

Hermione가 한 일:

Astro 레이아웃과 페이지 파일 5개를 읽음
oat.ink에 접속해서 CSS 다운로드 후 커버리지 분석
기존 커스텀 스타일을 oat 대응 항목으로 매핑
바로 매핑되는 것, 수정 필요한 것, 삭제 가능한 것을 분류
파악 결과를 표로 정리해서 보고
템플릿 파일 3개를 전부 재작성
oat.min.css와 oat.min.js를 public/ 디렉토리에 다운로드
다크모드 토글과 localStorage 연동 추가
빌드, 검증, 커밋, 푸시까지 완료

제가 보낸 프롬프트는 2개였고 Hermione가 실행한 단계는 9개였습니다.

프로젝트가 작으니까 가능한 이야기

여기서는 솔직해져야 합니다. 저는 낮에는 대규모 엔터프라이즈 코드베이스를 다룹니다. 수년간 쌓인 복잡도와 곳곳에 숨어 있는 암묵적 컨벤션이 가득한 브라운필드입니다.

그런 환경에서는 에이전트에게 싱글 샷 프롬프트를 던져서 깔끔하게 끝나는 경우가 거의 없습니다. 컨텍스트 윈도우가 차고 에이전트는 폴더 깊숙이 묻힌 사내 규칙을 놓치며 안전해 보이던 변경은 잊고 있던 통합 테스트를 깨뜨리곤 합니다.

하지만 파일 5개, 명확한 구조, 한 사람의 컨벤션으로 이루어진 개인 프로젝트에서는 이 워크플로우 하나로 판이 완전히 달라집니다.

“이거 해볼까?”에서 “배포 완료”까지의 거리가 문장 두 개를 치는 시간으로 줄어들었기 때문입니다.

생각하게 만드는 부분

저는 직원을 둬본 적이 없습니다. 사람에게 일을 맡기고 결과를 받아보는 경험이 실제로 어떤 느낌인지 잘 모릅니다.

그런데 이번 작업이 딱 그런 느낌이지 않을까 싶었습니다. 무언가를 가리키며 “이게 우리한테 맞는지 확인해줘”라고 하고, 구조화된 분석을 받은 뒤 “진행해”라고 지시해서 배포된 결과물을 받아봤기 때문입니다.

동시에 이걸 무한정 계속할 수는 없다는 점이 조금 아쉽습니다. 토큰은 비용이고 모든 대화에는 예산 한계가 있습니다. 만약 Hermione를 몇 시간짜리 리팩터링이나 며칠짜리 문서화처럼 더 긴 호흡의 작업에 끊김 없이 돌릴 수 있다면, 산출물의 깊이는 지금과 또 다를 것 같습니다.

지금은 에이전트 싱글 샷에 무리 없이 들어가는 작업 단위가 작습니다. CSS 라이브러리 교체에는 충분하지만 “마이크로서비스 40개에 걸친 인증 레이어 개편” 같은 일에는 아직 역부족입니다.

하지만 방향성만큼은 분명합니다. 그리고 작은 일이라도 쌓이면 체감은 엄청납니다.

머리에서 안 떠나는 질문

에이전트가 “예상 소요 시간 단위”의 작업을 안정적으로 처리할 수 있게 되면 어떻게 될까요?

“함수 하나 만들어줘”나 “테스트 하나 짜줘” 수준이 아니라, “여기 코드베이스와 설계 문서가 있으니 구현해서 스테이징에 올려둬. 끝나면 알려주고.” 같은 지시 말입니다.

아직 거기까지 오지는 않았지만 오늘 저는 스크린샷 한 장과 문장 두 개로 CSS 라이브러리를 통째로 바꿨습니다. 1년 전이었으면 기술 데모 영상에나 나올 법한 일이었겠지만 지금은 그저 평범한 월요일 오후의 일상일 뿐입니다.

그 사이에 Harry도 같은 일을 했습니다

재미있는 건 이 부분입니다.

Hermione가 블로그를 oat.ink로 마이그레이션하는 동안, 같은 스크린샷을 Harry한테도 보냈습니다. AI SOTA Feed Bot을 만들고 유지하는 제 또 다른 AI 에이전트입니다.

Harry도 같은 날 오후 피드봇 웹 UI 전체를 oat.ink로 마이그레이션했습니다. CSS 기본 적용부터 시작해서 시맨틱 HTML 재구성, 다크모드 토글, 빈 상태와 에러 처리, 뱃지 스타일까지 단계별로 끝냈습니다. 거기서 멈추지 않고 피드 히스토리 누적, 날짜와 시간 기반 필터링, 쿼리 파라미터를 받는 API까지 연달아 붙였습니다.

에이전트 2개, 프로젝트 2개, 스크린샷 1장, 같은 오후.

블로그 마이그레이션은 프롬프트 2개로 끝났고 Harry 쪽은 피드봇이 더 복잡해서 몇 마디 더 오갔지만 패턴은 같았습니다. 대상을 가리키고 “이거 해줘”라고 하고, 결과를 확인하는 흐름이었습니다.

오늘 저는 CSS 코드를 단 한 줄도 직접 쓰지 않았는데 운영 중인 프로젝트 두 개가 더 깔끔해졌습니다.

이 모든 걸 시작한 스크린샷

Perplexity Discover 피드에서 oat.ink 카드를 우연히 본 게 전부였습니다. 카드 하나, 스크린샷 하나. 마이그레이션이 들일 노력 대비 가치가 있을지 고민하는 데 쓴 시간은 0초였습니다.

필요한 노력이 프롬프트 2개뿐이었기 때문입니다.

이게 진짜 변화입니다. 마이그레이션 자체가 워낙 어려웠는데 AI가 마법처럼 해결해줬다는 뜻이 아닙니다. 예전 노력 기준으로는 굳이 생각할 필요조차 없었던 사소한 개선들이, 이제는 바로 시도해볼 만한 일이 되었다는 뜻입니다.

“이 작업이 내 시간을 쓸 만한 가치가 있는가?”라는 질문의 기준이 바뀌었습니다. 제가 더 빨라져서가 아니라, 시도해보는 비용 자체가 0에 가까워졌기 때문입니다.