HTML 직접 보기
<!doctype html>
<html lang="ko"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>PPT 원문·프롬프트 찾기</title><style>*{box-sizing:border-box}body{margin:0;background:#f5f3ee;color:#203d35;font:17px/1.6 system-ui,-apple-system,"Noto Sans KR",sans-serif}main{max-width:900px;margin:36px auto;padding:32px;background:#fff;border:1px solid #dcded5;border-radius:24px}h1{font-size:clamp(26px,5vw,40px);line-height:1.3;letter-spacing:-.03em;margin:8px 0 12px}h2{font-size:22px}p{margin:10px 0}.eyebrow{font-size:13px;font-weight:800;letter-spacing:.09em;color:#547060}.muted{color:#68786f;font-size:15px}.note{padding:14px 18px;background:#fff2c8;border-radius:12px;color:#4f481f}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0}button,input,textarea,select{font:inherit;border-radius:10px;padding:12px 16px}button{background:#245445;color:white;border:0;cursor:pointer;font-weight:700}button.secondary{background:#edf2ed;color:#245445}button:disabled{opacity:.45;cursor:wait}input,textarea,select{border:1px solid #bacbc2;background:#fff;color:#203d35;max-width:100%}input,textarea{flex:1;min-width:180px}textarea{width:100%;min-height:150px;resize:vertical}label{font-weight:700}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #e3ae35;outline-offset:3px}.card{border:1px solid #dce5df;padding:18px;border-radius:16px;margin:12px 0}.big{font-size:clamp(36px,8vw,72px);font-weight:800;text-align:center;padding:40px 0;background:#edf3ed;border-radius:18px}.badge{display:inline-block;background:#ecf2ed;color:#245445;padding:4px 10px;border-radius:7px;font-size:14px}.todo{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #e7ece8}.todo span{flex:1;overflow-wrap:anywhere}.todo.done span{text-decoration:line-through;color:#809086}.error{color:#9c382a}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:16px/1.7 system-ui,"Noto Sans KR",sans-serif}.hidden{display:none}nav{display:flex;gap:8px;flex-wrap:wrap}@media(max-width:600px){main{margin:0;padding:22px 18px;border-radius:0;border:0;min-height:100vh}.todo{flex-wrap:wrap}button{min-height:48px}}</style></head><body><main><div class="eyebrow">원본 자료 · 1–6강 186쪽</div><h1>PPT 원문에서 찾아보기</h1><p>원본 슬라이드의 문장을 그대로 모았습니다. PPT의 요청문, 설명과 예시를 검색할 수 있어요. 그림과 배치는 발표 PDF에서 확인하세요.</p><label for="search">찾을 말</label><div class="row"><input id="search" placeholder="예: 만들어, Supabase, 로그인"><select id="lecture"><option value="0">전체 6강</option><option value="1">1강</option><option value="2">2강</option><option value="3">3강</option><option value="4">4강</option><option value="5">5강</option><option value="6">6강</option></select></div><p id="count" class="muted" role="status" aria-live="polite"></p><div class="row"><button id="previous" class="secondary">이전 원문</button><button id="next" class="secondary">다음 원문</button></div><h2 id="label"></h2><pre id="text"></pre><section class="card"><h2>PPT에 들어 있는 영상과 주소</h2><p>1강 19쪽: 바이브코딩 영상 · 4:40~6:10, 한국어 자막<br>https://www.youtube.com/watch?v=LCEmiRjPEtQ&t=280s</p><p>2강 32쪽: Google Antigravity 소개 · 2분 24초, 한국어 자동 자막<br>https://www.youtube.com/watch?v=SVCBA-pBgt0</p><p>3강 6쪽 설치 주소: antigravity.google.com<br>실습에는 현재 공식 사이트 antigravity.google을 연결했습니다.</p><p>4강 14–15쪽 GitHub 주소는 ‘내이름’이 들어간 예시입니다. 본인의 실제 저장소 주소로 바꿔 사용하세요.</p><p class="muted">영상은 연수 단계의 자료 링크로 열 수 있습니다. 별도 첨부 파일은 원본 PPT에 없습니다.</p></section></main><script>const slides=[{"lecture": 1, "page": 1, "text": "Copyright 2026. Hanuipyo all rights reserved.\n1강\n코딩의 역사와 바이브코딩\n천공카드에서 자연어까지\n바이브코딩 6강 과정"}, {"lecture": 1, "page": 2, "text": "코딩의 역사와 바이브코딩\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 오늘의 차례\n1. 코딩의 역사\n2. 프로그래밍 언어의 발전\n3. 바이브코딩의 등장\n4. 프롬프트 작성과 시연\n5. 실습\n오늘은 \n말만 합니다\n. 코드는 한 줄도 쓰지 않습니다."}, {"lecture": 1, "page": 3, "text": "1. 코딩의 역사\nCopyright 2026. Hanuipyo all rights reserved.\n1. 코딩의 역사\n천공카드 · 알고리즘 · 해석기관 · 배선 프로그래밍"}, {"lecture": 1, "page": 4, "text": "1. 코딩의 역사\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 코딩의 출발점\n지금 무언가를 만들려면 노트북 한 대면 됩니다. 처음에는 무엇이 필요했을까요?\n300년에 걸친 변화입니다. 한 단계씩 살펴보겠습니다."}, {"lecture": 1, "page": 5, "text": "1. 코딩의 역사\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 천공카드: 기계가 읽은 최초의 명령\n18세기 프랑스에서 직조기에 무늬를 지시하려고\n종이에 구멍을 뚫은 것이 천공카드입니다\n19세기 초 자카르 직조기로 실용화됩니다\n오르골, 자동 피아노도 같은 원리입니다\n구멍이 있느냐 없느냐가 곧 0과 1입니다\n천공카드(punched card) · 기계가 읽을 수 있는 최초의 저장·입력 장치입니다."}, {"lecture": 1, "page": 6, "text": "1. 코딩의 역사\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 천공카드의 확산: 1890년 미국 인구 조사\n손으로 세던 통계를 기계가 집계하기 시작합니다\n시험 볼 때 쓰는 OMR 카드도 같은 발상에서 이어진 것입니다\n무엇을\n 처리할지는 정해줄 수 있었지만,\n어떻게\n 처리할지까지는 정해줄 수 없었습니다.\n→ 그래서 다음 발상이 필요해집니다"}, {"lecture": 1, "page": 7, "text": "1. 코딩의 역사\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 알고리즘: 절차를 적는다는 발상\n자료가 아니라 순서를 적는 것입니다.\n아침에 교실 문을 연다\n 창문이 닫혀 있는가? 예 → 연다 아니오 → 그냥 둔다\n 칠판이 지워져 있는가? 예 → 그냥 둔다 아니오 → 지운다\n 사람이 들어온다\n 명단에 있는 이름인가? 예 → 표시한다 아니오 → 확인한다\n알고리즘은 '무엇'이 아니라 '어떻게'를 적은 것입니다\n조건과 절차가 빠짐없이 적혀 있으면, 판단 없이도 그대로 실행됩니다."}, {"lecture": 1, "page": 8, "text": "1. 코딩의 역사\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 해석기관: 만들어지지 못한 최초의 컴퓨터\n19세기 중반 영국, 톱니바퀴와 증기기관으로\n굴러가는 계산 기계가 설계됩니다\n입력·저장·처리·출력을 모두 갖춘 구조였고\n이 기계를 위한 프로그램까지 쓰였습니다\n그러나 기술과 예산의 한계로\n제작에 실패합니다\n개념이 기술보다 100년 앞서 있었습니다"}, {"lecture": 1, "page": 9, "text": "1. 코딩의 역사\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 배선 프로그래밍: 하드웨어를 직접 조작하던 시기\n최초의 전자식 컴퓨터에는\n프로그램을 담아둘 기억 장치가 없었습니다\n다른 일을 시키려면\n회로 자체를 다시 짜야 했습니다\n한 프로그램을 올리는 데\n며칠에서 몇 주가 걸렸습니다\n프로그램을 바꾸는 일이 물리적인 배선 작업이었습니다"}, {"lecture": 1, "page": 10, "text": "1. 코딩의 역사\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 프로그램 내장 방식: 소프트웨어의 탄생\n처리 장치는 모든 일을 할 수 있게 미리 만들어 두고\n무엇을 할지는 기억 장치에 따로 넣습니다\n1940년대 후반, 이 구조를 따르는 컴퓨터가 등장합니다\n프로그래밍이 하드웨어의 일에서 \n소프트웨어의 일\n로 넘어왔습니다.\n여기서부터 '코딩'이라는 말이 성립합니다"}, {"lecture": 1, "page": 11, "text": "2. 프로그래밍 언어의 발전\nCopyright 2026. Hanuipyo all rights reserved.\n2. 프로그래밍 언어의 발전\n기계어 · 어셈블리어 · 고수준 언어 · 비주얼 코딩"}, {"lecture": 1, "page": 12, "text": "2. 프로그래밍 언어의 발전\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 기계어: 0과 1\n10110000 01100001\n00000011 00000101\n11101011 11111110\n01001000 10001001\n사람이 직접 쓰던 코드입니다\n종이에 0과 1을 적고 → 천공카드에 옮기고 → 기계에 넣는 것이 코딩이었습니다\n기계의 작동 원리를 아는 극소수만 읽을 수 있었습니다\n여기서부터 사람 쪽으로 한 단계씩 올라갑니다"}, {"lecture": 1, "page": 13, "text": "2. 프로그래밍 언어의 발전\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 어셈블리어: 기계어의 줄임말\n0과 1 뭉치를 사람이 읽을 수 있는 짧은 낱말로 바꿔 부르기 시작합니다\n다만 기계어와 일대일로 대응하는 줄임말이라, 근본은 같습니다\n10110000 01100001 → MOV AL, 61h\n읽을 수는 있게 됐지만, 여전히 기계 구조에 맞춘 표기였습니다"}, {"lecture": 1, "page": 14, "text": "2. 프로그래밍 언어의 발전\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 고수준 언어: 사람의 문법으로\n기계어\n10110000\n01100001\n→\n어셈블리어\nMOV AL, 61h\n→\n고수준 언어\nprint(\"안녕\")\n포트란과 코볼을 시작으로 60년대 베이직, 70년대 C,\n90년대 파이썬·자바스크립트로 이어집니다\n기계에 가까울수록 저수준, 사람 말에 가까울수록 고수준입니다\n같은 동작을 세 가지 방식으로 적은 것입니다."}, {"lecture": 1, "page": 15, "text": "2. 프로그래밍 언어의 발전\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 비주얼 코딩: 글자가 사라진 단계\n블록을 끌어다 맞추는 코딩. 초등학생도 합니다\n남이 만들어 둔 부품을 가져다 쓰는 것이 기본이 됐습니다\n처음부터 끝까지 직접 짜지 않아도 됩니다\n여기까지가 지금까지의 이야기입니다.\n이제 그다음 단계를 보겠습니다."}, {"lecture": 1, "page": 16, "text": "2. 프로그래밍 언어의 발전\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 한 장으로 본 코딩의 역사\n천공카드\n배선\n기계어\n어셈블리어\n고수준 언어\n비주얼 코딩\n자연어\n↑ 지금 여기\n단계가 올라갈수록 사람이 기계에 맞춰야 하는 양이 줄어듭니다.\n이 정도를 \n추상화 수준\n이라고 부릅니다. 저수준 언어·고수준 언어의 '수준'이 이것입니다."}, {"lecture": 1, "page": 17, "text": "3. 바이브코딩의 등장\nCopyright 2026. Hanuipyo all rights reserved.\n3. 바이브코딩의 등장\n자연어 프로그래밍과 소프트웨어 3.0"}, {"lecture": 1, "page": 18, "text": "3. 바이브코딩의 등장\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 자연어 프로그래밍의 등장\n블록도 문법입니다. 배워야 합니다\n그다음 단계는 아무것도 배우지 않는 것입니다. 그냥 말로 하는 것이죠\n바이브코딩\n이 과정에서 계속 할 일의 이름입니다"}, {"lecture": 1, "page": 19, "text": "3. 바이브코딩의 등장\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 소프트웨어 3.0: 카파시의 진단\n▶ 「소프트웨어 3.0의 등장」 영상 보기\nY Combinator 공식 · 4:40 ~ 6:10 구간 (1분 30초)\n위 버튼을 눌러 영상을 함께 보겠습니다\n영상의 핵심 세 줄\n소프트웨어를 쓰는 방식이 또 한 번 바뀌고 있다\n이제는 영어(자연어)로 컴퓨터에 지시한다\n프로그래밍을 할 수 있는 사람이 많아진다"}, {"lecture": 1, "page": 20, "text": "3. 바이브코딩의 등장\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 바이브코딩의 정의\n결과를 말로 설명하면 코드는 \n기계가 대신 써 주는 방식\n달라진 것\n달라지지 않은 것\n문법을 외울 필요가 없다\n무엇을 만들지는 내가 정해야 한다\n처음부터 끝까지 짜지 않아도 된다\n결과가 맞는지는 내가 봐야 한다\n오래 걸리던 일이 몇 분이 된다\n틀렸을 때 다시 말해줘야 한다\n기계가 코드를 쓰게 되었을 뿐 \n무엇을 만들지 정하는 일\n은 그대로 \n사람\n 몫입니다"}, {"lecture": 1, "page": 21, "text": "3. 바이브코딩의 등장\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 흔한 오해 세 가지\n\"개발자가 필요 없어진다\"\n→\n오히려 판단할 사람이 더 필요해집니다\n\"아무 말이나 해도 된다\"\n→\n말이 엉성하면 결과도 엉성합니다\n\"완벽한 프로그램이 나온다\"\n→\n첫 결과는 초안입니다. 고치는 것까지가 과정입니다"}, {"lecture": 1, "page": 22, "text": "4. 프롬프트 작성과 시연\nCopyright 2026. Hanuipyo all rights reserved.\n4. 프롬프트 작성과 시연\nGemini Canvas 실행과 생성 요청"}, {"lecture": 1, "page": 23, "text": "4. 프롬프트 작성과 시연\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 프롬프트의 구체성\n\"게임 만들어줘\"\n\"이런 게임을 만들어줘\"\nvs\n머릿속에 있는 걸 빠짐없이 꺼내려면, 나눠서 적는 편이 쉽습니다\n다음 장에서 그 형태를 보여드리겠습니다."}, {"lecture": 1, "page": 24, "text": "4. 프롬프트 작성과 시연\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 생성 요청의 네 가지 항목\n1. 무엇을\n← 결과물이 무엇인지\n2. 어떻게\n← 눌렀을 때 무슨 일이 일어나는지\n3. 모습\n← 색, 크기, 분위기\n4. 형태\n← 웹 페이지 / 파일 / 표\n정해진 형식이 있는 건 아닙니다. 이 강의에서는 이렇게 쓰겠지만,\n하다 보면 각자 편한 방식이 생기고 \n그때는 그쪽이 맞습니다."}, {"lecture": 1, "page": 25, "text": "4. 프롬프트 작성과 시연\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 항목별 중요도\nAI가 알아서 정해 버리는 것\n내가 말해야만 하는 것\n화면 크기, 색, 배치\n무엇을 다루는 것인지\n부가 기능\n몇 개인지, 어떻게 움직이는지\n→ 3. 모습\n→ 1. 무엇을 · 2. 어떻게\n말하지 않은 건 AI가 대신 정합니다\n만들어 주지 않는 것이 아니라, 자기 마음대로 만들어 줍니다.\n빠뜨리기 쉬운 것은 오히려 1번 무엇을입니다. 뽑기라고만 하면 무엇을 뽑는지 AI가 정해 버립니다."}, {"lecture": 1, "page": 26, "text": "4. 프롬프트 작성과 시연\nCopyright 2026. Hanuipyo all rights reserved.\n✔ Gemini Canvas의 개념\n일반 채팅\n코드를 글자로 보여줌\n내가 옮겨서 실행해야 함\nCanvas\n만든 것을 그 자리에서\n돌려서 보여줌\n오늘은 이것만 알면 됩니다\n다음 장에서 켜는 법을 보겠습니다."}, {"lecture": 1, "page": 27, "text": "4. 프롬프트 작성과 시연\nCopyright 2026. Hanuipyo all rights reserved.\n✔ Canvas 실행: 휴대폰 기준\n1. 입력창 아래 추가(+)\n2. Canvas 선택\n목록에서 Canvas를 찾습니다\n입력창에 Canvas 표시가 붙습니다\n이 표시가 보이면 준비 끝입니다."}, {"lecture": 1, "page": 28, "text": "4. 프롬프트 작성과 시연\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 결과 확인: 열기와 전체 화면\n1. 「열기」\n2. ⋯ → 「전체 화면」\n안 누르면 설명 글만 보입니다\n안 누르면 아래가 잘려 보입니다"}, {"lecture": 1, "page": 29, "text": "4. 프롬프트 작성과 시연\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 전체 화면이 필요한 이유\n그냥 열었을 때\n전체 화면\n아래 버튼이 잘려\n보이지 않습니다\n「룰렛 돌리기」 버튼까지\n보입니다\n버튼이 화면 밖에\n있으면 고장 난 게 아니라\n화면이 좁은 겁니다."}, {"lecture": 1, "page": 30, "text": "4. 프롬프트 작성과 시연\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 시연: 프롬프트 입력\n1. 무엇을: 10명 중 한 명을 뽑는 랜덤 뽑기 페이지\n2. 어떻게: 가상의 이름 10개를 미리 넣고, 버튼을 누르면 이름이\n 빠르게 돌아가다가 3초 뒤 한 명에서 멈춘다. 뽑힌 이름은 크게\n 보여주고, 다시 누르면 다시 뽑는다\n3. 모습: 휴대폰 세로 화면에 꽉 차게, 버튼은 아래쪽에 크게\n4. 형태: 웹 페이지 한 장\n폰에 넣은 화면\n말로 넣어도 됩니다. 네 줄을 순서대로 읽으면 그대로 들어갑니다."}, {"lecture": 1, "page": 31, "text": "4. 프롬프트 작성과 시연\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 시연: 결과\n만들어진 화면\n버튼을 누른 결과\n화면은 사람마다\n다릅니다\n.\n색도 글씨도 이름도\n다를 겁니다.\n그게 정상입니다.\n결과는 \n매번 다르게 나옵니다\n. 되기만 하면 성공입니다"}, {"lecture": 1, "page": 32, "text": "5. 실습\nCopyright 2026. Hanuipyo all rights reserved.\n5. 실습\n한 문장 입력과 네 항목 입력의 비교"}, {"lecture": 1, "page": 33, "text": "5. 실습\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 실습 1: 한 문장 입력\n간단한 뽑기 프로그램 만들어줘\n이 한 줄만 그대로 넣어 보세요\nCanvas를 켜고 입력 → 「열기」 → ⋯ → 「전체 화면」\n다 되신 분은 옆자리를 한 번 봐 주세요\n지금 해 보세요"}, {"lecture": 1, "page": 34, "text": "5. 실습\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 실습 2: 네 항목으로 입력\n1. 무엇을: 10명 중 한 명을 뽑는 랜덤 뽑기 페이지\n2. 어떻게: 가상의 이름 10개를 미리 넣고, 버튼을 누르면 이름이 빠르게\n 돌아가다가 3초 뒤 한 명에서 멈춘다. 뽑힌 이름은 크게 보여주고,\n 다시 누르면 다시 뽑는다\n3. 모습: 휴대폰 세로 화면에 꽉 차게, 버튼은 아래쪽에 크게\n4. 형태: 웹 페이지 한 장\n직접\n 쳐 보세요\n읽는 것과\n쳐 보는 것은\n다릅니다.\n말로 읽어\n넣어도 됩니다.\n같은 도구, 같은 시간, 다른 결과"}, {"lecture": 1, "page": 35, "text": "5. 실습\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 두 결과의 비교\n한 문장으로\n나눠 써서\n점심 메뉴를 뽑고 있습니다\n사람 10명 중에서 뽑고 있습니다"}, {"lecture": 1, "page": 36, "text": "5. 실습\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 차이의 정리\n한 문장으로\n나눠 써서\n점심 메뉴를 뽑는다\n사람 10명 중에서 뽑는다\n항목 8개\n정확히 10명\n룰렛이 돈다\n3초 돌다가 멈춘다\nAI가 정했다\n내가 정했다\n못 만들어서 문제가 아니라 \n내가 원한 게 아니라서\n 문제입니다.\n말을 안 하면 AI가 대신 정합니다. 화려하게 만들어 주지만 내가 의도한 것은 아닙니다."}, {"lecture": 1, "page": 37, "text": "코딩의 역사와 바이브코딩\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 오늘의 정리\n1\n코딩은 300년 동안 꾸준히 쉬워졌고, 지금은 말로 하는 단계까지 왔다\n2\n말하지 않은 건 AI가 대신 정한다. 무엇을·어떻게는 내가 말한다\n3\n첫 결과는 초안이다"}, {"lecture": 1, "page": 38, "text": "코딩의 역사와 바이브코딩\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 다음 시간 예고\n만든 것이 어디에 저장되는가\n이에 따라 도구가 나뉩니다.\n채팅창 안\n→\n브라우저 안\n→\n내 컴퓨터 폴더\n→\n웹 서버\n↑ 오늘 실습한 곳\n다음 시간에 \n네 가지를 하나씩\n 살펴보겠습니다"}, {"lecture": 2, "page": 1, "text": "Copyright 2026. Hanuipyo all rights reserved.\n2강\n수정 프롬프트와 개발 도구\n챗봇형 · 캔버스형 · 편집기형 · 명령줄형\n바이브코딩 6강 과정"}, {"lecture": 2, "page": 2, "text": "수정 프롬프트와 개발 도구\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 오늘의 차례\n1. 첫 결과가 초안인 이유\n2. 수정 요청의 형태\n3. 실습: 직접 만들기와 고치기\n4. 도구를 나누는 기준\n5. 개발 도구의 네 가지 형태\n6. 배포에 쓰이는 서비스\n7. 다음 차시 예고\n실습을 앞에 두었습니다. 손을 먼저 움직인 뒤에 이론을 봅니다"}, {"lecture": 2, "page": 3, "text": "1. 첫 결과가 초안인 이유\nCopyright 2026. Hanuipyo all rights reserved.\n1. 첫 결과가 초안인 이유\n반복 수정"}, {"lecture": 2, "page": 4, "text": "1. 첫 결과가 초안인 이유\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 1강의 결론\n코드를 못 써도 만들 수 있다.\n다만 무엇을 만들지는 내가 정해야 한다.\n그런데 아무리 잘 말해도, 한 번에 끝나지는 않습니다.\n오늘 배울 것은 만드는 법이 아니라 \n고치는 법\n입니다"}, {"lecture": 2, "page": 5, "text": "1. 첫 결과가 초안인 이유\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 초안으로서의 첫 결과\n사람에게 일을 부탁할 때도 마찬가지입니다\n아무리 자세히 부탁해도 처음 받은 결과물은 대개 조금 다릅니다\n다른 점을 말해주고, 고치고, 다시 보고\n이것이 \n정상적인 과정\n입니다. 잘못된 것이 아닙니다.\n한 번에 완성되기를 기대하는 쪽이 오히려 이상한 기대입니다"}, {"lecture": 2, "page": 6, "text": "1. 첫 결과가 초안인 이유\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 수정 단계의 차이\n처음 만드는 말\n사람마다 크게 다르지 않습니다\n두 번째, 세 번째 말\n여기서 차이가 납니다\n만드는 일은 한 번이고, 고치는 일은 계속됩니다\n그래서 오늘 시간의 절반을 고치기에 씁니다."}, {"lecture": 2, "page": 7, "text": "1. 첫 결과가 초안인 이유\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 흔한 사고: 전체 재생성\n\"버튼 색을 파란색으로 바꿔줘\"\n↓\n화면 전체가 다시 만들어져 있음\n원인은 \n무엇을 그대로 둘지\n 말하지 않은 것입니다\n고치는 말에는 바꿀 것뿐 아니라 두어야 할 것도 들어가야 합니다."}, {"lecture": 2, "page": 8, "text": "2. 수정 요청의 형태\nCopyright 2026. Hanuipyo all rights reserved.\n2. 수정 요청의 형태\n세 가지 항목과 한 번에 하나씩"}, {"lecture": 2, "page": 9, "text": "2. 수정 요청의 형태\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 고칠 대상: 1강에서 만든 화면\n지난 시간에 만드신 뽑기 화면입니다.\n이 화면을 고치는 말을 \n예시로 살펴보겠습니다\n이 화면에서 고치고 싶을 만한 것들\n「추첨 시작하기」 버튼을 더 크게\n글자 색이 마음에 들지 않는다\n뽑힌 이름이 기록으로 남았으면\n지금은 \n따라 하지 않으셔도 됩니다\n. 직접 하는 것은 다음 부입니다"}, {"lecture": 2, "page": 10, "text": "2. 수정 요청의 형태\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 수정 요청의 세 가지 항목\n지금 만든 프로그램을 다음과 같이 \n고쳐 주세요\n.\n1. 어디를\n← 바꿀 대상을 정확히 지정\n2. 어떻게\n← 어떤 상태가 되면 좋겠는지\n3. 나머지는 그대로\n← 가장 자주 빠뜨리는 줄\n이 줄이 빠지면 \n전체가 새로 만들어집니다"}, {"lecture": 2, "page": 11, "text": "2. 수정 요청의 형태\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 첫 줄: 만들기와 고치기의 구분\n\"만들어 주세요\"\n없던 것을 만들 때\n새 대화에서 맨 처음\n\"고쳐 주세요\"\n만든 것을 다듬을 때\n이어지는 대화에서\n1강에서 만들 때 쓴 형태에는 이 줄이 없었습니다. 새 대화의 첫 마디이기 때문입니다.\n이것도 정해진 형식은 아닙니다\n. 편한 대로 쓰시면 됩니다."}, {"lecture": 2, "page": 12, "text": "2. 수정 요청의 형태\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 모호한 요청과 구체적인 요청\n모호한 요청\n구체적인 요청\n\"좀 더 예쁘게 해줘\"\n지금 만든 프로그램을 다음과 같이 고쳐 주세요.\n\n1. 시작 버튼을\n2. 화면 가운데로 옮기고 크게 만들어 주세요\n3. 나머지 화면 구성과 기능은 그대로 두세요\n무엇이 예쁜 것인지는 \n사람마다 다릅니다\n고쳐 달라는 말에 판단이 들어가면, 판단은 AI가 합니다."}, {"lecture": 2, "page": 13, "text": "2. 수정 요청의 형태\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 한 번에 한 가지\n세 가지를 한꺼번에\n고쳐 달라고 하면\n어디서 틀어졌는지\n알 수 없게 됩니다\n1. 하나 고친다\n2. 확인한다\n3. 다음 하나를 고친다\n고칠 때는 \n한 번에 한 가지\n. 확인하고 다음.\n빨라 보이는 쪽이 결국 더 오래 걸립니다."}, {"lecture": 2, "page": 14, "text": "3. 실습: 직접 만들기와 고치기\nCopyright 2026. Hanuipyo all rights reserved.\n3. 실습: 직접 만들기와 고치기\n면접 시뮬레이터 만들기 → 세 번 고치기 → 각자 만들기"}, {"lecture": 2, "page": 15, "text": "3. 실습: 직접 만들기와 고치기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 첫 단계: 초안 만들기\n고치려면 고칠 것이 있어야 합니다. 먼저 하나를 만듭니다.\n1. 무엇을: 면접 연습을 도와주는 면접 시뮬레이터 페이지\n2. 어떻게: 시작 버튼을 누르면 면접 질문이 하나씩 나온다.\n 답을 입력하고 다음을 누르면 다음 질문으로 넘어간다.\n 질문 5개가 끝나면 답변을 정리해서 보여준다\n3. 모습: 휴대폰 세로 화면에 꽉 차게, 글자 크게\n4. 형태: 웹 페이지 한 장\n넣는 순서\n1. 새 대화를 연다\n2. Canvas를 켠다\n3. 네 줄을 넣는다\n4. 「열기」를 누른다\n5. ⋯ → 「전체 화면」\n지금 그대로 입력해 만들어 두세요. 네 줄이라 1분이면 충분합니다."}, {"lecture": 2, "page": 16, "text": "3. 실습: 직접 만들기와 고치기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 만들어진 초안\n상관없습니다\n. 저마다 다르게 나왔을 겁니다.\n면접 질문이 \n하나씩 나오기만 하면\n 오늘 실습은 다 하실 수 있습니다\n오늘 고칠 것 세 가지\n1. 답변 입력 화면\n2. 면접관 말투\n3. 마지막 정리 화면\n이것이 \n초안\n입니다. 지금부터 세 번 고쳐서 완성합니다"}, {"lecture": 2, "page": 17, "text": "3. 실습: 직접 만들기와 고치기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 첫 번째 수정: 기능 더하기\n지금 만든 프로그램을 다음과 같이 고쳐 주세요.\n1. 어디를: 답변을 입력하는 화면에\n2. 어떻게: 답변하는 데 걸린 시간을 초 단위로 세어서 보여주세요\n3. 나머지 화면과 기능은 그대로 두세요\n답변 시간이 초 단위로 표시됩니다\n문장이 짧으니 말로 넣으셔도 됩니다.\n지금 해 보세요"}, {"lecture": 2, "page": 18, "text": "3. 실습: 직접 만들기와 고치기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 두 번째 수정: 말투 바꾸기\n지금 만든 프로그램을 다음과 같이 고쳐 주세요.\n1. 어디를: 면접관의 말투를\n2. 어떻게: 딱딱한 존댓말을 편안하고 응원하는 말투로 바꿔주세요\n3. 질문 내용과 기능은 그대로 두세요\n바뀌기 전\n최근 가장 깊이 있게 몰입해 본 기술적 도전이나\n프로젝트 경험을 소개해 주세요.\n바뀐 뒤\n기능만이 아니라 \n성격\n도 말로 바꿉니다"}, {"lecture": 2, "page": 19, "text": "3. 실습: 직접 만들기와 고치기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 세 번째 수정: 각자의 한 가지\n지금 만든 프로그램을 다음과 같이 고쳐 주세요.\n1. 어디를: (바꾸고 싶은 곳)\n2. 어떻게: (어떤 상태가 되면 좋겠는지)\n3. 나머지는 그대로 두세요\n예를 들어 이렇게 넣으면\n예시 하나\n마지막 정리 화면에\n잘한 점 한 가지를 칭찬하는\n문장을 넣어주세요\n무엇이든 하나만\n 골라 보세요\n정답은 없습니다."}, {"lecture": 2, "page": 20, "text": "3. 실습: 직접 만들기와 고치기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 세 번 고친 결과\n처음 만든 것\n세 번 고친 것\n세 마디로\n여기까지\n 왔습니다\n여기까지 전부 휴대폰으로 하셨습니다\n이제 \n각자 하나\n를 만들어 보겠습니다"}, {"lecture": 2, "page": 21, "text": "3. 실습: 직접 만들기와 고치기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 직접 만들어 보기\n지금부터 \n10분\n 동안\n각자 하나를 만들어 보세요\n무엇을 만들지 정하는 것부터가 실습입니다.\n떠오르지 않으면 이 중에서 골라 보세요\n할 일을 적고 지우는 메모장\n버튼을 누르면 나오는 가위바위보\n숫자를 맞히는 놀이\n오늘 물 마신 횟수를 세는 페이지\n1. 무엇을:\n2. 어떻게:\n3. 모습:\n4. 형태:\n1번과 2번만 각자 채우시면 됩니다.\n3번은 “휴대폰 세로 화면에 꽉 차게, 글자 크게”\n4번은 “웹 페이지 한 장”을 그대로 쓰셔도 됩니다.\n마음에 안 들면 \n고치기 형태\n로\n한 번 더 보내 보세요"}, {"lecture": 2, "page": 22, "text": "3. 실습: 직접 만들기와 고치기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 만들어 보셨나요\n생각한 대로 나왔다\n→\n말이 충분했던 것입니다\n다르게 나왔다\n→\n무엇을과 어떻게 중 어느 쪽이 비었는지 보세요\n아예 안 됐다\n→\n한 문장으로 줄여서 다시 넣어 보세요\n가장 오래 걸리는 일은 \n무엇을 만들지 정하는 것\n입니다"}, {"lecture": 2, "page": 23, "text": "4. 도구를 나누는 기준\nCopyright 2026. Hanuipyo all rights reserved.\n4. 도구를 나누는 기준\n결과물이 저장되는 위치"}, {"lecture": 2, "page": 24, "text": "4. 도구를 나누는 기준\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 두 가지 질문\n방금 만드신 것,\n지금 어디에 있습니까?\n오늘은 휴대폰으로 했는데,\n왜 3강부터는 컴퓨터가 필요할까요?\n두 질문의 답이 같습니다. 그것이 오늘 남은 시간의 주제입니다"}, {"lecture": 2, "page": 25, "text": "4. 도구를 나누는 기준\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 결과물이 저장되는 위치\n채팅창 안\n글자로만 남음\n브라우저 안\n그 자리에서 돌아감\n내 컴퓨터 폴더\n파일로 남음\n↓\n웹 서버\n인터넷으로 접속할 수 있는 곳\n도구를 고르는 일은 \n결과물을 어디에 저장할지\n 정하는 일입니다\n실제 저장 구조는 이보다 복잡하지만 도구를 고르는 데는 이 네 가지로 충분합니다."}, {"lecture": 2, "page": 26, "text": "4. 도구를 나누는 기준\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 이 기준으로 본 강의 순서\n결과물이 저장되는 위치\n해당 강의\n채팅창 안\n지나갑니다\n브라우저 안\n1·2강 ← 지금 여기\n내 컴퓨터 폴더\n3강\n웹 서버\n4강부터\n1강과 2강은 브라우저 안에서 진행했습니다\n남은 차시는 표의 아래쪽 순서대로 진행합니다."}, {"lecture": 2, "page": 27, "text": "5. 개발 도구의 네 가지 형태\nCopyright 2026. Hanuipyo all rights reserved.\n5. 개발 도구의 네 가지 형태\n챗봇형 · 캔버스형 · 편집기형 · 명령줄형"}, {"lecture": 2, "page": 28, "text": "5. 개발 도구의 네 가지 형태\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 네 가지 형태의 비교\n형태\n화면에 있는 것\n결과물이 저장되는 곳\n설치\n이 과정에서\n챗봇형 (Chatbot)\n대화창 하나\n채팅창 안\n없음\n휴대폰\n캔버스형 (Canvas)\n대화창 + 미리보기\n브라우저 안\n없음\n휴대폰\n편집기형 (IDE)\n파일 목록, 코드, AI 대화\n내 컴퓨터 폴더\n필요\n컴퓨터\n명령줄형 (CLI)\n검은 화면에 글자만\n내 컴퓨터 폴더\n필요\n컴퓨터\n이름은 수십 개여도 \n형태는 네 가지\n입니다\n빨간 선 위의 둘은 \n브라우저만 있으면 됩니다\n아래 둘은 \n내 컴퓨터에 설치해야 합니다\n아래 둘도 휴대폰에서 못 할 것은 없지만 화면이 좁아 고생스럽습니다. 이 과정에서는 컴퓨터로 합니다."}, {"lecture": 2, "page": 29, "text": "5. 개발 도구의 네 가지 형태\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 첫째: 챗봇형 (Chatbot)\n말 그대로 대화창 하나입니다. 평소 쓰는 그 화면이죠\n코드를 물어보면 글자로 답해 줍니다\n따로 배울 것이 없고 설명을 잘해 줍니다\n대표적인 것: Gemini\n개념을 이해할 때, 짧은 코드 한 조각이 필요할 때 씁니다\n한 서비스가 \n두 형태를 다 가질 수 있습니다\nGemini도 Canvas를 켜면 캔버스형이 됩니다"}, {"lecture": 2, "page": 30, "text": "5. 개발 도구의 네 가지 형태\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 둘째: 캔버스형 (Canvas)\n대화창 옆에 화면이 하나 더 생깁니다\n만든 것이 그 자리에서 실행됩니다\n설치가 필요 없고, 결과를 즉시 볼 수 있고, 고치기가 빠릅니다\n다만 한 화면을 넘어서는 규모에는 맞지 않습니다\n오늘 쓰신 Gemini Canvas\n오늘 폰으로 하신 것이 \n바로 이 형태\n입니다\nCanvas는 구글이 이 기능에 붙인 이름입니다. 서비스마다 이름이 다릅니다."}, {"lecture": 2, "page": 31, "text": "5. 개발 도구의 네 가지 형태\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 셋째: 편집기형 (IDE)\n프로그램을 만드는 데 필요한 것을 한 화면에 모아 놓은 프로그램입니다\n화면이 세 영역으로 나뉩니다. 내 폴더의 파일 목록, 코드, AI와의 대화입니다\n파일이 내 컴퓨터에 남고, 여러 파일을 한꺼번에 다룹니다\n대신 설치가 필요하고 화면이 복잡하며, 폴더 개념을 알아야 합니다\n여기서부터는 \n컴퓨터로 합니다\n. 내 컴퓨터에 프로그램을 깔아야 하기 때문입니다.\n지금까지는 남의 서비스 안에서 만들었고 이제부터는 \n내 컴퓨터에서\n 만듭니다\n이 과정에서는 3강부터 Antigravity를 씁니다."}, {"lecture": 2, "page": 32, "text": "5. 개발 도구의 네 가지 형태\nCopyright 2026. Hanuipyo all rights reserved.\n✔ IDE라는 말\nIntegrated Development Environment\n통합 개발 환경\n만드는 데 필요한 것들을 \n한 화면에 모아 놓았다\n는 말입니다\n글을 쓸 때 한글 프로그램을 켜는 것과 같습니다. 외우실 필요는 없습니다.\n▶ 「Antigravity 소개」 영상 보기\nGoogle Antigravity 공식 · 2분 24초 · 자막을 켜고 보세요"}, {"lecture": 2, "page": 33, "text": "5. 개발 도구의 네 가지 형태\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 넷째: 명령줄형 (CLI)\n검은 화면에 글자만 있습니다. 버튼도 메뉴도 없습니다\n결과물이 저장되는 곳은 편집기형과 같습니다.\n다른 것은 작업 방식입니다\n편집기형\n명령줄형\n화면에서 직접 확인하며 작업\n명령을 입력하고 결과를 받음\n코드가 바뀌는 과정을 눈으로 봄\n수행한 작업을 글로 출력\n배우면서 할 때, 한 군데씩 고칠 때\n익숙해진 뒤 반복 작업을 시킬 때\n이 과정에서는 \n쓰지 않습니다\n. 이런 것도 있다는 정도면 됩니다\nCLI는 Command Line Interface, 우리말로 명령 줄 방식입니다. 터미널, 콘솔이라고 부르는 그 화면입니다."}, {"lecture": 2, "page": 34, "text": "5. 개발 도구의 네 가지 형태\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 도구를 고르는 세 가지 질문\n1\n나 혼자 한 번 쓸 것인가, 남에게 보여줄 것인가\n2\n한 화면으로 끝나는가, 여러 화면이 필요한가\n3\n정보를 저장해야 하는가\n가장 좋은 도구가 아니라 \n지금 만들려는 것에 맞는 도구\n를 고릅니다\n이 과정의 선택: 1·2강은 캔버스형(휴대폰), 3강부터는 편집기형(컴퓨터)"}, {"lecture": 2, "page": 35, "text": "6. 배포에 쓰이는 서비스\nCopyright 2026. Hanuipyo all rights reserved.\n6. 배포에 쓰이는 서비스\n코드 저장소 · 배포 서비스 · 데이터베이스"}, {"lecture": 2, "page": 36, "text": "6. 배포에 쓰이는 서비스\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 도구가 아니라 서비스\n앞의 네 가지는 도구의 형태였습니다. 여기는 다릅니다.\n종류\n하는 일\n이 과정에서\n언제\n코드 저장소\n코드를 인터넷에 저장하고 이력을 관리\nGitHub\n4강\n배포 서비스\n저장된 코드를 웹 서버에 올려 공개\nVercel\n4강\n데이터베이스\n사용자가 입력한 정보를 저장\nSupabase\n5강\n내 컴퓨터에만 있으면 나만 쓰지만 \n웹 서버에 올리면\n 다른 사람도 쓸 수 있습니다\n지금은 이름만 들어두시면 됩니다. 4강과 5강에서 직접 합니다."}, {"lecture": 2, "page": 37, "text": "6. 배포에 쓰이는 서비스\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 실습 데이터에 관한 원칙\n실습에 쓰는 정보는 \n전부 가상 데이터\n입니다\n실제 이름, 연락처, 주소, 이메일은 어느 단계에서도 넣지 않습니다\n5강부터는 결과물이 인터넷에 올라갑니다\n남에게 보여주고 싶지 않은 내용은 애초에 넣지 않는 편이 안전합니다\n지금 한 번 정해 두면 나중에 지울 일이 없습니다"}, {"lecture": 2, "page": 38, "text": "7. 다음 차시 예고\nCopyright 2026. Hanuipyo all rights reserved.\n7. 다음 차시 예고\n3강부터 하는 일과 준비물"}, {"lecture": 2, "page": 39, "text": "7. 다음 차시 예고\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 3강부터 하는 일\n강\n하는 일\n더 쓰는 서비스\n기기\n3강\n개발 환경을 설치하고 첫 프로그램을 만듭니다\n없음\n노트북\n4강\n코드를 올리고 웹 서버에 배포합니다\n코드 저장소 · 배포 서비스\n노트북\n5강\n데이터베이스를 붙여 자료가 저장되게 합니다\n데이터베이스\n노트북\n6강\n로그인 기능과 접근 권한을 설정합니다\n없음\n노트북\n오늘로 \n브라우저 안\n에서 할 일은 끝났습니다\n다음은 \n내 컴퓨터 폴더\n고 그다음이 \n웹 서버\n입니다"}, {"lecture": 2, "page": 40, "text": "7. 다음 차시 예고\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 다음 시간 준비물\n다음 시간부터는 \n노트북이 있어야 합니다\n. 폰으로는 따라올 수 없습니다.\n노트북만 가져오시면 됩니다. 설치는 3강 첫머리에 함께 합니다\n미리 설치해 보셔도 좋지만, 안 하셔도 괜찮습니다\n사전 준비 안내서의 계정 네 개는 미리 확인해 주세요\n설치는 3강에서 다 같이 합니다"}, {"lecture": 2, "page": 41, "text": "수정 프롬프트와 개발 도구\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 두 차시 정리\n코드를 못 써도 \n만들 수 있습니다\n.\n다만 \n무엇을 만들지\n는 여러분이 정해야 합니다.\n2강까지 수고하셨습니다.\n3강에서는 노트북을 열고 만나겠습니다."}, {"lecture": 3, "page": 1, "text": "Copyright 2026. Hanuipyo all rights reserved.\n3강\n개발 환경 구축과 PRD 작성\nAntigravity 설치 · 프로젝트 폴더 · PRD\n바이브코딩 6강 과정"}, {"lecture": 3, "page": 2, "text": "개발 환경 구축과 PRD 작성\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 결과물이 저장되는 위치\n채팅창 안\n글자로만\n브라우저 안\n그 자리에서 돌아감\n1 · 2강\n내 컴퓨터 폴더\n파일로 남음\n오늘\n웹 서버\n인터넷으로 접속\n5강\n↑\n오늘 처음으로 \n파일이 남습니다\n끝날 때쯤 폴더를 열어 직접 확인해 보겠습니다."}, {"lecture": 3, "page": 3, "text": "개발 환경 구축과 PRD 작성\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 오늘의 차례\n1. 설치와 화면\n2. 프로젝트 폴더와 Agent\n3. PRD로 시작하기\n4. 오늘 만든 것\n앞의 두 부는 준비입니다. 실제로 만드는 것은 세 번째 부입니다"}, {"lecture": 3, "page": 4, "text": "1. 설치와 화면\nCopyright 2026. Hanuipyo all rights reserved.\n1. 설치와 화면\n내려받기 · 화면 구조 · Extension"}, {"lecture": 3, "page": 5, "text": "1. 설치와 화면\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 오늘 사용할 도구\nAntigravity\n구글이 만든 통합 개발 환경 (IDE)\n통합 개발 환경 프로그램을 사용하려면 \n먼저 설치를 해야 합니다\n지난 시간에 살펴본 네 가지 형태 중 편집기형에 해당합니다.\n챗봇형\n캔버스형\n편집기형\n명령줄형\n오늘 사용합니다"}, {"lecture": 3, "page": 6, "text": "1. 설치와 화면\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 내려받아 설치하기\nantigravity.google.com\n내 컴퓨터에 맞는 것 고르기\n▼\n내려받아 설치\n▼\n설치가 끝나면 실행\n윈도우와 맥이 따로 있습니다.\n[샷1]\nAntigravity 다운로드 페이지\n운영체제를 고르는 부분이 보이게\n(이후 단계는 시범으로 대신합니다)\n설치 중에는\n 화면을 그냥 두시면 됩니다"}, {"lecture": 3, "page": 7, "text": "1. 설치와 화면\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 막히는 경우\n여기까지 \n실행되신 분\n, 손 들어 주세요\n내려받기가 안 되면: 다른 브라우저로 한 번 더 해 보세요\n설치를 막는 경고가 뜨면: 손을 들어 주세요. 함께 보겠습니다\n실행이 안 되면: 노트북을 한 번 껐다 켜 주세요\n그래도 안 되면 옆자리와 한 화면을 같이 보시면 됩니다"}, {"lecture": 3, "page": 8, "text": "1. 설치와 화면\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 화면 구성\n[샷2]\nAntigravity 첫 실행 화면 전체\n세 영역이 모두 보이게 · Extension 패널 위치도 함께\nWorkspaces 목록의 개인 폴더 경로는 흐리게 처리\n왼쪽 : 파일 목록\n폴더 안에 무엇이 있는지\n가운데 : 편집기\n코드가 보이는 곳\n오른쪽 : Agent 패널\n말로 시키는 곳\n오른쪽 하나\n만 쓰면 됩니다. 다 외우지 않으셔도 됩니다"}, {"lecture": 3, "page": 9, "text": "1. 설치와 화면\nCopyright 2026. Hanuipyo all rights reserved.\n✔ Extension 설치하기\nExtension 패널 열기\n▼\n검색창에 이름 넣기\n▼\n설치하고 프로그램 다시 켜기\n설치할 것\n하는 일\nLive Server\n브라우저로 띄워 줌\n한국어 언어팩\n메뉴를 한국어로\n언어팩은 필요한 경우에만 설치합니다.\n[샷3]\nExtension 패널을 연 화면\n검색창까지 보이게\n(설치 과정은 시범으로 대신합니다)\n설치 뒤에는 \n프로그램을 다시 켜야\n 적용됩니다"}, {"lecture": 3, "page": 10, "text": "1. 설치와 화면\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 확장 기능 (Extension)\n필요한 기능을 \n확장 기능으로 추가해서\n 씁니다\n사용자마다 설치한 확장 기능이 다릅니다\n설치 직후에는 기본 기능만 들어 있습니다\n확장 기능을 설치해 미리보기, 언어, 편집 기능 등을 추가합니다\n방금 설치한 Live Server도 확장 기능입니다\n다른 사람 화면과 달라 보이는 것은 확장 기능이 달라서입니다"}, {"lecture": 3, "page": 11, "text": "2. 프로젝트 폴더와 Agent\nCopyright 2026. Hanuipyo all rights reserved.\n2. 프로젝트 폴더와 Agent\n폴더 만들기 · Agent 로그인"}, {"lecture": 3, "page": 12, "text": "2. 프로젝트 폴더와 Agent\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 프로젝트 폴더\nAntigravity는 파일이 아니라 폴더 단위로 작업합니다\n폴더를 열면 그 안의 파일만 다룹니다\n폴더 하나가 프로젝트 하나입니다\n1강과 2강에서는 파일을 한 번도 만들지 않았습니다\n오늘 가장 낯선 부분이니 천천히 가겠습니다"}, {"lecture": 3, "page": 13, "text": "2. 프로젝트 폴더와 Agent\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 폴더 두 개 만들기\nWorkspace\n바탕화면에\ntodolist\n그 안에\n앞으로 만드는 것을 여기에 다 모읍니다.\n오늘 만들 것은 안쪽 폴더입니다.\n이름은 \n영문 소문자로 띄어쓰기 없이\n 지어 주세요\n이 폴더의 이름이 코드에서 틀리면 작동하지 않습니다."}, {"lecture": 3, "page": 14, "text": "2. 프로젝트 폴더와 Agent\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 폴더 열기\nAntigravity에서 Open Folder\n▼\n방금 만든 todolist 선택\n프로젝트 폴더를 열었습니다\n이 폴더 안에서 오늘 작업이 이루어집니다\n왼쪽에 \ntodolist\n가 보이는 분, 손 들어 주세요"}, {"lecture": 3, "page": 15, "text": "2. 프로젝트 폴더와 Agent\nCopyright 2026. Hanuipyo all rights reserved.\n✔ Agent 로그인 확인\n오른쪽 Agent 패널 상단 확인\n▼\n구글 프로필 확인\n처음 설치 시 로그인한 계정으로 로그인\n[샷5]\nAgent 패널의 로그인 화면\n어디를 누르는지만 보이게\n계정 정보가 보이면 가릴 것\n우측 하단의 Ask anithing, 으로 시작하는 부분에\n대화를 걸 수 있습니다. 간단한 대화를 걸어 보세요."}, {"lecture": 3, "page": 16, "text": "2. 프로젝트 폴더와 Agent\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 실습 방법\n실습은 \nAgent에게 방법을 묻는 것\n으로 시작합니다\n1. Agent에게 방법을 묻습니다\n▼\n2. Agent가 알려 준 순서를 읽습니다\n▼\n3. 그 순서대로 따라 합니다\n▼\n4. 막히면 화면에 뜬 글을 그대로 붙여넣고 다시 묻습니다\n설치까지는 안내를 따라 직접 했습니다. 지금부터는 이 방법으로 합니다"}, {"lecture": 3, "page": 17, "text": "3. PRD로 시작하기\nCopyright 2026. Hanuipyo all rights reserved.\n3. PRD로 시작하기\nPRD 작성과 제작 요청"}, {"lecture": 3, "page": 18, "text": "3. PRD로 시작하기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 달라지는 것\n지금까지 만든 것\n오늘부터 만드는 것\n화면 한 장\n파일 한 개\n한두 줄로 시켜도\n충분했습니다\n화면이 여러 개\n파일도 여러 개\n시키는 방식이\n달라져야 합니다\n통합 개발 환경에서는 \n더 큰 것\n을 다룹니다"}, {"lecture": 3, "page": 19, "text": "3. PRD로 시작하기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ PRD\nProduct Requirements Document\n제품 요구사항 문서\n만들기 전에 \n무엇을 만들 것인지 먼저 적어 두는\n 문서입니다\n실제 개발에서 쓰는 방식입니다"}, {"lecture": 3, "page": 20, "text": "3. PRD로 시작하기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ PRD에 들어가는 것\n1. 무엇을 만드는가\n2. 누가 쓰는가\n3. 어떤 기능이 있는가\n4. 화면은 몇 개인가\n이 네 가지를 \nAI에게 써 달라고\n 할 겁니다\nPRD도 초안입니다. 나오면 읽어 보고 고쳐서 씁니다"}, {"lecture": 3, "page": 21, "text": "3. PRD로 시작하기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ PRD 요청하기\n할 일 목록(To Do list) 프로그램을 만들려고 합니다.\n먼저 PRD를 작성해 주세요. 특히 다음과 같은 내용을 고려해 주세요.\n1. 무엇을 만드는가\n2. 누가 쓰는가\n3. 어떤 기능이 있는가\n4. 화면은 몇 개인가\n프로그램을 만들 때는 \n반드시 개발요구서부터\n만드는 습관 갖기!"}, {"lecture": 3, "page": 22, "text": "3. PRD로 시작하기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 나온 PRD 읽어 보기\n[샷6]\nAgent가 작성한 PRD\n네 항목이 보이는 부분만 크롭\n글자가 읽혀야 하므로 전체 화면이 아니라 해당 영역만\n내가 생각한 것과 다른 부분이 있으면\n지금 고치면 됩니다\n고치고 싶은 내용을 다음과 같이 말씀하시면 됩니다.\n예) 이미 완료한 일도 체크표시를 한 뒤 \n완료한 목록 등을 통해 아래서 찾을 수 있도록\n만들어 주세요.\n만들기 전에 고치는 편이\n 만든 뒤에 고치는 것보다 간단합니다\n지금은 문서 몇 줄이지만 만든 뒤에는 파일 여러 개를 고쳐야 합니다"}, {"lecture": 3, "page": 23, "text": "3. PRD로 시작하기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 만들어 달라고 하기\n방금 작성한 PRD대로 프로그램을 만들어 주세요.\n요청은 이 한 줄이면 됩니다\n앞에서 문서를 만들어 두었기 때문에 \n길게 설명할 필요가 없습니다\n시간이 조금 걸립니다. 기다리는 동안 왼쪽을 봐 주세요"}, {"lecture": 3, "page": 24, "text": "3. PRD로 시작하기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 파일이 늘어납니다\n비어 있던 폴더에\n파일이 하나씩 생깁니다\n브라우저에서는 볼 수 없던 장면입니다\n파일 이름은 지금 몰라도 됩니다\n여러 개가 생긴다는 것만 보시면 됩니다\n만들어지는 파일\n은 지난 두 차시 동안 볼 수 없었습니다"}, {"lecture": 3, "page": 25, "text": "3. PRD로 시작하기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 열어서 확인하기\nAgent에게 묻기\nAgent 가 브라우저를 자동으로 열어서 확인합니다.\n만약 안되면 왼쪽의 index.html 을 우클릭한 뒤\n‘Open with Live Server’ 를 클릭하세요.\n브라우저가 열리면서 만든 화면이 나옵니다.\n할 일을 두어 개 넣어 보시고, 지우기도 해 보세요.\n여러분들께서 만든 앱은 제 화면과 다른게 당연합니다."}, {"lecture": 3, "page": 26, "text": "3. PRD로 시작하기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 한 번 고쳐 보기\n(바꾸고 싶은 곳)을 (어떻게) 바꿔 주세요.\n나머지는 그대로 두세요.\n글자 크기, 색, 배치 무엇이든 하나만 골라 보세요\n마지막 줄이 없으면 \n전체를 새로 만들어 버립니다\n화면 한 장이던 때와 달리 지금은 파일이 여러 개라 피해가 큽니다\n고쳐지면 브라우저를 새로 고쳐서 확인해 보세요"}, {"lecture": 3, "page": 27, "text": "3. PRD로 시작하기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 옆자리와 다른 화면\n색도 글씨도 배치도 다릅니다\n오늘은 \n파일 이름과 개수까지\n 다를 수 있습니다\n같은 말을 넣어도 매번 다르게 나옵니다\n옆자리 것이 좋아 보인다고 다시 만들지 마세요\n되기만 하면 성공\n입니다. 그게 정상입니다"}, {"lecture": 3, "page": 28, "text": "4. 오늘 만든 것\nCopyright 2026. Hanuipyo all rights reserved.\n4. 오늘 만든 것\n프론트엔드와 백엔드 · 다음 시간"}, {"lecture": 3, "page": 29, "text": "4. 오늘 만든 것\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 프론트엔드와 백엔드\n프론트엔드\n백엔드\n사람이 보는 화면 쪽\n뒤에서 처리하고\n정보를 보관하는 쪽\n오늘 만든 것은 \n프론트엔드만 있습니다\n내 컴퓨터에서만 돌아가고, 다른 사람은 쓸 수 없습니다\n다음 시간에 이것을 \n인터넷에 올립니다\n. 백엔드는 그다음입니다"}, {"lecture": 3, "page": 30, "text": "4. 오늘 만든 것\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 파일이 남았습니다\nAntigravity가 아니라 그냥 폴더를 열어 보세요\n완성된 파일들\n1 · 2강\n완성된 파일 확인 불가\n3강 이후\n사용자 컴퓨터에서 확인 가능\n컴퓨터에서 작업하면\n작업 결과가 파일로 저장됩니다"}, {"lecture": 3, "page": 31, "text": "4. 오늘 만든 것\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 남은 세 차시\n강\n하는 일\n3강\n개발 환경을 설치하고 첫 프로그램을 만듭니다 ← 오늘\n4강\n코드를 올리고 웹 서버에 배포합니다\n5강\n데이터베이스를 붙여 자료가 저장되게 합니다\n6강\n로그인 기능과 접근 권한을 설정합니다\n다음 시간에도 \n같은 노트북\n을 가져오시면 됩니다\n오늘 만든 폴더는 지우지 마시고 그대로 두세요"}, {"lecture": 3, "page": 32, "text": "개발 환경 구축과 PRD 작성\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 오늘의 정리\nPRD를 먼저 작성하고 그것을 바탕으로 만들었습니다\n작업 결과는 \n파일로 저장되었습니다\n3강까지 수고하셨습니다.\n다음 시간부터는 설치할 것이 없습니다."}, {"lecture": 4, "page": 1, "text": "Copyright 2026. Hanuipyo all rights reserved.\n4강\n인터넷에 올리기\n코드 저장소와 배포 서비스\n바이브코딩 6강 과정"}, {"lecture": 4, "page": 2, "text": "인터넷에 올리기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 지금 상태와 오늘\n지금\n내 컴퓨터 폴더 안에만 있습니다\n나만 볼 수 있습니다\n오늘 사이트의 배포가 끝나면\n인터넷 주소가 생깁니다\n주소를 아는 사람이 접속 가능합니다.\n[샷7]\n배포가 끝나고 주소가 나온 화면\n주소가 읽혀야 합니다\n(23쪽에서도 같은 화면을 씁니다)\n친구에게 보낼 수 있는 \n진짜 주소\n입니다"}, {"lecture": 4, "page": 3, "text": "인터넷에 올리기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 오늘의 차례\n1. 배포를 먼저 하는 이유\n2. 계정 준비\n3. 코드 저장소에 올리기\n4. 웹 서버에 배포하기\n5. 다음 강의 안내"}, {"lecture": 4, "page": 4, "text": "1. 배포를 먼저 하는 이유\nCopyright 2026. Hanuipyo all rights reserved.\n1. 배포를 먼저 하는 이유\n아직 기능이 없을 때 올립니다"}, {"lecture": 4, "page": 5, "text": "1. 배포를 먼저 하는 이유\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 올리는 시점\n보통 이렇게 생각합니다\n그래서 이렇게 합니다\n다 만들고\n마지막에 올린다\n마지막에 문제가\n한꺼번에 터집니다\n먼저 올린다\n기능을 하나씩 붙인다\n문제가 생겨도\n방금 붙인 그것이 원인\n배포는 마지막이 아니라 \n두 번째입니다"}, {"lecture": 4, "page": 6, "text": "1. 배포를 먼저 하는 이유\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 오늘 쓰는 두 서비스\n종류\n하는 일\n이 과정에서\n코드 저장소\n코드를 인터넷에 저장하고 이력을 관리\nGitHub\n배포 서비스\n저장된 코드를 웹 서버에 올려 공개\nVercel\n두 서비스는 이어져 있습니다\n코드 저장소에 올려 두면 배포 서비스가 그것을 가져가 웹사이트로 만듭니다\n그래서 저장소에 먼저 올려야 합니다. 순서가 정해져 있습니다"}, {"lecture": 4, "page": 7, "text": "2. 계정 준비\nCopyright 2026. Hanuipyo all rights reserved.\n2. 계정 준비\nGitHub 하나로 묶습니다"}, {"lecture": 4, "page": 8, "text": "2. 계정 준비\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 계정은 GitHub 하나로\nGitHub 계정\n코드 저장소\nVercel (Continue with GitHub)\nSupabase (Continue with GitHub)\nGitHub를 먼저 만들고, 나머지는 그 계정으로 들어갑니다\n아이디를 세 개 외우지 않아도 되고, 나중에 서로 연결하기도 간단합니다."}, {"lecture": 4, "page": 9, "text": "2. 계정 준비\nCopyright 2026. Hanuipyo all rights reserved.\n✔ GitHub 가입하기\nAgent에게 묻기\nGitHub 계정을 만들려고 합니다.\n가입 순서를 알려 주세요.\n안내를 따라가면서 사용자 이름을 확인합니다\n영문 소문자와 숫자로 짓습니다. 한글은 쓸 수 없습니다\n이미 쓰는 이름이면 다른 것을 고릅니다\n나중에 사이트 주소에 들어갈 수 있습니다\n[샷1]\nGitHub 가입 첫 화면\nSign up 버튼이 보이게\n(가입 절차 전체를 찍지 않습니다)\n이메일 인증까지\n 마쳐야 저장소를 만들 수 있습니다\n비밀번호는 메모장에 적어 두세요"}, {"lecture": 4, "page": 10, "text": "2. 계정 준비\nCopyright 2026. Hanuipyo all rights reserved.\n✔ Vercel 가입하기\nAgent에게 묻기\nVercel에 GitHub 계정으로 가입하려고 합니다.\n순서를 알려 주세요.\n안내를 따라가면서 이것만 확인합니다\nContinue with GitHub 로 들어갑니다\nGitHub가 승인을 물으면 승인합니다\n개인용 (Hobby 또는 Personal) 을 고릅니다\n깃허브와 바로 연동이 가능합니다.\n깃허브를 구글로 가입했다고, Vercel 도 구글로 가입하시면 안됩니다!"}, {"lecture": 4, "page": 11, "text": "3. 코드 저장소에 올리기\nCopyright 2026. Hanuipyo all rights reserved.\n3. 코드 저장소에 올리기\n저장소를 만들고 파일을 올립니다"}, {"lecture": 4, "page": 12, "text": "3. 코드 저장소에 올리기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 저장소라는 말\n저장소 (Repository)\n코드를 인터넷에 보관하고\n바뀐 내용을 기록하는 곳\n커밋 (Commit)\n지금 이 상태로\n저장한다는 뜻\n저장소는 줄여서 「레포」라고 부르기도 합니다.\n오늘 여러 번 나오는 말\n이라 한 번 풀어 둡니다. 외우지 않으셔도 됩니다"}, {"lecture": 4, "page": 13, "text": "3. 코드 저장소에 올리기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 저장소 먼저 만들기\nAgent에게 묻기\nGitHub에 새 저장소를 만들려고 합니다.\n만드는 순서를 알려 주세요.\n안내를 따라가면서 이것만 확인합니다\n이름은 영문 소문자와 하이픈으로 짓습니다 (예: todolist)\n파일은 아직 올리지 않습니다. 빈 저장소만 만듭니다\n공개로 할지 비공개로 할지 묻습니다.\n처음이면 비공개로 하셔도 됩니다.\n띄어쓰기와 한글은 쓰지 않습니다"}, {"lecture": 4, "page": 14, "text": "3. 코드 저장소에 올리기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 저장소 주소 복사하기\n이 페이지의 주소 또는 \n저장소 이름 확인\n주소는 이런 모양입니다\ngithub.com/내이름/todolist\n주소를 정확히 줘야\n AI가 올릴 수 있습니다\n주소가 틀리면 올라가지 않습니다. 복사해서 붙여넣는 편이 안전합니다."}, {"lecture": 4, "page": 15, "text": "3. 코드 저장소에 올리기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 올려 달라고 하기\n이 폴더를 아래 GitHub 저장소에 올려 주세요.\nhttps://github.com/내이름/todolist\n\n올리면 안 되는 파일이 있으면 gitignore 파일도 같이 만들어 주세요.\n중간에 제가 해야 할 일이 있으면 한국어로 하나씩 알려 주세요.\n두 번째 줄에 \n복사한 주소\n를 붙여넣으세요\n중간에 승인을 묻는 창이 뜹니다. 무엇을 하겠다는 건지 읽고 넘기시면 됩니다"}, {"lecture": 4, "page": 16, "text": "3. 코드 저장소에 올리기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 올리면 안 되는 것\n이름\n왜\nnode_modules\n파일이 수만 개라 오래 걸리고 올릴 필요도 없습니다\n.env\n비밀번호가 들어 있는 파일입니다. 절대 올리면 안 됩니다\n없으면 그냥 넘어가셔도 됩니다. 앞으로 다른 것을 만들 때 사고가 나는 지점이라 미리 말씀드립니다.\ngitignore에 node_modules와 .env를 넣어 주세요.\n빠뜨렸다면 이 문장을 한 번 더 넣으면 됩니다"}, {"lecture": 4, "page": 17, "text": "3. 코드 저장소에 올리기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 여기까지 확인\n[샷5]\n파일이 올라간 저장소 화면\n파일 이름이 읽혀야 합니다\n파일 이름들이 보이면 \n손을 들어 주세요\n안 올라갔다면\n주소가 맞는지 다시 확인\n그래도 안 되면 GitHub 화면에서\n파일을 끌어다 직접 올리기\n직접 올릴 때는 Add file 에서 파일을 끌어다 놓고 Commit changes\n저장소 주소를 메모해 두세요. 다음 단계에서 씁니다"}, {"lecture": 4, "page": 18, "text": "4. 웹 서버에 배포하기\nCopyright 2026. Hanuipyo all rights reserved.\n4. 웹 서버에 배포하기\n주소 발급"}, {"lecture": 4, "page": 19, "text": "4. 웹 서버에 배포하기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 배포라는 말\n배포 (Deploy)\n만든 것을 인터넷에 올려\n남들이 볼 수 있게 하는 것\n빌드 (Build)\n내가 쓴 파일을 웹사이트가\n읽을 수 있게 조립하는 과정\n배포를 누르면 \n빌드가 먼저 돌고\n 끝나면 주소가 나옵니다\n이따 글자들이 빠르게 지나가는 것을 보시게 되는데, 그것이 빌드입니다."}, {"lecture": 4, "page": 20, "text": "4. 웹 서버에 배포하기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 프로젝트 가져오기\nAgent에게 묻기\nVercel에서 내 저장소를 가져오려고 합니다.\n순서를 알려 주세요.\nAdd New 에서 Project 를 고르고,\n내 저장소 옆의 Import 를 누릅니다.\n[샷6]\nVercel 프로젝트 가져오기 화면\n저장소 목록과 Import 버튼이 보이게\n계정 이름이 나오면 가릴 것\n목록이 비어 있으면\n권한을 조정하는 글씨를 눌러\n전체를 고르고 저장하시면\n목록에 나타납니다\n비어 보이는 것은 흔한 일입니다. 고장이 아닙니다"}, {"lecture": 4, "page": 21, "text": "4. 웹 서버에 배포하기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 설정은 그대로 둡니다\n항목\n어떻게\nProject Name\n주소에 쓰일 이름입니다. 바꾸셔도 됩니다\nFramework Preset\n알아서 찾아냅니다. 손대지 마세요\nEnvironment Variables\n지금은 비워 둡니다\nEnvironment Variables는 필요한 경우 Agent 가 알려줍니다.\n나머지는 손대지 않으셔도 됩니다"}, {"lecture": 4, "page": 22, "text": "4. 웹 서버에 배포하기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 배포하기\nAgent에게 묻기\n가져온 프로젝트를 배포하려고 합니다.\n무엇을 누르면 되는지 알려 주세요.\nDeploy 를 누르면 글자들이 빠르게 지나갑니다\n1 ~ 3분 걸립니다\n[샷7]\n배포가 끝나고 주소가 나온 화면\n주소가 읽혀야 합니다\n계정 이름이 주소에 들어가면 가릴 것\n기다리는 동안 \n창을 닫지 마세요\n축하 화면이 나오면 성공입니다"}, {"lecture": 4, "page": 23, "text": "4. 웹 서버에 배포하기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 주소가 생겼습니다\n주소가 생긴 분은 \n손을 들어 주세요\n해 보실 것\n1. 주소가 잘 접속되는지 브라우저를 통해 확인합니다.\n2. 그 주소를 휴대폰으로 보내서 열어 보세요\n3. 주소를 메모해 두세요. 다음 시간까지 씁니다\n인터넷만 되면 \n어디서든 열립니다"}, {"lecture": 4, "page": 24, "text": "4. 웹 서버에 배포하기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 배포 실패 시 대처\n실패한 화면에서 스크린샷을 찍기\n▼\nAntigravity 의 Agent 에게 스크린샷 넣기\n▼\nAgent에게 우측의 대화처럼 입력하기\n배포하다가 사진처럼 오류가 났습니다.\n무슨 뜻인지 쉽게 설명하고 고쳐 주세요.\n(Agent 에 복사한 사진을 올려놓고 대화하기)\n고친 파일을 다시 올리면 알아서 다시 시도합니다\n몇 번 반복하셔도 \n괜찮습니다"}, {"lecture": 4, "page": 25, "text": "5. 다음 강의 안내\nCopyright 2026. Hanuipyo all rights reserved.\n5. 다음 강의 안내"}, {"lecture": 4, "page": 26, "text": "Copyright 2026. Hanuipyo all rights reserved.\n✔ 앞으로는 자동입니다\n고친다\n▼\n저장소에 올린다\n▼\n1 ~ 2분 뒤에 웹사이트가 저절로 바뀝니다\n배포 버튼을 \n다시 누르실 필요가 없습니다\n이것 하나만으로도 오늘 먼저 올려 둔 값을 합니다\n5. 다음 강의 안내"}, {"lecture": 4, "page": 27, "text": "Copyright 2026. Hanuipyo all rights reserved.\n✔ 막혔을 때 쓰는 문장\n무슨 말인지 모르겠을 때\n지금 화면에 OOO 라고 나오는데 무슨 뜻인지 모르겠습니다.\n쉬운 말로 설명하고, 다음에 무엇을 눌러야 하는지 알려 주세요.\n오류가 났을 때\n아래 오류가 났습니다. 무슨 뜻인지 쉽게 설명하고 고쳐 주세요.\n(빨간 글씨를 그대로 복사해서 붙여넣기)\n어디까지 했는지 헷갈릴 때\n저장소에 올리고 배포까지 마쳤습니다.\n다음에 무엇을 하면 되는지 한 번에 하나씩만 알려 주세요.\n설명이 어려울 때\n방금 설명이 어려웠습니다. 컴퓨터 용어를 빼고 다시 설명해 주세요.\n화면을 캡처해서 같이 올리면\n 더 정확한 답이 옵니다\n5. 다음 강의 안내"}, {"lecture": 4, "page": 28, "text": "Copyright 2026. Hanuipyo all rights reserved.\n✔ 새로고침 확인\n할 일을 하나 넣어 보세요\n▼\n새로고침해 보세요\n사라집니다\n옆자리도 보세요. 다들 사라졌을 겁니다\n주소는 생겼는데 \n넣은 것이 남지 않습니다\n이유는 다음 시간에 확인합니다\n5. 다음 강의 안내"}, {"lecture": 4, "page": 29, "text": "Copyright 2026. Hanuipyo all rights reserved.\n✔ 남은 두 차시\n강\n하는 일\n4강\n코드를 올리고 웹 서버에 배포합니다 ← 오늘\n5강\n데이터베이스를 붙여 자료가 저장되게 합니다\n6강\n로그인 기능과 접근 권한을 설정합니다\n다음 시간 준비물\n같은 노트북과 \n오늘 만든 주소\nSupabase도 GitHub 계정으로 들어갑니다\n5. 다음 강의 안내"}, {"lecture": 4, "page": 30, "text": "Copyright 2026. Hanuipyo all rights reserved.\n✔ 오늘의 정리\n내 컴퓨터에만 있던 것을 \n인터넷에 올렸습니다\n배포는 마지막이 아니라 \n두 번째입니다\n4강까지 수고하셨습니다.\n다음 두 차시는 고치고 올리기만 하면 바로 확인됩니다.\n5. 다음 강의 안내"}, {"lecture": 5, "page": 1, "text": "Copyright 2026. Hanuipyo all rights reserved.\n5강\n데이터베이스 연결\nSupabase와 환경 변수\n바이브코딩 6강 과정"}, {"lecture": 5, "page": 2, "text": "데이터베이스 연결\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 지난 시간의 문제\n지난 시간 주소를 열어 보세요\n▼\n할 일을 하나 넣어 보세요\n▼\n새로고침해 보세요\n또 사라집니다\n오늘 이것을 \n고칩니다\n끝날 때쯤에는 새로고침해도 남아 있게 됩니다."}, {"lecture": 5, "page": 3, "text": "데이터베이스 연결\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 오늘의 차례\n1. 저장되지 않는 이유\n2. 데이터베이스 만들기\n3. 주소와 키\n4. 연결하고 확인하기\n5. 마무리\n오늘 쓰는 서비스는 하나입니다. Supabase 한 곳만 더 씁니다"}, {"lecture": 5, "page": 4, "text": "1. 저장되지 않는 이유\nCopyright 2026. Hanuipyo all rights reserved.\n1. 저장되지 않는 이유\n저장할 곳이 없기 때문입니다"}, {"lecture": 5, "page": 5, "text": "1. 저장되지 않는 이유\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 지금 상태\n프론트엔드\n백엔드\n사람이 보는 화면 쪽\n지금까지 만든 것\n정보를 보관하는 쪽\n아직 없습니다\n넣은 것을 \n어디에도 저장하지 않습니다\n그래서 새로고침하면 처음 화면으로 돌아갑니다\n옆자리 화면에도 내 할 일은 보이지 않습니다"}, {"lecture": 5, "page": 6, "text": "1. 저장되지 않는 이유\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 데이터베이스\n자료를 저장해 두는 곳입니다\n인터넷에 올려 둔 \n엑셀 표\n라고 생각하시면 쉽습니다\n할 일\n완료\n만든 시각\n1\n장보기\n아니오\n10:12\n2\n책 읽기\n예\n10:15\n가로줄 하나가 할 일 하나 · 세로줄이 항목"}, {"lecture": 5, "page": 7, "text": "1. 저장되지 않는 이유\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 오늘 만들 구조\n화면\n사람이 보는 곳\n데이터베이스\n자료가 쌓이는 곳\n↔\n넣으면 저장하고, 열면 꺼내 옵니다\n자료가 내 브라우저가 아니라 \n공용 저장 공간\n에 있게 됩니다\n그래서 새로고침해도 남고, 다른 사람도 볼 수 있습니다\n오늘 쓰는 데이터베이스는 Supabase입니다"}, {"lecture": 5, "page": 8, "text": "2. 데이터베이스 만들기\nCopyright 2026. Hanuipyo all rights reserved.\n2. 데이터베이스 만들기\n프로젝트와 표"}, {"lecture": 5, "page": 9, "text": "2. 데이터베이스 만들기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ Supabase 로그인\nAgent에게 묻기\nSupabase에 GitHub 계정으로 로그인하려고 합니다.\n순서를 알려 주세요.\n안내를 따라가면서 이것만 확인합니다\nContinue with GitHub 로 들어갑니다\n이메일로 따로 가입하지 않습니다\n여기도 \nGitHub 계정으로\n 들어갑니다\n지난 시간과 같습니다. 이메일로 따로 가입하지 마세요"}, {"lecture": 5, "page": 10, "text": "2. 데이터베이스 만들기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 프로젝트 만들기\nAgent에게 묻기\nSupabase에서 새 프로젝트를 만들려고 합니다.\n만드는 순서를 알려 주세요.\n안내를 따라가면서 이것만 확인합니다\n이름은 영문으로 짓습니다 (예: todolist)\nDatabase Password 를 만듭니다\nRegion 은 서울이 들어간 것으로 고릅니다\nProject name, Database password, Region 등을\n기본 세팅해줍니다.\n만들어지는 데 \n1 ~ 2분\n 걸립니다. 그동안 다음 설명을 듣습니다"}, {"lecture": 5, "page": 11, "text": "2. 데이터베이스 만들기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 비밀번호 보관\n이 화면을 넘기면 \n다시 볼 수 없습니다\n지금 메모장에 복사해 두세요\n4강에서 만든 GitHub 비밀번호와는 다른 것입니다\n이름을 붙여서 적어 두시면 나중에 헤매지 않으십니다\n예: 수파베이스 프로젝트 비밀번호 / 깃허브 비밀번호"}, {"lecture": 5, "page": 12, "text": "2. 데이터베이스 만들기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 표 만들기\nAgent에게 묻기\nSupabase 에 GitHub로 가입했습니다.\n데이터베이스를 연결하는 법을 알려주세요.\n위와 같이 입력하고 안내대로 따라갑니다.\n우측과 같은 스샷을 첨부하고 진행하면 더 좋습니다."}, {"lecture": 5, "page": 13, "text": "3. 주소와 키\nCopyright 2026. Hanuipyo all rights reserved.\n3. 주소와 키\n연결에 필요한 두 가지"}, {"lecture": 5, "page": 14, "text": "3. 주소와 키\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 연결에 필요한 두 가지\nAgent에게 묻기\n내 웹사이트를 데이터베이스에 연결하려고 합니다.\n주소와 키를 어디에서 보는지 알려 주세요.\n찾으면 아래 두 가지를 메모장에 복사합니다\n무엇\n생김새\nProject URL\nhttps 로 시작하는 주소\nPublishable key\nsb_publishable_ 로 시작하는 긴 글자\nAPI 라는 글자\n가 들어간 메뉴를 찾으세요"}, {"lecture": 5, "page": 15, "text": "3. 주소와 키\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 키는 두 종류입니다\n키\n성격\n오늘\nPublishable key\n웹사이트에 들어가도 괜찮게 만든 키\n이것만 씁니다\nSecret key / service_role\n모든 권한을 여는 마스터 키\n쓰지 않습니다\nSecret key 는 복사하지도, 코드에 넣지도 마세요\n두 값을 채팅이나 메신저로 남에게 보내지 마세요\n화면을 공유할 때는 키가 보이는 화면을 먼저 닫습니다"}, {"lecture": 5, "page": 16, "text": "4. 연결하고 확인하기\nCopyright 2026. Hanuipyo all rights reserved.\n4. 연결하고 확인하기\nAI에게 부탁하고 눈으로 확인합니다"}, {"lecture": 5, "page": 17, "text": "4. 연결하고 확인하기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 연결해 달라고 하기\n이 웹사이트를 Supabase에 연결해 주세요.\ntodos 표에 할 일을 저장하고, 저장된 목록을 화면에 보여 주세요.\n\n주소와 키는 코드에 직접 쓰지 말고 환경 변수로 처리해 주세요.\n제가 넣어야 할 환경 변수 이름을 정확히 알려 주세요.\n마지막 줄이 중요합니다\nAI가 알려 준 이름으로 넣어야 연결됩니다. 다르면 안 됩니다"}, {"lecture": 5, "page": 18, "text": "4. 연결하고 확인하기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 확인하기\n내 주소를 열고 할 일을 하나 넣기\n▼\n새로고침해 보기\n▼\nSupabase 의 Table Editor 열어 보기\n이번에는\n남아 있습니다\n표에 \n줄이 하나 늘어난 것\n을 같이 보세요"}, {"lecture": 5, "page": 19, "text": "5. 마무리\nCopyright 2026. Hanuipyo all rights reserved.\n5. 마무리\n오늘 만든 것과 다음 시간"}, {"lecture": 5, "page": 20, "text": "5. 마무리\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 오늘 만든 것\n화면\n3강 · 4강\n데이터베이스\n오늘\n↔\n이제 여러분들의 프로그램에 프론트엔드와 백엔드가 \n모두 갖춰졌습니다\n주소가 있고, 넣은 것이 남고, 다른 사람도 볼 수 있습니다"}, {"lecture": 5, "page": 21, "text": "5. 마무리\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 마지막 시간\n강\n하는 일\n4강\n코드를 올리고 웹 서버에 배포합니다\n5강\n데이터베이스를 붙여 자료가 저장되게 합니다 ← 오늘\n6강\n로그인 기능과 접근 권한을 설정합니다\n다음 시간 준비물\n같은 노트북과 \n오늘 적어 둔 비밀번호"}, {"lecture": 6, "page": 1, "text": "Copyright 2026. Hanuipyo all rights reserved.\n6강\n로그인과 접근 권한\n로그인한 사람마다 자기 할 일 목록을 갖게 합니다\n바이브코딩 6강 과정"}, {"lecture": 6, "page": 2, "text": "로그인과 접근 권한\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 지난 시간의 문제\n옆자리 분이 내 할 일을\n보고 지울 수 있었습니다\n주소를 아는 사람이면 목록이 다 보입니다\n들어와서 고치거나 지울 수 있습니다\n할 일이 누구 것인지 구분이 없습니다\n오늘 \n로그인과 접근 권한\n을 붙입니다"}, {"lecture": 6, "page": 3, "text": "로그인과 접근 권한\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 오늘의 차례\n1. 필요한 두 가지\n2. 로그인 준비\n3. 로그인 기능 만들기\n4. 내 것만 보이게 하기\n5. 6차시 정리\n오늘은 새로 가입할 것이 없습니다. Supabase 안에서 끝납니다"}, {"lecture": 6, "page": 4, "text": "1. 필요한 두 가지\nCopyright 2026. Hanuipyo all rights reserved.\n1. 필요한 두 가지\n로그인과 접근 권한"}, {"lecture": 6, "page": 5, "text": "1. 필요한 두 가지\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 지금 todos 표\n할 일\n완료\n만든 시각\n우유 사기\n9월 1일\n과제 제출\n완료\n9월 1일\n운동 30분\n9월 2일\n책 반납\n9월 2일\n누가 넣은 것인지 적힌 열이 없습니다\n그래서 주소를 아는 사람이면 표 전체가 보이고, 다 지울 수 있습니다\n오늘 이 표에 \n열 하나를 더하고, 규칙 한 줄을 붙입니다"}, {"lecture": 6, "page": 6, "text": "1. 필요한 두 가지\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 오늘 만들 모습\n할 일\n완료\n만든 시각\n만든 사람\n우유 사기\n9월 1일\nA\n과제 제출\n완료\n9월 1일\nA\n운동 30분\n9월 2일\nB\n책 반납\n9월 2일\nB\n로그인 안 함\n로그인 화면만 보입니다\nA로 로그인\n우유 사기\n과제 제출\nB로 로그인\n운동 30분\n책 반납\n로그인한 사람마다 \n자기 줄만\n 보입니다\n만든 사람 칸에는 실제로 계정마다 붙는 긴 번호가 들어갑니다. 여기서는 A, B로 줄여 적었습니다."}, {"lecture": 6, "page": 7, "text": "1. 필요한 두 가지\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 붙일 것은 두 가지\n로그인\n지금 들어온 사람이 A인지 B인지 확인하는 것\n3.\n표에 붙이는 규칙 (정책)\n만든 사람이 나인 줄만 보여 주는 것\n4.\n둘 다 있어야 합니다\n누구인지 알아도 규칙이 없으면 표 전체가 그대로 보입니다\n규칙은 5강에서 켜 둔 행 수준 보안에 붙입니다"}, {"lecture": 6, "page": 8, "text": "1. 필요한 두 가지\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 로그인은 만들지 않습니다\n회원가입과 로그인은 Supabase가 이미 갖추고 있습니다\n우리는 켜서 쓰기만 하면 됩니다\n비밀번호를 안전하게 보관하는 어려운 부분도 대신해 줍니다\n직접 만들면 위험한 곳이 많은 기능입니다\n그래서 갖춰진 것을 쓰는 편이 안전합니다\n오늘 하는 일은 \n켜고 연결하는 것\n입니다"}, {"lecture": 6, "page": 9, "text": "2. 로그인 준비\nCopyright 2026. Hanuipyo all rights reserved.\n2. 로그인 준비\nSupabase에서 로그인을 켭니다"}, {"lecture": 6, "page": 10, "text": "2. 로그인 준비\nCopyright 2026. Hanuipyo all rights reserved.\n✔ Supabase에서 로그인 켜기\nAgent에게 묻기\n이메일과 비밀번호로 회원가입하고\n로그인하게 하려고 합니다.\nSupabase에서 켜거나 끌 설정을 알려 주세요.\n안내를 따라가면서 이것만 확인합니다\nEmail 로그인이 켜져 있습니다\nConfirm email 은 끕니다\n가상 이메일이라 인증 메일을 받을 수 없어서입니다\n[샷1]\n이메일 설정 화면\nEmail 켜짐과 Confirm email 꺼짐이 보이게\n실습에 쓸 \n이메일 두 개와 비밀번호\n를 메모장에 적어 두세요\n여기까지 되셨는지 확인해 주세요"}, {"lecture": 6, "page": 11, "text": "3. 로그인 기능 만들기\nCopyright 2026. Hanuipyo all rights reserved.\n3. 로그인 기능 만들기\n문장 하나로 만듭니다"}, {"lecture": 6, "page": 12, "text": "3. 로그인 기능 만들기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 만들어 달라고 하기\nSupabase 인증을 써서 이메일과 비밀번호로 회원가입하고 로그인하는 기능을 만들어 주세요.\n로그인하지 않으면 할 일 목록이 보이지 않고 로그인 화면으로 가게 해 주세요. 로그아웃 버튼도 넣어 주세요.\n\ntodos 표에 만든 사람 열을 추가하고, 로그인한 사람이 자기가 만든 할 일만 보고, 넣고, 고치고, 지울 수 있게 규칙(정책)을 만들어 주세요. 앞에서 임시로 만든 정책은 지워 주세요.\n\nSupabase에서 실행해야 하는 코드가 있으면 알려 주세요.\n앞부분은 로그인 화면, 뒷부분은 표에 열 하나와 규칙 한 줄입니다\n표 이름이 다르면 그 자리에 자기 이름을 넣으세요"}, {"lecture": 6, "page": 13, "text": "3. 로그인 기능 만들기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 제작 중 확인할 것\n파일이 늘어납니다 (회원가입 · 로그인 화면)\n▼\nSupabase에서 실행할 코드가 나옵니다\n▼\nSQL Editor 에 붙여넣고 Run\n▼\n다 되면 저장소에 올립니다\n[샷2]\nSQL Editor 화면\n붙여넣는 칸과 Run 버튼이 보이게\n코드는 표에 열 하나와 규칙을 넣는 것뿐입니다.\n잘못되어도 다시 실행하면 됩니다.\n올리고 1 ~ 2분 뒤에 내 주소에서 확인합니다"}, {"lecture": 6, "page": 14, "text": "3. 로그인 기능 만들기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 확인하기\n내 주소를 열면 로그인 화면이 나오는가\n▼\n첫 번째 이메일로 가입하고 로그인하기\n▼\n할 일을 하나 넣어 보기\n▼\n로그아웃하면 목록이 사라지는가\n네 가지가 다 되셨는지 \n확인해 주세요\n로그인은 됐습니다. 다음은 자기 것만 보이는지입니다"}, {"lecture": 6, "page": 15, "text": "3. 로그인 기능 만들기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 막히는 경우\n증상\n대부분의 원인\n이메일 확인이 필요하다고 나옵니다\nConfirm email 을 안 끄신 것입니다. 끄고, 계정을 지우고 다시 가입하세요\n로그인은 되는데 할 일이 안 들어갑니다\nSupabase에서 코드를 안 실행하신 것입니다\n로그아웃해도 목록이 보입니다\n한 번 더 부탁하면 대개 고쳐집니다\n비밀번호가 기억나지 않습니다\n사용자 목록에서 지우고 다시 가입하세요\n목록이 계속 보일 때는 이렇게 말하면 됩니다\n로그인하지 않은 사람에게는 목록이 보이지 않게 다시 확인해 주세요."}, {"lecture": 6, "page": 16, "text": "4. 내 것만 보이게 하기\nCopyright 2026. Hanuipyo all rights reserved.\n4. 내 것만 보이게 하기\n두 계정으로 확인합니다"}, {"lecture": 6, "page": 17, "text": "4. 내 것만 보이게 하기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 규칙이 붙었는지 보기\nAgent에게 묻기\ntodos 표에 규칙(정책)이 제대로 붙었는지 보려고 합니다.\nSupabase 어디에서 확인하는지 알려 주세요.\n안내를 따라가면서 이것만 확인합니다\ntodos 표에 규칙(정책)이 여러 개 보입니다\n임시로 만든 것은 없어졌습니다\n[샷4]\n정책 목록 화면\ntodos 표 아래 정책 이름들이 보이게\n규칙 이름은 Agent가 정한 것이라\n각자 다르게 보입니다.\n규칙이 보이면 두 계정으로 확인합니다"}, {"lecture": 6, "page": 18, "text": "4. 내 것만 보이게 하기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 두 계정으로 확인\n1. 첫 번째 계정으로 로그인하면 내가 넣은 할 일이 보이는가\n2. 두 번째 이메일로 가입해 로그인하면 빈 목록인가\n3. 두 번째 계정으로 할 일을 넣고, 첫 번째로 돌아오면 안 보이는가\n옆자리에 주소를 주고 \n가입해서 들어와 보게 하세요\n이번에는 내 할 일이 보이지 않습니다"}, {"lecture": 6, "page": 19, "text": "4. 내 것만 보이게 하기\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 남의 것이 보이는 경우\n규칙이 안 붙었거나 임시 정책이 남은 것입니다.\n아래 과정을 계속 반복하여 고쳐나가시면 됩니다.\n 로그인한 사람이 자기가 만든 할 일만 보고, 넣고, 고치고, 지울 수 있게 규칙(정책)을 만들어 주세요.\n앞에서 임시로 만든 정책은 지워 주세요.\n실행할 코드를 알려 주세요.\n받은 코드를 SQL Editor에서 실행하고 다시 확인합니다"}, {"lecture": 6, "page": 20, "text": "5. 6차시 정리\nCopyright 2026. Hanuipyo all rights reserved.\n5. 6차시 정리\n해 온 일과 더 해 볼 것"}, {"lecture": 6, "page": 21, "text": "5. 6차시 정리\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 6차시 동안 한 일\n강\n한 일\n1강\n말로 프로그램을 만들어 보았습니다\n2강\n고치는 법을 배우고 개발 도구를 나눠 보았습니다\n3강\n개발 환경을 설치하고 첫 프로그램을 만들었습니다\n4강\n코드를 올리고 웹 서버에 배포했습니다\n5강\n데이터베이스를 붙여 자료가 저장되게 했습니다\n6강\n로그인을 붙여 사람마다 자기 목록을 갖게 했습니다\n6차시 만에 사이트 하나를 세상에 내놓으셨습니다"}, {"lecture": 6, "page": 22, "text": "5. 6차시 정리\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 만든 것의 구조\n화면\n3강 · 4강\n+\n데이터베이스\n5강\n+\n로그인과 권한\n6강\n주소가 있고, 자료가 남고, 로그인한 사람이 자기 줄만 봅니다\n실제 서비스가 갖추는 것과 같은 구성입니다\n다음에 다른 것을 만드실 때도 순서는 같습니다"}, {"lecture": 6, "page": 23, "text": "5. 6차시 정리\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 더 해 보실 것\n무엇\n왜 지금인가\n구글 로그인 붙이기\n배포된 주소가 있어야 설정할 수 있습니다\n내 도메인 연결하기\n배포 서비스에서 주소를 바꿀 수 있습니다\n휴대폰에서 열어 보기\n화면이 깨지지 않는지 확인합니다\n동료에게 주소 보내 보기\n혼자서는 안 보이던 문제가 바로 드러납니다\n마지막 것을 \n제일 먼저\n 해 보시기를 권합니다\n남이 한 번 열어 보면 내가 못 보던 것이 나옵니다."}, {"lecture": 6, "page": 24, "text": "로그인과 접근 권한\nCopyright 2026. Hanuipyo all rights reserved.\n✔ 6차시를 마칩니다\n코드를 못 써도 \n만들 수 있습니다\n다만 \n무엇을 만들지\n는 여러분이 정합니다\n1강에서 드린 말씀입니다. 6차시가 끝난 지금도 그대로입니다.\n수고 많으셨습니다."}];let found=slides,index=0;const $=id=>document.getElementById(id);function render(){$('count').textContent=found.length+'쪽 찾음'+(found.length?' · '+(index+1)+'번째 원문':'');$('previous').disabled=index<=0;$('next').disabled=index>=found.length-1;const slide=found[index];$('label').textContent=slide?slide.lecture+'강 · 원본 '+slide.page+'쪽':'검색 결과가 없습니다';$('text').textContent=slide?slide.text:''}function filter(){const query=$('search').value.trim().toLowerCase(),lecture=Number($('lecture').value);found=slides.filter(s=>(!lecture||s.lecture===lecture)&&s.text.toLowerCase().includes(query));index=0;render()}$('search').addEventListener('input',filter);$('lecture').addEventListener('change',filter);$('previous').addEventListener('click',()=>{if(index>0){index--;render()}});$('next').addEventListener('click',()=>{if(index<found.length-1){index++;render()}});render();</script></body></html>