https://www.youtube.com/watch?v=77ZT6H1Kpa8

description: |-

1. 이건 꼭 알아야 한다^1

[? 질문] “바이브 코딩 시대”에서 웹서비스를 만든다는 건 구체적으로 어떤 경험/워크플로우인가^1
[= 답] 프론트엔드의 큰 구조(HTML=뼈대, CSS=꾸밈, JavaScript=동작)만 이해한 뒤, 세부 문법은 AI(ChatGPT)에게 “무엇을 만들어줘/무엇을 바꿔줘”처럼 사람에게 시키듯 요청하고, 나온 코드를 그대로 붙여 넣어 실행·수정하는 방식이다.[^2]

[? 질문] 웹서비스(IT 프로덕트)는 어떤 구조로 동작하며, 프론트엔드/백엔드는 무엇을 의미하는가[^3]
[= 답] 사용자가 보는 화면 단(프론트엔드/클라이언트)과 보이지 않는 뒷단의 처리(백엔드/서버)로 나뉘며, 로그인 같은 기능은 “프론트에서 입력 → 백엔드로 전송 → 회원 데이터(DB) 조회 → 결과 반환 → 화면 표시”의 흐름으로 동작한다.[^4]

[? 질문] 내가 만든 HTML 파일을 “전 세계 누구나 접속 가능한 사이트”로 만들려면 무엇이 필요하며, 왜 클라우드 배포를 쓰는가[^5]
[= 답] 내 PC의 로컬 파일(C드라이브 경로)은 다른 사람이 접속할 수 없으므로, 24시간 돌아가는 외부 서버(클라우드)에 파일을 올려 “배포”해야 한다.[^6] 강의에서는 Cloudflare Pages를 사용해 정적 HTML을 전 세계에 배포하고, 무료 플랜에서도 “무제한 트래픽(대역폭)”을 제공한다는 점을 강점으로 든다.[^7]

2. 큰 그림[^8]

이 콘텐츠는 “코딩을 처음 접하는 사람”이 웹서비스가 어떻게 구성되는지(프론트/백, HTML/CSS/JS 역할) 큰 구조를 먼저 잡고, 메모장 + 브라우저만으로 HTML을 실행해본 뒤, ChatGPT로 코드를 생성/수정하고, 마지막에는 Cloudflare Pages로 무료 배포까지 해보는 흐름으로 진행된다.[^9] 특히 세부 문법 암기보다 “역할과 구조를 이해하고 AI에 지시하는 감각”을 ‘바이브 코딩’으로 표현하며, 이 감각을 얻는 것이 목표라고 강조한다.[^10]

• 프론트엔드/백엔드 추상화: 대부분의 IT 프로덕트는 “보이는 화면(클라이언트)”과 “안 보이는 처리(서버, DB)”로 나뉜다는 큰 틀을 먼저 제시한다.[^4] 이 틀이 있으면 이후 배우는 내용이 어디에 속하는지(지금 프론트? 백? DB?) 분류가 쉬워진다고 말한다.[^11]
• HTML·CSS·JavaScript의 역할 분담: 프론트엔드는 이 3가지로 구성되며, 문법을 외우기보다 “뼈대/꾸밈/동작” 역할만 알면 AI로 코드를 만들어 쓸 수 있다고 안내한다.[^12]
• 무료 전 세계 배포(Cloudflare Pages): 로컬 파일을 클라우드에 올려 누구나 접속하게 만드는 “배포”를 설명하고, Pages에서 프로젝트 생성→폴더 업로드→Deploy→Visit으로 공개 URL이 생기는 과정을 따라간다.[^13]

3. 하나씩 살펴보기[^14]

3.1 “이제 바이브 코딩 시대”가 의미하는 것: ‘느낌’만 잡으면 된다^1

영상은 “이제 바이브 코딩 시대”라고 선언하면서 시작한다.^1 여기서 말하는 바이브 코딩은, 예전처럼 사람이 모든 코드를 손으로 타이핑하고 문법을 암기하는 방식이라기보다, 웹을 AI에게 시키면서 만들 수 있는 시대라는 맥락이다.[^2]

화자는 웹을 만드는 과정을 “뭐 해 줘, 딸깍 / 뭐 해 줘, 딸깍”이라는 표현으로 반복해서 묘사한다.[^2] 즉,

• 사용자가 자연어로 요구사항을 말한다.[^2]
• AI가 코드를 만들어 준다.[^2]
• 사용자는 복사/붙여넣기/저장/새로고침 같은 최소 조작으로 결과를 확인한다.[^15]

또한 뒤에서 배포 파트와 연결되는 강한 주장으로, “Deploy site 버튼을 누르면 전 세계 배포가 되고”, 심지어 “전 세계 인구가 다 들어와도 비용은 공짜”라는 그림을 제시한다.[^16] 이때 ‘공짜’는 뒤에서 Cloudflare Pages의 무료 플랜(무제한 대역폭)과 연결된다.[^7]

[!IMPORTANT] “성공”의 기준으로 제시하는 것 화자는 “이 느낌이 느껴지시면 성공”이라고 말하며, 세부 문법 숙련이 아니라 구조를 알고 AI로 구현하는 감각을 성취 기준으로 둔다.[^10]

3.2 IT 프로덕트란 무엇인가: 우리가 쓰는 서비스는 전부 같은 큰 구조를 가진다[^17]

화자는 IT 프로덕트가 뭔지 잘 모르는 사람을 전제로, 일상적 예시를 나열하며 개념을 잡는다.[^17]

• 구글: 검색 서비스[^18]
• 인스타그램: 사진/영상 업로드와 소통을 하는 SNS 서비스[^19]
• ChatGPT: AI와 대화하는 프로덕트[^20]
• 넷플릭스: 영화/콘텐츠를 등록해 스트리밍으로 보는 서비스[^21]
• 리그 오브 레전드: 사람들이 접속해 게임을 즐기는 서비스[^22]

이 모든 것이 “IT 프로덕트” 범주에 들어가며, 이번 과정(5주)을 끝내면 “대략 이렇게 생겼구나”를 이해할 수 있다고 말한다.[^23] 더 나아가 정말 잘하면 구조를 그대로 클론(클론 코딩) 하거나, 직접 서비스를 만들어 출시하는 것도 가능하다고 언급한다.[^24]

그리고 “모든 프로덕트를 진짜 추상화해서 간단히” 설명하면, 결국 아래의 큰 프레임워크로 설명 가능하다고 전환한다.[^25]

[!TIP] 큰 프레임워크의 효용 “이것만 기억하면 나머지 정보를 넣을 칸이 만들어진다”는 표현으로, 이후 학습 내용을 분류할 ‘지도’를 먼저 제공한다고 말한다.[^25]

3.3 프론트엔드(클라이언트) vs 백엔드(서버): 로그인 예시로 동작 원리 이해하기[^26]

