바이브코딩 전체 학습 지도 | 기술노트with 알렉

COURSE INDEX

일곱 단계로 완주하기

업로드 날짜가 아니라 선행 개념 순서입니다. 번호를 누르면 해당 레슨으로 이동합니다.

STEP 1ORIENTATION

바이브코딩의 전체 지도를 먼저 본다

원영상: 바이브코딩 환경 설정 - 서비스 유형 - 주제 - 프론트엔드 - 백엔드 - 데이터베이스 - 서버 - 배포

📅 2026-06-11⏱ 23:36🎬 12개 챕터📝 ko-orig 자동 자막

무엇을 만들지 정하는 순간부터 화면·데이터·서버·배포까지, 바이브코딩 프로젝트의 전체 흐름과 뒤에 볼 영상을 연결하는 기준 강의입니다.

왜 선택했나요?

공식 마인드맵의 여덟 영상을 어떤 순서와 이유로 봐야 하는지 직접 안내하는 출발점입니다.

이후 할 수 있는 것

AI에게 코드를 요청하기 전에 서비스 형태, 데이터, 서버, 배포라는 네 질문을 먼저 제시할 수 있습니다.

▶ 영상 처음부터 보기

챕터 상세 설명 12개 보기

STEP 1 상세 학습 노트

00:00개념

왜 지금 바이브코딩 전체 지도가 필요한가

AI가 화면은 빠르게 만들어도 서버와 실제 서비스 연결에서 막히는 초보자의 문제를 출발점으로 삼습니다.

00:44경로

연결 영상을 어떤 순서로 볼 것인가

최근에 올린 관련 영상을 어디서부터 봐야 할지 어렵다는 점을 짚고, 이 강의를 전체 학습 순서의 안내판으로 제시합니다.

01:23준비

도구와 작업 환경 선택

Claude나 Cursor처럼 AI가 포함된 개발 환경을 예로 들며 도구를 설치하고 작업 대상을 명확히 정하는 준비 단계를 설명합니다.

04:01판단

앱·웹의 형태를 먼저 정하기

만들 대상이 웹, 웹앱, 하이브리드앱, 네이티브앱 중 무엇인지 모르면 AI가 원하지 않는 결과를 만들 수 있다고 경고합니다.

05:57관점

직장인과 비전공자의 강점

기술만이 아니라 자신이 경험한 업무와 문제를 주제로 바꾸는 능력이 서비스 기획의 경쟁력이 될 수 있다고 설명합니다.

07:04기획

내가 아는 문제에서 주제 찾기

유행하는 아이디어보다 본인이 잘 알고 실제로 겪은 문제를 서비스 주제로 삼아야 판단과 개선을 이어가기 쉽다고 조언합니다.

08:44과정

서비스 개발 전체 과정 연결

기획·설계·개발·테스트·배포가 이어지는 전체 과정을 먼저 이해한 뒤 AI에게 부분 작업을 맡기는 접근을 권합니다.

10:30시연

AI로 당근형 화면 빠르게 만들기

실제 당근마켓 화면을 참고해 단일 HTML 화면을 빠르게 만드는 장면으로, 화면 제작 속도와 완성 서비스의 차이를 보여줍니다.

13:20데이터

화면에서 저장할 데이터 찾아내기

상품 제목·가격·카테고리·날짜처럼 화면에 보이는 값을 테이블과 필드로 바꾸며 데이터베이스 설계의 출발점을 설명합니다.

15:49구조

클라이언트·서버·백엔드

사용자 화면을 클라이언트로, API와 데이터 처리를 서버 쪽 백엔드로 구분해 로컬 화면만으로는 부족한 이유를 풀어냅니다.

17:53배포

간편 배포와 클라우드의 두 단계

먼저 간편 배포 서비스로 결과물을 공개하고, 그다음 클라우드와 인프라를 공부하는 두 단계 접근을 제안합니다.

20:27실천

완주한 뒤 세부 지식으로 돌아가기

모든 개념을 먼저 외우기보다 작은 결과물을 끝까지 배포해 본 뒤 네트워크·HTTP·클라우드를 보충하면 이해가 빨라진다고 정리합니다.

다음 연결

다음은 만들려는 결과물이 웹인지 앱인지부터 결정합니다.

STEP 2SERVICE TYPE

웹인가, 앱인가부터 결정한다

원영상: 바이브코딩 시작할 때 꼭 들어야 하는 웹 vs 웹앱 vs 하이브리드앱 vs 네이티브앱

