본문 바로가기

My Story

상상하면 만들어지는 바이브코딩 세상 – Replit·AI로 1인 웹앱 만드는 법

728x90
반응형

내가 생각 하고 상상한 것들을 만들어보는것은 세상 누구나 늘 하는 생각입니다

https://sotialbeing.com/

작은 IDEA들을 가지고 사람들이 놀라운 일들을 해내는걸 보면 참 대단하고 한편으로는 부럽고 막그래요..

IT 컨설팅으로 25년을 일한 저도 사실 아직 그런걸 직접 경험해보지 못했으니...

뭔가 할줄 모르는사람이 하는 상상은 정말 망상인거고, 예산을 짜고, 프로젝트 관리 툴을 만들고 관리를 해야했던 내입장에서는 내가 생각하는 IDEA를 생각하는 순간부터 인력과 비용 장비와 환경 보안이슈 등등등 결국은 생각을 접게 되었던 적도 많았어요..

하지만 요즘에는 제목에서 말한대로 "상상하면 만들어지는" 즉, 내가 원하는 솔루션, 사이트, 플랫폼을 만들 수 있는 세상이 된지 이미 오래되었습니다..사실 내주변에 내가 보여줘도 기성세대의 생각을 가진 IT 선배들도 "그래서 이건 인력이 얼마나 투입된거야? " 이런식으로 기존의 사고방식으로 이해 하고 질문이 들어와요..

2018년에 GPT -1 이 첨발표되고 2022년부터 본격적으로 세상에 알려지면 이미 세상은 변혁의 소용돌이에 휘말리고 있습니다. "나는 이제 대가리가 썩어서 더이상 신기술을 못받아.." 이런 대화를 선배 컨설턴트 들과 나누기도 했는데 사실 지금은 대가리 썩었든 안썩었든 어차피 기술수준이 발전하는 속도를 사람이 따라 가는 것은 사실상 정상속도로는 불가능한 지경에 이르렀다고 봅니다

서두가 긴 그런 푸념은 접어두고 오늘 그래서 얘기 하려는것은 바로 바이브 코딩 [Vibe-Coding] 즉, 말하고 떠들면 개발을 진행하는 Agent 에 대한 이야기를 하려해요. 사실 최근 몇달간 개인적으로 가장 심취해 있는 것

Vibe-Coding 이란

**Vibe-Coding(바이브 코딩)**이란

개념이나 문법을 완벽히 학습한 뒤 코드를 작성하는 전통적 방식과 달리,

실행 가능한 코드를 먼저 생성하고,

코드의 동작과 피드백을 통해 이해를 확장해가는

감각 주도형 개발 방식이다.

말 되게 어려워 보이는데 그냥 쉽게 말하면 설계 사양을 바탕으로 사람이 해야되는 생각의 관점에서

[이해 -> 실행 ] 하는게 기존의 코딩이였다면

[실행 -> 감각 -> 탐색 -> 이해 ]이런방식으로 하는것을 바이브코딩이라고 합니다.

그런데 좀더 현실적으로 얘기하면 더이상 코딩 기술에 의존하여 기술자의 테크닉 기반으로 코딩을 하는것이 아닌

언어로 표현된 명령에 의해 자동화된 코딩을 하는 것 즉, 개발 자체는 자동화 하되 기획을 세심하게 해야하는 것 아닐까 싶어요. 그것을 하기 위해 만들어진 솔루션들이 Vibe-Coding 플랫폼이죠.

그렇다면, 이런 질문이

자연스럽게 따라옵니다.

"그래서… 대체 뭘로 만들 수 있는데?"

그게 진짜 놀라운 시대의 변화예요.

예전엔 개발 환경? 로컬 세팅? Git 세팅?

DB 설치? 서버 배포? 인증 로직?

그런 건 개발자의 세계,

그들만의 필드였죠.

하지만 지금은?

문장을 적으면 — 앱이 만들어지고,

설명을 하면 — 코드가 돌아가고,

수정해달라면 — 화면이 바뀌고,

한 줄 더 요청하면 — 서버가 붙습니다.

이게 바로 바이브코딩 플랫폼들이 하는 일입니다.

그리고 지금, 이 플랫폼들은 단순한 도구가 아니라

새로운 시대의 “개발 문화” 자체를 바꾸고 있어요.

쉽게 말하면:

