[2025 다했니X바이브코딩] 열받는 사람
2. 프로토타입 고도화
남편에게 내 사랑스럽고 자랑스러운 첫 프로젝트의 html코드를 보여주며 리팩토링(주워들은 용어)을 부탁한다고 했더니 정말 어이없어하며 전혀 도와줄 기미를 보이지 않았다. 그는 내가 pdf출력 버튼이 동작하도록 만들었다는 사실을 다만 인상 깊어할 뿐이었다. 좀 더 진지하게 도움을 요청했다. 1. 생각보다 바이브코딩은 재밌는 거 같다. 2. 내 프로젝트는 아직 고쳐야 할 부분이 정말이지 너무나 많다. 3. 그러나 이제 더 이상 제미나이는 내 말귀를 알아먹는 것을 거부하고 있다.
그가 나에게 준 솔루션은 세 가지. 1. 나한테 외주를 줄 잔머리를 굴리지 말고 가르쳐줄 테니 배우도록 해라. 2. 메모장 html 작업은 이제 멈추고, VS code를 깔도록 해라. 3. 제미나이보다 클로드가 코딩에 더 특화되어 있다. 제미나이를 버려라!
나는 아직 깃헙이 무엇이고 어디를 어떻게 눌러야 하는지도 파악이 안 된 상태인데, 뭔 코드?를 또 깔아야 한다니 숨이 턱 막혔다. 그리고 감히 알파벳 C 주주인 나에게 제미나이를 버리고 클로드로 갈아타라고 하다니!!! 황금알을 낳는 알파벳 C를 일찌감치 매도해 버린 남편의 질투가 분명했다.
1297줄로 작성된 나와 제미나이의 코드를 보며 웃음이 터진 남편은 초등학생 수준인 내게 수능 1타 강의를 진행하기 시작했다. 못 알아듣는다고 하면 <상담 준비 다했니?>에게 절실히 필요한 도움의 손길을 거둘 것 같아서 대충 이해하는 척했다.
다시 VS code에 있는 클로드 챗 화면을 복습하며 어떤 명령을 내렸는지 정리해 보자.
index.html 가독성 개선해 주세요
최신 javascript 문법 및 bestpractice 적용해 주세요.
코드 품질 및 클린 코드 betspractice 적용해 주세요.
�개선 사항 : 코드 가독성 높아짐, 유지보수에 용이함, 현대적 JavaScript표준을 따름.
만족스럽지 않았는지 좀 더 요구했다.
아직 파일이 너무 큰 것 같습니다. SRP 원칙과 javascript best practice에 따라 class나 js파일로 분리해 주세요.
� 개선 사항
✅ 코드 가독성: 1,297줄 → 각 파일 100~400줄로 분산
✅ 유지보수성: 각 클래스가 하나의 책임만 가짐
✅ 재사용성: 각 모듈을 독립적으로 재사용 가능
✅ 테스트 용이: 각 모듈을 별도로 테스트 가능
✅ 캡슐화: 책임별로 명확히 분리된 인터페이스
나의 1297줄 index.html 파일이 알아서 분리가 되었다. 대박. 여기서 다 끝난 줄 알았는데, 무언가를 또 요구했다.
파일구조를 README에 작성해 주세요.
✅ 프로젝트 구조 - 트리 형식의 디렉토리 구조
✅ 파일 설명 - 각 파일의 역할과 책임 상세 설명
✅ 주요 기능 - 4가지 핵심 기능 설명
✅ 아키텍처 패턴 - SRP, 의존성 주입, 모듈 시스템
✅ 기술 스택 - 사용된 기술들
✅ 사용 방법 - 6단계 사용 절차
✅ 개발 가이드 - 새로운 기능 추가 방법
✅ 스타일 커스터마이징 - CSS Variables 수정 가이드
✅ 주요 설계 결정 - 5가지 핵심 설계 원칙
README가 대체 뭔지 궁금해서 제미나이한테 물어봤다.
이다음 과정부터는 내가 제미나이와 나눈 수다떨기코딩과 비슷한 흐름이 이어졌다.
클로드는 참 똘똘하고 응답이 빠른 녀석이었고, vs code는 진짜 너무 편리했다. 내가 클로드에서 요구한 내용을 반영해서 즉각 필요한 코드를 수정했고 바로 commit과 push까지 일사천리로 가능했다. 이런 똘똘이들과 함께 했지만, 원하는 결과를 만들어가는 과정은 생각보다 너무 힘들었다. 그리고 혜자 제미나이와 다르게 클로드는 서울깍쟁이었다. 쿼터는 생각보다 빨리 닳았고, 자꾸 3시간 뒤에 채팅이 가능하다고 했다.
'대체 어떻게 말해야 알아듣게 잘 말할까, 하... 나는 대체 무슨 자신감으로 프롬프트 엔지니어링 책 한 권 읽어보지 않고 호기롭게 바이브코딩을 하겠다고 나섰던 걸까.' 슬슬 나 자신과 서울깍쟁이에게 열받기 시작했다. 3시간 텀을 두고 충천되는 토큰을 아껴 써가며 어렵사리 프로토타입 고도화를 시도해 보았다.
<상담 준비 다했니?> ver2.0.0 주요 업데이트 내용
성장 기록 보고서 - 로그인 https://sojocosmos-dev.github.io/dahandincounsel/
1. 목표 : 상담 관리 플랫폼 고도화 작업
2. 업데이트 세부 내용
2.1 교사/학생 이원화 인증 시스템 도입: 교사는 API Key로 접속하여 설정을 관리하고, 학생은 개인 코드로 접속하여 자신의 성장 기록만 열람/입력하도록 시스템 분리.
2.2 '상담 목록' 기반의 워크플로우 구축: 교사가 새로운 상담 세팅을 저장하고 목록화하여 관리 가능.
2.3 제출 현황 직관적 파악: 상담 목록 화면에서 전체 학생 중 몇 명이 성찰 내용을 제출했는지 숫자로 실시간 파악 가능.
2.4 학생 입력 내용 실시간 동기화: 학생이 로그인 후 자신의 성장 보고서에 성찰 내용을 입력하고 저장하면, 해당 내용이 교사의 상담 목록에 자동으로 반영.
2.5 단 한 번의 클릭으로 최종 상담 자료 완성: 교사는 상담 목록에서 학생을 선택하여, API 정량 데이터와 학생의 성찰 내용이 통합된 최종 보고서 조회하고 출력가능.
3. 향후 개발 과제(최우선)
3.1 서비스 DB 연동 및 저장 시스템 구축 : 학생의 성찰 내용, 교사의 상담 목록 설정, 상담 마감 상태 등 사용자 입력 데이터를 안정적으로 저장하고 관리할 수 있는 자체 데이터베이스(DB) 시스템 연동.
하... 이제 DB연동이라는 과업이 남았고, 제출 마감 기한이 점점 다가오고 있다. 다음 글 제목으로 과연 '완성한 사람'을 붙일 수 있을까?
부디 내 글이 전문 개발자들에게는 제발 어쩌다가 스쳐 지나가지도 않길 바란다. '바이브코딩이 뭔데? 나도 뭐 한 번 해볼까나?'가 궁금한 코딩초보들에게만 가닿기를 바란다. 지금까지의 내용이 그렇게 큰 도움이 되지는 않을 거 같아서, 제미나이의 도움을 받아 주말 동안의 작업 내용을 갈무리해 보았다. 코딩무식자들 파이팅이다!
ⓒ2025. kantorka All right reserved