📅 2026-03-19⏱ 11:51🎬 9개 챕터📝 ko-orig 자동 자막

웹·반응형 웹·설치형 웹·네이티브앱·하이브리드앱을 구분하고 카메라, 위치, 오프라인 사용 같은 요구로 적합한 형태를 고릅니다.

왜 선택했나요?

서비스 유형을 잘못 고르면 이후 기술 선택과 배포 경로 전체가 흔들리므로 구현 전에 필요한 첫 의사결정입니다.

이후 할 수 있는 것

사용 환경과 기기 기능 요구를 근거로 웹·네이티브·하이브리드 중 한 방향을 설명할 수 있습니다.

레슨 맵

00:00 서비스 유형을 먼저 결정해야 하는 이유
01:05 웹과 반응형 웹
02:26 모바일 전용 웹과 도메인
03:55 설치된다고 모두 네이티브는 아니다
04:40 네이티브앱과 기기 기능
05:38 하이브리드앱의 조합
07:01 여덟 질문으로 요구사항 확인
09:15 복합 요구와 기술 선택
11:00 정답보다 선택 기준 남기기

▶ 영상 처음부터 보기

챕터 상세 설명 9개 보기

STEP 2 상세 학습 노트

00:00문제

서비스 유형을 먼저 결정해야 하는 이유

영상 후반의 질문형 선택 도구를 예고하며, 만들고 싶은 서비스와 필요한 기술 스택을 구현 전에 구분해야 한다고 설명합니다.

01:05개념

웹과 반응형 웹

브라우저로 접속하는 웹과 화면 크기에 따라 배치가 달라지는 반응형 웹을 구분합니다.

02:26사례

모바일 전용 웹과 도메인

모바일 화면에 맞춘 별도 페이지와 m 도메인 사례를 통해 모바일 최적화 방식을 설명합니다.

03:55개념

설치된다고 모두 네이티브는 아니다

홈 화면에 설치되는 웹앱과 운영체제 API로 만든 네이티브앱을 같은 것으로 보지 말아야 한다고 짚습니다.

04:40개념

네이티브앱과 기기 기능

Android·iOS 도구와 SDK를 사용해 카메라, GPS, 센서 같은 기기 기능을 깊게 활용하는 방식을 설명합니다.

05:38개념

하이브리드앱의 조합

콘텐츠는 웹 기술로 만들고 위치·카메라처럼 필요한 부분은 네이티브 기능을 쓰는 혼합 방식을 소개합니다.

07:01판단

여덟 질문으로 요구사항 확인

카메라·위치·알림·오프라인 사용 등 필요한 기능을 질문에 답하며 서비스 유형을 좁혀 가는 과정을 보여줍니다.

09:15판단

복합 요구와 기술 선택

오프라인과 카메라, 위치처럼 요구가 겹치면 한 가지 단순 기준보다 실제 사용자 흐름을 기준으로 선택해야 함을 보여줍니다.

11:00정리

정답보다 선택 기준 남기기

AI에게도 요구 조건을 전달할 수 있지만, 왜 그 형태가 필요한지 판단 기준은 사람이 이해해야 한다고 마무리합니다.

다음 연결

형태를 정했으면 기획부터 운영까지 전체 개발 과정을 봅니다.

STEP 3LIFECYCLE

서비스가 만들어지는 전체 과정을 본다

원영상: 서비스 설계 및 개발, 서버 배포, 출시 과정 전체를 20분 만에 보여드립니다

📅 2026-04-23⏱ 19:44🎬 11개 챕터📝 ko-orig 자동 자막

아이디어를 MVP로 좁히고 화면·데이터·API를 설계한 뒤 개발·테스트·버전 관리·배포·운영으로 이어지는 서비스 생명주기를 설명합니다.

왜 선택했나요?

AI가 만드는 코드 조각과 실제로 운영되는 서비스 사이에 어떤 단계가 빠지기 쉬운지 가장 넓게 보여줍니다.

이후 할 수 있는 것

프로젝트를 기획, 설계, 개발, 테스트, 배포, 운영의 체크리스트로 나눌 수 있습니다.

▶ 영상 처음부터 보기

챕터 상세 설명 11개 보기

STEP 3 상세 학습 노트

00:00개요

서비스 개발 전체 과정의 출발점