https://youtu.be/SI98_SyiVLk?si=84m1k4dEagr5_JQF     동기부여학과 라는 유튜브 채널 영상 임

코딩 대신 말로 만들고,

실행으로 검증하는 개발 환경.

더 이상

"개발자 불러서 요구사항 문서화 → 개발 착수 → 대기"

이게 아니라

그냥 이렇게 말하죠:

“나 여행자용 지도 SNS 만들고 싶어.

위치 기반이고, 로그인 필요하고, 사진 업로드 되고…

그거 일단 MVP 만들어봐.”

그리고?

짠! — 하고 돌아옵니다.

화면, 기능, 구조, DB, 심지어 배포까지.

🎛 바이브코딩 플랫폼의 핵심은 기술이 아니다

기술은 이미 다 알아서 돌아갑니다.

중요한 건 관점이 바뀐다는 거죠.

이제는:

  • “내가 이걸 만들 줄 아냐”가 아니라
  • “이걸 어떻게 만들어야 할까를 생각할 줄 아냐”

즉:

개발 능력보다: 기획 능력

기술보다: 상상력

손보다: 두뇌

이게 훨씬 중요한 시대가 된 겁니다.

저도 사실 제 본업과 상관없이 취미겸 새로운 무엇인가에 대한 도전으로써 바이브코딩을 해보고 있습니다.

바이브코딩은 올해 여름에 처음으로 입문을 했었어요.

처음에는 Chat GPT 를 이용 했었는데요 지금은 주요 툴은 챗지피티는 아닙니다.

챗지피티로도 손쉽게 간단한 사이트 게임 등등 만들어볼수 있습니다. 3D 기반의

챗지피티로 만들어놓은 소스코드 분석기 입니다.

위에 보이는 화면도 제가 답답함때문에 챗지피티를 활용해서 간단하게 만든겁니다...간단하다고는 했지만 이렇게 바이브코딩을 할려면 손은 정말빠른데 정말 말안통하는 꼴통 개발자를 대리고 일을 하는 느낌입니다. 그것에 상당한 시간을 보냅니다. 물론 나의 프롬프트 엔지니어링 능력에 따라서 달라지겠지만..

정말 이 질문 하나로 저위에 프로그램이 코딩 되기 시작합니다. 당연히 소스코드를 내려받거나 Github 연동 시키는등 모든게 가능하죠....

하지만 제가 주로 지금 만들고 있는 실험작들이나 MVP 모델들은 챗지피티를 이용하지는 않습니다 챗지피티가 가진 한계와 제가 가진 한계 즉 최신 기술을 일일이 전부 습득 해서 할능력도 시간도 저는 없기때문에 저는 그런 환경 자체를 Cloud에서 제공해주는 CLI 툴을 선택해서 상당한 비용을 소비중입니다;;;;

왜 상당한 비용을 쓰게 되었는가..

처음에는 원래 바이브코딩을 간단한 MVP 실험등의 용도로만 접근했지만, 바이코딩툴 자체도 역시 AI 기술의 무서운 발전속도와 맞물려 상당한 발젼을 거듭해왔고 그로인해 더욱 욕심이 생기기 시작하더군요. 그래서 이것 저것 해보기 시작하고 ....처음에는 간단한 것으로 시작해서 계속 발전을 하게 되었습니다.

아래는 다양한 AI 기반 바이브코딩 툴중 생각 나는대로 적은겁니다.

Cursor
VS Code 느낌의 AI IDE, “Cursor로 디버깅”이 바이브코딩 기본 루트로 많이 언급됨.
Lovable
풀스택 앱을 프롬프트로 쏴서 만드는 대표적인 AI 앱 빌더. supabase·GitHub 연동 강점.
Bolt.new
Figma→라이브코드, Stripe/Supabase 연동이 강한 앱 빌더. 여러 랭킹에서 Lovable와 쌍두마차 취급.
Emergent
“세계 최초 agentic vibe-coding 플랫폼”을 표방하는 풀스택 앱 빌더. YC·여러 리뷰에서 자주 거론.
Memex
“가장 똑똑한 바이브코딩 툴”을 내세우는 로컬/데스크톱 중심 agentic 툴. DigitalOcean·Zapier 리스트 상위
Windsurf
“세계에서 가장 진보한 AI 코드 에디터” 슬로건의 IDE. VS Code 스타일.
GitHub Copilot
전통 IDE 플러그인 계열이지만, AI+IDE 시장 점유율은 사실상 1위라 바이브코딩 흐름의 핵심 축.
Claude Code
브라우저 기반 코드 환경 + Claude 에이전트. “vibe coding + 문서/리포트까지 한 번에” 포지션.
Gemini Code Assist
JetBrains·VS Code 등 IDE 통합 타입의 구글 코드 어시스턴트. 최근 새로 나온게 개쩐다고 유튜버 놈들이 어그로 엄청 끌고 있어서 나도 함 해봐야 겠다는 생각이듬 (단 유튜버들이 하는 말은 70%는 걸러서 들어야하므로...)
Base44
올인원 스택 + 보안/레이트리밋 기능 덕분에 “안전한 바이브코딩”으로 포지셔닝. 최근 Wix 편입.(인스타마케팅 무지막지하게함) 윅스가 4000억달러인가에 인수했다고 난리..
Replit
브라우저 IDE + AI 에이전트, 미국 쪽 “리더” 취급 받는 플랫폼
gambo AI
본격 게임개발에 특화된 전용 AI CLI
 