화자는 IT 프로덕트를 크게 프론트엔드(클라이언트 사이드) 와 백엔드(서버) 로 나눈다고 말한다.[^26] 프론트엔드는 “우리가 보는 화면 단”, 백엔드는 “우리가 안 보이는 뒷단”이라고 직관적으로 설명한다.[^27] (엄밀히는 다르지만 이해를 위해 이렇게 설명한다고 덧붙인다.)[^27]

이를 가장 이해하기 쉬운 예로 네이버 로그인을 든다.[^28]

1. 프론트엔드(클라이언트)에는 네이버 로그인 화면이 있다.[^28]
2. 사용자가 아이디/비밀번호를 입력하고 “로그인”을 누른다.[^29]
3. 프론트엔드에서 백엔드로 아이디/패스워드 정보가 “날아간다”.[^30]
4. 백엔드는 회원 목록(회원 데이터)을 가지고 “가입된 사람인지” 조회한다.[^31]
5. 맞으면 OK를 반환하고, 로그인 성공 화면을 표시한다.[^32]

이 구조를 이해하면, 뉴스에서 나오는 “서버가 털려서 해킹 당했다”는 표현이 결국 “백엔드가 털린 것”이라는 식으로 해석할 수 있다고 한다.[^33]

• [? 해킹 사고에서 ‘서버가 털렸다’는 건 무엇이 털린 건가]
  [= 프론트의 화면이 아니라, 백엔드(서버) 쪽이 침해된 상황을 가리킨다][^33]

또한 앞으로 배울 내용이 “지금 프론트엔드를 배우는구나 / 백엔드를 배우는구나 / DB를 만들고 있구나”로 구분되어 이해된다고 말한다.[^11]

3.4 5주 과정의 구현 그림: 프론트/백을 만들고, 광고·결제를 붙여 돈 버는 구조까지[^34]

화자는 우리가 할 일이 결국 프론트엔드와 백엔드를 “만드는 걸 배울 것”이라고 정리한다.[^34] 그리고 완성된 서비스를 인터넷에 올리고(배포) 그 위에 수익화를 붙이는 구조를 5주 동안 구현한다고 말한다.[^35]

수익화에 대해선 “돈을 벌어야 하는데 안 받으면 자선사업”이라는 식으로 직설적으로 말하며,[^36] 구체적으로 다음을 언급한다.

• 광고: “구글 애드센스 광고를 붙이고”, 사용자가 내 사이트에 접속해 광고를 보면 내가 돈을 받는 구조를 만든다.[^37] 특히 “오늘 광고 붙이는 것까지 진행”한다고 예고한다.[^37]
• 결제: “결제도 붙일 것”이라고 하며, 결제 대행(글로벌 결제)을 받을 수 있는 서비스로 “Stripe(스트라이프)”와, 발음이 다소 불명확하지만 “콜라… 결제 대행” 같은 표현으로 결제 솔루션을 함께 언급한다.[^38]

동시에 모든 서비스가 항상 프론트/백/DB가 다 있는 것은 아니며, 어떤 경우엔 DB 없이 프론트엔드만으로도 서비스가 될 수 있다고 덧붙인다.[^39] 다만 “전반적으로 서비스는 프론트/백으로 구성된다”는 이해가 도움이 되기 때문에 큰 그림을 먼저 잡는다고 설명한다.[^40]

3.5 웹 개발이란 무엇이며 왜 웹을 선택하는가: 난이도 낮고 결과를 전 세계에 공개하기 쉽다[^41]

화자는 브라우저(크롬 등)를 통해 접근해 이용하는 서비스를 웹 서비스, 이를 만드는 과정을 웹 개발이라고 정의한다.[^41]

그리고 “왜 웹 개발을 하냐”에 대해 다음 논리를 편다.[^42]

• 웹은 난이도가 비교적 낮고 이해하기 좋다.[^42]
• 우리는 이미 인터넷에서 사이트를 들어가 본 경험이 있어 익숙하다.[^43]
• 내가 만든 것도 구글처럼 전 세계 누구나 쓰게 만드는 것이 “어렵지 않다”.[^44]

또한 웹도 마찬가지로 프론트/백 구조가 있으며, 서버 쪽(백엔드)은 난이도가 있을 수 있고, 화면 만드는 프론트가 더 직관적이므로 “프론트엔드를 먼저 배운다”고 안내한다.[^45]

3.6 프론트엔드 3요소: HTML(뼈대)·CSS(꾸밈)·JavaScript(동작)[^12]

화자는 “웹의 프론트엔드는 별거 없고 이 세 가지 언어를 알면 끝”이라고 단언한다.[^12] 그 3가지는:

• HTML
• CSS
• JavaScript(자바스크립트)[^12]

여기서 예상되는 반응(“쉽다면서 언어가 3개냐”)을 먼저 언급하고,[^46] “문법은 몰라도 된다, 역할만 알면 된다”고 주장한다.[^47] 역할만 알면 AI에게 “HTML 코드 만들어줘 / CSS 코드 만들어줘”라고 시키면 “딸깍”으로 만들어진다는 논리다.[^48] 즉, AI 시대에는 세부 문법 학습의 필요성이 낮다는 메시지를 강조한다.[^49]

3.6.1 HTML: 화면의 ‘뼈대’ 구성[^50]

HTML은 제목, 입력창, 버튼 같은 요소를 어디에 배치할지 “구성하는 뼈대”를 잡는 역할이라고 설명한다.[^50] 예시로 네이버 로그인 페이지를 들며,

• “제목은 네이버”
• “아이디 입력창”
• “비번 입력창”
• “로그인 버튼”

같은 구조를 만드는 것이 HTML이라고 한다.[^51]

3.6.2 CSS: 뼈대를 ‘꾸미는’ 역할[^52]

CSS는 HTML로 만든 뼈대의 디자인을 담당한다.[^52] 예시로,

• 제목 색(초록색 등)
• 폰트
• 배경색(회색)
• 입력창 색(흰색), 길이/크기

같은 시각적 스타일을 설정하는 것이 CSS라고 말한다.[^53]

3.6.3 JavaScript: ‘동작/이벤트’를 처리[^54]

자바스크립트는 “동작을 처리”하며, 클릭/입력 같은 상호작용에서 변화가 일어나게 만든다고 설명한다.[^54]

예시:

• 비밀번호를 잘못 입력하면 “비밀번호를 잘못 입력했습니다” 메시지를 띄우고 비번을 지우는 동작[^55]
• 로그인 성공/실패에 따라 다른 처리를 하는 로직[^56]

이를 “동적인 처리”라고 부르며, 이런 설계를 자바스크립트가 담당한다고 정리한다.[^57]

[!NOTE] 비유로 다시 정리 HTML=뼈대, CSS=꾸밈, JavaScript=신경(움직임을 전달하는 역할)이라는 비유를 사용해 역할을 각인시킨다.[^58]

3.7 개발 환경은 ‘메모장’로 시작: 설치/회원가입이 제일 어렵기 때문[^59]

화자는 초보자에게 가장 어려운 것이 “회원가입”과 “설치”라고 말하며,[^59] 복잡한 개발 도구 대신 윈도우 메모장/맥 메모장 같은 기본 텍스트 편집기로 진행하겠다고 한다.[^60] 목적은 “개념을 먼저 이해”하는 것이고, 도구는 단순할수록 장벽이 낮다는 판단이다.[^61]

