코덱스(codex) 바이브 코팅으로 홈페이지 제작, 'AI 에이전트 프롬프트 한 장으로 끝난다?'

요즘 유튜브를 보면 AI로 앱이나 홈페이지를 순식간에 만드는 영상이 많이 보입니다. 메뉴판에 들어갈 커피 종류 몇 개를 적어주고, 간단한 프롬프트 한 장으로 메뉴판 앱을 만들었다는 식의 영상도 있습니다. 물론 AI가 예전보다 훨씬 많은 일을 해주는 것은 맞습니다. 저도 코덱스를 이용해서 홈페이지를 만들고, 블로그 관리 페이지를 고치고, 서버에 올릴 파일을 정리하고, 내부 관리용 프로그램까지 만들고 있습니다. 그런데 실제로 업무에 써보면 한 가지는 분명합니다.

제가 코팅하는 모습입니다. 두대의 컴퓨터를 사용히여 병렬 사용하고 있습니다.

프롬프트 한 장으로 그럴듯한 화면은 만들 수 있습니다. 하지만 실제로 운영할 수 있는 홈페이지를 완성하는 것은 전혀 다른 문제입니다. 코덱스로 홈페이지 만드는 일이 쉬웠던 이유 지난 주 금요일 저녁 평일 동안 작업을 중지했던 "코리아맥" 홈 페이지 작업 계속하면서 제가 사용했던 채팅을 정리한 것입니다.

저는 예전에 홈페이지 제작 회사에서 일을 했습니다. 직접 기획도 하고, 코딩도 하고, 디자인도 어느 정도 했습니다. 메인 업무가 디자인만은 아니었지만, 홈페이지가 만들어지는 전체 과정은 계속 봐왔습니다.

블로그 활동을 하기 전에는 홈페이지 회사에서 프로젝트 매니저에 가까운 역할도 했습니다. 업체와 상담하고, 필요한 메뉴를 정리하고, 디자이너와 개발자에게 수정 사항을 전달하고, 완성된 뒤에는 다시 클라이언트와 이야기하면서 잔수정을 마무리하는 일이 많았습니다. 그러다 보니 코덱스를 활용해 홈페이지를 만드는 일은 제 입장에서는 상당히 쉬운 편이었습니다. 처음부터 홈페이지 구조가 어떻게 잡혀야 하는지 알고 있었고, 어떤 부분에서 문제가 생기는지도 어느 정도 예상할 수 있었기 때문입니다.

HTML도 저는 메모장에서 시작했습니다. 메모장을 열고, 이 문서는 HTML이라고 정의하고, 저장할 때 확장자를 HTML로 저장하면 웹 문서가 됩니다. 거기에 링크를 넣고, 이미지를 넣고, 페이지를 연결하면 홈페이지가 됩니다. 지금 보면 너무 단순하게 들릴 수 있지만, 홈페이지의 시작은 결국 그런 구조입니다. 그 위에 디자인이 붙고, 데이터베이스가 붙고, 관리자 화면이 붙고, 문의폼과 검색 기능이 붙으면서 점점 복잡해지는 것입니다.

예전에는 제로보드를 많이 썼습니다. 제로보드 DB를 잘라서 쓰고, 필요한 정보를 끌어오고, API 비슷한 방식으로 입력창이나 목록을 만들기도 했습니다. 지금은 그런 작업의 상당 부분을 코덱스가 해줍니다. 그래서 코덱스가 편한 것은 맞습니다. 제가 예전에 개발자와 디자이너에게 설명하던 일을 이제 코덱스에게 설명하면 됩니다. 한 달 동안 코덱스로 만든 것들

블로그을 꼭 닮은 홈페이지 입니다.

일단 많은 분들이 제일 관심을 가지는 블로그 아케이브화 입니다. 블로그를 자동화로 웹 페이지로 옮겨서 구글 서치 콘솔과 네이버 서치 어드바이저의 주소를 등록하여 웹 페이지검색을 노출 영역에 검색등록을 하기 위해 만든 홈페이지입니다.

코덱스를 본격적으로 사용한 지는 아직 한 달 정도밖에 되지 않았습니다. 그런데 그 사이에 만든 것들이 꽤 많습니다. 제 블로그와 홈페이지 관련 작업을 했고, 클라이언트 홈페이지도 몇 개 만들었습니다. 지금 기준으로는 클라이언트 홈페이지 2~3개 정도를 코덱스를 활용해 제작했습니다.

서브컴에 있는 코덱스를 컨트롤하는 패널입니다. 네이버 댓글 자동화도 보이네요.

