AI 교육 커리큘럼 추천 서비스

바이브코딩 기록

뉴스나 유튜브를 보면 너나할 것 없이 비개발자를 위한 바이브코딩 이야기를 볼 수 있습니다.

몇몇 유튜브들을 통해 시작한 바이브코딩을 여기에 기록해 보려고 합니다.

---

어떤 서비스를 만들어볼까?

요즘 내가 가장 관심있게 들여다보고 있는 'AI 교육'

가끔 링크드인에 업로드하고는 있지만 나만의 웹사이트에서 내 생각을 정리하고 싶다는 생각에,

AI 교육 칼럼을 업데이트할 수 있는 뉴스레터 구독형 서비스를 만들고 싶었습니다.

여기에 AI 교육 커리큘럼을 추천해주는 AI 서비스도 붙였습니다.

어떤 툴을 사용해야 할까?

매일매일 새로운 툴이 나오고, 업그레이드 되고, 뭐가 뭔지 모르겠는 툴들...

우선 현재 가장 성능이 좋다는 클로드 코드를 활용하기로 했습니다.

그러나 매일매일 업데이트 되는 요즘에는, AI 뉴스레터 등을 살펴보며 선택하시는게 좋을 거 같습니다.

그런데,,,

'클로드 코드로 코딩한 후에 배포는 어떻게 하지?'

개발의 과정

웹서비스를 개발하기 위해서는 아래 4단계를 거쳐야 합니다.

기획 - 코딩(개발) - 코드 저장 - 배포

이 과정을 탐색하면서 알게 된 '통합개발플랫폼'!

코딩을 하면서 동시에 미리보기도 가능한, 깃 허브를 연결하면 저장도 되는 등 모든 과정이 하나의 플랫폼으로 가능한 서비스가 있었습니다.(비개발자의 입장에서는 사막에서 오아시스를 만난 느낌:))

여러 '통합 개발 플랫폼' 서비스가 있었으나, 저는 한 유튜버가 추천한, 그리고 방법을 자세히 설명하는 파이어베이스 스튜디오를 선택했습니다.

이전 회사에서 사용한 경험도 있어서 두려움도 적었어요.

간단한 개발 플로우

1단계 기획 생성형 AI (chatGPT, Gemini, Claud 등)

#나의 생각을 표현하며 필요한 스펙을 확인합니다.

#PRD도 생성해 줍니다.

2단계 코딩(개발) firebase studio

#화면(프런트엔드)부터 만들어달라고 요청합니다.

#서비스 제공에 생성형 AI가 필요하면 API를 생성, 연결합니다.

#로컬에서 서비스가 작동하는지 확인합니다.

#배포합니다.

3단계 코드저장 git hub

#새 레포지토리를 만들어 파이어베이스 스튜디오와 연결합니다.

#코드가 생성, 수정될 때마다 자동으로 저장됩니다.

4단계 배포 cloudflare pages

#깃허브를 연결하면, 푸쉬-배포가 자동으로 진행됩니다.

그렇게 해서 탄생한 웹 서비스

향후 계획

만들고 보니 수익이 나는 서비스를 만들어보고 싶어졌습니다.

그래서 돈이 되는 아이템으로 결제까지 붙여서 또 만들어 보겠습니다.

조금만 기다려 주세요~~~!