1분이면 홈페이지 만든다 - Replit 바이브코딩

Replit 활용 홈페이지를 만들어보지 - 바이브코딩

1. 개발자 문턱을 낮춰준 Replit

약 4년 전, 개발자 친구와 축구장, 농구장 장소 데이터를 기반으로 용병단이라는 용병 매칭과 경기 일정 조율이 가능한 앱을 기획했던 기억이 있습니다.

(필자의 브런치에 농구장 및 축구장을 모아놓은 매거진이 따로 있는데, 당시 앱을 기획하며 필요한 데이터를 모아놓은 게시판이다. 또한 용병단은 필자가 고등학교 시절, 교실 뒷 편에서 족구할 때 인원이 부족해 경기 매칭이 안되면 반 친구들 중 팀이 없는 인원들을 모아 용병단이라는 팀을 임시로 조직해 경기를 매칭했던 경험을 살린 단어이다)

이 앱의 *MVP(Minimum Viable Product)를 만들기 위해 걸렸던 시간은 약 1년이었다

*MVP: 아이디어를 가장 단순한 형태로 구현한 실험용 제품

그 친구가 당시 AI 석사를 지원하던 시기라, 대학원 진학 전까지 시간이 남아 주도적으로 개발을 진행했는데, 프론트엔드, 백엔드 개발에 6~7개월, 실사용 가능 수준까지는 10개월 정도 소요되었다.

직접 비용은 구글 클라우드 서버비 정도였지만, 개발에 들어간 10개월을 최저 임금 수즌으로 환산하면 약 2,600만원.

하지만 지금은 사정이 달라졌다.

새로운 MVP 제품을 단돈 25달러로 1분만에 만들 수 있는 시대가 찾아왔다.

바이브코딩이라는 이름으로.

바이브코딩 선두주자의 이름은 Replit.

1분이면 홈페이지 하나가 뚝딱 만들어지고, 이후에는 수정사항만 프롬프트로 입력해주면 된다.

(물론, 버그를 잡기위한 QC는 필수이다)

지금부터 할 이야기는 바로,

Replit이라는 바이브코딩 툴로 제작한 MVP 모델에 대한 이야기이며, 이를 고도화 시켜나가는 이야기가 앞으로 나의 메인 주제 중 하나가 될 것이다.

2. 우리가 Replit 사용해야 하는 이유

필자는 코딩을 할 수는 있다.

하지만 그건 지메일을 벌크로 보낸다던가 하는 간단한 업무 자동화 로직 구현 정도이다.

만약 *풀스택 구현을 생각하면 솔직히 할 엄두가 안난다.

*풀스택(Full-stack) 개발이란, 웹사이트의 겉모습(프론트엔드)부터, 속에서 작동하는 로직(백엔드), 그리고 데이터 저장소(데이터베이스)까지 모든 걸 혼자 다룰 수 있는 개발 방식을 말한다.

풀 스택 개발시 발생하는 문제점은 아래와 같다.

프론트엔드: 디자인 코드 복붙하다 시간 다 감

백엔드: 논리 구조 생각하다 시간 다 감

DB 스키마 및 서버 세팅: 환경 설정하다 시간 다 감

기타 요소: 환경 변수 설정하다 하루 지남

하지만 Replit에게 프롬프트 하나 입력하면 위에 열거한 일을 모두 알아서 해준다.

