개발 입문 지도영상에서 추출한 제작 흐름 (AI 추출)
바이브코딩 원리는 알고 하세요 | 모든개발 지식부터 도구까지 이거 하나로 이해하기 90분 총정리
혼잡스가 웹 서비스를 식당에 비유해 개발 지식 지도를 순서대로 설명하는 입문 영상
이렇게 시작하세요
시작 재료코딩 경험이 거의 없는 상태에서 바이브 코딩을 하려는 관심모켓 제안
완성 결과웹 개발 기술 전체 흐름에 대한 이해
첫 행동메모장에 HTML 몇 줄을 쓰고 브라우저로 열어 헬로 월드 띄우기
1
웹 기본 구조 이해(HTML 문서)
HTML로 만든 문서를 CSS와 자바스크립트로 꾸미고 움직이게 함
2
CSS작업JavaScript작업TypeScript작업
CSS로 화면을 꾸미고 자바스크립트로 손님 행동에 반응하게 함
스타일과 동작이 있는 웹 화면
화면 코드를 프론트 도구로 묶고 조립하는 단계로 넘김
3
npm작업React작업Next.js작업
npm으로 재료를 받아 리액트로 조립하고 넥스트 JS로 내보냄
조립·포장된 프론트엔드 화면
손님 쪽 화면에서 보낸 요청을 서버 쪽에서 받도록 연결
4
백엔드 구성 이해(서버·DB·HTTP·로그인)
완성한 서비스를 올릴 서버 환경과 코드 기록 방식으로 넘김
5
AWS보조 도구
Docker보조 도구
Git보조 도구
GitHub보조 도구
AWS보조 도구Docker보조 도구Git보조 도구GitHub보조 도구리눅스·DNS·AWS·도커로 서비스를 올리고 Git으로 코드 수정 기록 관리
배포 환경과 코드 버전 기록
쌓인 기록 데이터를 머신러닝으로 다루는 단계로 이어짐
6
쌓인 기록으로 규칙을 찾는 머신러닝 개념과 체험 도구를 소개
Moket 도구 DB영상 내용과 별개 · 2026-10-03 기준
Teachable Machine — 한국어 미지원(영어 중심)도구 정보
머신러닝 개념 이해와 체험
전 과정에서 쓰는 개발 도구 사용법으로 마무리