위 에 나열된 것들 외에 도 허접한 것부터 해서 정말 다양한 것들이 존재 합니다.

파랑색으로 표시된 것들이 국내에서 가장 많이 사용되고 유명한 것들로 보여집니다 유튜버들이 언급을 많이해요

저는 그중에서 Replit 을 주력 툴로 사용 중입니다. 원래 Lovable 도 같이 썼었는데, 지금은 Lovable 은 무료플랜으로만 간단하게 사용 하고 완전히 철수 즉 Replit 으로 고생해가면서 Migration을 완전히 진행 했습니다. 즉, Lovable 에서 만들고 있던 어플리케이션들을 전부 Replit 으로 이관완료함. 정말 이작업도 미쳐버리는줄 알았음

Lovable 에서 진행했던것들...지금은 대부분 Replit으로 이관 절차를 진행해서 이사

이런 말도 안되는 소리로 떠들었는데 허접스럽지만 나의 바이브코딩툴이 만들어집니다. 실제 작동도 합니다.

나중에 그것도 얘기 할께요

제가 바이브코딩툴을 Replit 으로 선택한 이유는

  1. 다양한 툴을 경험해보지는 못했습니다. 다만, 커서나, 윈드서프 같은 거는 요즘 타입스크립트등 코딩에 대해서 기본적인 적어도 코딩 툴이나 환경세팅에 대해서 어느정도 이해가 있어야 접근이좀 되는것으로 보였으나,

Replit 같은 경우에는 기술적으로는 이제 완전 뒷처진 사실상 무뇌한 에 가까운 저도 사고력만으로 사용하기가 편리해 보였습니다.

2. Replit 은 성능면에서도 좋은점이 있습니다. 일단 최근 업데이트된

Plan 기능 (코딩을 하지않고 계획 분석만 하는)

디자인 기능

개발 빌드 할때 AI 성능을 크게 4단계로 조절 하여 성능을 강화하는 기능(자본주의힘을 활용해 돈을 엄청 뜯어 갈테니 대신 내가 다 할께 머 이런 기능인데 최대2~3시간 동안 자기 혼자 디버깅 뜨고 계획 수립 변경 통합테스트 까지 합니다...물론 거짓말로 하는경우도 많지만...)

거의 본 아이덴티티의 그 트레드스톤 같은 ..

서버리스환경 Neon 을 연동해서 사용합니다.

사진은 아무 관련이 없음

하지만 정말 사람을 미쳐버리게 만들정도로 최악의 문제점들을 여전히 가지고 있고, 정말 심각한 수준입니다.

사실 토큰낭비의 거의 50% 이상이 그 문제점들로 인해 발생합니다. 거의 이놈들이 일부러 이렇게 만들어 놓은것 같다는 생각이 거의 확신 처럼느껴질정도...

최악의 단점

-엔진으로 OpenAI 를 사용하고 있음에도 불고, 10초전에 했던 말도 까먹는 경우가 많음

(예: API KEY를 10초전에 물어봐서 입력해서 줬고, 잘 저장 되었는데 프로그램 에러 뜨면 API KEY를 필요로 합니다 라고 하는 것은 거의 일상다반사임 . "제발 그말좀 하지말라고하면 미안합니다 제가 착각 했군요!" 5분뒤에 또시작)

