완전 쌩초보도 "말"로만 앱 만드는 법 - 바이브 코딩 직접 해보기! | 취준생, 자영업자 여러분 안써보면 후회합니다.

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

완전 쌩초보도 "말"로만 앱 만드는 법 - 바이브 코딩 직접 해보기!

코딩 지식이 전혀 없어도 '말'만으로 나만의 웹사이트를 만들고 배포할 수 있는 혁신적인 방법을 소개합니다. 이 콘텐츠는 ' 바이브 코딩'이라는 새로운 트렌드를 통해, 아이디어만 있다면 누구나 replit 서비스를 활용하여 전문가 수준의 웹사이트를 손쉽게 구현한다.

복잡한 개발 환경 설정 없이 웹사이트에서 바로 작업하고, AI와 대화하듯 기능을 추가하며 실시간으로 결과물을 확인하는 놀라운 경험을 제공합니다. 취준생부터 자영업자까지, 자신만의 포트폴리오 페이지나 비즈니스 웹사이트를 빠르고 효율적으로 만들고 싶은 분들에게 실질적인 해결책과 무한한 가능성을 제시합니다.

1. 바이브 코딩의 개념 및 등장 배경

1. 바이브 코딩의 정의: 코딩 지식이 전혀 없는 사람도 '말'만으로 앱을 만들 수 있는 혁신적인 방법이다.
   1. 아이디어만 있다면 누구나 말로 표현하여 서비스를 구현하고 만들어 나갈 수 있다.
2. 바이브 코딩의 시작: 유명 인공지능개발자 안드레이 카르파티의 트위터에서 우스갯소리로 시작되었으나, 현재는 진지한 트렌드가 되었다.
3. 인공지능의 역할: 인공지능의 발달로 코딩 작업이 쉬워졌으며, 개발자가 필요 없어질 수도 있다는 이야기가 나올 정도로 인공지능이 코딩을 잘하게 되었다.
4. 바이브 코딩의 핵심: '느낌 있게' 말만으로 코딩하는 것을 의미하며, 누구나 아이디어만 있으면 서비스를 구현할 수 있다.

2. Replit 서비스 소개 및 활용 이유

1. Replit 서비스 소개: 바이브 코딩을 직접 구현할 수 있는 여러 툴 중 가장 사용하기 쉬운 서비스이다.
   1. Replit은 비개발자들이 인공지능을 활용하여 개발자처럼 쉽게 앱 및 웹사이트 제작을 할 수 있도록 돕는다.
   2. Replit은 무료로 이용 가능하다.
2. Replit 추천 이유: 개발의 가장 큰 진입장벽인 '사용 환경 설정' 문제를 해결해 주기 때문이다.
   1. 일반적인 코딩은 시작을 위한 셋업(설치 등)이 어렵지만, Replit은 웹사이트에서 ChatGPT처럼 쉽게 코딩할 수 있도록 지원한다.
   2. 로그인 후 "이런 이런 앱 만들어줘"라고 말하면 앱 제작이 완료된다.

3. Replit을 활용한 웹사이트 제작 시연

3.1. 웹사이트 초기 생성 및 기능 추가

1. 로그인 및 초기 화면: Replit에 로그인하면 "Hi Alex, what do you wanna make?"라는 친숙한 창이 나타난다.
   1. 사용자가 만들고 싶은 앱이나 웹사이트를 설명하면 인공지능이 즉시 제작을 시작한다.
   2. 이후 인공지능과 대화하며 앱을 계속 만들어 나간다.
2. 개인 웹사이트 생성 프롬프트: "나는 나를 잘 소개해주는 나만의 웹사이트를 만들고 싶어. 멋진 디자인을 활용해서 나만의 웹사이트 만들어줘"라고 입력하여 웹사이트 제작을 시작한다.
   1. 초기 프롬프트는 매우 심플하게 시작할 수 있다.
3. 추가 질문 및 기능 선택: 인공지능은 자기소개, 스킬/경험 섹션 등 웹사이트에 포함할 기능에 대해 추가 질문을 한다.
   1. 예시로 다크모드/라이트모드, 다국어 지원 기능을 선택하여 추가할 수 있다.
   2. 영어가 어렵다면 ChatGPT를 통해 번역하거나, 프롬프트에 한국어 지시를 추가할 수 있다.