바이브코딩으로 만든 결과를 실제 서비스로 이어가기 위해 전체 개발 과정을 먼저 훑겠다고 안내합니다.

01:10기획

아이디어를 사용자 문제로 바꾸기

만들고 싶은 기능을 나열하기보다 누가 어떤 문제를 겪고 있으며 왜 이 서비스를 써야 하는지부터 정리합니다.

02:08기획

MVP로 욕심 줄이기

처음부터 모든 기능을 넣지 않고 최소 기능 제품으로 핵심 가치를 검증하는 접근을 소개합니다.

03:57분석

경쟁 서비스와 핵심 기능 도출

유사 서비스와 사용 흐름을 살펴보며 반드시 필요한 기능과 뒤로 미룰 기능을 구분합니다.

05:37설계

화면·데이터·API 함께 설계하기

화면 순서와 상세 화면뿐 아니라 회원·상품 같은 데이터와 그것을 주고받는 API까지 함께 설계해야 함을 설명합니다.

07:58구조

API 서버가 데이터를 전달하는 흐름

프론트엔드가 보낸 데이터를 API가 받아 데이터베이스에 저장하고 다시 조회하는 기본 연결을 보여줍니다.

09:39개발

CRUD가 백엔드 개발의 중심

생성·조회·수정·삭제를 뜻하는 CRUD가 데이터 처리 기능의 기본이라는 점을 설명합니다.

11:40테스트

웹·모바일 대응과 테스트

반응형 웹과 모바일앱 선택에 따라 테스트 범위가 달라지며, 기능이 작동하는지 여러 환경에서 확인해야 한다고 설명합니다.

14:00운영

Git 브랜치와 개발·운영 버전

개발 중인 소스와 실제 서비스 소스를 브랜치로 나눠 관리하는 이유를 운영 안정성과 연결합니다.

15:58배포

서버에 올리고 외부 접속 열기

실행 가능한 결과를 서버에 올리고 도메인과 네트워크를 통해 사용자가 접속하게 만드는 배포 단계를 설명합니다.

17:50출시

운영 모니터링과 앱스토어 심사

웹 공개 이후의 모니터링과 장애 대응, 앱이라면 스토어 심사와 등록까지가 출시 과정에 포함된다고 정리합니다.

다음 연결

이제 화면·API·데이터베이스가 실제로 어떻게 연결되는지 구조를 파고듭니다.

STEP 4SYSTEM STRUCTURE

프론트엔드·백엔드·DB를 연결한다

원영상: 프론트엔드 백엔드 데이터베이스 전체를 20분만에 보이게 해드립니다

📅 2026-04-15⏱ 16:28🎬 10개 챕터📝 ko-orig 자동 자막

브라우저와 앱이 HTTP·API로 서버에 요청하고, 백엔드가 SQL로 데이터베이스를 읽고 쓰는 3계층 구조를 한 흐름으로 보여줍니다.

왜 선택했나요?

바이브코딩에서 화면은 만들었지만 로그인·상품·댓글 같은 데이터 기능에서 막히는 이유를 구조적으로 설명합니다.

이후 할 수 있는 것

브라우저, API 서버, 데이터베이스 사이의 요청·응답 흐름을 그림으로 설명할 수 있습니다.

▶ 영상 처음부터 보기

챕터 상세 설명 10개 보기

STEP 4 상세 학습 노트

00:00개요

전체 시스템을 기술적으로 펼쳐 보기

기존의 “대부분의 시스템은 프론트엔드와 백엔드로 구성된다”는 설명을 더 기술적으로 확장하고 전체 학습 범위를 제시합니다.

00:45구조

프론트엔드·서버·데이터베이스 기본 구조

백엔드를 서버와 데이터베이스로 나누고, 프론트엔드의 역할을 화면 개발·이벤트 처리·데이터 송수신으로 정리합니다.

02:18통신

URL·도메인·DNS·IP와 HTTP

도메인이 DNS를 통해 IP 주소로 변환되고, 서버 접속에는 HTTP 또는 보안이 적용된 HTTPS가 사용되는 흐름을 설명합니다.

04:31웹

웹페이지를 구성하는 정적 자원

웹 서버가 index.html에 응답하고 HTML·CSS·JavaScript·이미지가 브라우저 화면을 구성하는 과정을 설명합니다.

05:13앱

모바일앱과 API 통신

Android·iOS 앱과 React Native·Flutter를 소개하고, 앱이 API로 요청해 JSON이나 XML 응답을 받아 표시하는 과정을 설명합니다.