또 서브컴을 관리하는 앱 비슷한 도구도 만들었습니다. 메인컴에서 서브컴에 작업을 보내고, 서브컴에서 돌아가는 작업을 확인할 수 있게 하는 방식입니다.

그리고 거래처 관리 솔루션도 만들었습니다. 서버에 올려두고 제가 일정, 거래처 정보, 거래처별 할 일, 체크리스트를 관리할 수 있게 만든 내부 프로그램입니다. 혼자 일하다 보면 머릿속으로만 기억하기에는 너무 많은 일이 쌓이기 때문에, 이런 관리 도구가 필요했습니다. 이런 것들은 예전 같으면 개발자를 따로 불러야 했거나, 제가 시간을 길게 잡고 직접 코딩해야 했을 작업입니다. 그런데 지금은 코덱스와 대화하면서 구조를 잡고, 파일을 만들고, 서버에 올리고, 오류를 고치면서 완성할 수 있습니다. 이 부분만 보면 "이제 AI가 다 만들어주는 시대가 왔다"고 말할 수도 있습니다. 하지만 실제로는 여기서 이야기가 끝나지 않습니다. 빨라진 부분과 그대로 남은 부분 코덱스를 쓰면서 가장 많이 줄어든 부분은 코딩과 디자인 구현입니다. 체감상 코딩과 화면 구현 쪽은 90% 이상 줄어든 것 같습니다. 예전에는 개발자가 직접 만들어야 했던 입력폼, 목록 페이지, 관리자 화면, DB 연결, 간단한 API 같은 작업을 코덱스가 상당 부분 처리합니다.

각각의 홈페이지에도 검섹을 위한 블로그 아케이브 페이지를 붙여 넣고 있습니다.

디자인도 마찬가지입니다. 제가 원하는 분위기나 배치를 설명하면 코덱스가 CSS를 잡고, 반응형 구조를 만들고, 모바일에서 깨지는 부분도 어느 정도 고쳐줍니다. 그런데 줄지 않는 일이 있습니다. 기획은 여전히 사람이 해야 합니다. 어떤 메뉴가 필요한지, 어떤 정보를 먼저 보여줘야 하는지, 업체가 실제로 원하는 것은 무엇인지, 고객이 홈페이지에서 무엇을 보고 문의하게 될지 판단해야 합니다.

자료 정리도 필요합니다. 업체에서 준 사진이 어떤 상품인지, 어떤 순서로 보여줘야 하는지, 어떤 내용은 공개해도 되고 어떤 내용은 빼야 하는지 정리해야 합니다. 클라이언트 상담도 그대로 남습니다. 완성된 뒤에 "이 부분을 조금 바꿔주세요", "검색창도 넣어주세요", "문의폼 항목을 하나 더 추가해주세요" 같은 요청이 계속 나옵니다. 서버 업로드와 실제 공개 화면 검수도 해야 합니다. 로컬에서 보이는 화면과 서버에서 보이는 화면이 다를 수 있고, 모바일에서만 깨지는 경우도 있습니다. 결국 코덱스가 줄여주는 것은 구현 시간입니다. 하지만 홈페이지를 완성품으로 만드는 데 필요한 판단과 검수는 여전히 사람에게 남습니다. 400페이지 규모 홈페이지를 만들면서 느낀 것 최근에 코덱스로 꽤 큰 규모의 홈페이지 작업을 했습니다. 페이지 수로 보면 400페이지에 가까운 구조였습니다. 큰 틀을 만드는 데는 생각보다 시간이 오래 걸리지 않았습니다. 대략 2시간 30분 정도면 기본 구조가 잡혔습니다.