4. 실시간 미리 보기 (Preview): 버튼을 누르면 웹사이트가 실행되며 오른쪽에 '프리뷰' 창이 나타난다.
   1. 프리뷰는 인공지능이 코드를 입력하고 웹사이트가 실제로 어떻게 보여질지 실시간으로 미리 보여주는 기능이다.
   2. 헤더(포트폴리오, 홈, 소개, 기술, 프로젝트, 연락처)와 기본 구조가 실시간으로 생성되는 것을 확인할 수 있다.
   3. 기본적으로 "안녕하세요, 저는 홍길동입니다"와 같은 문구, 버튼, 사진 등이 포함된 예쁜 웹사이트 구조가 완성된다.

3.2. 웹사이트 내용 수정 및 고급 기능 추가

1. 기본 정보 수정: 완성된 웹사이트의 내용을 변경할 수 있다.
   1. 예시로 "내 이름은 알렉스라고 하고, 나는 메타에 다니는 소프트웨어 엔지니어"라고 입력하면 웹사이트 내용이 실시간으로 업데이트된다.
   2. 이름, 자기소개, 이메일 주소, 회사 정보 등이 변경되는 것을 확인할 수 있다.
2. 사진 및 문서 업로드: 프로필 사진을 변경하거나 문서를 추가할 수 있다.
   1. 사진을 드래그 앤 드롭으로 업로드한 후 "내 프로필 사진을 지금 업로드하고 있는 사진으로 바꿔줘"라고 명령하면 사진이 변경된다.
3. Element Select 기능 활용: 특정 섹션을 직접 선택하여 변경을 요청할 수 있다.
   1. 왼쪽 하단의 포인터 모양 ' Element Select' 버튼을 눌러 변경하고 싶은 섹션(예: 프로젝트 박스)을 선택한다.
   2. "프로젝트 섹션을 내가 인스타그램 광고팀에서 일하면서 할 만한 프로젝트들로 바꿔줘"라고 입력하면 인공지능이 해당 섹션을 정확하게 인식하여 관련성 높은 프로젝트(예: 인스타그램 광고 효율 분석 대시보드, 타겟 고객 AI 세그멘테이션 툴)로 업데이트한다.
   3. 이 기능은 업데이트의 정확성과 에러 방지에 유용하다.
4. 3D 애니메이션 효과 추가: 홈페이지에 3D 객체가 배경으로 돌아다니는 화려한 애니메이션을 추가할 수 있다.
   1. "홈페이지가 조금 더 유니크하고 모던하게 보이기 위해서, 3D 객체가 애니메이션으로 배경 화면에 보여지는 이펙트를 넣어줘"라고 요청한다.
   2. 인공지능은 Three.js 라이브러리(개발 프레임워크)를 사용하여 3D 애니메이션효과를 구현한다.
   3. 다양한 3D 객체(예: 컬러풀한 모형, 도넛)가 움직이는 것을 실시간으로 확인할 수 있다.
   4. 이러한 복잡한 기능도 프롬프트한 줄로 쉽게 구현 가능하다는 점이 바이브 코딩의 핵심이자 혁명이다.
5. 코드 확인 및 직접 수정: Replit은 웹사이트 뒷단에서 실제로 코드가 어떻게 동작하는지 보여준다.
   1. 3D 배경 애니메이션을 추가하기 위해 생성된 컴포넌트 코드를 직접 열어볼 수 있다.
   2. 개발자가 직접 코드를 변경할 필요 없이 인공지능이 모든 코딩 작업을 수행한다.
   3. 사용자가 직접 코드의 특정 부분(예: Octahedron Geometry)을 변경하여 오브젝트의 크기나 형태를 조절할 수도 있다.
6. 파일 폴더 접근: 개발자가 추가적으로 코딩을 하거나 직접 수정하고 싶을 경우, 왼쪽 상단의 파일 폴더를 통해 웹사이트를 구성하는 모든 컴포넌트 파일에 접근할 수 있다.
   1. 대부분의 경우 인공지능에이전트가 원하는 대로 잘 바꿔주므로 직접 수정할 필요는 없다.
   2. 이러한 방식으로 사람과의 상호작용도 가능하다.

4. 웹사이트 배포 및 추가 기능

4.1. 웹사이트 배포 과정

1. 배포의 필요성: 제작된 웹사이트를 다른 사람들도 사용할 수 있도록 링크를 생성하는 과정이다.
2. 배포 방법: 왼쪽의 초록색 'Deployment' 아이콘을 눌러 진행한다.
   1. 'recommended auto-scale' 옵션을 선택하고 'Setup Deployment' 버튼을 누른다.
   2. 몇 번의 클릭만으로 웹사이트 링크가 생성되며, 이는 개발자에게도 어려운 작업이지만 Replit에서는 매우 쉽게 가능하다.