또한 사용할 도구를 “메모장 + ChatGPT” 두 가지로 제시한다.[^62]

3.8 HTML 기본 문법 감각: 태그(꺾쇠)로 열고 닫는다[^63]

화자는 HTML이 “꺾쇠( < > )로 열고 태그 이름을 쓰고 닫고, 내용 넣고, /태그로 닫는다”는 구조라고 설명한다.[^63] 키보드에서 시프트 조합으로 꺾쇠를 치는 방법까지 언급하며 완전 초보를 배려한다.[^64]

예로 H1 태그를 소개한다.

• H1은 제목을 나타내며,
• “헤더 중 제일 큰 것”이라는 의미라고 설명한다.[^65]

3.9 index.html 만들기 (Windows/Mac)와 “확장자 보이기” 문제 해결[^66]

3.9.1 Windows: 새 텍스트 문서 → index.html로 이름 변경[^66]

윈도우에서는 우클릭 → “새로 만들기”로 텍스트 문서를 만들고, 파일명을 index.html로 바꾸라고 안내한다.[^66] 여기서 초보자가 많이 겪는 문제로 “확장자가 안 떠요 / 확장자가 뭐예요?”를 직접 다룬다.[^67]

화자는 “점(. )과 함께 붙는 것”이 확장자이며, 어떤 사람은 index처럼 점이 없는 파일로 만들어버리는 경우가 있다고 말한다.[^68]

해결 방법(윈도우):

• 탐색기(폴더 아이콘) 실행[^69]
• 메뉴(점점점) → 옵션 → 보기 탭[^70]
• “알려진 파일 형식의 파일 확장명 숨기기”가 해제되어 있어야 함[^71]
• 그 다음 이름 바꾸기로 .html을 붙인다.[^72]

3.9.2 Mac: TextEdit(텍스트 에디터)에서 “플레인 텍스트”로 저장[^73]

맥은 “노트”가 아니라 가장 단순한 텍스트 편집기(텍스트 에디터/텍스트에딧)를 쓰라고 하고,[^73] 포맷을 플레인 텍스트로 바꾼 뒤 파일명을 index.html로 저장하라고 안내한다.[^74]

3.9.3 파일을 열고 코드 작성 준비 완료[^75]

메모장을 켠 다음 index.html 파일을 열고, 그 안에 HTML 코드를 쓰면 프론트엔드 화면이 나온다고 말하며, 여기까지가 “코딩 준비 끝”이라고 정리한다.[^75]

3.10 첫 HTML 실행: H1 “안녕” 출력과 버튼 만들기, 저장의 중요성[^76]

화자는 직접 다음을 타이핑하며 실습을 시킨다.

• <h1>안녕</h1> 형태로 H1 태그 작성[^76]
• 파일 저장: 저장되지 않으면 점 표시가 뜨며, Ctrl+S 또는 메뉴 저장을 사용하라고 강조한다.[^77]
• 저장 후 파일을 크롬으로 열면 브라우저에서 “안녕”이 표시된다.[^78]

이어서 버튼 태그도 보여준다.

• <button>눌러 줘</button>처럼 버튼 태그를 추가하고 저장 후 새로고침하면 버튼이 생기며 “딸깍” 눌린다고 보여준다.[^79]

여기서 의도는:

• HTML은 브라우저에서 실행된다.[^78]
• 태그를 추가하면 화면 요소가 늘어난다.[^79]
• 저장/새로고침이 작업 루프라는 감각을 잡는 것이다.[^77]

3.11 “이제 사람 코딩 시대는 지났다”: ChatGPT로 HTML 홈페이지 생성하기[^80]

화자는 방금까지의 타이핑은 “개념 설명을 위한 것”이며, 이제는 gptgt.com(발음/표기상 ChatGPT 접속을 의미)으로 접속해 AI에게 코딩을 시킬 수 있다고 전환한다.[^80]

실제로 자연어로 이렇게 요청한다:

• “HTML 코드로 조코딩을 소개하는 홈페이지 간단하게 (사람한테 시키듯이)”[^81]

그러면 ChatGPT가 “아주 간단하고 깔끔한” 소개 홈페이지를 index.html 형태 코드로 만들어준다고 하고,[^82] 사용자는:

1. 코드 복사 버튼으로 복사[^83]
2. 메모장 파일의 내용을 전체 삭제 후 붙여넣기[^84]
3. 저장[^85]
4. 브라우저 새로고침 → 조코딩 소개 홈페이지가 즉시 만들어짐[^86]

이 과정을 통해 “코딩은 이런 식으로 하는 것”이라고 결론을 내린다:
개념을 이해 → AI에게 코드 생성 요청 → 적용하면 완성.[^87]

3.11.1 생성된 코드로 HTML/CSS 개념 추가 노출: head, style, class/속성, 부모-자식[^88]

화자는 생성된 코드를 자세히 보면 HTML 태그가 들어가 있고, head 태그가 있으며, 그 안의 style 부분에는 CSS 문법이 들어가 있다고 짚는다.[^88] 다만 이 CSS 문법은 “간단히 넘긴다”고 말한다.[^89]

또 HTML 태그에 class="title" 같은 것이 붙는 것을 보여주며 이를 “속성 값”이라고 부른다.[^90] 그리고 부모 태그 안에 자식 태그가 여러 개 들어가면 부모/자식 관계라고 설명한다.[^91]

화자는 이 정도만 이해해도 “HTML을 거의 다 정복”한 것이라고 표현한다.[^92]

3.12 “해커가 될 수 있다”: 크롬 개발자도구(검사)로 프론트엔드 수정 체험[^93]

화자는 HTML을 이해하면 “놀랍게도 해커가 될 수 있다”며, 네이버 뉴스 페이지를 예로 “해킹” 시연을 한다.[^93]

진행 순서:

1. 네이버 뉴스(IT 뉴스 등 아무 기사)로 들어간다.[^94]
2. 우클릭 → “검사”를 누른다.[^95]
3. 오른쪽에 HTML 코드가 보이고, 마우스를 움직이면 어떤 코드가 어떤 화면 영역을 나타내는지 하이라이트되며 “이게 프론트엔드 코드”라는 감각을 얻는다.[^96]
4. 요소 선택 버튼으로 제목 영역을 찍으면, 예를 들어 span 태그 안에 기사 제목 텍스트가 들어있는 걸 확인한다.[^97]
5. 그 텍스트를 지우고 “조코딩 채널 구독자 70만 달성” 같은 문구로 바꾸면 화면의 기사 제목이 실제로 바뀌어 보인다.[^98]
6. 이미지도 src 주소를 바꾸면 다른 이미지(예: 자신의 사진)로 바뀐다고 보여준다.[^99]

3.12.1 “진짜 해킹”이 아닌 이유: 내 브라우저(프론트)만 바뀐 것[^100]

화자는 많은 사람이 오해할 수 있다고 말하며, 방금 행동은 “프론트엔드 단에서만 조작”한 것이라고 명확히 한다.[^100]