아래 홈페이지는(https://movemove.co.kr/) 현재 도메인까지 연결된 나의 홈페이지다.

생각보다 디자인이 깔끔하지 않은가?

참고로 필자가 디자인한 부분은 하나도 없다. 모두 Replit이 알아서 해준 것이다.

그럼 이 홈페이지가 어떤 식으로 구성되어있는지 한번 살펴보도록 하자.

2. 개발 기술 및 기술 세팅

*백엔드

Python 기반 Flask 프레임워크 사용

필자 직접 선택이 아닌, Replit이 기능에 맞게 자동으로 선택해준 구조

내부에서 "이런 기능을 만들고 싶다"고 프롬프트 입력하면, 그에 맞춰 자동 구성

Replit 구현 가능 백엔드 언어

아래와 같이 필요한 기능을 적은 후 "Start Chat"을 누르면 끝난다.

그 기능에 어울리는 언어 및 프레임워크를 Replit이 자동으로 선택해 홈페이지 제작을 완료한다.

현재 홈페이지 이름인 무빙브릿지는 필자가 생각해낸 이름이 아니다.

모두 Replit이 코드를 구성하며, 자동으로 떠올린 이름이다.

(꽤 좋은 이름이라고 생각은 하는데, movemove라는 이름이 조금 더 직관적이라는 생각이 든다. 그래서movemove로 바꿀까 고민중인데 혹시 의견이 있다면 댓글로 달아주시면 감사하겠다)

클릭 딸깍으로 MVP 모델 제작이 완료되었다.

걸린 시간은 1분.

*데이터베이스

사실 이 부분부터는 개발 지식이 조금은 필요하다고 생각된다.

데이터베이스 상세:

PostgreSQL 사용 (Replit 기본 세팅)

위치: AWS EU-Central-1 (독일 프랑크푸르트)

타입: 관리형 PostgreSQL

데이터베이스는 항상 중요하다.

필자는 사실 MySQL만 써봤다.

하지만 Replit에서 PostgreSQL을 사용하기로 해서 그대로 따르기로 했다.

Replit 내부 AWS 기반의 DB를 사용해, 직접 서버 관리를 하지 않아도 무방하다.

이후 현재 MVP 모델을 고도화 하기 위해 서버를 외부로 따로 분리한다 하더라도, Docker 정도만 새로 설정하면 된다.

코드를 Git에 잘 백업만 해두면 추후 외부 서버로 이전할 때 문제가 없다.

Git 형상관리 기능도 제공하니, Github 계정만 연결하면 된다.

DB쪽은 따로 프롬프트로 만들어 달라고 요청해야 한다.

자신이 어떤 데이터를 저장하고, 불러와야 하는지 프롬프트로 잘 설명해주도록 하자.

그렇게 하면 아래와 같이 DB 스키마 및 테이블을 모두 볼 수 있다.

SQL 이해도가 있는 독자라면, 직접 DB에서 불러오는 콘솔 기능을 사용하도록 하자.

*프론트엔드

Bootstrap 5 기반

제가 요청한 건 아니고, Replit이 자동으로 구성

반응형 구성과 깔끔한 스타일이 기본 세팅되어 있어 따로 손볼 필요 없음

과거엔 Bootstrap에 JavaScript 더미 붙이며 고생했는데, 이젠 그럴 필요가 없음

디자인 민감함 사람이라면, 성에 안 찰 수도 있겠다.

하지만 필자 기준에서는 깔끔하고 모던한 디자인이라고 판단된다.

*기타 구성 요소

환경 변수:Replit에서 알아서 모두 구성

배포: Replit 자체 호스팅 기능 사용

도메인: Replit에서 자체 도메인을 사용 가능

자체 도메인 사용을 원할 시, 따로 도메인 구매하여 DNS 설정 해주면 된다.

도메인 비용은 업체마다 다르지만 나는 가비아에서 2년에 4만원을 주고 구매하였다.

3. 앞으로

앞으로 필요한 일은 다음과 같다.

에러 발견 및 수정

SEO(Search Engine Optimization) 설정

홍보 및 마케팅

AI 고도화

예전 같았으면 MVP 제작을 마친 후, 홈페이지 운영을 위해 여러 부서의 협업이 필요했다.

예를 들면,

기획팀: AI 고도화 기능 기획 및 제작

운영팀: 에러 발견 및 수정사항 요청

개발팀: 관리 및 코드 수정

마케팅: SEO 최적화 및 홍보

디자인: 프론트엔드 수정 및 디자인

최소 5개의 팀이 존재하니, 최소 5명이 필요했다.

혼자서 시작하기 좋은 시대가 온 것이다.

갑자기 혼자라는 단어를 쓰니, 봇치 더락(외톨이 더락)이라는 애니가 떠오른다.

다음주에는 외톨이 더락과 AI의 평행세계에 대해 글을 써보도록 하겠다.