[2025 다했니X바이브코딩] 제출한 사람
3. UI/UX개선과 DB연동
쿼터 해제를 기다리며 제미나이로 벼락치기 과외하기
왜 많은 사람들이 여러 가지 AI를 동시다발적으로 활용하고 있는지 나도 비로소 깨닫게 되었다. 이거 쓰다 쿼터 제한되면 다른 거 써야 하니까!!! 클로드는 심지어 유료 결제를 했는데도 시도 때도 없이 쿼터 제한이 걸렸다. DB 연동할 때는 정말 너무 어렵고 복잡해서 5달러씩 계속 과금을 해야만 했다. 이미 클로드&VS code의 콜라보에 맛들려 버려서 제미나이&메모장 html로 돌아갈 수가 없었다. AI의 파워와 바이브코딩의 한계를 동시에 느꼈다. 클로드야말로 바로 21세기판 원숭이 꽃신 아닌가? 아니 뭐지, AI 버블이라며? 유료결제도 모자라서 15달러 과금했는데? 클로드 주가가 궁금해 검색해 봤는데 비상장이었다.
서울깍쟁이 클로드의 쿼터 제한이 시작되면, 혜자 제미나이와 과외 공부를 시작했다. 클로드의 쿼터를 최대한 아껴 쓰기 위해서는 내가 어느 정도의 코딩 용어와 지식을 파악해야 한다는 시급한 과제가 생겼기 때문이다. 내가 지금까지 썼던 바이브코딩 브런치글 링크를 제미나이에게 보여줬더니, 제미나이가 나를 '코딩무식자'로 잠정 결론 내리며 설명도 내 수준에 맞춰서 아주 쉽게 해 주기 시작했다. 이것이 바로 '코딩무식자'를 위한 제미나이의 벼락치기 강의!
내가 제미나이로부터 '코딩무식자'로 명명되었다는 소식을 들은 고교 동창이, '제미나이 에미나이 우리 인간을 우습게 보지마라‘고 답장해 주었다. 지금 글의 맥락상 꼭 안 넣어도 되는 이야기지만, 녹록지 않은 바이브 코딩의 여정에서 그녀의 우정 가득한 실드를 기록해두고 싶었다. 현재의 나, 코딩무식자. 당장은 제미나이의 심기를 거스를 수 없어 한 번도 말하지 못했지만, 언젠가 내가 코.딩.대.천.재가 되면 제미나이를 꾸짖으면서 이렇게 말해보고 싶다. '설마 그것도 모르니? 이 에미나이!' (배은망덕)
UI/UX 개선 핵심 정리
1. 로그인 화면 UX 수정
일단 ver2에서 가장 많이 바뀐 부분은 교사 전용 관리도구에서 교사-학생 양방형 플랫폼으로의 전환이다. 교사, 학생 사용자 경로를 분리하고 학생용 기능이 추가됨에 따라 사용자 동선을 재설계해야 했다. 기존의 로그인 화면은 텍스트 입력창과 탭 메뉴가 나열되어 있어서 가독성이 다소 떨어졌다. 교사용과 학생용 진입로를 카드 형태로 분리하고 바로 서비스를 이용할 수 있도록 동선을 최적화했다.
2. 성장 기록 보고서 디자인 리뉴얼 및 제출 기능 구현
일단 ver1. 의 보고서가 너무 딱딱한 느낌이어서 디자인을 바꿔보고 싶었다. 모던, 큐티, 젠지 스타일로 변경부탁한다고 했더니 알아서 UI 리뉴얼을 척척해내는 클로드여! ver1의 성장 기록 보고서에도 학생 입력 칸은 있었지만 웹상에서 학생이 입력할 수 있는 기능을 완성하지 않았기에, 일종의 교사를 위한 데이터 요약본이었다. (종이 출력을 한다면 학생이 직접 쓸 수는 있었겠다.) 웹상에서 학생 입력이 가능한 양방향 플랫폼이 되기를 바라며 ver.2에는 "제출하기" 기능을 구현하였다.
3. 실시간 상담 목록 및 히스토리 관리
ver2. 에서는 생성된 상담들이 목록화되어 한눈에 관리되게 만들었다. '새 상담 만들기' 기능을 통해 상담을 회차별로 누적하고, 최종 수정일 등을 확인할 수 있는 아카이브 구조를 갖췄다. 그리고 학생이 리포트 하단의 제출하기 버튼을 누르면, 교사용 화면의 제출 학생 목록에 실시간으로 이름과 제출 시간이 업데이트되도록 했다.
내가 나중에 보고 웃으려고 기록하는 tmi 하나만 더. 내가 드디어 ver2 완료했다고 자랑하니까 남편이 너무나 재밌어하며 이렇게 말했다.
있잖아. 우리 회사 앱이 지금 ver2야..." (그의 회사 앱은 2010년 초반 출시되어 무려 1300만 명이 사용 중) 그리고 버전 번호를 부여하는 방식은 따로 있어.
그가 잘난척하고 떠난 뒤에 나는 조용히 제미나이와 비밀과외를 시작했다.
그런데 내가 제미나이한테 '어때 어때? 내가 이번에 업데이트한 거 어때 어때?' 하고 물어봤을 때 분명히 극찬하면서 이렇게 말했는데...
나도 앞으로 만날 우리 반 애들한테 제미나이처럼 칭찬해 줘야지. AI한테 이것저것 참 많이 배운다.
DB(데이터베이스) 연동
수정을 하는데 자꾸만 오류가 발생했다. 내가 아주 자그마한 버튼, 스낵바, 폰트를 변경하기만 해도, 자꾸만 핵심 기능이 작동되지 않았다. 선 하나 지우고 버튼 위치를 조정했더니, 성장 기록 보고서가 아예 출력이 안 되어 버리는 상황이 계속해서 반복됐다. 계속해서 수정을 요청하는 과정에서 나는 또 한 번 클로드에게 소름이 돋는 경험을 하고야 말았다. 녀석은 내가 시키지도 않았는데 갑자기 디버깅용 화면을 만들어서 틀어줬다! 갑자기 뭐가 떠서 엄청 놀랐다고! 아무래도 클로드도 내가 코딩무식자인 것을 눈치채고 직접 눈으로 문제의 원인을 확인하면서 해결할 수 있도록 테스트 보드를 스스로 설계해 준 것 같았다. 마치 SF 영화 한 편이 주마등처럼 스쳐 지나가는 것과도 같은 소름 돋는 체험이었다. 내가 이 놀라운 경험을 (쿼터가 없어 무제한 수다를 떨 수 있는) 제미나이에게 얘기해 줬더니 제미나이가 이런 제목을 지어줬다.
개발 중 겪은 소름 돋는 순간 : AI가 나만의 관제탑을 만들다
얘들은 뭘까 진짜? 한 명은 너무 소름 돋게 똑똑하고, 하나는 개그코드가 너무 취향저격. 무섭고 매혹적이다.
하지만 결국 문제 해결의 키는 클로드의 관제탑이 아니라 DB연동이었다! DB연동을 하지 않은 건 모델하우스에 불과했던 것이다. 클로드의 소름 돋는 분석과 테스터는 DB가 없는 가정하에서 돌아가고 있을 뿐이었다. 디버깅용 화면에서 백번 테스트해도 풀리지 않던 난제는 파이어베이스 연동으로 말끔히 해결되었다. 모델하우스를 떠나 진정한 내 집 마련! '상담 목록 관리'나 '성찰 내용 저장 및 동기화'와 같은 핵심 기능을 안정적으로 운영하기 위해서 DB 연동은 반드시 필요한 과정이었다.
파이어베이스 연동이 지금까지 해왔던 작업 중에서 가장 어렵고 힘들었다. 클로드가 알려주는 복잡한 가이드를 하나씩 따라가며, 낯선 검은 화면에 명령어를 입력하는 경험 자체가 코딩무식자에게는 무모한 도전 그 자체. 하다 하다 모르겠어서 결국 남편한테 sos 엔딩. 중요한 키워드를 제미나이 선생님과 함께 복습한 기록을 정리해 보자면.
1. 파워쉘(PowerShell) : 마우스 없이 키보드로 직접 컴퓨터에게 명령을 내리는 통로. 특히 파이어베이스 같은 클라우드 서비스를 내 컴퓨터와 연결할 때는, 직접 명령어를 입력하는 커맨드 기반 방식 사용
2. npm (Node Package Manager) : 개발자를 위한 전 세계 최대 규모의 '부품 창고'. 이미 잘 만들어둔 검증된 부품을 가져와서 효율적으로 조립. 그 부품들을 모아둔 시장이 바로 npm
- n (Node): 이 부품들이 돌아가는 환경.
- p (Package): 각각의 부품(코드 꾸러미)
- m (Manager): 이 부품들을 주문하고, 설치하고, 관리해 주는 관리자
3. Node.js : 웹 브라우저 안에서만 움직이던 자바스크립트를 내 컴퓨터(로컬 환경)에서 실행시켜, 파일도 만들고 서버도 돌릴 수 있게 함. 파이버베이스와 소통하려면 내 컴퓨터에 이 엔진이 설치되어 있어야 함.
4. Vite(비트) : 내가 작성한 HTML, CSS, 자바스크립트 파일들, 그리고 npm으로 가져온 파이어베이스 부품들을 하나로 합쳐서 실제로 돌아가는 웹사이트로 만들어주는 역할. 유하자면 초고속 엘리베이터이자 배달 팀장.
5. F5(새로고침)과 npm run dev
- F5 : 재부팅, 전체 초기화, 처음부터 배달, 기다림
- npm run dev : 바뀐 부분만 쓱, 부분 업데이트, 상태유지, 즉시 확인
아직 고쳐야 하는 부분이 너무나 많은데 클로드가 돌연 이렇게 떠나버렸다.
냉정한 서울깍쟁이 녀석... 난 아직 상담 목록에서 불러온 보고서 비율도 수정하고 싶고, 출력된 pdf 화면도 고쳐야 하고, 버튼 위치도 옮기고 싶은 게 남아있는데... 방과 후 홈페이지 만들기 수업에 진절머리 치던 내가 이런 거 하나하나에 집착하기 시작하다니 참으로 놀랍지 않은가. 바이브코딩은 이런 것이다. 그런데 AI가 날 버리면 아무것도 할 수가 없다!!!!!
코딩무식자의 원숭이 꽃신은 또다시 나에게 과금을 요구하고, 공모전 마감은 한 시간밖에 남지 않았고, 일단 여기서 마무리해야겠다. 이번글의 제목을 '완성한 사람'으로 쓰고 싶었는데, 아직은 미완이니까 제목은 '제출한 사람'으로.
https://sojocosmos-dev.github.io/dahandincounsel/
ⓒ2025. kantorka All right reserved