구조 설명:

• 지금 조작한 것은 내 컴퓨터(내 브라우저)에 내려온 프론트엔드 화면이다.[^101]
• 다른 사람은 서버(백엔드)로부터 원본 데이터를 받아 오므로, 백엔드가 뚫리지 않는 한 다른 사람 화면에는 영향이 없다.[^102]

결론적으로 “이건 내 화면만 바꾼 것”이며, 프론트엔드를 바꾸면 내 화면이 바뀌는 정도까지는 가능하다는 체험으로 정리한다.[^103]

3.13 CSS는 이렇게 작동한다: 특정 요소를 지정해 색 등 스타일을 바꾼다[^104]

CSS를 “꾸미는 것”으로 다시 연결하며, HTML로 표시된 글씨(예: 사과)를 CSS 문법으로 color: red 같은 규칙을 주면 실제로 반영된다고 설명한다.[^104]

또한 특정 요소를 id/class 등으로 지정해 “apple은 red, gray는 purple”처럼 각각 다르게 스타일을 적용할 수 있다고 말한다.[^105] 여기서도 강조점은 세부 문법이 아니라,

• CSS로 요소를 지정하고
• 원하는 시각적 속성을 바꿀 수 있다 정도의 큰 개념이다.[^106]

[m 문법을 외우기보다 ‘CSS로 요소를 바꿀 수 있다’는 조작 가능성에 초점을 둔다][^106]

3.14 JavaScript로 할 수 있는 일: 브라우저 조작 + HTML/CSS 변화, 그리고 “이벤트”[^107]

자바스크립트는 “동작 처리”라고 했던 설명을 확장한다.[^107]

자바스크립트로 가능한 것:

1. 브라우저 직접 조작: 경고창 띄우기, 주소창 이동(구글→네이버), 새로고침, 뒤로/앞으로 가기 등[^108]
2. HTML/CSS 변화: 버튼 클릭 시 제목이 바뀌는 등 화면 요소의 상태를 변경[^109]

여기서 이벤트(event) 개념을 소개한다.

• 이벤트는 “발생하면 이렇게 해라”라는 조건 트리거로 이해하면 되고,[^110]
• 예를 들어 “버튼을 클릭했을 때 사이트가 파란색으로 바뀐다” 같은 상황이 이벤트 기반 변화다.[^111]

화자는 여기까지 이해하면 프론트엔드는 “사실상 끝”이라고 말한다.[^112]

3.14.1 Java와 JavaScript는 다르다: “햄 vs 햄스터” 비유[^113]

자주 하는 착각(“자바에 뭘 추가하면 자바스크립트?”)을 짚으며, 둘은 아예 다른 언어라고 강조한다.[^113]

비유:

• 햄과 햄스터는 앞글자가 같지만 완전히 다르다.[^114]
• 자바와 자바스크립트도 이름이 비슷할 뿐, 용도/정체가 다르다.[^115]

3.15 생성된 index.html을 다시 읽어보기: style(=CSS)와 바이브 코딩 감각 재강조[^116]

화자는 앞서 ChatGPT가 만들어준 index.html 코드를 다시 불러와, 이제는 코드가 조금 읽히는 상태가 되었을 거라고 말한다.[^116]

예를 들어:

• style 태그 안에 CSS 문법이 들어있고,[^117]
• color나 background 같은 속성, 색상 코드(#...)로 색을 입력하는 방식, 폰트 설정 등이 보인다고 언급한다.[^118]

그리고 다시 “이제 바이브 코딩 시대”를 반복하며, “이 느낌이 느껴지면 성공”이라고 재차 강조한다.[^10]

3.16 ChatGPT로 JavaScript 포함 웹앱 만들기: “로또 번호 추천” 실습[^119]

이제 자바스크립트가 들어간 예제를 만들기 위해 ChatGPT로 돌아가며 “코딩은 다 ChatGPT 시킬 것”이라고 말한다.[^119]

화자는 학습자가 이제 지식이 생겼으니 “구체적으로 입력할 수 있다”고 한다.[^120] 예시 프롬프트:

• “index.html 파일 안에 버튼을 누르면 로또 번호를 추천해 주는 웹사이트 코드를 만들어 줘.”[^121]

여기서 핵심은:

• 버튼 클릭이라는 이벤트가 있고 → 자바스크립트 동작이 필요하다는 점을 학습자가 이해한 상태에서 요청한다는 것[^122]

ChatGPT가 생성한 코드의 구성 요소를 짚는다:

• style 태그 안은 CSS 문법[^123]
• 아래쪽 script 태그 안에는 자바스크립트 로직이 들어감[^124]
• function(함수) 같은 “동작 작업”이 들어 있다는 정도만 느낌으로 이해하면 된다고 말한다.[^125]

또한 HTML/CSS/JS를 하나의 파일 안에 다 넣을 수 있다고 설명한다.[^126]

적용:

1. 코드 복사[^127]
2. 메모장에서 전체 선택(Ctrl+A) 후 삭제[^128]
3. 붙여넣기 후 저장[^129]
4. 브라우저에서 로또 번호 추첨기 사이트가 만들어지고, “번호 추천 받기”를 누르면 번호가 나온다.[^130]
5. 누를 때마다 번호가 바뀌며, 이를 통해 JS의 동작 개념(누르면 바뀜)을 확인한다.[^131]

화자는 다시 한 번 역할을 연결해 정리한다:

• 꾸미는 것 CSS
• 뼈대 HTML
• 누르면 바뀌는 것 자바스크립트[^132]

[h 이 실습은 ‘AI가 만든 코드를 읽지 못해도, 역할과 위치(style/script)를 구분해 수정 요구를 할 수 있다’는 감각을 목표로 한다][^124]

3.17 “한 번에 5게임 나오게” 요구사항 변경: 대화 맥락을 이용해 AI가 수정한다[^133]

로또 번호가 한 번에 하나만 나오는 것을 보고 “아쉽다, 다섯 개 게임이 한 번에 나왔으면” 하는 개선 욕구를 예로 든다.[^133]

여기서 강조는 “사람이 코딩할 필요 없다 → AI에게 시키면 된다”이다.[^134]

방법:

• 이전 채팅 내역이 남아 있어 AI가 맥락을 이해하고 있다는 점을 활용한다.[^135]
• “버튼을 누르면 로또 번호가 한 번에 다섯 개씩 나오도록 수정해 줘”라고 더 구체적으로 입력한다.[^136]

결과:

• ChatGPT가 “다섯 게임 추천” 형태로 코드를 수정해 준다.[^137]
• 다시 코드를 복사해 index.html에 붙여넣고 저장/열기 하면, 이제 추천을 누를 때마다 “다섯 개가 한 번에” 나오고 보너스 번호 포함으로 나온다고 확인한다.[^138]

화자는 이를 통해 “원하는 대로 다 바꿀 수 있다”, “프론트엔드 단에서 돌아가는 건 다 만들 수 있다”고 말한다.[^139]

[!TIP] 바이브 코딩식 수정 루프

1. “원하는 변화”를 문장으로 떠올린다 → 2) 이전 맥락이 있는 채팅창에 “~하도록 수정해줘”라고 쓴다 → 3) 새 코드로 덮어쓰기 → 4) 새로고침으로 확인.[^135]

