연산배틀 제작기로 풀어보는 비개발자 바이브 코딩 도전기 – 1. 누가 쉽대?

챗GPT와 비교하면 놀라운 수준의 커서 AI X 클로드 조합

본격적으로 착수하기 전에 클로드에게 요청한 것은 유저플로우였어요. 프롬프트 자체는 전편에서 소개했던 프로토타입 제작 시 챗GPT에 입력했던 것과 동일합니다.

클로드가 만들어준 유저플로우는 그럭저럭 쓸만했어요. 다만, 처음 바이브코딩에 도전하는 거라 최대한 기능은 간단하게 구현하고 싶어서 ‘두 명이 접속해서 누가 더 빠르게 연산하는지 시합’하는 기능만 남겨두었습니다.

하지만, 바로 난관에 봉착하였으니…

여러 명이 동시에 접속해 사용하는 건, 어떻게 배포해야 하는 거지?

어릴 때부터 이것도 찔러보고 저것도 찔러 보는 게 습관 같은 인생을 살았기 때문에 HTML, CSS 정도는 알고 있었어요. 자바 스크립트로 어느 정도 동적인 웹페이지를 구현할 수 있다는 것도 알았지만..! 대체… 여러 명이 동시에 접속해 사용하는 수준의 동적인 요소는 어떻게 구현해야 할지를 모르겠더라고요.

<연산배틀>은 존재의 이유가 ‘배틀’이잖아요. 아이와 엄마아빠가 연산으로 게임을 하고, 가끔은 이기기도 하고 져주기도 하면서 소소한 선물도 사주는, 그런 훈훈한 그림을 원했는데. 여러 명이 접속한다는 것은 곧, 사용자간의 상호작용이 실시간으로 여러 개의 단말기로 오고 가야 한다는 이야기인데, 이걸 대체 어떻게…?

답은 챗GPT나 클로드에게 물어보며 얻었습니다. 그렇게 알게 된 것이 두 가지 서비스.

1. 겉으로 보이는 페이지를 구현하는 Netlify(넷플릭스로 읽기 쉽지만, 아님 주의)
   별도 호스팅 설정을 하지 않아도 웹페이지를 배포할 수 있도록 도와주는 서비스입니다.
   무료도 사용할 수 있지만, 도메인을 연결하기 위해서는 유료 구독이 필요해요. (월 19달러)
2. 사이트가 구동될 수 있도록 각종 기능을 하는 서버 Railway
   사용자로부터 데이터를 받아서 처리하는 무대 아래의 작업은 모두 서버에서 처리합니다. 이 역할을 하는 서버를 쉽게 사용할 수 있도록 해주는 서비스이고, 마찬가지로 유료 구독이 필요합니다.
   첫 달은 무료, 두번째 달부터 월 5달러.

그럼, 바이브 코딩할 때에 ‘Netlify와 Railway를 활용해서 이런 웹서비스를 구현해줘’라고 하면 AI가 짜잔~하고 만들어주는 걸까요? 당연히 아니죠.

바이브 코딩에 처음 도전할 때 초보자에게 너무 어려운 부분은 바로, 이런 부분은 직접 해결해야 한다는 것입니다. AI는 가이드만 줘요.

그러니, 일단 이런 방법들이 존재하는구나까지만 알고, 다음으로 이제 직접 구현해보기로 합니다. 우선은 내 컴퓨터 안(로컬)에서 정상적으로 작동하는지 확인하는 작업부터 시작했어요.