이 부분만 떼어놓고 보면 정말 놀라운 속도입니다. 예전 방식이라면 디자이너 한 명, 개발자 한 명, 콘텐츠를 넣는 에디터, 그리고 전체를 관리하는 사람이 붙어서 한 달 가까이 작업해야 할 분량입니다. 그런데 큰 구조가 빨리 만들어졌다고 해서 홈페이지가 끝난 것은 아닙니다. 검색창을 넣고, 입력폼을 다듬고, 작은 오류를 고치고, 페이지별 세부 내용을 맞추는 데는 또 시간이 걸렸습니다. 아주 큰 기능이 아니어도 실제로 운영 가능한 수준으로 맞추려면 이틀 정도가 훌쩍 지나가기도 합니다. 저도 하루 종일 풀로 작업하지는 못합니다. 집중해서 보면 하루에 두세 시간씩 나누어 작업하게 됩니다. 그렇게 며칠을 지나 일주일 안쪽에서 어느 정도 완성한 것입니다. 그래도 예전과 비교하면 엄청난 변화입니다. 예전에는 여러 명이 나눠서 하던 일을 지금은 혼자서 처리할 수 있습니다. 다만 혼자서 처리한다는 말은, 한 사람이 A부터 Z까지 다 봐야 한다는 뜻이기도 합니다. AI가 디자이너와 개발자의 상당 부분을 대신해주지만, PM과 기획자와 검수자의 역할까지 없애주지는 않습니다. 홈페이지 제작에서 디자인과 코딩은 전부가 아닙니다. 많은 분들이 홈페이지 제작을 디자인과 코딩으로만 생각합니다. 화면을 예쁘게 만들고, 버튼이 눌리게 만들면 끝이라고 생각하기 쉽습니다. 하지만 실제 홈페이지 제작에서 디자인과 코딩이 차지하는 비중은 생각보다 전부가 아닙니다. 물론 중요한 부분입니다. 하지만 홈페이지가 운영되려면 그 앞뒤에 훨씬 많은 일이 있습니다.

업체가 어떤 일을 하는지 이해해야 합니다. 고객이 어떤 검색어로 들어올지 생각해야 합니다. 메인 화면에서 어떤 메시지를 먼저 보여줄지 정해야 합니다. 문의를 받을 전화번호, 카카오톡, 폼, 지도, 상품 설명, 블로그 연동 같은 것도 정리해야 합니다. 완성된 뒤에도 작업은 남습니다. 실제로 들어가 보니 이미지가 너무 크거나, 모바일에서 버튼이 아래로 밀리거나, 서버에서는 경로가 다르게 잡히는 경우가 생깁니다. 이런 부분은 하나씩 확인하면서 고쳐야 합니다. 그래서 홈페이지 제작은 단순히 화면을 만드는 일이 아닙니다. 업체의 정보를 웹에서 작동하게 만드는 일입니다. 코덱스는 이 과정에서 정말 강력한 도구가 됩니다. 하지만 방향을 잡아주는 사람이 없으면 그럴듯한 화면만 만들고 끝날 수 있습니다. 프롬프트 한 장으로 만들 수 있는 것과 만들 수 없는 것 프롬프트 한 장으로 만들 수 있는 것은 있습니다. 예를 들어 메뉴판 앱의 초안, 간단한 랜딩페이지, 테스트용 관리자 화면, 기본 입력폼 정도는 충분히 만들 수 있습니다.

코덱스에게 화면 구성과 기능을 설명하면 빠르게 결과물을 만들 수 있습니다. 하지만 프롬프트 한 장으로 만들기 어려운 것도 있습니다. 실제 업체의 자료를 반영한 홈페이지, 서버에 올려서 운영할 홈페이지, 검색 노출까지 고려한 페이지 구조, 문의 전환을 생각한 구성, 유지보수까지 가능한 관리 화면은 단순한 한 장짜리 프롬프트로 끝나기 어렵습니다. 왜냐하면 그 안에는 화면 디자인만 있는 것이 아니기 때문입니다. 자료 정리, 콘텐츠 구조, DB 저장 방식, 관리자 권한, 모바일 화면, 서버 경로, 백업, 보안, 검색 노출, 클라이언트 수정 요청이 모두 들어갑니다. AI가 다 해준다는 말은 절반만 맞습니다. AI는 실행을 엄청나게 줄여줍니다. 하지만 무엇을 실행해야 하는지, 어디까지 맞춰야 하는지, 무엇을 하지 말아야 하는지는 사람이 정해야 합니다. 커맨드, 하네스, 스킬이라는 말에 대하여 요즘 AI 코딩을 이야기할 때 커맨드, 하네스, 스킬 같은 말을 많이 씁니다. 저도 지금은 그런 말을 씁니다. 하지만 솔직히 말하면, 이런 개념이 AI 시대에 갑자기 생긴 완전히 새로운 것은 아니라고 생각합니다.

* 서브 페이지를 많이 만드는 코리아맥 같은 홈페이지는 서브 페이지를 만들면 AI 자꾸 자동으로 메뉴를 만들어서 강한 하네스를 걸어놓은 것 입니다.