3.18 다음 진도: 배포(Deploy) — 로컬 파일의 한계와 ‘서버’의 필요[^140]

화자는 “다음 진도는 더 재밌다”며 배포로 넘어간다.[^140]

현재 상태의 문제:

• 만든 사이트는 “내 컴퓨터에서만” 돌아간다.[^141]
• 파일을 클릭해야만 열리고, 주소도 C드라이브/.../index.html 같은 로컬 경로다.[^142]
• 즉, 인터넷 주소가 아니고 다른 사람이 접속할 수 없다.[^143]

이를 해결해 “사람들이 쓰게 하려면” 방법이 필요하다고 말하며, 극단적/비현실적 방법으로 “내 컴퓨터를 들고 다니며 보여주기”를 농담처럼 든다.[^144]

현실적인 선택지는 크게 두 가지라고 정리한다.[^145]

1. 내 컴퓨터를 서버로 만들기: 내 PC가 켜져 있고, IP 주소로 사람들이 접속해서 파일을 받아가게 한다.[^146]
   • 단점: 복잡함, 해킹 불안, PC가 꺼지면 사이트가 죽음, 항상 켜놔야 함.[^147]
2. 외부 컴퓨터(클라우드) 빌리기: 전문적으로 24시간 운영되는 서버에 내 HTML 파일을 올려 서비스한다.[^148]

화자는 요즘은 1번 방식은 잘 안 쓰며, 2번 클라우드 방식을 많이 쓴다고 말한다.[^149]

3.19 클라우드/데이터센터 설명: 24시간 365일 운영되는 외부 서버에 올린다[^150]

화자는 “미국 데이터 센터를 짓는다” 같은 뉴스를 예로 들며 클라우드의 물리적 배경을 설명한다.[^150]

• 큰 시설에 컴퓨터(서버)들이 있고,[^151]
• 오래 켜두면 뜨거워지므로 냉각/환기 등으로 관리하며,[^152]
• 24시간 365일 내내 돌린다.[^153]

여기에 “컴퓨터 하나를 빌려” 내 HTML 파일을 올리는 것이 초보자가 접근하기 쉬운 방법이라고 말한다.[^154]

또한 영화에서 해커가 이런 곳을 해킹하는 장면이 나오는 이유를 연결한다:

• 내 컴퓨터가 아니라 “다른 곳에 켜 둔 컴퓨터”를 서빙에 쓰기 때문이고,[^155]
• 만약 그 서버가 털리면 회원/개인정보 같은 진짜 데이터가 털릴 수 있다는 점을 암시한다.[^156]

3.20 배포(Deploy)란 무엇인가: 외부 서버에 올려 누구나 접속하게 만드는 행위[^157]

서버 개념을 이해한 뒤 “올리는 행위”를 배포라고 정의한다.[^157]

논리 전개:

• 내 PC는 항상 켜두기 어렵다.[^158]
• 그래서 외부의 24시간 서버(클라우드)를 빌린다.[^159]
• 거기에 HTML 파일을 얹어두면 누구나 접속해 받아가서 내 사이트를 이용한다.[^160]
• 이때 내 PC는 직접 노출되지 않으니 “내 컴퓨터는 털릴 일이 없다”는 식으로 설명한다.[^161]

또한 대표적인 클라우드 기업/서비스를 나열한다:

• AWS(아마존 웹서비스)[^162]
• Microsoft Azure(에저)[^163]
• Google Cloud[^164]
• 그 외 Netlify, Vercel, Cloudflare Pages 등[^165]

3.21 Cloudflare Pages로 무료 배포 실습: 가입 → Pages → 프로젝트 생성 → 폴더 업로드 → Deploy → Visit[^166]

화자는 여러 클라우드 중 오늘은 Cloudflare Pages를 쓸 것이라고 한다.[^166] 수업 자료에 배포 주소가 있으니 그 링크로 들어가 가입하라고 안내한다.[^167]

3.21.1 가입 절차: 이메일로 회원가입[^168]

“여러분이 지금 하셔야 될 것”은 가입하기이며, 이메일과 비밀번호로 회원가입이 가능하다고 말한다.[^168]

3.21.2 왜 Cloudflare Pages인가: 무료 플랜의 무제한 대역폭(트래픽)[^7]

“이걸 왜 쓰냐”가 가장 중요하다며,[^169] 다른 서비스도 많고 뭘 쓰든 상관은 없지만 Cloudflare의 강점은 다음이라고 주장한다.[^7]

• 무료 플랜에서도 unlimited bandwidth 제공[^7]
• “전 세계 인구가 다 들어와도” Cloudflare가 버텨주면 비용은 공짜[^170]

[c Cloudflare Pages 선택의 핵심 근거로 ‘무료 플랜 무제한 트래픽’을 제시한다][^7]

3.21.3 Pages 메뉴 위치: Workers & Pages → Create application[^171]

가입 후 메인에서 왼쪽 메뉴의 “Build 아래”에 Compute (and AI) / Workers & Pages가 있고, Pages에서 웹사이트를 올릴 수 있다고 안내한다.[^171]

오른쪽에 “Create application” 버튼이 있으며,[^172] 여기서 중요한 분기점을 강조한다.

3.21.4 “Workers”를 누르면 안 되는 이유: 과금 위험[^173]

Create 화면에서 Workers 배포 영역이 있는데, 화자는 “여기(Workers) 이용하시면 안 됩니다”라고 경고한다.[^173] 이유는:

• Workers는 사용량이 커지면(예: “60억 인구가 한 번에 들어가”) 돈이 많이 나올 수 있다는 것.[^174]

대신 정적인 HTML만 배포하고 무료로 운영하고 싶다면,

• “Looking for Pages?” 영역의 “Get started” 버튼을 클릭해야 Pages로 배포된다고 말한다.[^175]

[!WARNING] 배포 화면에서의 선택 실수 방지 Workers가 아니라 Pages로 들어가야 “정적 HTML 무료 배포” 목적에 맞고, 트래픽 폭증 시 과금 리스크를 피할 수 있다는 취지로 설명한다.[^174]

3.21.5 프로젝트 생성과 업로드 단위: “폴더”를 올려야 한다, index.html 파일명 요구[^176]

Pages에서 Get started 후,

• 프로젝트 이름을 입력하고(Create project),[^176]
• 파일/폴더를 업로드하는 화면으로 간다.[^177]

이때 단일 파일만 올리는 것이 아니라, 폴더를 만들어 그 안에 파일을 넣어 업로드해야 한다고 강조한다.[^178]

또한 파일 이름은 반드시 index.html이어야 한다고 말한다.[^179] (정적 사이트의 기본 엔트리 파일 규칙을 강조하는 맥락)

3.21.6 Deploy site → 전 세계 배포 → Visit로 공개 URL 확인[^16]

