04. 비개발 인간의 바이브 코딩 이모저모

2023년에 Chatgpt로 프로그램의 명세를 질문단위로 쪼개고 복사 붙여넣기 하면서 뭔가를 만드는 사람은 나밖에 없었는데 그것이 지금도 돌아가는 플랜트샤워다.http://plantshower.xyz/

하지만 2026년에는 전문 개발자마저도 에이전트를 여러개 써서 주로 회사 일을 하는 것 같고... 뭐 코드를 안 보고도 개발을 할 수 있다는 둥... 그런 시대가 되었다. 나는 플랜트샤워를 만들면서 무식 비용이 많이 들었지만 기쁨을 많이 얻었기에 용감하게도 "경험치가 늘었으니까 전에 1개 서비스 운영할 돈으로 2개를 해보자" 하게 되었고, 야 코딩 에이전트도 있는데 쓰면 되지... 그랬는데 사실 식물 비수기임을 감안하더라도 트래픽은 사자의 풀밭이 훨씬 많다. 그래도 식물인구보다는 독서인구가 많았던 것인가... 그래서 초기엔 서버가 늘 터졌고 나는 부검하느라 정신이 없었다.

LLM 코딩 에이전트는 실시간으로 발전하는 것 같다. 개발자들은 클로드코드를 선호하지만 나는 개발 기반이 없기 때문에 그냥 익숙한 것, 10%는 틀리겠지만 대체로 설명을 길게 해주는 걸 선호하는 것 같다. 그래서 명예의 전당 후반 작업은 ChatGPT Codex 5.3과 함께하게 되었다. 플랜트샤워는 분명히 개발도 글쓰기도 계획과 두서가 있었는데 사자의 풀밭은 그렇지 못하다. 그냥 그것을 개성이려니 생각하기로 했다.(....)

ChatGPT Codex 5.3

드디어 한국말을 할 줄 알게 되었다. ChatGPT가 5가 되면서 드디어 자바스크립트를 요구사항만으로 구현할 수 있게 되었는데(이전 버전에서는 뭐 하나 구현하려면 3박 4일이 걸렸다) 이제 Codex 5.3은 최신 CSS도 그럴싸하게 구사한다. 그래도 내가 ChatGPT보다 잘하는 딱 하나가 css였는데... 아쉽기도 하지만 리얼 바카라장을 충실하게 구현하고자 하는데 약간 내 실력만으로는 한계가 있었으므로 고맙다. 그리고 이제는 요구사항을 한숟갈 단위로 쪼개지는 않아도 되고 뫄뫄라는 기능을 만들 건데 1. 2. 3. 4 라는 조건이 있다. 일단 만들어봐라? 라고 하면 지가 알아서 한다. 이를 테면 이런 식으로 프롬프트를 넣는다.

chatgpt가 admin이 보는 검수/색상추출용 커버는 cloudflare worker에서 assets.lionsgrass.kr/admin-covers/ 이런 식으로 나오던 매핑을 제거하면 그 url로 보던 건 바로 안 나온다고, 관리자 안전한 배포 순서(깨짐 없이)를 거쳐야 한대. 그래서 워커를 끊어도 깨지지 않고 이미지가 나오게 하는 게 목표야. 순서는 다음과 같아. 1) 먼저 앱(Flask)에 “관리자 전용 이미지 라우트”를 만든다예:https://lionsgrass.kr/admin/covers/<key> • 로그인/관리자 체크 • R2 우선, 없으면 Supabase fallback Cache-Control: private, no-store2) 관리자 화면에서 쓰는 이미지 src를 전부 그 라우트로 바꾼다 •HTML/JS에 assets.lionsgrass.kr/admin-covers/...를 더 이상 넣지 않게 (중요) 너 “나도 자주 본다굿!”이므로 이게 제일 체감 안정성 3) 배포 후 확인 •관리자 화면에서 이미지 정상 표시 확인 • access/nginx 로그에서 /admin/covers/ 히트 확인이제 제거해도 관리자 화면은 앱 경유로 보니까 영향 없음→ 동시에 “URL만 알면 누구나 보는” 구멍도 닫힘

최근의 첫 요구사항은 이런 식으로 만드는 일이 잦아졌다. 물론 기술적으로 모르는 부분에 대해서는 ChatGPT 본체와 요구사항을 대화로 정리하긴 한다. 코덱스는 대화가 좀 약해서 본체와 대화하는 게 편하다. ChatGPT와 대화 -> 요구사항 구체화하기(이건 ChatGPT가 해주기도하고 그냥 내가 대략 하기도 한다) 를 해서 명령문이나 패치를 조금 더 구체화해서 하게 되었다.

header.html의 메뉴에 설정 밑에 명예의 전당 바카라 설정으로 들어가는 작은 서브메뉴를 모바일에서만 보이게 만들고 싶은데 <a href="{{ url_for('books.page_manage_libraries') }}" class="nav-action setting"> <span class="name">설정</span></a> 이 밑에 넣으면 될까? 일단 더미가 될만한 링크를 하나 만들어줄래? 조건은 로그인한 사람 and 명예의 전당이 있는 사람만 보이게.

작은 서브메뉴를 넣을 때도 조금 더 많은 요구사항을 넣을 수 있게 되었다.

Extra-high를 써도 괜찮다

처음에는 기본으로 medium이 선택되어 있었고, 나는 20달러(세금 포함해서 22달러)짜리 Plus 플랜을 사용하기 때문에 토큰을 다 사용하는 데 대한 부담이 있었다. 하지만 Extra-high의 코딩실력이 다르다는 풍문에 바꿔서 써봤는데 오류가 많이 줄었고, 토큰을 좀 더 많이 소모하긴 했지만 내 허리 토큰보다 넉넉했다.

현재 나의 Codex 세팅

하지만 5.3이 되면서 코드리뷰하면 파일이 너무 길다고 터지게 되었다... 너 옛날엔 안그랬잖아...

컨셉충에 따라오는 최적화 지옥

컨셉충은 벌레가 아니라 컨셉에 충실하다는 뜻이다. 하지만 다양한 모바일 기기까지 지원하려면 조금 더 가볍게 로딩이 되어야 했다. 그리고 생각보다 직접 바카라을 많이 등록하는 방법을 선호했다.(리퀘스트 만든 사람 시무룩) 처음부터 로딩까지 생각하며 코딩을 해달라고 하면 그렇게 해줬을까? 그건 잘 모르겠지만... 아무튼 https://fishingproductfr.com/@5ducks/165 이 포스트에서 바카라장 로딩 1차 프론트 최적화에 대한 얘기를 한 적이 있었는데 이걸 하고도 또 최적화를 해야 했다. 왜냐면 큰 사이즈의 페이지 로딩을 하다가 종종 서버가 터졌기 때문이다.(....)