나도 바이브 코딩이라는 걸 해봤어

지난 2월 15일자 뉴스레터에서 구글 재팬에서 국위선양하고 계시는 재일 한국인 부동산 재벌의 클로드 코드 앱 개발 스토리를 알려드린적 있지요. 그후 넉달 사이, 비슷한 사례가 두 건 더 접수되어 오늘 소개해 드리려 합니다. '아이 나 컴맹이야 제발 이런거 그만~' 하실 분께, 최대한 설명 쉽게하여 진행할 것이니 기사 이탈 없기에요!

먼저 첫 번째 사례, 역시 뉴스레터에 몇 번 등장한 정형외과 의사 아저씨가 이번에도 일을 저질러 버렸어요. 강남역 12번 출구 나와 12초 걸어가면 있는 하와유 재활의학과라고 있는데 여기 원장실에서 우리 닥터 초이가 어느날 하루, 음~ 골프칠 때 가만보니 사람들이 자기 체형에 안 맞는 채를 들고 치는 있다는 것을 깨닫게 되어 진료가 없는 시간 틈틈이 프로그램을 짜기 시작했단 말이지요. 잠깐 잠깐, 머릿속에 담고 있는 내용을 AI한테 전달하며 서로 대화하듯, 핑퐁 치듯, 물결 타듯, 서로 바이브를 만들며 하는 프로그래밍이니까 이게 Vibe Coding인 것이라.

그가 말하기를, 요즘 바이브 코딩용으로는 크게 Claude Code와 ChatGPT의 Codex가 대세라네. 그는 Claude Code로 작업하였습니다. 큰 그림은 클로드에게 말하듯이 지시하고요, 거기서 생성된 코드들, 즉 웹페이지 내용(html) 중에 수정할 부분은 텍스트 파일 편집기 같은 것으로 고치면 돼요. 좀 전문적인 편집기를 원하면 마이크로소프트에서 공짜로 나눠주는 Visual Studio Code (=VS code, or simply Code)를 써서 알록달록한 글자 보면서 더 쉽게 편집할 수 있습니다.

이렇게 하여 완성된 웹페이지는 AWS 클라우드에 올려 이제 하나의 완벽한 앱으로 태어났어요. 같이 한 번 보기로 - https://fitting.choijongwoo.com/

그냥 하라는 대로 하면 돼요. 본인 사진 찍어 업로드한 후, 키와 체중 및 성별 등을 입력하면 됩니다. 아직은 초기 버전이라 성별에 Male / Female 이외에  양성(non-binary) / 나만의 성(self-describe) / LGBTQ+ / 나도몰라 탐구중 등은 선택할 수 없어요 ㅎㅎㅎ

자 초기 입력 후 분석 들어가면 다음 화면 이렇게 나와요:

그래서 자신에 맞는 골프채를 추천해 준단 말이지.

미친거 같어. 어떻게 일개 동네의원 닥터가 이런 걸 만들 수 있느냐고, 나같은 IT기업 종사자도 아닌. 더군다나 그의 얘기로는, 이 모든 과정을 이틀만에 해냈다는 것이야.

와~ 그의 열정과 지능과 센스에 탄복하여 그에게 감동과 존경의 시선을 보내던 중, 하하하 이번엔 나에게도 비슷한 기회가 찾아왔어요.

역시 몇 번 소개드렸던 시드니의 지인, 1인 기업가 절친이 나에게 부탁을 해 온 것이지요. 'Yo~ 케빈, 이번에 캐나다의 모 회사가 신장투석시 혈액 응고를 획기적을 줄일 수 있는 구연산 나트륨 기반의 주사액을 개발했다네. 그걸 호주에 들여와 시장에 내놓고 싶은데 웹사이트좀 만들어 줘잉'

아 그러냐, 좋다. 비 IT종사자도 만드는 바이브 코딩, 나도 한 번 해보자고. 그래서 일단 구글에게 물었지요. '나 웹페이지 만들라 한데. 어떻게 하면 좋으냐' 했더니 다음의 세 가지 툴을 쓰래요:

나는 이중에서 Github는 몇 번 써봤고, 나머지는 몰라. 일반 애독자분들께는 하나하나 설명드릴게요. 우선 Codex. 그냥 내 노트북에 이 Codex파일을 다운받아 설치하면 됩니다. 설치 완료되면 얘가 물어와요, 주인님 뭐할까요 하고. 그래서 알려줬지:

물론 명령은 한글로도 입력 가능해요.

명령 침과 동시에 Codex는 제 컴퓨터에 폴더를 만들어 html파일, css파일, js파일 등을 생성하기 시작합니다. 그냥 웹페이지 만드는데 필요한 파일들이라 생각하세요.

Wholly shit! 세상에, 이게 10분도 안되어서 다 만들어진다고. 나는 그자리에서 거의 설사할뻔 했다니까.

그러나 일단 마음을 가다듬고, 다음 단계로 갑니다. 구글에게 물었지. Github와 Vercel은 도대체 왜 필요한고:

위의 정보를 토대로, Github와 Vercel한테 뭐 알아서 니 꼴리는 대로 하라고 Codex한테 명령합니다.

정직한 우리 Codex는 지가 알아서 척척 다 해줍니다. 5분만에.

그래서 완성된 웹페이지가 대략 이렇습니다. (웹페이지 주소는 https://aegisclinicaldevices.com.au/)

여기까지의 과정에 며칠 걸렸는지 아시유?

나도 똑같아요. 이틀.

참고로 지난 2022년까지, 저는 부업으로 일본 빈티지 기타를 팔아왔는데 웹사이트 Sharpened Flat이라는 웹사이트를 운영해 왔어요. 대략 이렇게 생겼지요.

당시의 작업 환경은 그래도 10년 전보단 상당히 개선되어서, Linux기반의 운영체제에 Nginx라는 웹서버, MySQL이라는 데이터베이스, 그리고 웹 프로그래밍은 Python프로그래밍 언어의 Django 장고~ 라고, 이렇게 상당히 복잡하기 했지만 그럭저럭 만족하면서 작업했어요. 다만 문제가 뭐였냐, 지금 AI를 통해 이틀간 걸쳐 할 작업을 거의 2주 넘게는 해야했지. 하나하나 프로그램을 쳐서 올리고 고치고 다시 내리고 지우고... 그러다 어느순간 현타가 오는거야. 에이썅, 내가 회사생활하면서 이거이 다 뭔 짓이냐 얼마나 벌겠다고, 하고 힘에 부쳐서 그만 뒀는데, 이제 AI가 천군만마처럼 나를 도와주니 정말로 의지만, 조금의 의지만 있다면 뭐든 못할 일이 없을 것 같어, 최소한 웹사이트 열고 거기다 뭐 물건 팔고, 이런 부분에 관해서는.

오늘 기사의 교훈:  컴퓨터 좀 다뤄본 우리 몇몇 친구들이 자랑삼아 만든 웹페이지 공개하려고 쓴 기사 아니고요. 생업에, 부업에 종사하시는 여러분들, 조금만 지식 있으면 자신을 대표하는, 또는 회사를 대표하는 웹페이지 쉽게 만들수 있겠어요. 만일 오늘 한 얘기가 '아잉 나한텐 컴맹이라 어려워~'로 들리는 분들은 아는 교회 오빠에게 부탁하면 얼씨구나 하고 도와줄거에요. 나는 교회말고 절간 다녀요~ 또는 결혼해서 오빠들한테 부탁하기 어려워요~ 이런 분들은 아들 딸들한테 부탁하세요. 보니까 요즘엔 다들 Digital native, AI native라 어쩌면 오십줄 넘은 내가 여기에 적은 내용, 그들에겐 심심풀이 주말 과제정도에 지나지 않을 지도 몰라요. 🤔