폴더를 올린 뒤 “Deploy site”를 누르면 전 세계 배포가 된다고 설명한다.[^16] 배포 후 프로젝트에서 “Visit”을 누르면 pages 도메인 경로로 배포된 사이트가 잘 뜨는 것을 볼 수 있다고 한다.[^180]

화자는 이를 “전 세계 무제한 트래픽 공짜”라고 다시 요약하며,[^181] 지금까지 한 일을 다음처럼 정리한다.

• 내 컴퓨터에서만 돌던 프론트엔드(정적 HTML)를[^182]
• 24시간 돌아가는 Cloudflare라는 클라우드 서비스에 얹어[^183]
• 전 세계 누구나 접속해 이용 가능하게 만들었고[^184]
• 가장 중요한 건 비용이 공짜라는 점[^185]

3.21.7 Cloudflare 장애가 인터넷에 미치는 영향: 중앙 의존 구조의 취약성[^186]

마지막으로 “Cloudflare가 맛이 가면 전 세계 인터넷이 마비”된다는 사례를 언급한다.[^186] 최근 여러 서비스들이 장애를 겪었던 경험을 상기시키며, 그 이유가 많은 서비스가 이런 구조(특정 클라우드/인프라 의존) 위에 있기 때문이라고 말한다.[^187]

결론적으로 “인터넷 세계가 생각보다 취약”하다는 메시지로 마무리한다.[^188]

4. 핵심 통찰[^189]

1. [h 초보자에게 가장 큰 장벽은 문법이 아니라 ‘환경 구축/설치/회원가입’이며, 그래서 메모장 같은 최소 도구로 시작하는 전략이 유효하다고 본다] [^59]
2. [h 웹서비스 이해의 출발점은 ‘프론트(클라이언트) vs 백(서버)’라는 추상화이며, 로그인 예시처럼 데이터 흐름으로 설명하면 비전공자도 큰 그림을 잡을 수 있다] [^28]
3. [h 바이브 코딩의 핵심은 “역할을 구분할 줄 아는 정도의 지식”과 “AI에게 구체적으로 요구사항을 말하는 능력”의 결합이다] [^120]
   • 실행:
     • “버튼 클릭 시 ~가 바뀌게”처럼 이벤트-결과 형태로 요구사항을 말해보기[^122]
     • “한 번에 5개 나오게”처럼 출력 형식/개수를 구체화해 수정 요청하기[^136]
4. [h 크롬 개발자도구로 HTML을 ‘바꿔 보이는’ 경험은, 프론트엔드가 결국 내 브라우저에서 렌더링되는 코드라는 감각을 주며 프론트/백 분리 이해에 도움을 준다] [^96]
5. [c 로컬 파일을 ‘웹서비스’로 만들려면 배포가 필수이며, 배포는 24/7 서버(클라우드)에 올려 전 세계가 접속하게 만드는 과정이다] [^157]
   • 실행:
     • Pages 같은 정적 호스팅에서 index.html을 엔트리로 올리고 Deploy/Visit로 URL을 확인[^179]
6. [h 무료 운영을 강조할 때도 “어디에 배포하느냐(Workers vs Pages)”에 따라 과금 구조가 달라질 수 있으므로, 서비스 유형(정적/동적)을 구분하는 것이 중요하다는 경고가 포함된다] [^174]
7. [m 대형 클라우드(예: Cloudflare) 의존이 커질수록, 한 곳의 장애가 광범위한 서비스 장애로 번질 수 있다는 ‘인터넷 인프라 취약성’ 관점이 마지막에 제시된다] [^186]

5. 헷갈리는 용어 정리[^190]

IT 프로덕트: 검색, SNS, 스트리밍, 게임, 대화형 AI 등 인터넷/소프트웨어로 제공되는 서비스 전반을 가리키는 말로 사용된다.[^17]
프론트엔드(클라이언트): 사용자가 보는 화면 단에서 동작하는 부분(브라우저에서 렌더링되는 영역)로 설명된다.[^27]
백엔드(서버): 사용자 눈에 보이지 않는 뒷단에서 데이터 조회/검증/처리를 담당하는 부분으로 설명된다.[^31]
DB(데이터베이스): 회원 목록처럼 백엔드가 조회하는 데이터 저장소 맥락으로 언급된다.[^31]
HTML: 화면의 구조/뼈대를 만드는 언어로 설명된다.[^50]
CSS: HTML 요소를 꾸미는(색/폰트/배경/크기 등) 스타일 언어로 설명된다.[^52]
JavaScript: 클릭 등 이벤트에 반응해 동작을 만들고, 브라우저/HTML/CSS를 변화시키는 언어로 설명된다.[^108]
이벤트(Event): “발생하면 이렇게 해라”라는 트리거 조건(예: 버튼 클릭 시 색 변경)으로 설명된다.[^110]
배포(Deploy): 내 PC가 아닌 외부 서버(클라우드)에 파일을 올려 전 세계가 접속할 수 있게 만드는 행위로 정의된다.[^157]
클라우드 / 데이터센터: 24시간 365일 운영·관리되는 외부 서버 인프라(냉각/환기 등 포함)로 설명된다.[^150]
Cloudflare Pages: 정적 웹사이트(HTML 등)를 업로드해 전 세계에 배포하는 서비스로 소개되며, 무료 플랜의 무제한 대역폭을 강점으로 든다.[^7]
Cloudflare Workers: 배포 메뉴에서 Pages가 아닌 다른 영역으로 소개되며, 사용량이 커지면 과금이 커질 수 있어(“60억 인구가 접속”) 주의하라고 경고한다.[^174]

---

참고(콘텐츠 정보)[^191]

• 제목: 코딩이 이렇게 쉬웠나? 바이브 코딩 왕기초로 평생 무제한 무료 웹 서비스 개발하기[^191]
• 채널: 조코딩 JoCoding[^191]
• 길이: 24분 17초[^191]
• 링크: https://www.youtube.com/watch?v=77ZT6H1Kpa8[^191]
• 키워드(제공됨): 개발자, 코딩, 강의, 바이브코딩, ai, 부트캠프, 창업, 1인[^191]