-하드코딩 신봉자 : 25년전 첨 개발할때 참 많이도 혼났던게 하드코딩이였습니다. 생각없이 너무 많이 쓰고 해서...Replit은 기본적으로 하드코딩을 전제로 개발할때가 많습니다. 심지어는 API 기능 구현을 하는데 하드코딩으로 output 몰래 만들어놓고, 성공적으로 output 이 나온다고 거짓말하는건 거의 기본입니다.

-거짓말을 예사로합니다 : AI들의 할루시네이션 보다 거의 인간의 거짓말에 가까운수준으로 거짓말을 합니다. 테스트 안했으면 했다고 거짓말, 체크안했으면 했다고 거짓말, 능수능란하게 거짓말을 합니다. 이렇게 거짓말 해놓고 "하하 저한테 완전히 속으셨군요 빨리 수정하도록 하겠습니다" 이 X랄까지하기도함...

AI 한테 프롬프트로 이렇게 많이 쌍욕을 써본적도 없었던거 같아요...ㅠ_ㅠ

-초가삼간 다태워버림: 잘못된 부분을 수정할때에 어쩔때는 그 부분을 수정하기 위해 전체 소스코드를 다 지우고 새로 만들기도함...

Replit의 기본 인터페이스

결정적으로 이런짓들때문에 시간낭비가 심하고, 돈도 많이 듭니다...

다양한 앱을 동시에 개발 할수 있습니다. 또한 모바일에서도 가능하며 연동이 됩니다. 개발 시켜놓고 PC 꺼도 클라우드에서 알아서 개발진행중임

이렇듯 심각한 문제가 있음에도 불구하고 Replit 을 사용하는 이유는

그럼에도 불구하고 발전에 대한 기대치와, 이미 돌아오지 못하는 강을 건넌것...그밖에도 노하우가 생겨서 저런부분들을 일정부분 방지해가면서 진행하면 예전같으면 상당한 인력과 비용 시간을 들여서 만들어야 했던 작업을

저혼자 훨씬 적은 비용으로 해낼수도 있을지 모른다는 기대를 하기 때문입니다.

Replit 으로 개발중인 키움 자동 투자봇 최근 키움에서 Rest API를 출시 했길래 과감하게 도전중

 

제가 혼자 진행중인 프로젝트를 위한 MVP 를 만들고, 그것을 담당 개발팀과 논의 하는데에도 효과 적으로 활용할수 있습니다. (목업용)

아무튼 이번에는 바이브 코딩에 대해서 간단하게 설명을 시작 한거고 앞으로 바이브코딩 으로 어떤 작업들을 하는지 이야기를 계속 해나가려합니다.

아래 사이트는 제가 바이브코딩으로 개발진행중인 실험작(?) 들을 전시하는 공간입니다. (이 사이트도 Replit으로 간단하게 만든것)

sotialbeing 은 .com 주소를 사고 있습니다 socailbeing 닷컴이 있어서 읽을때 똑같이 발음 되는 사이트로...

  • 여기에 걸려있는 앱들은 사용성이 완전하지 않거나 에러가 날수 있습니다. 계속 병렬로 작업중인 앱들이므로
  • 또한, 대부분 AI 엔진툴들을 사용 중이므로 사용에 제약이 있을수 있습니다
  • 어쨌든 여기 제작은 모든 app 사이트 들은 저작권이 존재하며 무단 도용은 하실수 없으십니다

https://sotialbeing.com/

 

기술은 단순하게, 관계는 깊게

차세대 웹 플랫폼과 실험적 웹 서비스를 연구하고 제작하는 공간입니다.

sotialbeing.com

앞으로 여기서 할 이야기들

  • Replit·AI를 이용해서 실제로 웹앱을 하나씩 만드는 과정
  • Tougether·Social Being Lab에 새로 붙는 기능들,
  • 1인 기업 입장에서 겪는 시행착오, 비용·시간·멘탈까지 솔직하게 기록해보려 합니다.

👉 지금 당장 구경해보고 싶은 분들은

  • 실험실 메인: sotialbeing.com
  • (추후) Tougether 프로토타입 링크도 여기서 공개할 예정입니다.

“나도 이런 거 한 번 만들어보고 싶은데…” 하는 분들,
혹은 그냥 구경이라도 해보고 싶은 분들은
이 블로그 이웃 추가해두시고,
심심할 때 한 번씩 눌러봐 주세요. 천천히, 꾸준히 늘려가 보겠습니다. 😊

728x90
반응형