커맨드는 예전에 개발자에게 하던 작업 지시와 비슷합니다. "이렇게 해주세요." "이 부분은 건드리지 마세요." "저 파일은 지우면 안 됩니다." "완료 후에는 모바일에서 다시 확인해주세요." 이런 것들이 결국 커맨드입니다. 홈페이지를 계속 만들고 수정해도 품질이 무너지지 않게 작업 시스템을 설계하는 기술 에 가깝습니습니다. 그렇게 해서 작업을 하다 보니 자동으로 생성된 제 하네스는 메모(마크다운) 하네스.ps가 되어 버렸습니다. 하네스는 검수 기준에 가깝습니다. 작업이 제대로 됐는지 확인하는 체크리스트입니다. 스킬은 반복 작업의 절차입니다. 매번 같은 방식으로 해야 하는 일을 정리해두는 것입니다. 블로그 글을 쓴 뒤 복사용 HTML을 만들고, 대표이미지를 넣고, 서버에 올리고, 공개 화면을 확인하는 식의 루틴입니다. 말은 새로워졌지만, 실제 일하는 방식은 예전에도 있었습니다. 다만 지금은 그 기준과 절차를 사람이 기억하는 것이 아니라, 코덱스가 읽을 수 있는 파일과 명령으로 정리한다는 차이가 있습니다. 코덱스를 잘 쓰려면 말만 잘하면 되는 게 아닙니다. 코덱스를 잘 쓰는 것은 프롬프트를 멋지게 쓰는 것만으로 끝나지 않습니다. 오히려 중요한 것은 작업을 나누는 능력입니다. 어떤 일은 코덱스에게 맡겨도 되는지, 어떤 일은 사람이 직접 봐야 하는지, 어떤 순간에는 자동으로 진행하면 안 되는지 정해야 합니다. 홈페이지 작업이라면 삭제나 덮어쓰기가 필요한 순간에는 멈춰야 합니다. 블로그 작업이라면 공개 버튼을 누르기 전에는 멈춰야 합니다. 댓글 작업이라면 로그인 계정이 다르거나 보안문자가 나오면 멈춰야 합니다. AI에게 일을 맡길수록 중단 조건이 중요해집니다. 많이 시키는 것보다, 잘못 움직이지 않게 만드는 것이 더 중요합니다. 그래도 코덱스는 홈페이지 제작을 바꿨습니다 여기까지 말하면 AI가 별로 도움이 안 되는 것처럼 들릴 수도 있습니다. 하지만 제 생각은 반대입니다.

퀵아이콘 위치 때문에 화면을 보라고 하니 코덱스가 찍은 스샷입니다.

코덱스는 홈페이지 제작 방식을 확실히 바꿨습니다. 예전에는 아이디어가 있어도 개발자에게 설명하고, 디자이너에게 전달하고, 다시 수정본을 받고, 또 고치고, 기능이 필요하면 별도로 개발 일정을 잡아야 했습니다.

포토샵으로 설명을 해주어도 빠르게 이해를 합니다.

지금은 아이디어가 있으면 바로 시도해볼 수 있습니다. 서버에 올려서 실제로 확인할 수 있고, 문제가 있으면 다시 고칠 수 있습니다. 내부 관리 도구나 거래처 관리 솔루션처럼 예전에는 미루던 것들도 직접 만들 수 있습니다. 저처럼 블로그 운영, 홈페이지 제작, 마케팅 관리를 함께 하는 입장에서는 이 변화가 큽니다 . 작업량은 훨씬 늘었지만, 실제 구현에 묶이는 시간은 줄었습니다. 다만 이 변화를 "프롬프트 한 장이면 끝"이라고 설명하면 오해가 생깁니다. AI가 해주는 일과 사람이 해야 하는 일이 다르기 때문입니다. 마무리 코덱스로 홈페이지를 만드는 것은 분명히 빠릅니다. 예전보다 훨씬 적은 인원과 시간으로 실제 결과물을 만들 수 있습니다. 하지만 운영 가능한 홈페이지는 프롬프트 한 장으로 끝나지 않습니다. 초안과 완성품은 다릅니다. 화면이 만들어진 것과 업무에 쓸 수 있는 것은 다릅니다.

AI는 코딩과 디자인 구현을 크게 줄여줍니다. 하지만 기획, 자료 정리, 클라이언트 요구사항, 서버 반영, 검수, 유지보수까지 없애주지는 않습니다. 그래서 저는 코덱스를 만능 제작자라기보다, 아주 빠른 실행자에 가깝게 봅니다. 사람이 방향을 정하고, 기준을 세우고, 멈출 지점을 정하면 코덱스는 그 안에서 엄청난 속도로 일을 줄여줍니다. 아이디어만 있으면 누구나 시작할 수 있는 시대가 된 것은 맞습니다. 하지만 끝까지 완성하려면 여전히 알아야 할 것이 있습니다. 그 차이를 알고 쓰는 것이 코덱스를 실제 업무에 활용하는 첫 번째 기준이라고 생각합니다.