07:43보안

백엔드가 DB를 중계하는 이유

클라이언트가 데이터베이스에 직접 접근할 때 생기는 보안 문제 때문에 백엔드 서버가 데이터 접근을 중계한다고 설명합니다.

08:32서버

웹 서버와 WAS의 차이

Apache·Nginx 같은 웹 서버는 정적 파일을 제공하고, WAS는 애플리케이션 로직과 DB 연동으로 동적 응답을 만든다고 구분합니다.

10:43데이터

CRUD·SQL·API 메서드 연결

API의 조회·POST·PUT·DELETE 요청을 CRUD와 SQL 작업에 대응시켜 데이터베이스까지 이어지는 흐름을 보여줍니다.

12:46구현

백엔드 기술과 DB 구조

Java·Spring, Python·Django·Flask, JavaScript·Node.js를 소개하고 테이블·레코드·컬럼을 서비스 데이터에 연결합니다.

15:11정리

버튼 클릭부터 화면 표시까지

버튼 클릭 뒤 API, WAS, 데이터베이스를 거쳐 JSON 결과가 돌아오고 프론트엔드에 표시되는 전체 흐름을 정리합니다.

다음 연결

구조를 이해했으면 단일 HTML을 실제 URL로 공개하는 첫 배포를 해봅니다.

STEP 5FIRST DEPLOY

내 결과를 실제 URL로 공개한다

원영상: 누구나 쉽게 서비스 배포 | 바이브코딩 시 필요한 IT 기술

📅 2026-03-20⏱ 11:27🎬 10개 챕터📝 ko-orig 자동 자막

Vercel·Cloudflare Pages·Netlify 같은 관리형 서비스를 소개하고 DNS, IP, 도메인, SSL의 역할을 짚으며 단일 웹페이지를 공개합니다.

왜 선택했나요?

로컬에서만 열리는 결과물을 다른 사람이 접속할 수 있는 HTTPS 주소로 바꾸는 가장 짧은 완주 경험입니다.

이후 할 수 있는 것

정적 웹페이지를 관리형 호스팅에 올리고 도메인·DNS·SSL의 역할을 구분할 수 있습니다.

▶ 영상 처음부터 보기

챕터 상세 설명 10개 보기

STEP 5 상세 학습 노트

00:00개요

페이지 단위 배포 서비스를 쓰는 이유

Vercel·Cloudflare·Netlify를 소개하고 간단한 웹사이트의 초기 테스트에는 페이지 단위 배포가 쉽다고 설명합니다.

01:35범위

정적 웹사이트와 드래그앤드롭 배포

HTML·CSS·JavaScript로 구성된 웹사이트 폴더를 서비스에 올리는 실습 범위를 정합니다.

02:15통신

HTTP·도메인·DNS와 IP

브라우저가 도메인을 DNS에 질의해 서버 IP를 얻고 그 주소로 접속하는 흐름을 설명합니다.

04:20서버

웹 서버와 정적 파일 응답

IP에 해당하는 서버에서 웹 서버가 동작하며 HTML과 이미지 같은 정적 파일을 요청에 맞춰 응답한다고 설명합니다.

05:23설정

Cloudflare Pages 프로젝트 만들기

Cloudflare 계정의 Workers & Pages에서 Pages 배포를 선택하고 새 애플리케이션과 프로젝트 이름을 만듭니다.

06:23실습

폴더 업로드와 사이트 배포

드래그앤드롭 방식으로 상위 폴더를 올리고 Deploy Site를 실행해 공개 페이지가 정상인지 확인합니다.

07:43배포

기본 배포 URL과 도메인 구매

플랫폼 기본 URL만으로도 공유할 수 있고, 별도 주소가 필요하면 도메인을 구매할 수 있다고 안내합니다.

08:35도메인

커스텀 도메인 연결

Cloudflare 프로젝트의 Custom Domains에서 구매한 도메인을 Pages 공개 주소와 연결합니다.

09:21보안

HTTPS·SSL 활성화와 전파 대기

커스텀 도메인 연결 과정에서 SSL이 적용되며 DNS와 인증서 전파에 시간이 걸릴 수 있다고 설명합니다.

10:38정리

정적 페이지 배포 전체 정리

로컬 정적 파일을 공개 URL로 만들고 커스텀 도메인과 SSL까지 연결하는 전체 과정을 마무리합니다.

다음 연결