3. 배포의 핵심: 개발 전문 지식이나 환경 이해 없이도 웹사이트를 제작하고 배포하여 즉시 활용할 수 있다는 점이다.
4. 배포 완료 및 활용: 배포가 완료되면 웹사이트 링크가 생성되며, 이 링크를 공유하면 다른 사람들도 웹사이트에 접속할 수 있다.
   1. 생성된 링크는 모바일 환경에서도 깔끔하게 렌더링되어 잘 보여진다.
   2. 이렇게 제작된 웹사이트는 친구들과 공유하거나 사업에 활용할 수 있다.

4.2. 버전 컨트롤 및 기타 기능

1. 버전 컨트롤 (Rollback): 웹사이트를 만들다가 이전 버전이 더 좋다고 판단될 경우, 자동 저장된 체크포인트로 돌아갈 수 있다.
   1. 'roll back to here' 버튼을 누르면 해당 버전으로 웹사이트가 되돌아간다.
   2. 이 기능은 많은 변화를 시도한 후 마음에 들지 않을 때 실행 취소하는 것과 같다.
   3. 단, 되돌아간 버전에서 다시 이전 버전으로 돌아갈 수 없으므로 주의해야 한다.
2. 데이터베이스: 서비스에 정보를 저장하거나 사용자 서비스를 만들 때 필요한 저장 공간을 설정해 준다.
3. 콘솔: 서버를 관리하는 페이지로, 웹사이트 구현을 위한 명령어를 쉽게 관리할 수 있다.
   1. 고도화된 웹사이트를 만들 때 클라이언트/ 서버 관리, 백엔드 서버 관리등에 활용될 수 있다.

4.3. 프롬프트 고도화 및 다양한 웹사이트 데모

1. 프롬프트 고도화: 더 전문적이고 원하는 웹사이트를 만들고 싶다면 프롬프트를 고도화할 수 있다.
   1. ChatGPT에 " Replit이라는 서비스를 사용해서 오늘의 할 일을 관리해 주는 To Do 웹사이트를 만들고 싶어, 가장 모던하고 사용 친화적이고 유용하고 웹사이트를 만들기 위한 프롬프트작성해 줘"와 같이 요청하여 프롬프트를 생성할 수 있다.
   2. 이렇게 고도화된 프롬프트를 사용하면 더 멋진 웹사이트를 만들 수 있다.
2. 다양한 웹사이트 데모: Replit을 통해 제작된 여러 웹사이트 데모를 확인할 수 있다.
   1. 개인 웹사이트: 고급스럽고 화려한 디자인, 애니메이션, 다크모드/라이트모드, 강의 소개, SNS 팔로우 버튼, 자기소개 등을 포함한 포트폴리오 페이지를 만들 수 있다.
   2. 서비스 웹사이트: 로그인 기능, 목표 관리, 데일리 태스크 관리(예: 독서 관리) 등 실제 서비스 기능을 갖춘 웹사이트를 만들 수 있다.
   3. 게임/엔터테인먼트 웹사이트: 디지털 펫 게임, '오늘 뭐 먹지?' 룰렛, 성격 테스트 등 다양한 형태의 웹사이트를 제작할 수 있다.
   4. 고품질 결과물: 간단한 입력만으로도 즉시 배포가능한 수준의 고품질 서비스가 생성되며, 카카오톡/페이스북 공유 기능 등도 포함된다.

5. Replit 서비스 가격 및 할인 정보

1. 무료 티어: 3개의 앱을 만들 수 있으며, 모든 앱이 공개된다는 단점이 있다.
2. Replit Core (유료): 월 20달러(한화 약 2만 7천원~3만원)로, ChatGPT처럼 웬만한 앱 제작 및 프로토타입완성이 가능하다. 무료로 먼저 사용해보고, 막히는 부분이 생길 때 유료 결제를 고려하는 것이 좋다.

6. 바이브 코딩의 의미와 향후 계획

1. 바이브 코딩의 시대: Replit서비스를 통해 비개발자도 앱을 만들 수 있는 시대가 도래했음을 확인했다.
   1. 생성되는 웹사이트의 퀄리티가 매우 높으며, 실리콘밸리 엔지니어보다 잘하는 수준으로 평가된다.
   2. 사용자들이 꿈에 그리던 자신만의 웹사이트나 앱을 만들 수 있을 것으로 기대된다.
2. 향후 콘텐츠 계획: 웹사이트 제작외에 모바일 앱제작 및 출시 과정도 다룰 예정이다.
3. 바이브 코딩의 기회: 바이브 코딩툴은 모두에게 엄청난 기회를 제공할 수 있으므로, 직접 도전하여 멋진 프로덕트를 만들어 볼 것을 권장한다.

상위블로그들이 사용한 수익 상위 10개 키워드 바로가기