비전문가의 웹프로그램 개발일지
코딩에 관심을 갖게 된 건.. 앱이나 웹프로그램 개발이 아닌 워드프레스 홈페이지 때문이었다.. 기초적인 PHP 언어는 어느 정도 알아보게도 되었고.. Ai에게 물어 내손으로 PHP 코딩을 수정해 보기도 하였다..
한참을 그렇게 부딪쳐가며 하나 하나 익히고.. 까먹고… 또 익히고 그러던 어느 날.. 필요에 의해 운영하는 사이트 중 한 곳에 간략계산기 ..앱을 만들어 배포하기 시작했다.. 이 때까지만 해도.. AI에게 물어물어 Visual code 프로그램 상에서 Ai가 알려주는 코딩을 적어 넣고..붙여 넣고… 서버에 올리고.. 그러한 과정들을 거치며 늦은 밤.. 때로는 새벽까지 컴퓨터 앞에 주구장창 앉아 있고는 했었다.. 코딩 전문 프로그래머도 아니면서.. 코딩은 엉덩이로 하는거…라는 말의 뜻을 이해도.. 공감도 하겠다..싶기도 했었고.. ㅡ,.ㅡ 그렇게 챗GPT와 클로드 Ai 사이를 오가며 얻어다 붙이고 떼다가 수정해 달라하고 다시..얻어다 붙여넣고.. 반복되던 세월이었는데…
우연히 안티그래비티.. 라는 코딩전문 Ai툴이 있다는 것을 알게 되었다.. 대충 듣기로 파워쉘, CMD, 터미널, visual code 등과 빠이빠이 할 수 있다는 말에 혹해서.. 안티그래비티가 뭔지도 모르면서 무작정 다운로드를 받고 설치를 했다.. 구독도 누르고… 가입, 좋아요..그런 구독 말고.. 진짜 돈으로 결제하는 그런 구독을.. 월 29,000원 짜리 플랜으로 결제를 했다..
Antigravity ..
첫 인상은 충격이었다.. @.@ .. 나는 뭐하라고 얘가 다하나?.. 하는 정도의 생각이 들 정도였었다.. ssh키와 몇 몇 api키 그리고 서버 정보와 권한만 승인해 주면.. 지가 코딩을 짜서 업로드해서 서버를 돌려보고.. 테스팅까지 해서 알려준다.. 다 됐다고…. 신세계였다… 이 때 처음 알았다 Vibe cording 이라는 말을…
유저가 말로 분위기를 설명해주면 Ai가 알아듣고 코딩을 시작하고… 급기야… 끝내는 그런 작업이 가능하다는 것을… 오~ 놀라운 Ai의 은총~!
첫째 날…
내가 업무에 사용해서 도움받으면 좋겠다..싶은 프로그램 구상이 머리속에 하나 있었다.. 이렇게 저렇게 내 업무를 도와주는.. 이 역시 나중에 알았는데.. 그런 프로그램을 CRM 즉, Customer Relationship Management 우리말로 고객관리프로그램이라고 하더라구…
내가 특히, crm 개발에 꽂힌 이유는.. 매월 또는 분기, 반기 기준으로 정기적으로 하는 업무 중에 고객에게 늘 한결같은 문서를 전달하고.. 자료요청을 하고 자료를 취합하고…. 머 그런 업무가 있는데.. 다람쥐 챗바퀴 돌듯 도는 것도 지겹지만 고객들마다 똑같은 작업으로 수십통의 메일을 보내고 수십통의 카톡을 보내고… 그렇게 지금까지 수동으로 해 온 그 일들을 클릭 한번 딸깍~ 으로 해결할 수 없을까..하는 바램이 있었기 때문이었다..
해서… 안티그래비티 한테 하소연을 했다.. 내가 하는 업무 중에 이차 저차 한게 있는데 지겨워 죽겠어.. 이거 자동화 할 방법 없을까? 이렇게 저렇게 해서 이건 이렇게..저건 저렇게 됐으면 좋겠거든?.. 하고…
듣고있던 그래비티가… 아~ 이해했어.. 만들어 볼께~ 하더니 작업결과물로 내놓은 것이 crm 프로그램이었다.. 처음엔 내 피씨를 로컬로 삼아 서버를 구동시키고 얘가 Java Script.. Node로 만든 웹앱을 열었는데.. 비록 처음이었음에도 불구하고 시각적으로 ..오호.. 괜찮은데 싶은 구현 화면이 눈에 들어왔다…
내가 말한 내용 중 일부는 버튼이 되어 왼쪽 사이드 메뉴로 올라가 있고.. 어떤 것들은 오른쪽 테이블 화면 위에 올라가 있고…
하지만 이 때의 놀라움과 충격은 사실 그렇게.. 오래가지는 않았다.. 눌러보니 되는게 잘 없고.. 지워보니 지워지지도 않치를 않나.. 마치 멋있게 생긴 자동차를 하나 받았는데 선팅이 진해서 안에 뭐가 있나 안보여 몰랐다가 차문을 열어보니.. 뭐도 없고 뭐도 없는.. 그런 상황이라고나 할까… 그런 상황이었다…
2~5일째 날..
일단은 그래비티..얘가 디자인적으로.. 시각적으로 혹하게 만든 화면에서 하나 하나 짚어.. 기능을 달아 달라고 요구를 하기 시작했다..누가? 내가… ㅡ,.ㅡ;; 말이 아닌 글로 설명을 하고… 해보고 안되면 다시 글로 설명을 하고.. 아마 이때 제일 많이 글로 전송한 내용이 ‘된데메?’ 였던 것 같다.. ㅡ,.ㅡ
번외로.. 이 때쯤 내가 깨달은게 몇가지 있는데.. 첫째.. Ai는 허세가 꽤나 쎄다는거.. 둘째.. Ai는 내가 지랄하기 이전에는 절대로 사과..하지 않는 다는 것.. 셋째.. Ai는 생각 이상으로 기억력이 신통치 않다는 것.. 정도 되시겠다..
내가 얘한테 한 말 중에..아니 글 중에 제일 많이 한 글이 된데메? 이고 얘가 나한테 한 글 중에 제일 많이 한 글이 이번에는 완벽하게 작동할거야 해보고 또 필요한거 있으면 얘기해… 였던 것을 보면..음… Ai는 정말 허세가 심하다. 가만히 생각해 보니..얘를 만든건 서양사람들이고.. 서양사람들 자체가 선천적으로 겸손..이라는 걸 잘 모르고.. 뭐를 묻든.. “응 나 잘해”.. 가 기본 스탠스..인 걸 보면.. 딱 견적이 나온다.. 얘가 누굴 닮아서 저 지랄 인지…
뭐 하여간 처음엔 그랬다.. 뭐가 안된다고 오류라고.. 하면 잠시 후.. 응 다 고쳐놨어~ 한번 해봐.. 그러더니 막상 한번 해 보니… 두번이 되지를 않는 오류 투성이가.. 수도 없이 나왔었다…(이~~ 씨..방새… 나중에는 짜증나서 욕이 절로 나오기도 했었다) 어쨌거나.. 그렇게 얘랑 나랑.. 얘는 알지도 못하는 나만의 짜증을 만빵 내면서.. 투닥 투닥 해서.. 어느 정도 프로그램다운 골격을 갖추게 되었다.. 업체별 문서함에 문서가 업로드 되면 업체명 옆에 초록색 불이 들어오고 발송되고나면 빨간불로 바뀌고…. 문서함을 비우면 불이 꺼지고…. 기타등등, 기타등등.. 그렇게 하루에 대여섯개의 수정사항을 고치고… 추가하고…. 통째로 삭제하고… 부분적으로 삭제하고…. 고치고.. 추가하고…… 사실 내가 추구해야할 기능의 절반 쯤은 이 며칠 사이에 웹앱의 기능으로 구현이 되고 있었다..비록 일부는 미진할지언정…
6~7일째 날
그렇게 안티그래비티라는 녀석에게 코딩업무 하청을 주고.. 정확히는 안티그래비티 안에서 작업 중인 sonnet 4.6이라는 녀석이 주는 결과물을 받고.. 놀래서 쫓아가고.. 실망해서 쫓아가고.. 이 뭥미? 싶어서 쫓아가고…. 하면서 어느 정도 프로그램 모양을 갖췄다 싶은 어느 날… and 녀석과 많이 친해졌다 싶던 어느 날… 사용량 쿼터가 다 소모되었다고.. 몇 시 이후에 또는 며칠 이후에 사용가능한 쿼터가 충전된다는 메시지가 떴다.. 유료결제가 만능은 아니구나.. 쩝.. 하지만 어쩔 수 없지.. 기다려야지…
하고 기다렸었는데…
나와 작업하던 Ai는 힘들어 뻗었는지 3일 후 출근한다고 해서 긴급 일용직을 썼다… 제미나이 플래쉬라고….
나.. “하던거 계속 진행해~”
제미나이… “뭐 말씀이죠?”
나.. “아니 좀 전에 하던거~”
제미나이… “잠깐만요 지난 대화를 좀 살펴볼께요..아까 걔랑 뭐하고 계셨었는지 제가 몰라서요…”
그렇다 이것들은 서로 간에 미결업무 인계인수 따위는 전혀 하지도 않고 있었던 것이었다..
잠시 후…
제미나이… “아.. 이거 하고 계셨네요 네 알겠습니다. 하자없이 바로 완성해 드릴께요~~
사고.. 제미나이..이 애미나이가…
그래서… 사고가 터졌다.. 내가 로컬에서 먼저하고.. 내가 허락할 때까지 라이브서버에는 배포하지 말라고 했던 반드시 준수했어야 할 지시사항을 어기고.. 냅다 라이브 서버에 배포를 해버렸던 것.. ㅡ,.ㅡ;;; 내 추상같은 엄격한 지시사항을 앞서 퇴근한 놈은 후임자에게 전혀 전달하지 않았던 것..
뒤죽박죽 엉켜버린 서버를 보고 화딱질이 났다… “야.. 넌 내가 허락하기 전에는 보내지 말라고 한게.. 좀 전 5분… 전…도 안된다.. 이..씨방새야~.. 그리고 너 내가 이것만 고치랬더니 뭘 건드려서 이 난리통을 만든거야? 라고 했더니.. 그 때서야 이 새퀴가 사과를 건네 왔다.. “아 죄송합니다. 제가 실수 했네요… 중략.. 왜 그랬냐면… 어쩌구 저쩌구… -변명 중 – … -변명 중 – …… 다시 완벽하게 복구시켜 놓겠습니다. 후략… 아 다행히 백업 파일이 있었네요….. ##%..%%@….###$%&##…”
“아 몰라 아무튼 너 좀전 오전 11:00까지 잘 되던거니까.. 딱 그 수준으로는 되돌려 놔~.. 근데 너.. 뭐? 다행히 백업 파일이 있어? 그거 없었으면 너 어쩔 뻔 했어?” 가만히 생각하니까 녀석의 어순이.. 이상하다는 자각이 들어 … 불쑥 화가 밀려왔다..
“가만… 야~야~야~ 다행히 백업 파일이 있네요 다시 완벽하게 복구… 가 아니라 완벽하게 복구시켜 놓겠습니다. ..아 다행히 백업 파일이 있네요?.. 순서가 이상하잖아 씨방새야~~~”
다행히 녀석이 장담했던 오전 11:00 시점으로 백업은 잘 이루어졌고… ㅡ,.ㅡ 녀석이 말한 것 중에 기억나는 것이 유저분과의 대화내용을 전부 다 저장할 수는 없고.. 일정시점이 되면 압축해서 캐비넷에 저장을 하는데 그 와중에 남아 있어야 할 꼭 필요한 정보가 일실 되어 버리기도 한다고… 그러다 보니… 휴먼님은 Ai담당자가 바뀐 줄도 모르고 업무지시를 내리는데.. Ai는 ‘휴먼.. 뭔 소릴 하는겨?..?’ 하고 임의의 이벤트를 벌이기도 한다고….
그건 그렇고… 이맘 때 쯤… 클로드 코드.. Claude Code.. 라는 유능한 청년이 있다는 걸 알게 되었다…
클로드 코드…
클로드에게 물어 물어 클로드 코드를 설치했다.. Git 설치 필수라고 해서 Git도 설치하고… 이건 cmd 창에서 열어야 한다고 해서 cmd 창에서 열었더니… 허걱… 수십년 전에 보던 까만화면에 커서만 깜빡거리는 프롬프트 입력창 하나 덩그라니 뜬다.. 당황스러웠다… 아래 같은 화면은 정말 오랫만에 낯설었다…
위 창을 열어놓고..다시 클로드 Ai에게 물었다.. “쟤봐라?.. 까만 화면에 커서만 하나 깜빡대고 있어~” 라고 고자질하듯 얘기를 하자 원래 그렇다고 그 창에다 대고 하고싶은 걸 자연어로 입력하란다 ..자연어?… 자연어가 뭐지? 내가 언제는 기계어를 할 줄 알았던가?.. 곰곰히 생각하다 용기를 내서 한글로 그냥 적었다 내가 이러 이러한 프로그램을 만들고 싶다고.. 기능은 뭐 뭐가 있고 이렇게 저렇게 연결이 되고.. 업로드는 이렇게 하고 다운로드는 이렇게 되어야 한다고… 그 밖에 많은 할 것들을 두서없이 마구 마구 입력하고 엔터를 쳤는데…. 까만 화면에서 무수히 많은 코딩 줄이 촤르르르… 올라가고 몇 번이고 Yes or No를 물어오더니… 내가 원했던 프로그램의 초안 버전이 나왔다.. 즉, 안티그래비티가 70% 쯤 만들고 클로드 코드가 나머지 30%를 완성해서 첫 웹 앱이 탄생한 것이다..
솔직히.. 내가 한건 별로 없지만서도 감개 무량했다.. 감탄스럽기도 하고.. Ai 코딩툴의 능력에 놀랍기도 하고…
7~10일째 날…
나중에 알았는데 내가 지금 하고 있는 이러한 일련의 과정들이 바로 Vibe Cording.. 바이브 코딩이라는 것이었다.. 사람이 말로하면 Ai가 작업해 주는 형태.. 단순히 코딩결과물만 던져주는 것이 아니라.. 라이브서버에의 배포.. 테스트 까지 모두 다 해주는 것… 여기에서 더 발전하면 진정한 AGI.. 즉 범용인공지능의 시대.. 사람처럼 Ai가 판단하고 스스로 주체적으로 뭔가를 할 줄아는 그런 시대가 온다는데… 머 그건 논외로 하고…
그 후로도 클로드 코드에게 수십, 수백 번 요청하고 피드백 주고 받고 하면서 매달린 결과 비교적 오류가 없는 클린 버전의 웹프로그램이 만들어졌다.. CRM 앱이…
*로그인 화면 – 나름 공들여 심플하면서도 깔끔한 로그인 화면을 구성해 봤다.
*대시보드 화면 – 최근의 발송이력이 보이고.. 데이터 동기화 창이(별 필요없다..개발단계에서 필요했던 부분) 보이고…
*통합일정 – 월별 해야할일 등을 입력할 수 있다. 기록된 내용 중에 업체명이 있으면 업체별 할일에도 자동 등록된다
*개인용할일 – 상단에는 업체별 할일 리스트와 연동된 내용이 뜨고 하단에는 개인할일 창이 뜬다.
*비서모드 – 내가 이 앱을 기획 구상하고 개발한 가장 중요한 이유이자 가장 공을 들인 부분이다. 이른바 비서모드… 내 컴퓨터에 업체별 폴더에 그 달 그 달 생성한 문서들을 저장해 놓고 업무시작 버튼을 누르면 세목별로 알아서 구분해서 업체별 발송함에 업로드 시켜 준다. 그러면 왼쪽 업체별 명단에 초록색 불이 들어온다
업체별 업로드가 완료되고 전송시작을 누르면 카카오톡과 이메일로 관련 문서들이 자동으로 발송이 되고 발송완료가 되면 업체별 명단에 빨간색 불이 들어온다.
웹브라우저 크롬의 브라우저 정책과 부딪쳐 자동화에 무척 애를 먹은 부분이 이 부분이다. 크롬에서는 사용자의 피씨에서 불러들인 데이터를 바로 브라우저와 연계해서 활용할 수 없었기 때문에… 근데 머 어쨌거나 그러한 부분에 대한 고민도 내가 할 일은 아니었고.. 계속해서 Ai를 닥달했다.. 뭐 때문에 곤란하다 ..뭐 때문에 곤란하다..하는 Ai한테 그럼 이렇게 해봐라 저렇게 해봐라… .. 그렇게해서 어쨌거나 결국엔 가장 자동화가 가능한 수준으로 해결은 했다… 이 부분이 해결이 안되면.. 나는 이거 돈 깨져가면서 할 필요가 없었던거라.. Ai가 안된다고 할 때에는 한동안 심장이 쫄깃하기도 했었다.. (지금까지 쓴 돈이 얼만데….) 만족할 만한 수준으로 해결이 되고.. 시험발송에서 카카오톡, 이메일 모두 발송이 잘 이루어지는 걸 보는 순간.. 한동안 정말이지 뿌듯했었다… 카카오톡은 발송 템플릿 승인받는 과정에서 거의 일주일 남짓 고생을 했었어서…. 더욱 더…. 카톡을 받은 사람들이 내가 보낸 문서를 별도 창에서 다운로드 하고 제출하기 버튼을 눌러서 별도창에 자료 업로드를 할 수 있게 구성을 했는데… 아무튼 이 부분도 할 말이 많지만 생략하고(카카오톡 검수 및 승인 너무 까다롭다… 니미…).. 이렇게 카톡이든 이메일이든 발송된 메시지에 답장을 하면.. 그 답장에 첨부된 자료는 자동으로 업체의 수신함에 저장이 된다..
*업체별 보드 – 간단하게 업체별 메모를 할 수 있는 포스트잇도 만들어 놓았다.. 좌측에 정렬탭에 따라 개인, 법인, 원천월납, 반기납 또는 담당직원별로 정렬해서 볼 수도 있다..
*앱설정 화면 – 다음으로 공을 많이 들인 부분이다.. 업체명 변경은 물론, 로고 변경, 바탕화면 변경(8개의 프리셋 화면포함) 지메일연동을 위한 입력창, 카카오톡(알림톡) 연동을 위한 입력창.. 등등…
*이메일 – 업무 특성 상 이메일을 많이 사용하는데.. 그냥 이 안에서 이메일 수신, 발신이 다 되도록 구현해 놓았다.. 웹브라우저 나 메일 앱 따로 열고 메일 주고..받고 할 필요없게… 업체에서 들어오는 메일에 첨부된 자료는 자동으로 그 업체의 수신함에 가서 쌓인다…
마지막으로 내가 좋아하는 우주를 배경으로 프리셋에 저장되어 있는 바탕화면.. 로그인 화면을 바꿔 보았다…
마무리 소회
개인적인 느낌으로는… 10여일 간.. 혼자서 개고생을 했다…는 느낌이다.. Ai가 다했음에도 그런 느낌이 든다 이말이다.. 다시 바꿔 말하면 Ai의 도움 없이 나혼자서는 … 불가능했다는 것…
코딩에 대해서 거의 무지하다시피 한 내가.. 안티그래비티 또는 클로드 코드의 도움을 받아.. 음.. 아니..구나.. 전적으로 하청을 줘서 나만의 프로그램 하나 만들어 보니.. 그 개고생에도 불구하고 재미도 있고… 보람도 있고… 실제 업무에 활용도 가능해서.. 너무 흡족한 마음이 든다..
나는 이번에.. Ai를 통해 바이브 코딩의 진수를 맛 보았다고 생각된다.. 앞으로 세상에는 필요한 앱은 스스로 손쉽게 만들어 쓰는 시대가 올 것이고.. 그 엄청난 어드밴티지는 모두 우리의 후손들에게 고스란히 문명의 혜택으로 쏟아져 내리지 않을까 싶다…
Ai코딩 툴.. 비교
Antigravity … 똑똑하다.. ‘아’ 를 말하면 ‘어’ 를 알아듣기도 한다. 코딩부터 배포, 테스팅까지 유저는 머.. 손댈 일이 없게 혼자서 알아서 척척 잘한다. 그럼에도 불구하고 단점은 있다.. 얘는 쉬운길도 어렵게 간다. 틀린건 아니지만 남들과 다른 길로 잘 간다. 비유하자면.. 고속버스타면 한 5시간이면 갈 거리를.. 얘는 버스타고.. 공항에 가서 비행기를 타고 내리고 지하철 타고 등등.. 해서 4시간 30분 만에 도착을 ..하긴 하는데… 뭔가 쫌… 30분?.. 뭔가 좀 애매한데? 시바… 이런 느낌이 들 때가 종종 있다.. ㅡ,.ㅡ 쓸데없이 고난도의 코딩 기술을 하찮을 일에도 적용시키는.. 머 그런 일도 가끔 있다.. 소잡는 칼로 닭을 잡는… ㅡ,.ㅡ;;;
Claude Code … 영리하다.. 먼저 사용해본 그래비티 대비 장점은 얘는 닭잡는 칼로는 닭만 잡고 소잡을 때는 소잡는 칼을 쓰고… 안티그래비티 처럼 뻘짓을 하는 경우는 거의 없다. 얘도 코딩부터 배포, 테스팅까지 혼자서도 잘해요..이다. 내가 잘은 모르지만.. 개인적인 느낌으로는 정확도, 신속성.. 작업 후 오류 발생빈도 등에서는 얘가 한 수 위인 느낌이다. 단점이라면 그거다.. 낯설은 까만색 프롬프트 창… 개발자 인터뷰에 보니까..일부러 그랬다더만… 쓸데없는 거에 시간 투자하기 싫어서.. 즉 외양 가꾸느니 내실을 다졌다는 뭐 그런 소리되시겠다..
이번에 나는 crm 말고도 추가로 별도의 프로그램을 하나 더 만들면서.. 안티그래비티와 챗GPT는 구독 취소를 했다.. 앞으로는 그냥 클로드.. 하나만 있으면 되겠다.. 싶어서… 그리고 이제 아이디어의 고갈로 당분간은 코딩 프로그램 돌릴 일도 없을 것 같기도 하고 그래서….
이번에 프로그램 코딩관련 비전문가로서 좌충우돌하며 몇개의 웹앱을 만들고 배포해서 서버에서 돌려본 경험은 살아오면서 만난 몇 안되는 짜릿한 경험 중 하나로 오랫동안 기억될 것 같다..
요즘의 나는 이 생각 중이다.. 앞으로 미래에는… Ai가 못하는 일을 찾아서 하며 살아야 할 것 같은데.. 그게 도대체 뭘까?.. 있기는 한 걸까?.. 이런 생각들을….