간편 배포 뒤에서 움직이는 서버·네트워크·스토리지를 클라우드 구성도로 확장합니다.

STEP 6CLOUD MAP

간편 배포 뒤의 클라우드를 이해한다

원영상: 서비스 만들 때 필수 클라우드 구성도 바로 이해할 수 있습니다

📅 2026-05-14⏱ 22:11🎬 10개 챕터📝 ko-orig 자동 자막

도메인, CDN, VPC, 로드밸런서, 가상 서버, 스토리지, 권한, 보안, 데이터베이스가 실제 서비스에서 어떻게 연결되는지 AWS 용어로 설명합니다.

왜 선택했나요?

간편 배포가 대신 처리해 주던 인프라 요소를 한 장의 구성도로 풀어, 다음 단계의 서버 운영과 비용 판단에 기반을 제공합니다.

이후 할 수 있는 것

클라우드 구성도에서 네트워크, 컴퓨팅, 스토리지, DB, 보안 요소의 역할을 구분할 수 있습니다.

▶ 영상 처음부터 보기

챕터 상세 설명 10개 보기

STEP 6 상세 학습 노트

00:00개요

클라우드를 알아야 하는 이유

클라이언트가 웹 서버·WAS·데이터베이스를 거치는 구조를 제시하고 실제 서비스를 만들려면 클라우드 흐름을 알아야 한다고 설명합니다.

02:40개념

가상화와 클라우드 핵심 기능

가상화를 클라우드의 핵심으로 정의하고 컴퓨팅·네트워크·스토리지·보안·DB·모니터링을 대표 기능으로 소개합니다.

04:40네트워크

확장·네트워크·전송 서비스

Auto Scaling, Route 53의 DNS, CloudFront의 CDN, VPC의 가상 사설 네트워크 역할을 구분합니다.

06:20저장

로드밸런서와 저장소

ELB가 여러 EC2로 요청을 분산하고 S3는 파일 저장소, EBS는 서버에 붙는 블록 스토리지라고 설명합니다.

08:00보안

권한과 보안 경계

IAM은 사용자·그룹·역할·권한을 관리하고 Security Group은 허용된 IP와 포트만 여는 가상 방화벽이라고 설명합니다.

09:00구조

도메인에서 CDN·S3까지

Route 53, WAF, CloudFront를 거쳐 캐시에 없는 콘텐츠를 S3에서 가져오는 요청 흐름을 연결합니다.

11:20구조

VPC 안의 웹·WAS·DB

VPC 내부에 여러 EC2를 두고 웹 서버·WAS·데이터베이스를 나누는 전형적인 구성을 읽습니다.

13:00확장

이중 로드밸런싱과 자동 확장

외부·내부 ELB와 Auto Scaling Group, RDS가 트래픽과 데이터 처리를 나누는 구조를 설명합니다.

15:00실습

AWS 콘솔에서 EC2와 RDS 확인

EC2의 OS·사양 선택과 RDS 설정 화면을 확인하고 Free Tier 밖 자원의 과금 가능성을 강조합니다.

18:40실습

Auto Scaling과 S3 버킷

Auto Scaling Group과 이미지·음성·영상 파일을 저장하는 S3 버킷의 실제 용도를 보여줍니다.

다음 연결

마지막으로 언어부터 클라우드까지 IT 지식을 한 지도 위에서 다시 연결합니다.

STEP 7SYSTEM SYNTHESIS

IT 전체 지도를 다시 연결한다

원영상: IT 기술 지식 20분만에 시원하게 뻥 뚫어 드립니다

📅 2026-04-02⏱ 18:45🎬 10개 챕터📝 ko-orig 자동 자막

프로그래밍 언어, 프론트엔드·백엔드, 프레임워크, 소프트웨어 공학, 컴퓨터·네트워크·DB·아키텍처·클라우드를 한 학습 지도에 연결합니다.

왜 선택했나요?

앞 단계에서 화면과 배포를 경험한 뒤 보면 흩어진 기술 용어가 서비스라는 한 시스템 안에서 어디에 위치하는지 정리됩니다.

이후 할 수 있는 것

새 기술 용어를 언어, 개발, 데이터, 인프라, 운영 중 어느 층에 놓아야 하는지 판단할 수 있습니다.

▶ 영상 처음부터 보기

챕터 상세 설명 10개 보기

STEP 7 상세 학습 노트

00:00지도

비전공자를 위한 IT 지식 지도

