바이브 코딩의 기록(with gemimi)
1. 왜 사서 고생을 시작했나..
용인모두의햇빛협동조합의 사무국장으로 들어간 후 설립등기가 이뤄지기 전에 무엇을 할 수 있을까 고민했다. 개인적으로 다른 태양광 발전 협동조합에도 가입했었는데 내가 냈던 출자금이나 배당금 등을 확인하기 위해서는 예전에 받은 메일을 살펴보거나 전화를 해야 하는 등 확인이 쉽지 않았다.
그래서 이것을 온라인으로 알아볼 수 있게 하면 좋겠다는 생각에 마침 1년 무료 이용권을 받은 제미나이를 활용해 코딩을 했었다. 무료인 것 이외에도 다음과 같은 이유가 있었다.
구글 설문지, 드라이브 등을 활용하고 있었고(우리가)
구글사이트도구를 활용할 줄 알았다(내가)
제미나이는 마침 구글이니 관련해 이해도가 높겠지(추측)
처음에는 사이트도구를 만들고 거기에 조합원 번호를 부여해 출자금 내역을 조회할 수 있는 간단한 페이지를 만들었었다.
물론 나는 코드를 쓰지 않고 제미나이에게 이런 걸 만들고 싶어~ 하면서 이야기를 하며 코딩을 완성했었다.
그런데 사람이라는 것이 앉고 싶으면 눕고 싶어 진다고 했었던가 출자금을 조회하고 보니 회원 가입도 좀 정교하게 하고 싶었고 조회도 조금 더 많이, 이쁘게 만들고 싶었다. 추가로 보안 이슈도 있었으니 그 부분도 조금 보완을 했다.
그동안 구글 설문지를 통해 정보를 받았지만 구글 설문지는 한 줄로 입력을 받고 기존과 중복 검증도 할 수 없었고 그 값이 제대로 되었는지도 알 수 없었다. 구글 로그인을 하면 이메일 주소는 얻을 수 있을지 모르겠지만 불특정 다수를 상대로 하는 설문지에 어려운 절차를 넣고 싶진 않았다.
2. 제미나이와의 좌충우돌 협업기
찾아보니 구글 스프레드시트에는 앱스크립트라는 아주 좋은 기능이 들어 있었다. 스프레드시트를 통해 코딩을 할 수 있는...??
그래서 제미나이와 씨름하며 각각 입력칸을 만들어서 주민번호를 검증하고, 중복을 확인하고, 이메일 인증을 하게 만들었다.
그리고 자동으로 조합원 번호를 부여하게 만들었는데 처음에는 yyyy-001 이런 식으로 생각했는데 이러면 다른 사람의 번호를 너무 쉽게 유추할 수 있었고 또 999는 금방 넘어갈 수 있을 것 같았다. 그리고 그냥 무작위 난수를 부여하면 초반에 부여한 번호가 나중에 오류가 생겼을 때 변경될 수 있었다. 그래서 어떻게 고정된 난수(?)를 부여할까 고민하다가 회원가입을 할 때 구글 설문지의 형식을 빌려오다 보니 가입할 때 날짜+시간(초까지)이 나오길래 가입하는 초에 15를 더해서 (제미나이의 말로는 잘못하면 초를 그대로 쓰면 날짜로 인식될 수 있다고 해서 15를 더했는데 생각해 보니 0001일은 없지 않나..?) yyyy-난수-0001 같은 조합원 번호를 만들었다. 이 부분도 제미나이는 정말 무식하게 접근했는데 날짜를 엄격하게 불러와서 초를 불러오고 어쩌고 하며 종종 오류를 뱉길래 나는 그냥 텍스트 그대로 불러와서 맨 오른쪽 뒤의 숫자 두 개만 불러와서 15를 더하면 되잖아! 같은 식으로 문제를 넘어갔다.
그리고 저장된 정보 중 가장 중요한 주민등록번호는 암호화를 했다. 함호화 키에 난수를 더해서 암호화를 했는데 이 부분은 아는 것이 없어 제미나이에게 물어물어 같이 코드를 만들었다.
조합원 번호를 활용해 모든 관리의 기준을 잡고 또 처음 목적이었던 조회 시스템도 만들었다.
조합원 번호를 입력하고 이메일 인증을 하고 들어가면 내 정보를 확인할 수 있고 수정할 수 있고 감자, 탈퇴 신청도 쉽게 할 수 있게 만들었다. (관련법상 탈퇴나 감자 자체가 쉬운 것은 아니지만 신청만은 쉽게.....)
처음에는 조합원 번호를 누르면 인증할 이메일 주소 전체가 나오게 했는데 이건 또 보안상 이슈가 있어서 앞에 두 자리만 나오고 oo***@지메일 이런 식으로 나오게 했다.
출자증서도 요청하면 발행해야 해서 그것도 메일병합을 활용해서 자동화를 만들었다. 처음에는 조합원 가입하면 스프레드시트를 활용해 내가 수동으로 체크해서 발행하는 방법을 채택했지만 그냥 본인이 직접 발급받으면 더 좋지 않을까? 하는 생각에 그렇게 만들었다. 과정이 좀 복잡했는데 그 이유는 아래에 밝히도록 하겠다. 어휴
이제 큰 틀은 다 완성을 했는데 소소하게 손을 볼 것이 아주 많았다.
이메일 인증을 무한히 클릭할 수 있어서 그걸 1회로 막는 코드를 넣고 자동 로그아웃 기능, 스프레드시트 내의 버그 수정, 나(혹은 이 기능을 활용하게 될 관리자)를 위한 손쉬운(?) 관리 등등을 추가했다. 수시로 테스트를 하고 문제가 있으면 수정을 했다.
그리고 코드를 수정할 때마다 오류가 생겼는데 보니까 코드가 약 천 줄 정도를 넘어가면 이것을 한 번에 처리를 못 하는 것 같았다. 그동안에는 관련 지식이 많이 없어 코드를 수정할 때마다 전체를 달라고 해서 복사 -> 붙여 넣기를 했는데 천 줄이 넘어가니 중간에 빼먹는 것도 많아지고 또 간소화하는 것도 많아졌다. 그래서 출자증서 자동화 코드를 만들 때 애를 많이 먹었다.
그래서 지금은 백엔드를 잘게 나눠서 5개? 정도의 파일로 만들었다. 찾기가 조금 힘들긴 하지만 수정할 때 오류를 많이 줄일 수 있었다. 그리고 코드 전체 수정보다는 함수를 하나씩 찾아서 고치는 식으로 작업을 했더니 이전에 만든 코드를 건드리는 오류를 줄일 수 있었다.
다만 내가 조금 더 신경을 많이 써야 했지만 코드를 조금씩 주고받는 게 시간 측면에서도 효율이 좋았다.
3. 구글에서 구글+깃허브로
사이트도구에 앱스크립트를 넣으면 세 가지 문제가 있었는데 하나는 코드 삽입은 iframe..이라고 작은 창에 넣어 버리는 것 그리고 계정 관련해 문제가 생기면 오류를 뱉는 것 속도가 꽤나 느린 것이었다.
작은 창에 넣어 버리는 것은 구글의 보안 정책이었기 때문에 어쩔 수 없었지만 나머지 두 가지는 계속 마음에 걸렸다. 나야 상황을 알지만 다른 사람들도 그럴까?? 하지만 계정 오류는 어지간히 컴퓨터를 다루는 사람이 아니면 나오지 않을 것 같은데.. 하고 있던 와중에 누군가 계정 오류가 생긴다는 제보를 해 왔다. (정확히는 다른 일로 전화를 하다가 제보를 주었다.. 고맙습니다..)
그래서 이 문제를 해결해야겠다고 또 제미나이와 씨름을 했고 여러 아이디어를 주고받다가 어차피 html이니 다른 호스팅 도구를 활용하면 되지 않을까 해서 또 찾다가 어차피 버전 관리를 위해 깃허브에 백업을 하기 위해 계정을 만들었으니 거기를 활용하자 싶어 깃허브로 html을 옮겼다.
그래서 홈페이지는 구글 사이트도구 -> 프론트엔드는 깃허브 -> 백엔드는 스프레드시트의 형식이 만들어졌다.
깃허브로 html을 옮기고 보니 오류가 사라졌고 또 속도가 매우 빨라졌다. 제미나이의 말로는 스프레드시트의 앱스크립트는 호출받을 때마다 html을 새로 그려서 느렸다고 하는데 자세한 건 잘 모르겠다. 하지만 어쨌든 오류도 잡고 속도도 빨라져서 참 다행이다. 싶고 바이브 코딩에서는 아이디어가 중요하구나 하는 생각이 들었다.
그 이전에도 버그 픽스를 할 때 예를 들어 A라는 값이 출력이 안 되어 제미나이에게 이야기하면 A값을 명확히 불러오는 처방을 내리고 코드를 수정하는데 알고 보면 B의 값을 불러오는데 문제가 있어 덩달아 A도 값을 출력 못하는 현상이 꽤 있었다. 근데 나는 보이기는 A가 문제가 있어 보이니까 자꾸 문제없는 것을 해결하려고 하니 오히려 문제가 더해지는 경우도 있었다. 그래서 요즘은 A가 문제가 있고 처음 처방에 답이 없으면 코드 전체를 리뷰해 보라고 하거나 다른 AI에게 코드를 보내 리뷰를 요청해서 문제를 해결했다.
4. 바이브코딩을 위한 팁
추가로 혹시 바이브 코딩을 하실 분들을 위해 내 경험을 조금 더 풀어보자면 가장 많이 한 이야기는 코드는 나중에 줘, 코드 요약하지 마, 생략하지 마, 내가 말한 부분 외엔 코드 수정하지 마 정도가 아닐까 싶다.
그리고 반드시 버전 관리를 하시고 이전 버전의 코드를 그냥 지우거나 덮어쓰지 말고 다른데 백업을 해두라고 말하고 싶다. 99가 좋고 1이 안 좋아서 그걸 수정하다가 좋았던 99를 수정하는 경우가 있는데 그건 백업을 하지 않으면 다시 찾기가 쉽지 않기 때문이다.
그리고 이야기가 너무 길어지면 맥락을 놓치거나 딴소리를 하는 경우가 있어서 중간중간 맥락을 파악하라거나 지금까지 한 것을 요약해 보라는 식의 대화도 필요하다. 근데 나는 그것도 까먹는 경우가 있어 하나의 주제에 하나의 채팅을 활용한다. 잘못하면 막 짬뽕이 되어서 이상한 값을 도출하기도 하기 때문이다.
바이브 코딩은 개발을 찍어먹어 본 나 같은 사람에게는 참 유용한 도구가 아닐까 싶다.
혹시 관심 있으시면 바이브 코딩에 도전해 보시라. 다만, 개발자가 하는 것이 뭔지 아무것도 모르신다면 기초 교육은 받으시길 권해 드린다.
-참고 내가 만든 홈페이지
푸터에 보시면 업데이트 내역이 있는데 거기 보시면 관련 내용이 압축적으로 담겨 있으니 참고 해주시라...