[^2]: @[00:05] "이런 웹을 채피티 시켜 가면서 만들 수가 있다." / @[00:07] "뭐 해 줘, 딸깍..." [^3]: @[00:21] "IT 프로덕이 실제로 어떻게 생겼는지 구조를 먼저 보고..." [^4]: @[01:17] "크게 IT 프로덕은 프론트 엔드... 백핸드..." / @[01:36]~@[02:08] 로그인 흐름 설명 [^5]: @[18:39] "배포를 들어가 보도록 하겠습니다." [^6]: @[18:48] "C드라이브... index.html..." / @[20:45] "외부... 클라우드 서버를 빌려..." [^7]: @[22:00]~@[22:17] "프리 플랜으로도 unlimited bandwidth... 비용은 공짜" [^8]: @[00:21]~@[00:25] "구조를 먼저 보고... 소개" [^9]: @[06:22] "개발 환경은 메모장을 쓰겠습니다." / @[10:04] "GPT... 접속" / @[21:25] "클라우드 플레어 페이지스..." [^10]: @[00:02] "이 느낌이 느껴지시면은 성공" / @[15:42]~@[15:46] 동일 메시지 반복 [^11]: @[02:25]~@[02:37] "프런트핸드... 백핸드... 개념을 이해" [^12]: @[04:16]~@[04:25] "HTML, CSS, 자바스크립트... 세 개" [^13]: @[22:56]~@[23:26] 프로젝트 생성/업로드/Visit 흐름 [^14]: @[00:21] 이후 전체 진행 흐름(개념→실습→AI→배포) [^15]: @[10:34]~@[10:51] 코드 복사→붙여넣기→저장→새로고침 [^16]: @[23:18] "디플로이 사이트 누르면은 전 세계 배포" [^17]: @[00:25]~@[00:48] IT 프로덕트 개념 소개 [^18]: @[00:29] "구글... 검색" [^19]: @[00:33]~@[00:39] "인스타그램... SNS" [^20]: @[00:43] "채지 GPT... 대화" [^21]: @[00:43]~@[00:48] "넷플릭스..." [^22]: @[00:43]~@[00:48] "리그오브레전드..." [^23]: @[00:48]~@[00:53] "이번 5주 과정을 끝낸다..." [^24]: @[00:57]~@[01:07] "클론... 직접... 내놓는 것도" [^25]: @[01:07]~@[01:17] "추상화... 큰 프레임워크..." [^26]: @[01:17]~@[01:33] 프론트/백 용어 대응 [^27]: @[01:23]~@[01:33] "보는 화면 단... 안 보이는 뒷단" [^28]: @[01:36] "네이버에 로그인한다..." [^29]: @[01:50]~@[01:56] 아이디/비번 입력 후 로그인 [^30]: @[01:56]~@[02:00] 프론트→백으로 정보 전달 [^31]: @[02:00]~@[02:04] 회원 목록 조회 [^32]: @[02:08] 로그인 성공 화면 [^33]: @[02:12]~@[02:21] "서버가 털려... 백핸드가 털린" [^34]: @[02:40]~@[02:43] "프론트... 백핸드 만드는 걸 배울" [^35]: @[02:43]~@[02:45] 인터넷에 올리고 결제 추가 구현 [^36]: @[02:48]~@[02:51] "돈을 안 받는다 하면 자선 사업" [^37]: @[02:55]~@[03:00] "광고... 구글 에드센스" [^38]: @[03:00]~@[03:09] "결제... 글로벌 결제... 스트라이프" [^39]: @[03:19]~@[03:26] "DB 없어도... 백핸드 로직 없어도" [^40]: @[03:26]~@[03:29] "프론트엔드 백엔드로 구성" [^41]: @[03:33]~@[03:39] 웹서비스/웹개발 정의 [^42]: @[03:43]~@[03:46] "왜 하냐?" [^43]: @[03:46]~@[03:50] 익숙함 [^44]: @[03:50]~@[03:54] 전 세계 공개가 어렵지 않음 [^45]: @[04:02]~@[04:10] 백엔드 난이도/프론트 먼저 [^46]: @[04:25]~@[04:28] "언어를 세 개나" [^47]: @[04:28]~@[04:34] "문법은 몰라도... 역할만" [^48]: @[04:39]~@[04:45] AI에게 코드 만들어 달라 [^49]: @[04:45]~@[04:48] "AI 시대 알 필요 없다" [^50]: @[04:52]~@[05:07] "HTML... 뼈대" [^51]: @[04:59]~@[05:04] 로그인 페이지 구성 예 [^52]: @[05:12]~@[05:25] "CSS... 꾸미는 역할" [^53]: @[05:17]~@[05:22] 색/배경/입력창 예시 [^54]: @[05:35]~@[06:01] "자바스크립트... 동작 처리" [^55]: @[05:40]~@[05:46] 비번 오류 메시지 예 [^56]: @[05:54]~@[05:57] 성공/실패 로직 [^57]: @[05:49]~@[06:01] 동적 처리/설계 [^58]: @[06:04]~@[06:10] 뼈대/꾸밈/신경 비유 [^59]: @[06:16]~@[06:22] "회원 가입... 설치... 제일 어렵" [^60]: @[06:22]~@[06:29] 메모장 사용 [^61]: @[06:32]~@[06:36] "이해하는 데... 메모장" [^62]: @[06:36]~@[06:40] "메모장과 채치피pt" [^63]: @[06:43]~@[06:52] 태그 구조 설명 [^64]: @[06:56]~@[07:00] 꺾쇠 입력 방법 [^65]: @[07:01]~@[07:12] H1 의미 [^66]: @[07:16]~@[07:29] index.html 생성 [^67]: @[07:29]~@[07:35] 확장자 질문 [^68]: @[07:38]~@[07:46] 점 없는 파일 사례 [^69]: @[07:46]~@[07:51] 탐색기 [^70]: @[07:51]~@[07:55] 옵션/보기 [^71]: @[07:55]~@[07:59] 확장명 숨기기 해제 [^72]: @[08:04]~@[08:12] 이름 바꾸기 .html [^73]: @[08:18]~@[08:25] 맥 텍스트 에디터/노트 아님 [^74]: @[08:28]~@[08:35] 플레인 텍스트/저장 [^75]: @[08:35]~@[08:46] 파일 열고 코드 작성 [^76]: @[08:48]~@[09:03] H1 안녕 작성 [^77]: @[09:10]~@[09:23] 저장의 중요성 [^78]: @[09:26]~@[09:39] 크롬으로 열어 실행 [^79]: @[09:41]~@[09:55] 버튼 추가/새로고침 [^80]: @[10:00]~@[10:07] "사람... 코딩하는 시대 지났다" / ChatGPT 접속 [^81]: @[10:13]~@[10:16] 조코딩 소개 홈페이지 요청 [^82]: @[10:29]~@[10:34] "깔끔한... HTML 파일" [^83]: @[10:34]~@[10:37] 코드 복사 [^84]: @[10:37]~@[10:41] 전체 지우고 붙여넣기 [^85]: @[10:41]~@[10:45] 저장 [^86]: @[10:45]~@[10:51] 새로고침 후 완성 [^87]: @[10:51]~@[10:56] "개념 이해... AI 적용" [^88]: @[10:56]~@[11:06] head/style/CSS 언급 [^89]: @[11:06]~@[11:09] CSS는 간단히 넘김 [^90]: @[11:12]~@[11:15] class/속성값 [^91]: @[11:18]~@[11:26] 부모-자식 관계 [^92]: @[11:26]~@[11:28] "HTML 거의 다 정복" [^93]: @[11:28]~@[11:35] "해커... 네이버 뉴스 해킹" [^94]: @[11:35]~@[11:45] 뉴스 기사 진입 [^95]: @[11:45]~@[11:49] 우클릭 검사 [^96]: @[11:49]~@[11:58] 코드/영역 이해 [^97]: @[12:05]~@[12:09] span 태그 제목 [^98]: @[12:09]~@[12:21] 제목 텍스트 변경 [^99]: @[12:27]~@[12:37] 이미지 src 변경 [^100]: @[12:42]~@[12:51] "진짜 해킹... 프론트엔드만" [^101]: @[12:55]~@[12:58] 내 브라우저 프론트 조작 [^102]: @[12:58]~@[13:08] 다른 사람 영향 없음 [^103]: @[13:00]~@[13:11] "제 화면만 바꾼" [^104]: @[13:16]~@[13:35] CSS로 색 바꿈 예 [^105]: @[13:35]~@[13:40] 아이디별 색 반영 [^106]: @[13:40]~@[13:50] "문법 필요 없습니다... 큰 개념" [^107]: @[13:53]~@[14:03] 자바스크립트 역할 2가지 [^108]: @[14:03]~@[14:12] 경고창/주소 이동/뒤로/앞으로 [^109]: @[14:15]~@[14:24] HTML/CSS 변화 예 [^110]: @[14:27]~@[14:36] 이벤트 정의 [^111]: @[14:36]~@[14:42] 클릭 시 파란색 예 [^112]: @[14:46]~@[14:54] "프론트엔드 끝" [^113]: @[14:54]~@[15:05] 자바 vs 자바스크립트 [^114]: @[15:05]~@[15:11] 햄 vs 햄스터 비유 [^115]: @[15:11]~@[15:18] 이름만 비슷 [^116]: @[15:20]~@[15:31] 코드 다시 보기 [^117]: @[15:29]~@[15:31] style 태그에 CSS [^118]: @[15:31]~@[15:40] color/background/font [^119]: @[15:52]~@[15:57] "코딩은 다 채치T 시킬" [^120]: @[15:57]~@[16:02] "구체적으로 입력" [^121]: @[16:02]~@[16:05] 로또 사이트 요청 [^122]: @[16:10]~@[16:16] 버튼 누르면 동작(이벤트) [^123]: @[16:24]~@[16:31] CSS 문법 느낌 [^124]: @[16:31]~@[16:35] script 태그 [^125]: @[16:35]~@[16:44] function/로직 느낌 [^126]: @[16:52]~@[16:59] 한 파일에 다 넣기 [^127]: @[16:59]~@[17:04] 코드 복사 [^128]: @[17:04] Ctrl+A 전체 선택 [^129]: @[17:04]~@[17:10] 붙여넣기/저장 [^130]: @[17:10]~@[17:16] 로또 번호 추첨기 생성 [^131]: @[17:16]~@[17:21] 누를 때마다 바뀜 [^132]: @[17:21]~@[17:25] 역할 재정리 [^133]: @[17:28]~@[17:32] "아쉬운게... 다섯 개" [^134]: @[17:32]~@[17:35] "사람이 할 필요" [^135]: @[17:39]~@[17:46] 채팅 내역/맥락 [^136]: @[17:46]~@[17:55] "다섯 개씩 나오도록 수정" [^137]: @[17:55]~@[17:57] 수정 반영 [^138]: @[18:11]~@[18:27] 다섯 게임/보너스 포함 확인 [^139]: @[18:27]~@[18:34] "원하는 대로... 프론트엔드 단..." [^140]: @[18:36]~@[18:41] 다음 진도 배포 [^141]: @[18:41]~@[18:42] "내 컴퓨터에서" [^142]: @[18:45]~@[18:52] 로컬 경로 [^143]: @[18:52]~@[18:54] 인터넷 주소 아님 [^144]: @[18:56]~@[19:08] 컴퓨터 들고 다니기 예 [^145]: @[19:10]~@[19:13] "두 가지 방법" [^146]: @[19:15]~@[19:34] 내 컴퓨터를 서버로/IP 접속 [^147]: @[19:38]~@[19:52] 불안/꺼지면 종료/항상 켜야 [^148]: @[19:19]~@[19:21] 외부 컴퓨터 빌리기 [^149]: @[19:51]~@[19:54] 요즘은 클라우드 [^150]: @[19:54]~@[20:09] 데이터센터 설명 [^151]: @[20:01]~@[20:04] 전문 관리 컴퓨터 [^152]: @[20:04]~@[20:06] 냉각/환기 [^153]: @[20:06]~@[20:09] 24/365 [^154]: @[20:09]~@[20:15] 컴퓨터 빌려 HTML 올리기 [^155]: @[20:23]~@[20:30] 영화 해커 비유 [^156]: @[20:30]~@[20:33] 회원/개인정보 털림 [^157]: @[21:00]~@[21:04] "올리는 행위... 배포" [^158]: @[20:45]~@[20:52] 내 컴퓨터 항상 켜기 어려움 [^159]: @[20:45]~@[20:52] 외부 서버 빌림 [^160]: @[20:52]~@[21:00] 누구나 접속 [^161]: @[20:45]~@[20:52] "내 컴퓨터는 털릴 일이 없죠" [^162]: @[21:04]~@[21:08] AWS [^163]: @[21:08]~@[21:12] Azure [^164]: @[21:12]~@[21:14] Google Cloud [^165]: @[21:14]~@[21:19] Netlify/Vercel/Cloudflare Pages [^166]: @[21:21]~@[21:27] "클라우드 플레어 페이지스" [^167]: @[21:27]~@[21:32] 수업 자료/주소 [^168]: @[21:35]~@[21:44] 이메일 회원가입 [^169]: @[21:49]~@[21:56] "왜 쓰냐 가장 중요" [^170]: @[22:08]~@[22:17] "전 세계 인구... 공짜" [^171]: @[22:17]~@[22:28] 메뉴 위치 [^172]: @[22:28]~@[22:31] Create application [^173]: @[22:34]~@[22:37] "여기 이용하시면 안 됩니다" [^174]: @[22:37]~@[22:40] "60억... 돈이 많이" [^175]: @[22:43]~@[22:52] Pages Get started [^176]: @[22:56]~@[22:59] 프로젝트 네임/생성 [^177]: @[22:59] "여기에다가 파일로 폴더를 올려야" [^178]: @[23:02]~@[23:06] 폴더 만들어 넣기 [^179]: @[23:06]~@[23:09] "이름은 반드시... 인덱스.html" [^180]: @[23:22]~@[23:26] Visit로 확인 [^181]: @[23:26]~@[23:30] "무제한 트래픽 공짜" [^182]: @[23:36]~@[23:40] "내 컴퓨터에서만..." [^183]: @[23:40]~@[23:44] "클라우드 플레어... 얹어" [^184]: @[23:36]~@[23:44] "전 세계 누구나" [^185]: @[23:36]~@[23:44] "가장 중요한 건 공짜" [^186]: @[23:48]~@[23:56] "클라우드 플레어... 전 세계 인터넷 마비" [^187]: @[23:56]~@[23:58] "다 요런 구조" [^188]: @[24:00]~@[24:06] "인터넷 세계가... 취약" [^189]: @[00:00]~@[24:06] 전 내용 종합 [^190]: @[00:25]~@[23:56] 용어들이 등장하는 구간 전반 [^191]: 사용자 제공 메타데이터(제목/채널/길이/링크/키워드)