익숙한 웹사이트와 앱에서 출발해 개발·컴퓨터 구조·네트워크·클라우드로 이어지는 학습 흐름을 제시합니다.

02:20구조

앱 종류와 프론트엔드·백엔드

웹·앱·하이브리드앱을 구분하고 화면을 프론트엔드, 서버와 데이터베이스 영역을 백엔드로 묶습니다.

03:20언어

C 언어를 배우는 이유와 생략 기준

C가 프로그래밍 본질을 배우기 좋지만 서비스를 바로 만드는 목적이라면 필요에 따라 건너뛸 수 있다고 설명합니다.

05:00개발

언어와 프레임워크 구분

HTML·CSS·JavaScript와 Java를 언어·기술로, React·Spring·Node.js 등을 개발을 돕는 틀로 구분합니다.

08:20공학

소프트웨어 공학과 개발 방법론

폭포수 방식의 단계와 한계를 짚고 반복 개발을 위한 Agile과 DevOps의 필요성으로 연결합니다.

10:20기초

프로그램·프로세스·CPU·운영체제

프로그램이 실행되면 프로세스가 되고 CPU가 이를 처리하며 운영체제가 실행 환경을 관리한다고 설명합니다.

11:20통신

서버 프로그램과 네트워크

클라이언트와 서버가 HTTP·HTTPS, 패킷, 라우터·스위치, IP를 통해 통신하는 흐름을 설명합니다.

13:40설계

다중 서버와 시스템 아키텍처

웹–WAS–DB 3티어 구조와 마이크로서비스를 예로 들어 여러 서버를 목적에 맞게 설계하는 아키텍처를 설명합니다.

15:00클라우드

가상화·VM·컨테이너

IaaS와 VM을 가상화에 연결하고 Docker 컨테이너와 Kubernetes의 역할을 전체 지도에 배치합니다.

17:00정리

필요한 영역으로 후속 학습하기

모든 기술을 한꺼번에 깊게 공부하지 말고 전체 흐름을 본 뒤 프로젝트에 필요한 영역을 선택하라고 제안합니다.

다음 연결

핵심 과정을 마쳤습니다. 선택 영상으로 복습하거나 자신만의 작은 서비스를 기획해 보세요.

OPTIONAL VIDEOS

선택해서 보는 두 편

핵심 과정과 내용이 겹치거나 기술보다 관점에 가까운 영상은 별도로 분리했습니다.

압축 복습2026-05-21 · 17:59

바이브코딩 막힘 없이 뻥 뚫어 드립니다

프롬프트, 개발 도구, 프론트엔드, 백엔드, 배포를 실용적으로 연결합니다. 기준 영상과 전체 지도 영상의 내용이 많이 겹쳐 핵심 과정이 아니라 복습용으로 배치했습니다.

YouTube에서 보기 ↗

관점 보충2020-09-12 · 07:37

직장인, 비전공자 분들 꼭 보세요. 효율적인 앱 만들기 공부 방법 포함

직장 경험과 도메인 지식이 서비스 주제 선정의 강점이라는 메시지를 줍니다. 기술 사용법은 오래됐고 자막 분절이 커서 동기와 관점만 취하는 선택 영상입니다.

YouTube에서 보기 ↗

🛡️ 바이브코딩 실행 전 체크

작은 복사본과 새 폴더에서 먼저 실습하고 원본 문서·업무 폴더 전체를 바로 연결하지 않습니다.
당근마켓 같은 실제 서비스는 학습용 구조 참고만 하고 로고·문구·디자인을 그대로 복제하지 않습니다.
로그인, 개인정보, 결제, 파일 업로드를 구현할 때는 AI 생성 코드만 믿지 말고 권한·입력 검증·비밀정보 노출을 사람이 점검합니다.
Cloudflare·AWS·도메인 화면과 요금·Free Tier는 영상 게시 이후 바뀔 수 있으므로 실행 시 공식 문서를 다시 확인합니다.
배포 성공 표시가 아니라 실제 공개 URL, 주요 링크, 모바일 화면, 콘솔 오류까지 확인해야 완료입니다.

출처와 한계

기술노트with 알렉 YouTube 채널
기준 영상: 바이브코딩 환경 설정부터 배포까지
기술노트 공식 마인드맵 · 바이브코딩 시작하기
영상 메타데이터·공식 마인드맵·ko-orig 자동 자막 확인일: 2026-07-18