프로젝트에서 보기 →

코딩 1도 모르지만 AI로 개발하고 싶으신 분들은 꼭 보세요

태그
교육 바이브 코딩 chatgpt chatgpt 코딩
시작일
종료일
수정일

https://www.youtube.com/watch?v=ollMbEOzofc

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

[? 질문] 코딩을 거의/전혀 모르는데도 **AI(ChatGPT, Cursor)**로 웹서비스를 만들 수 있는가[^2]
[= 답] 복잡한 서비스(데이터 저장·생성, 프런트+백엔드, API 통신 포함)는 초보자가 막히기 쉽지만, 정보를 보여주는 수준의 간단한 프런트엔드 프로토타입은 기본만 알면 누구나 만들 수 있다.[^3]

[? 질문] 많은 사람이 “AI로 개발해보려다 실패”하는 가장 큰 이유는 무엇인가[^4]
[= 답] 도구나 지식이 없어서가 아니라, 어떻게 질문(프롬프트)해야 하는지를 몰라서이며, 질문을 잘하려면 최소한의 코딩 구조(프런트/백, HTML/CSS/JS, 에러 위치 확인 등)를 알아야 한다.[^5]

[? 질문] 코딩 초보가 바이브 코딩(=AI와 함께 코딩)으로 프로젝트를 진행할 때, 최소로 알아야 할 것과 진행 순서는 무엇인가[^6]
[= 답] (1) 쉬운 프로젝트부터 시작해 프롬프트/에러 해결 감을 익히고, (2) 기본 도구(VS Code, Cursor, Node.js)를 설치하며, (3) 프런트엔드 기본인 HTML/CSS/JS와 JS 핵심 개념 4가지(변수/조건문/반복문/함수)를 이해하고, (4) 브라우저 개발자도구로 구조·스타일·콘솔 에러를 확인해 수정하고, (5) 기능은 하나씩 추가하며, (6) 완성본은 Vercel 등으로 배포한다.[^7]

2. 큰 그림[^8]

이 콘텐츠는 “코딩을 1도 모르지만 AI로 웹서비스를 만들어보고 싶은 사람”이 실제로 막히는 지점을 짚고, 바이브 코딩을 하기 위해 필요한 최소 코딩 지식/도구/작업 흐름을 예시(메모 앱 제작)로 따라가며 설명한다.[^9] 화자는 특히 “AI가 코드를 짜주는 것” 자체보다, 초보자가 실행 방법을 모르거나 에러를 못 읽어 포기하는 문제를 해결하는 데 초점을 둔다.[^10]

  • 질문의 질(프롬프트)이 결과를 결정한다: 막연한 요청은 막연한 결과를 낳고, 구체적인 조건·스펙을 주면 AI가 원하는 형태로 더 정확히 만든다.[^11]
  • 쉬운 프런트 프로젝트부터 시작해야 한다: 처음부터 당근/배민/인스타 같은 서비스(데이터 저장·생성 필요)를 목표로 하면 프런트+백엔드+API 테스트에서 크게 막힌다.[^12]
  • 디버깅·수정·배포까지의 기본 루틴이 필요하다: 개발자도구로 HTML 구조/CSS 스타일/콘솔 에러 위치를 찾고, 기능은 하나씩 추가하며, 최종적으로 Vercel로 배포해 링크로 공유한다.[^13]

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

3.1 왜 “AI로 만들려다” 많은 사람이 중간에 포기하는가[^15]

📸 0:06

화자는 요즘 “ChatGPT와 Cursor로 나만의 웹서비스를 만들어보려 했는데 잘 안 된다, 도와달라”는 연락을 자주 받는다고 말한다.[^16] 여기서 전제는 다음과 같다.

  • 복잡한 서비스는 원래 어렵다: 기능이 많고 구조가 복잡한 서비스는 AI가 있어도 초보자에게는 난도가 높다.[^17]
  • 하지만 간단한 프로토타입은 누구나 가능하다: “정보를 보여주기만 하는 수준”의 간단한 서비스는 충분히 만들 수 있다고 강조한다.[^18]

그럼에도 실패하는 이유를 화자는 아주 구체적으로 짚는다.[^19]

  • 코딩을 정말 아무것도 몰라서
    • 간단한 에러를 고칠 줄 모르고[^20]
    • 코드를 어디에 넣어야 하는지 모르며[^21]
    • 심지어 어떻게 실행시키는지(프로젝트를 띄우는 법)도 모르고[^22]
    • 어디서부터 시작해야 할지 감이 없어 포기한다.[^23]

그래서 이번 영상의 목적은 “바이브 코딩을 하려는 사람들을 위한 기본 코딩 지식”을 제공해, 최소한 “이해는 되고, 어디를 봐야 하는지 알고” 시도할 수 있게 만드는 것이라고 선언한다.[^24] 또한 본인만의 바이브 코딩 노하우도 함께 알려주겠다고 예고한다.[^25]

3.2 ‘질문(프롬프트)’이 핵심인 이유: 도구는 이미 다 있는데 못 하는 건 “질문”이다[^26]

📸 1:19

화자는 “만들고 싶은 서비스를 만들기 위한 지식과 도구는 세상에 다 나와 있다”고 말한 뒤, 사람들이 못하는 이유는 어떻게 질문해야 하는지 모르기 때문이라고 단정한다.[^27]

이를 설명하기 위해 “배고픈데 뭐 먹지?” vs “요즘 스트레스 받는데 매콤달달한 거 중 10분 내로 요리할 수 있는 것 추천해줄래?”라는 예시를 든다.[^28]

  • 전자는 요구가 모호해서 답변자가 해결하기 어렵다.[^29]
  • 후자는 조건(상태: 스트레스, 맛: 매콤달달, 제약: 10분, 행동: 요리)이 명확해서 바로 추천이 가능하다.[^30]

그리고 결론을 내린다.

[? 질문] 질문을 잘하려면 어떻게 해야 하는가[^31]
[= 답] 질문을 잘하려면 코딩을 어느 정도 알아야 한다. 코딩을 알아야 “무엇을, 어떤 방식으로, 어디에서” 막혔는지 구체적으로 물을 수 있다.[^32]

3.3 첫 번째 원칙: 쉬운 프로젝트부터 시작하라 (절대 처음부터 배민/당근/인스타 금지)[^33]

📸 2:10

화자는 질문을 잘하기 위한 첫 번째 실천으로 “쉬운 프로젝트부터 하라”를 강하게 강조한다.[^34] “제발”이라는 표현까지 쓰며, 초보자가 흔히 하는 실수를 지적한다.[^35]

  • 코딩을 모르면서 처음부터 “나 당근 만들 건데 / 배민 만들 건데”처럼 큰 프로젝트를 잡는다.[^36]
  • 그런데 질문도 제대로 못 하는 상황에서는 이런 큰 프로젝트는 만들 수 없다.[^37]

따라서 권장하는 학습/진행 순서는 다음과 같다.[^38]

  1. 쉬운 프로젝트 1~2개를 스스로 만들어본다.[^39]
  2. 그 과정에서
    • 프롬프트를 잘 작성하는 법[^40]
    • 간단한 에러를 해결하는 법[^41] 을 익힌다.
  3. 이후 점차 더 어려운 프로젝트로 업그레이드한다.[^42]

3.3.1 화자가 정의하는 “쉬운 프로젝트”란 무엇인가[^43]

쉬운 프로젝트는 “정보를 보여주기만 하면 되는 프로젝트”라고 정의한다.[^44] 예시는 다음과 같다.

  • 애플 웹사이트 같은 스타일의 단순 정보 제공 페이지[^45]
  • 회사 소개 웹사이트[^46]
  • 포트폴리오 웹사이트[^47]

즉, 사용자 입력을 받아 저장하거나 복잡한 상호작용이 많은 서비스가 아니라, “정적인(혹은 제한적으로 동적인) 화면”을 구성하는 유형을 말한다.[^48]

3.3.2 “처음부터 하면 안 되는 어려운 프로젝트”의 기준: 데이터 생성·저장[^49]

어려운 프로젝트의 기준은 “데이터를 생성하고 저장해야 하는가”다.[^50] 예시로는 다음을 든다.

  • 인스타그램: 게시물을 생성하고 저장한다.[^51]
  • 페이스북, 당근, 쿠팡 등: 데이터(게시물/상품/주문/유저 정보)를 저장하고 다시 불러와 보여준다.[^52]

이런 프로젝트는 초보자에게 왜 어려운가? 화자는 구조적으로 설명한다.[^53]

  • 단순 정보 제공 프로젝트: 프런트엔드만 있으면 된다.[^54]
  • 데이터 저장·생성 프로젝트: 프런트엔드 + 백엔드 둘 다 필요하다.[^55]
  • 즉 관리해야 할 것이 “두 배”가 된다.[^56]

3.4 프런트엔드 vs 백엔드: 초보자를 위한 비유(화면 vs 엑셀)[^57]

📸 3:49

화자는 “프런트엔드와 백엔드가 뭐예요?”라고 물을 사람을 예상하고, 아주 단순한 정의로 설명한다.[^58]

  • 프런트엔드: 사용자가 보는 웹사이트의 화면(겉). 지금 보고 있는 화면 전체를 의미한다.[^59]
    • 프런트엔드를 잘하면 “예쁘게” 웹사이트를 만들 수 있다고 말한다.[^60]
  • 백엔드: 데이터를 저장하는 공간. 비유로 “엑셀 파일 같은 것”이라고 설명한다.[^61]
    • 데이터를 잘 저장해 놓고, 필요할 때 꺼내서 프런트에서 보여준다.[^62]

그리고 프런트와 백엔드의 상호작용을 “보내고(저장) 다시 받는(표시)” 흐름으로 묘사한다.[^63]

  • 프런트엔드에서 받은 정보를 백엔드로 보내 엑셀(저장소)에 저장[^64]
  • 엑셀(저장소)에 있는 정보를 다시 보내 프런트엔드에서 보여줌[^65]

3.5 코드 작성보다 더 어려운 지점: 프런트-백 통신(API) 테스트[^66]

📸 4:22

화자는 “코드만 놓고 보면 프런트 코드 짜줘/백엔드 코드 짜줘 하면 다 짜준다”고 말하며, AI가 코드 생성 자체는 큰 문제가 아닐 수 있다는 관점을 제시한다.[^67]

그런데 어려운 건 “프런트엔드와 백엔드 사이의 대화”라고 한다.[^68]

  • 이 둘의 대화를 API 통신이라고 부른다.[^69]
  • 프런트와 백은 API를 통해 데이터를 주고받는다.[^70]
  • 그런데 **API 테스트(통신 테스트)**가 어렵다.[^71]
  • 특히 “둘의 대화가 안 되는 이유”가 매우 다양해서, ChatGPT가 못 잡아주는 경우가 많다고 말한다.[^72]

이 지점에서 초보자들이 많이 막혀 프로젝트를 포기하니, 가능하면 백엔드가 필요 없는 프런트 프로젝트부터 시도하라고 재차 권한다.[^73]

[!TIP] “내 서비스에 백엔드가 필요한지” 먼저 판별하기
만들고 싶은 서비스 설명을 ChatGPT에 붙여 넣고 “이거 백엔드 필요해?”라고 물어보면, 백엔드 필요 여부를 비교적 명확히 안내받을 수 있다고 소개한다.[^74]

3.6 바이브 코딩을 위한 “무조건 설치” 3가지 아이템[^75]

📸 5:26

화자는 바이브 코딩을 위해 “무조건 설치해라”는 3가지 아이템을 제시한다.[^76]

  1. Visual Studio Code (VS Code)
  • 코딩을 치는 에디터(메모장 같은 개념)라고 설명한다.[^77]
  • 여기서 코드를 작성한다.[^78]
  1. Cursor
  • “AI 툴”이며, VS Code 같은 에디터 위에서 Cursor를 사용해 코드를 편집(보조)할 수 있다고 말한다.[^79]
  • 즉 “에디터 + AI 편집 도구” 조합으로 이해시키는 흐름이다.[^80]
  1. Node.js
  • 웹개발에서 많이 쓰며 “필수”에 가깝다고 말한다.[^81]
  • 자바스크립트 런타임 환경, 서버/웹 애플리케이션/명령어 작성 등을 돕는다는 설명을 덧붙이지만, 초보자에게는 “웹사이트 만들 때 필수니까 설치”로 단순화해 안내한다.[^82]

3.7 초보자가 프런트 프로토타입 만들 때 가장 쉬운 방식: HTML/CSS/JS[^83]

📸 6:31

프롬프트로 무언가를 만들어내는 방법은 다양하지만, 초보자에게 가장 쉬운 방식은 HTML, CSS, JavaScript로 프런트엔드를 만드는 것이라고 말한다.[^84] 그래서 이 3가지는 “반드시 알아야 한다”고 강조한다.[^85]

3.7.1 프롬프트를 구체화하는 방식 시연: “메모앱을 HTML/CSS/JS로 만들어줘”[^86]

화자는 예시로 다음과 같은 요청을 직접 한다.[^87]

  • “메모앱을 HTML, CSS, 자바스크립트를 통해 만들어줘.”[^88]

이때 “왜 이렇게 디테일하게 주느냐”를 설명한다.[^89]

  • 그냥 “메모 만들어줘”라고 하면 AI가 어려운 프런트엔드 방식(초보자가 당황할 수 있는 기술 스택/구조)으로 만들어버릴 수 있다.[^90]
  • 그래서 “내가 원하는 스펙이 뭔지”를 명확히 하고, 가장 간단한 방식(HTML/CSS/JS)으로 만들어달라고 범위를 제한해야 한다.[^91]

결과적으로 프로젝트를 만들면 “세 가지 파일”이 생긴다고 말한다.[^92] (맥락상 index.html, style.css, script.js 같은 구성)[^93]

3.8 “코드는 받았는데 실행을 못 해요” 문제 해결: Live Server로 실행하기[^94]

📸 7:24

화자는 많은 초보자가 “코드를 보고도 어떻게 실행(재생)해야 하는지 몰라” 활용을 못 할 것이라며, VS Code에서 실행하는 법을 안내한다.[^95]

  • VS Code 상단에서 특정 아이콘/메뉴를 통해 확장(Extensions) 같은 설치 화면으로 간다.[^96]
  • 거기서 Live Server를 검색해 다운로드한다.[^97]
  • 이후 파일에서 오른쪽 클릭 → Open with Live Server를 누르면 프로젝트가 열린다고 설명한다.[^98]

그 결과, 브라우저에서 “간단한 메모 앱”이 뜨는 것을 보여준다.[^99]
메모에 “안녕하세요” 같은 텍스트를 입력하고 “추가”하면 목록에 추가되는 식으로 동작을 시연한다.[^100]

3.9 HTML/CSS/JS 각각의 역할: 구조/디자인/기능[^101]

📸 8:14

화자는 이제 “파일들의 역할을 이해하고 가자”고 하며 3요소를 정리한다.[^102]

  • HTML 파일: 웹사이트의 구조를 나타낸다.[^103]
  • CSS 파일: 웹사이트의 디자인/스타일(색, 버튼 스타일 등)을 담당한다.[^104]
  • JavaScript(JS) 파일: 웹사이트의 기능을 담당한다.[^105]

3.10 개발자도구로 HTML 구조를 직관적으로 파악하는 법: 우클릭 ‘검사’[^106]

📸 8:51

HTML을 가장 쉽게 접근하는 방법으로, 브라우저에서 화면을 **오른쪽 클릭 → 검사(Inspect)**를 열라고 안내한다.[^107] 그러면 “개발자들만 볼 수 있는 비밀의 공간”이 열린다고 표현한다.[^108]

그 안에서 요소 선택 도구를 통해 화면의 특정 요소를 클릭하면, 해당 요소가 HTML 구조에서 무엇인지 바로 표시된다고 설명한다.[^109]

예를 들어, 화면에 박스들이 있고 버튼(“추가”)이 있다면:

  • 버튼을 선택하면 개발자도구에서 그 버튼이 어떤 HTML 태그/구조인지 “누구인지가 딱 나온다”고 말한다.[^110]
  • 이를 통해 “내가 고치고 싶은 텍스트/버튼이 어떤 코드와 연결되는지”를 찾을 수 있다.[^111]

3.11 CSS 확인/수정의 감 잡기: 스타일 패널과 체크박스 토글[^112]

📸 9:49

“버튼 색깔을 바꾸고 싶다” 같은 요구가 있을 때 CSS를 어디서 확인하냐는 질문에, 개발자도구에서 요소를 클릭하면 아래쪽(스타일 영역)에 CSS가 표시된다고 안내한다.[^113]

  • 예: background-color
    • 영어라서 오히려 읽기 쉽다고 말하며, “배경색”이라는 뜻 그대로라고 설명한다.[^114]
    • 체크박스를 끄면 해당 스타일이 적용 해제되어 파란색 배경이 사라지는 식으로 즉시 확인 가능하다고 시연한다.[^115]

이 과정을 통해 초보자가 얻어야 하는 감은 다음이다.[^116]

  • “아, 버튼 색깔은 여기서 관장하는구나”[^117]
  • “값을 바꾸면 색이 바뀌겠구나”[^118]
  • 필요하면 해당 CSS를 복사해서 실제 CSS 파일(스타일 파일)에서 찾아 수정할 수 있다.[^119]

또한 용어를 모를 때의 질문법도 제시한다.[^120]

  • margin-bottom이 뭔지 모르겠다면 복사해서 “이거 의미가 뭐야?”라고 묻는다.[^121]
  • 본인은 자주 “중학생도 이해할 수 있는 레벨로 쉽게 설명해줘”라는 문장을 붙여서 요청한다고 공유한다.[^122]
  • 그러면 예를 들어 margin-bottom: 20px는 아래쪽 공간을 20픽셀(대략 0.5cm 정도) 준다는 식으로 쉽게 풀어준다는 답을 얻을 수 있다고 말한다.[^123]

[!TIP] CSS/에러 메시지/코드 설명 프롬프트 템플릿
“이 코드(또는 이 에러 메시지)를 중학생도 이해할 수 있게 설명해줘”를 습관처럼 붙이면, 초보자 눈높이로 개념을 빠르게 보완할 수 있다는 노하우를 제시한다.[^124]

3.12 JS는 “프로그래밍의 핵심”: 코드 읽기를 위한 4개 개념(변수/조건/반복/함수)[^125]

📸 11:10

화자는 자바스크립트를 “프로그래밍의 핵심”이라고 부르며, 기능 담당 파트라고 다시 강조한다.[^126] 그리고 초보자가 코드 읽기에 최소로 필요한 개념 “4가지”를 제시한다.[^127]

    1. 변수[^128]
    1. 조건문[^129]
    1. 반복문[^130]
    1. 함수[^131]

이 4가지만 이해해도 “웬만한 코드 읽는데 문제가 없다”고 말하지만, 영상에서 전부 깊게 설명하기는 어렵기 때문에 ChatGPT 등으로 꼭 물어보며 확인하라고 권한다.[^132]

3.12.1 변수: 값을 담는 박스(메모들을 담는 memo 같은 것)[^133]

변수는 “어떤 박스, 값을 담고 있는 박스”라고 설명한다.[^134] 웹사이트에는 값이 많다(텍스트, 날짜 등)고 하며, 그 값을 보여주기 위해 들고 있는 것이 변수라는 흐름이다.[^135]

  • 코드에서 ... = ...처럼 “= (할당)”이 보이는 것들이 변수라고 생각하면 된다고 말한다.[^136]
  • 예시로 “memo라는 박스” 안에 모든 메모들이 들어가 있다는 식으로 이해시킨다.[^137]

3.12.2 조건문: “할래 말래” (if)[^138]

조건문은 말 그대로 “조건”, 즉 “할래 말래”의 선택 구조라고 표현한다.[^139]

  • if로 시작하는 것은 조건문이라고 안내한다.[^140]
  • 예: “만약 메모 텍스트가 있으면 이걸 하고, 아니면 말고” 같은 패턴으로 설명한다.[^141]

3.12.3 반복문: for / forEach (메모 100개면 100번 프린트)[^142]

반복문은 어떤 행동을 반복 수행한다고 설명한다.[^143]

  • 코드에서 for, forEach 같은 것이 보이면 반복문이라고 한다.[^144]
  • 예: 메모가 100개면 100번 반복해서 출력해야 하니, “100번 프린트해 주세요” 같은 의미라고 설명한다.[^145]
  • 포문(for문)이 많이 쓰인다고 덧붙인다.[^146]

3.12.4 함수(function): 기능 단위 묶음(자동차 버튼 비유)[^147]

함수는 “기능 단위”라고 정의한다.[^148] 자동차에 트렁크 열기 버튼, 에어컨 버튼처럼 기능별 버튼이 있듯이, 코드에서도 기능별로 묶어놓은 것이 함수라고 비유한다.[^149]

  • function이 들어가면 함수라고 안내한다.[^150]
  • 괄호와 중괄호로 감싸진 “여기부터 여기까지”가 함수라는 식으로 구조를 짚어준다.[^151]
  • 메모 앱에서는
    • 메모 저장 함수[^152]
    • 메모 삭제 함수[^153] 같은 식으로 기능별 함수가 존재한다고 말한다.[^154]

그리고 디버깅 관점에서 매우 실용적인 팁을 준다.[^155]

  • “메모가 이상하게 저장이 안 된다”면 저장 함수에 문제가 있을 확률이 높다.[^156]
  • 그 함수를 복사해 AI에게 붙여 넣고 “왜 여기에서 메모 저장이 안 될까?”라고 물으면 문제 위치를 더 정확히 집어줄 수 있다고 말한다.[^157]
  • 즉, 아무 코드나 던지는 것보다 “관련 함수 단위”로 컨텍스트를 좁히면 엉뚱한 부분을 검사할 확률이 줄어든다.[^158]

[!TIP] 버그 질문은 “기능 단위(함수)”로 잘라서 하라
“저장 안 됨”이면 저장 함수, “삭제 안 됨”이면 삭제 함수처럼 관련 함수만 복사해 질문하면 AI가 원인 추적을 더 정확히 한다는 전략을 제시한다.[^159]

3.13 함수는 “정의”만으로 끝이 아니다: 실행(호출)되는 곳을 찾아라[^160]

📸 14:00

화자는 함수의 핵심 포인트로 다음을 말한다.[^161]

  • 함수는 “정의만 해 놓은 것”이고[^162]
  • 사용(실행)되어야 의미가 있다.[^163]

함수를 사용하는 부분(호출)은 “이런 부분”이라고 하며, 괄호 ()가 보이면 “함수 실행”이라고 생각하면 된다고 알려준다.[^164] 즉,

  • 괄호가 붙어 있으면 실행(call)이다.[^165]
  • 예로 saveMemo() 같은 호출을 언급하며, 정의된 위치와 실제로 쓰이는 위치가 다를 수 있음을 보여준다.[^166]
  • saveMemo가 어디서 쓰이는지 확인할 수 있다고 말하며 “함수가 어디서 호출되는지 추적”하는 관점을 준다.[^167]

또한 코드 실행 순서에 대해 “기본적으로 위에서 아래로(top to bottom) 실행된다”고 언급한다.[^168]

3.14 에러가 났을 때 어디를 봐야 하나: 개발자도구 Console → 파일/줄 번호로 이동[^169]

📸 14:43

화자는 메모 앱에서 “생성이 안 되는 상황”을 만들고, 이를 “에러가 났다는 뜻”이라고 말한다.[^170]

그 다음 가장 중요한 루틴을 안내한다.[^171]

  1. 브라우저에서 우클릭 → 검사로 개발자도구 열기[^172]
  2. Console 탭으로 이동[^173]
  3. 콘솔에 에러가 표시되며, 에러 위치가 “어느 파일의 몇 번째 줄”인지 나온다.[^174]

예시로 콘솔에 나타난 정보를 읽어준다.[^175]

  • 에러 위치: script.js의 29번째 줄[^176]
  • 에러 종류: SyntaxError이며, “unexpected token” 같은 메시지는 “기대하지 않았던 값이 생겼다”는 뜻이라고 풀어 설명한다.[^177]
  • 신텍스 에러는 보통 “문법 에러”라고 정리한다.[^178]

그리고 해결 방식은 다음 흐름이다.[^179]

  • 최소한 “에러 위치를 알았다”면,
    • “여기에서 신텍스 에러가 났다”는 식으로 AI에게 질문하면 고쳐준다고 말한다.[^180]
  • 예로 “이 괄호/기호가 하나 더 많다, 이거 빼면 된다” 같은 수정 답이 나올 수 있다고 설명한다.[^181]
  • 수정 후 파일에 반영하면 동작이 다시 정상화되는 과정을 보여준다.[^182]

[!IMPORTANT] 에러 처리의 출발점은 “콘솔의 파일명/줄 번호”
에러가 나면 감으로 전체 코드를 훑는 게 아니라, Console이 알려준 파일/줄로 바로 이동해 그 주변 문법/로직을 확인하라는 흐름을 반복해서 보여준다.[^183]

3.15 디자인 수정은 “말”보다 “이미지”가 더 정확하다: 피그마 등으로 시안 전달[^184]

📸 16:21

프로젝트 디자인을 수정하고 싶을 때, 화자는 “사진(이미지)이 있으면 훨씬 좋다”고 강조한다.[^185]

  • 이미지를 주면 더 정확하게 만들어준다고 말한다.[^186]
  • 말로 설명하면 의미 전달이 안 되어 이상하게 만들 수 있다고 경험을 공유한다.[^187]

요청 방식은 다음처럼 제시된다.[^188]

  • 디자인 이미지를 복사(혹은 첨부)하고
  • “이미지처럼 디자인해 줄래?”라고 요청한다.[^189]

또한 “피그마 같은 툴로 디자인을 미리 만들어두고, 그걸 그대로 복사/붙여넣기(이미지로 전달)하면 AI가 굉장히 잘 만든다”고 말한다.[^190]

이후 실제로 디자인이 변경된 결과를 확인하며, “완전 비슷하지 않나요?”라고 반응하고 체크박스 등 요소도 만들어졌음을 언급한다.[^191] 결론은 다시 한 번:

[c 사진을 주면 AI가 디자인을 훨씬 더 정확하게 만든다] [^192]

3.16 기능 추가는 “여러 개 한 번에”가 아니라 “하나씩 + 디테일하게”[^193]

📸 17:27

화자는 기능을 추가할 때의 원칙을 명확히 준다.[^194]

  • 여러 개를 한 번에 요청하면 안 되고, 하나씩 추가해야 한다.[^195]
  • 그리고 디테일하게 알려주는 게 중요하다.[^196]

예시로 “중요한 할 일에 별 표시 기능”을 추가하는 시나리오를 든다.[^197]

  • “중요한 할 일에 별 표시 기능을 추가하고 싶어.”[^198]
  • 별의 위치: “삭제하기 오른쪽에 넣어줘.”[^199]
  • 별 색깔: “핑크색으로 해줘.”[^200]

그리고 이런 변경은 어떤 파일을 건드리는지(HTML/JS 등) “컨텍스트”를 함께 제공하면 더 좋다고 말한다.[^201]

3.16.1 컨텍스트(관련 파일 범위 제한)의 중요성[^202]

프로젝트가 작을 때는 파일 3개가 다 관련 있지만, 페이지가 많아지면 특정 페이지만 드래그해서 “이 파일들 내에서만 수정해줘”처럼 범위 제한을 줄 수 있다고 한다.[^203] 그리고 이것이 굉장히 중요하다고 강조한다.[^204]

  • 즉, AI가 수정할 범위를 명확히 하면 더 정확하고 안전하게 변경할 수 있다는 취지다.[^205]

그 결과 별표 기능이 실제로 추가되고, 클릭하면 핑크색 별이 생기는 동작을 확인한다.[^206] 이 과정을 통해 “기능을 하나하나 추가해 나가면 된다”는 메시지를 다시 확인시킨다.[^207]

[!TIP] 기능 요청 프롬프트는 ‘요구사항 3종 세트’로 쪼개기
(1) 무엇을 추가(기능), (2) 어디에 배치(UI 위치), (3) 어떻게 보이게(색/스타일) 같은 구체 조건을 함께 주면 결과가 안정적이라는 예시를 보여준다.[^208]

3.17 Cursor에서 변경사항 “안착(accept)”시키기와 체크포인트로 되돌리기[^209]

📸 19:08

프로젝트가 마음에 들면, Cursor(또는 AI가 제안한 변경)를 최종 코드에 반영해야 한다고 말한다.[^210]

  • 화면에 All 같은 버튼/영역이 있고, 그동안 GPT/Cursor가 짜 준 코드가 프로젝트에 “딱 안착”하게 된다고 표현한다.[^211]
  • 지금은 초록색 표시가 있고, “허가(accept)”를 해줘야 코드가 남는다고 설명한다.[^212]

또한 마음에 들지 않는 기능(예: 별표시)이 있으면 이전 상태로 되돌릴 수 있다고 한다.[^213]

  • “체크포인트”가 있고, 특정 지점까지만 개발을 남기고 이후 변경을 빼는 방식으로 돌아갈 수 있다고 설명한다.[^214]
  • 실제로 별표시 기능 전으로 되돌리면 별이 빠진 상태가 된다고 보여준다.[^215]
  • 다시 최신으로 돌아가고 싶으면, 마지막 변화 항목을 더블클릭하고 “show/… reply(표현은 다소 부정확하지만 메뉴를 눌러)” 같은 옵션을 통해 다시 적용할 수 있다고 말한다.[^216]
  • 다시 별이 들어간 상태로 돌아오는 것을 확인한다.[^217]

핵심은: AI가 만든 변경을 승인/되돌리기로 관리하면서 점진적으로 완성도를 올린다는 흐름이다.[^218]

3.18 완성한 웹사이트를 배포해 공유하기: Vercel로 가장 쉽게 배포하는 흐름[^219]

📸 20:24

프로젝트가 마음에 들면 “다른 친구들이 볼 수 있게 / 밖에서도 사용하게” 배포하고 싶어질 거라고 말하며, 가장 쉬운 배포 방법을 소개한다.[^220]

3.18.1 배포 서비스 선택: Vercel 소개 및 가입[^221]

배포 서비스는 많지만, 화자는 요즘 **Vercel(벌셀)**을 많이 쓴다고 말한다.[^222] 웹사이트 배포를 전문적으로 도와주는 서비스라는 설명과 함께, 회원가입을 추천한다.[^223] 본인은 이미 로그인한 상태라고 언급한다.[^224]

3.18.2 터미널 열기와 npm install -g vercel 설치[^225]

배포를 위해 VS Code에서 터미널(어색한 툴일 수 있다고 표현)을 연다고 한다.[^226] 터미널에서 할 일은 다음과 같이 안내한다.

  • npm install -g vercel
    • 의미: 어떤 패키지/모듈을 설치하는데, Vercel을 **글로벌(-g)**로 설치한다는 취지로 설명한다.[^227]

추가로, GitHub를 쓸 수 있으면 이 설치가 필요 없을 수도 있지만, “완전 초보자” 관점에서 GitHub 올리는 과정이 힘들 수 있으니 이 방법을 가져왔다고 말한다.[^228]

또 “Node를 설치했으면 명령어가 동작해야 한다”고 언급해 Node 설치가 선행 조건임을 다시 연결한다.[^229]

3.18.3 vercel login으로 로그인 후 vercel로 배포 진행[^230]

로그인이 필요하므로 vercel login 같은 명령으로 로그인 과정을 진행할 수 있다고 안내한다.[^231] 본인은 이미 로그인했지만, 시청자는 이메일 로그인 등 옵션을 선택하면 된다고 말한다.[^232] 화자는 GitHub 계정이 있어 GitHub 로그인을 선택한다고 한다.[^233] 성공(“success”)하면 창을 닫아도 된다고 한다.[^234]

그 다음 배포는 터미널에서 vercel을 입력해 진행하는 흐름으로 설명된다.[^235] 입력 후에는 몇 가지 질문이 나오며, 화자는 초보자용으로 “대부분 엔터/예스/노 선택” 흐름을 그대로 읽어준다.[^236]

  • “set up and deploy?” → Yes[^237]
  • “Which scope should contain your project?” → 엔터(기본값)[^238]
  • “기존 프로젝트 링크 있냐?” → No[^239]
  • “프로젝트 이름 뭐야?” → 예시로 “바이브 코딩 데모”라고 입력[^240]
  • “여기서부터 시작한 게 맞아?” → 엔터(Yes로 진행)[^241]
  • “세팅 중 고치고 싶은 거 있어?” → No[^242]

그러면 배포가 시작되고, 웹사이트 도메인 주소가 출력된다고 한다.[^243]

3.18.4 배포 결과 확인: 도메인 주소로 접속/공유 가능[^244]

출력된 링크를 Ctrl+클릭하면 프로젝트 설정 페이지가 열리고, 프로젝트 페이지에서 도메인 주소가 보인다고 말한다.[^245] 그 주소를 클릭하면 “끝”이라며, 실제로 배포된 웹사이트가 열리는 흐름을 보여준다.[^246]

마지막으로 이 주소는:

  • 핸드폰에서도 열 수 있고[^247]
  • 친구에게 공유도 가능하다고 말한다.[^248]

3.19 마무리: 수업 피드백 요청과 다음 편 예고(백엔드 바이브 코딩)[^249]

📸 23:59

화자는 “바이브 코딩을 위한 코딩 지식 수업을 처음 해본다”고 말하며, 이 내용이 정말 필요한 지식인지 아직 확신이 100%는 아니라고 솔직히 말한다.[^250] 대신 시청자에게 다음을 요청한다.[^251]

  • “바이브 코딩하는데 이런 에러가 있어요”[^252]
  • “이런 걸 잘 모르겠어요”[^253]
  • 같은 내용을 댓글로 남기면, 괜찮은 주제를 골라 다시 영상으로 풀어주겠다고 한다.[^254]

그리고 영상 반응이 좋다면, 다음에는 백엔드를 바이브 코딩으로 어떻게 만들어야 하는지를 알려주겠다고 예고하며 인사로 끝낸다.[^255]

4. 핵심 통찰[^256]

  1. [c AI 개발의 병목은 ‘코드 생성’이 아니라 ‘실행/디버깅/질문법’이다] — 초보자는 코드를 받아도 실행 방법, 에러 확인 위치, 수정 범위를 몰라 멈추며, 이를 해결하는 최소 지식이 필요하다는 흐름으로 전개된다.[^257]

    • 실행 시사점
      • 콘솔 에러의 파일명/줄 번호를 읽고 그 줄로 이동하는 습관을 먼저 만든다.[^258]

  2. 프로젝트 난이도는 “데이터 저장/생성” 여부로 갈린다 — 정보 표시만 하는 프런트 프로젝트는 비교적 단순하지만, 저장·생성이 들어가면 백엔드와 API 통신이 필요해 난도가 급상승한다.[^259]

    • 실행 시사점
      • 만들고 싶은 서비스가 “저장/로그인/게시/결제”를 요구한다면, 처음부터 구현하지 말고 먼저 정적/단순 프로토타입으로 쪼갠다.[^260]

  3. 프롬프트는 ‘제약 조건’이 많을수록 초보자에게 안전하다 — “메모 만들어줘”가 아니라 “HTML/CSS/JS로 만들어줘”처럼 기술 스택과 범위를 제한하면 과도하게 복잡한 방식으로 생성되는 것을 막는다.[^261]

    • 실행 시사점
      • 요청할 때 “어떤 기술로 / 파일 구조는 어떻게 / 포함할 기능은 무엇”을 최소한 명시한다.[^262]

  4. 기능 추가는 반드시 하나씩 — 여러 요구를 한 번에 던지면 결과가 흔들리고 수정 범위가 커지므로, 작은 단위로 추가해 검증하는 방식이 안정적이라는 운영 원칙을 제시한다.[^263]

    • 실행 시사점
      • “별표 추가”처럼 단일 기능을 추가한 뒤 동작 확인 → 다음 기능으로 넘어간다.[^264]

  5. 디자인 커뮤니케이션은 텍스트보다 이미지가 강력하다 — 말로 설명하면 오해가 생기지만, 이미지(피그마 시안 등)를 주면 AI가 더 정확히 재현한다는 실전 팁을 강조한다.[^265]

    • 실행 시사점
      • 원하는 UI를 캡처/피그마로 만들고 이미지로 전달해 “이대로 만들어줘”라고 요청한다.[^266]

  6. 컨텍스트(수정 범위) 관리가 결과를 좌우한다 — 프로젝트가 커질수록 “어떤 파일만 수정할지” 제한을 줘야 하고, 함수 단위로 잘라 질문하면 AI의 오답 가능성이 줄어든다.[^267]

    • 실행 시사점
      • 관련 파일(또는 관련 함수)만 첨부하고 “이 범위에서만 수정”이라고 명시한다.[^268]

  7. 배포는 ‘완성 후 공유’의 마지막 관문이지만, 가장 쉬운 루트도 있다 — Vercel과 터미널 명령으로 초보자도 링크를 만들어 공유할 수 있다는 “마침표” 과정을 제공한다.[^269]

    • 실행 시사점
      • npm install -g vercel → vercel login → vercel 흐름으로 배포를 1회라도 끝까지 경험해본다.[^270]

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

  • 바이브 코딩(Vibe coding): ChatGPT/Cursor 같은 AI와 대화하며 요구사항을 주고받고, 코드 생성·수정·디버깅을 진행하는 방식(영상 맥락에서의 사용).[^272]
  • 프런트엔드(Front-end): 사용자가 보는 웹사이트 화면/겉 부분.[^273]
  • 백엔드(Back-end): 데이터를 저장하고 관리하는 공간(화자는 “엑셀 파일”에 비유).[^274]
  • API 통신: 프런트엔드와 백엔드가 API로 데이터를 주고받는 대화/통신 과정.[^275]
  • VS Code(Visual Studio Code): 코드를 작성하는 에디터(메모장 같은 도구).[^276]
  • Cursor: VS Code 등 에디터 위에서 AI로 코드를 편집/보조하는 도구.[^277]
  • Node.js: 웹개발에서 자주 쓰는 자바스크립트 실행 환경(화자는 “웹사이트 만들 때 필수”로 안내).[^278]
  • HTML: 웹사이트의 구조.[^279]
  • CSS: 웹사이트의 디자인/스타일.[^280]
  • JavaScript(JS): 웹사이트의 기능(동작 로직).[^281]
  • 변수(Variable): 값을 담는 “박스”.[^282]
  • 조건문(If): 조건에 따라 실행을 나누는 “할래 말래” 구조.[^283]
  • 반복문(For/forEach): 같은 동작을 여러 번 반복 수행하는 구조.[^284]
  • 함수(Function): 기능 단위로 코드를 묶어둔 것(자동차 버튼 비유).[^285]
  • 개발자도구(Inspect/Console): 브라우저에서 HTML/CSS 구조를 보고 콘솔 에러를 확인하는 도구.[^286]
  • Syntax Error(신텍스 에러): 문법 오류(예: 예상치 못한 토큰).[^287]
  • Vercel: 웹사이트 배포 서비스(도메인 주소를 만들어 공유 가능).[^288]
  • npm / npm install -g: 패키지(도구)를 설치하는 명령 흐름(영상에서는 vercel 설치에 사용).[^289]

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

  • 제목: 코딩 1도 모르지만 AI로 개발하고 싶으신 분들은 꼭 보세요[^291]
  • 채널: 코딩알려주는누나[^292]
  • 길이: 24분 46초[^293]
  • 링크: https://www.youtube.com/watch?v=ollMbEOzofc[^294]
  • 키워드(제공): 바이브 코딩, chatgpt, chatgpt 코딩, cursor, cursor 코딩, 커서, 커서 코딩, AI 코딩, vibe coding, 개발자[^295]

[^1]: @[00:00]~ “안녕하세요… 코딩 알려주는… 누나예요.”로 시작하며 영상 전체가 ‘AI로 개발하려는 초보자’ 대상 강의임을 밝힘.
[^2]: @[00:06] “채찌비티랑 커서를 통해서… 웹서비스를… 만들어 보려고 했는데…”
[^3]: @[00:16]~@[00:25] “복잡한 서비스를 만들면… 어렵죠… 간단한 프로토타입… 누구나 만들 수…”
[^4]: @[00:25]~@[00:44] “여러분들이 못 한 이유는… 코딩에 대해서 아무것도 몰라서…”
[^5]: @[01:19]~@[02:07] “도구는… 다 나와… 못하는 건… 어떻게 질문… 질문 잘하려면… 코딩… 좀 알고 있어야…”
[^6]: @[00:44]~@[01:07] “기본적으로 알아야 하는 코딩 지식… 바이브 코딩 노하우…”
[^7]: @[02:10]~@[23:39] 쉬운 프로젝트→도구 설치→HTML/CSS/JS→디버깅→기능추가→배포까지 영상 흐름 전반.
[^8]: @[00:44]~@[01:13] 영상 목적 및 대상 선언.
[^9]: @[00:44]~@[01:01] “기본적으로 알아야 하는 코딩 지식… 어디를 봐야 되는지…”
[^10]: @[00:28]~@[00:44] 실행/에러/시작점 모름이 실패 원인.
[^11]: @[01:27]~@[01:59] 음식 추천 질문 비유로 프롬프트 품질 차이 설명.
[^12]: @[02:10]~@[05:09] 쉬운 프로젝트 권장, 데이터 저장 프로젝트 어려움, API 통신 문제.
[^13]: @[08:51]~@[15:53] 개발자도구 검사/콘솔 에러, @[20:39]~@[23:39] Vercel 배포 절차.
[^14]: @[00:00]~@[24:28] 타임라인 순서대로 재구성.
[^15]: @[00:06]~@[00:44] “연락… 제발 도와주세요… 실패” 맥락.
[^16]: @[00:06]~@[00:12] “연락… 제발 도와주세요.”
[^17]: @[00:16]~@[00:19] “복잡한 서비스를 만들면… 어렵죠.”
[^18]: @[00:22]~@[00:25] “간단한 프로토타입… 누구나…”
[^19]: @[00:25]~@[00:44] 실패 이유 상세 나열.
[^20]: @[00:28]~@[00:34] “간단한 에러도… 고칠 줄 모르고…”
[^21]: @[00:34]~@[00:37] “코드를… 어떻게 넣어야…”
[^22]: @[00:34]~@[00:37] “어떻게 실행시켜야…”
[^23]: @[00:37]~@[00:44] “어디서부터 시작… 몰라…”
[^24]: @[00:44]~@[01:01] “기본적으로 알아야 하는 코딩 지식… 어디를 봐야…”
[^25]: @[01:01]~@[01:07] “바이브 코딩 노하우… 알려 드리려고…”
[^26]: @[01:19]~@[02:07] “도구는 다… 못하는 건 질문…”
[^27]: @[01:19]~@[01:35] “지식/도구는… 다… 못하는 건… 어떻게 질문…”
[^28]: @[01:35]~@[01:43] 두 질문 예시 제시.
[^29]: @[01:47]~@[01:56] “아 나 배고픈데 뭐 먹지?… 해결해 주기 힘든…”
[^30]: @[01:43]~@[01:54] 후자는 바로 추천 가능하다고 설명.
[^31]: @[01:59]~@[02:05] “질문을 잘… 배우셔야… 질문을 잘하려면…”
[^32]: @[02:05]~@[02:07] “코딩… 좀 알고 있어야 내가 질문을 잘…”
[^33]: @[02:10]~@[02:35] 쉬운 프로젝트부터 원칙.
[^34]: @[02:10]~@[02:16] “첫 번째는… 쉬운 프로젝트부터… 제발입니다.”
[^35]: @[02:13]~@[02:16] “제발입니다.”
[^36]: @[02:16]~@[02:23] “처음부터… 당근… 배민…”
[^37]: @[02:18]~@[02:27] “질문도… 못… 큰 프로젝트… 못 만듭니다.”
[^38]: @[02:27]~@[02:35] 쉬운 프로젝트→익히기→업그레이드.
[^39]: @[02:27]~@[02:31] “쉬운 프로젝트 한 두 개…”
[^40]: @[02:31]~@[02:34] “프롬프트를 잘 작성…”
[^41]: @[02:31]~@[02:34] “간단한 에러… 해결…”
[^42]: @[02:34]~@[02:35] “점차적으로 어려운 프로젝트…”
[^43]: @[02:35]~@[02:57] 쉬운 프로젝트 정의/예시.
[^44]: @[02:39]~@[02:43] “정보를… 보여 주기만 하면…”
[^45]: @[02:43]~@[02:47] “애플 웹사이트…”
[^46]: @[02:43]~@[02:47] “회사 소개…”
[^47]: @[02:47]~@[02:53] “포트폴리오…”
[^48]: @[02:39]~@[03:01] 정보 제공→업그레이드 권장 흐름.
[^49]: @[03:01]~@[03:18] 어려운 프로젝트 정의/예시.
[^50]: @[03:07]~@[03:09] “데이터를 생성하고 저장…”
[^51]: @[03:09]~@[03:15] “인스타그램… 생성하고 저장…”
[^52]: @[03:15]~@[03:22] “페이스북… 당근… 쿠팡…”
[^53]: @[03:22]~@[03:44] 프런트만 vs 프런트+백 설명.
[^54]: @[03:29]~@[03:37] “단순… 프론트…만…”
[^55]: @[03:37]~@[03:40] “그러면… 프런트랑 백엔드 둘 다…”
[^56]: @[03:41]~@[03:44] “관리해야… 두 배…”
[^57]: @[03:49]~@[04:19] 프런트/백 정의와 비유.
[^58]: @[03:49]~@[03:54] “프런트엔드와 백엔드가 뭐예요… 설명”
[^59]: @[03:54]~@[04:01] “지금… 화면… 겉… 프런트엔드”
[^60]: @[04:01]~@[04:03] “프런트엔드를 잘하시면… 예쁘게”
[^61]: @[04:06]~@[04:16] “백핸드… 데이터 저장… 엑셀”
[^62]: @[04:16]~@[04:19] “데이터 잘 저장…”
[^63]: @[04:19]~@[04:22] 저장/전달/표시 흐름 설명.
[^64]: @[04:19]~@[04:22] “받은 정보를… 보내면서… 저장”
[^65]: @[04:19]~@[04:22] “엑셀… 정보를… 프런트… 보여주기”
[^66]: @[04:22]~@[05:05] API 통신/테스트가 어려움.
[^67]: @[04:22]~@[04:33] “프런트 코드… 다 짜 주고… 백엔드… 다 짜주고”
[^68]: @[04:33]~@[04:45] “어려운게… 뭐냐면…”
[^69]: @[04:45] “API 통신” 용어 제시.
[^70]: @[04:45]~@[04:53] “API를 통해서… 대화”
[^71]: @[04:45]~@[04:53] “API 테스트… 어렵습니다”
[^72]: @[04:53]~@[05:01] “채치피가 못 잡아 주는 케이스… 이유 다양”
[^73]: @[05:01]~@[05:09] “너무 많이 걸리셔서… 프런트엔드만… 추천”
[^74]: @[05:15]~@[05:23] “서비스… 백엔드 필요해?… 알려 줍니다.”
[^75]: @[05:26]~@[06:23] 설치 아이템 3가지.
[^76]: @[05:26]~@[05:29] “무조건 설치해라 세 가지”
[^77]: @[05:32]~@[05:40] “에디터… 메모장…”
[^78]: @[05:40]~@[05:46] “여기에서… 코드를 치시는”
[^79]: @[05:49]~@[06:00] “커서… AI 툴… 에디터 위에…”
[^80]: @[05:49]~@[06:00] Cursor 사용 맥락.
[^81]: @[06:02]~@[06:11] “노드 JS… 웹개발… 많이 써”
[^82]: @[06:11]~@[06:23] 설명 후 “필수… 설치”로 정리.
[^83]: @[06:23]~@[06:39] HTML/CSS/JS 프런트가 초보자에 가장 쉬움.
[^84]: @[06:31]~@[06:36] “초보자들에게 가장 쉬운 방법… HTML, CSS, 자스크립트”
[^85]: @[06:36]~@[06:39] “세 개는 반드시 아셔야”
[^86]: @[06:43]~@[07:14] 프롬프트 구체화 시연.
[^87]: @[06:39]~@[06:46] “제가 한번 요청…”
[^88]: @[06:43]~@[06:46] “메모앱을 HTML, CSS, 자바스크립트…”
[^89]: @[06:49]~@[06:53] “디테일하게 주는 이유”
[^90]: @[06:53]~@[06:59] “메모 만들어 줘 하면… 어려운… 방식… 당황”
[^91]: @[07:06]~@[07:13] “정확하게… 스펙… 만들어 줘”
[^92]: @[07:18]~@[07:24] “세 가지의 파일이 생기게”
[^93]: @[07:18]~@[07:24] 파일 3개 생성 언급(구체 파일명은 맥락상).
[^94]: @[07:24]~@[07:55] Live Server 설치/실행.
[^95]: @[07:24]~@[07:30] “어떻게 재생… 몰라… 못 하고”
[^96]: @[07:27]~@[07:36] 상단 아이콘 클릭 후 설치 가능 설명.
[^97]: @[07:36]~@[07:45] “라이브 서버… 다운로드”
[^98]: @[07:47]~@[07:52] “오픈 with 서버”
[^99]: @[07:55]~@[08:00] “간단한 메모 앱” 생성 확인.
[^100]: @[08:04]~@[08:14] “안녕하세요… 추가… 추가 됐죠”
[^101]: @[08:14]~@[08:48] HTML/CSS/JS 역할 설명.
[^102]: @[08:14]~@[08:20] “파일들의 역할… 이해”
[^103]: @[08:20]~@[08:30] “HTML… 구조”
[^104]: @[08:30]~@[08:36] “CSS… 디자인… 색깔”
[^105]: @[08:36]~@[08:48] “JS… 기능”
[^106]: @[08:51]~@[09:40] 검사로 HTML 구조 파악.
[^107]: @[08:51]~@[08:58] “오른쪽 클릭… 검사”
[^108]: @[08:58]~@[09:01] “비밀의 공간”
[^109]: @[09:04]~@[09:11] 요소 선택으로 구조 선택.
[^110]: @[09:19]~@[09:29] “추가… 고치고 싶다… 클릭… 누구인지”
[^111]: @[09:34]~@[09:39] “얘 관련된 코드는 뭐지… 보실 수”
[^112]: @[09:44]~@[10:27] CSS 확인/토글/수정 흐름.
[^113]: @[09:49]~@[09:59] “밑에 얘가 CSS… 스타일”
[^114]: @[09:59]~@[10:09] “백그라운드 컬러… 배경색”
[^115]: @[10:13]~@[10:16] “체크 박스 끄면… 사라지는”
[^116]: @[10:20]~@[10:27] “관장… 바꾸면… 파일이 정확히”
[^117]: @[10:20]~@[10:24] “버튼의 색깔을 관장”
[^118]: @[10:20]~@[10:24] “값 바꾸면… 바꿀 수”
[^119]: @[10:24]~@[10:27] “CSS… 스타일 파일… 찾으시면”
[^120]: @[10:27]~@[11:06] 모르는 용어 질문법.
[^121]: @[10:39]~@[10:43] “복사… 이거 의미가 뭐야?”
[^122]: @[10:47]~@[10:49] “중학생도 이해…”
[^123]: @[10:56]~@[11:06] “20픽셀… 0.5cm”
[^124]: @[10:47]~@[10:54] 쉬운 설명 요청 효과.
[^125]: @[11:06]~@[11:44] JS 핵심 개념 4가지.
[^126]: @[11:10]~@[11:14] “프로그래밍의 핵심… 기능 담당”
[^127]: @[11:14]~@[11:22] “꼭 알아놔야 될 개념… 네 가지”
[^128]: @[11:26]~@[11:35] “첫 번째… 변수”
[^129]: @[11:35]~@[11:38] “두 번째… 조건문”
[^130]: @[11:38]~@[11:41] “세 번째… 반복문”
[^131]: @[11:41]~@[11:44] “네 번째… 함수”
[^132]: @[11:19]~@[11:26] “다 알려 드릴 수… 물어보고 확인”
[^133]: @[11:50]~@[12:19] 변수 설명.
[^134]: @[11:52]~@[11:54] “값을 담고 있는 박스”
[^135]: @[11:54]~@[12:07] 웹사이트 값 예시와 연결.
[^136]: @[12:09]~@[12:13] “= … 다 변수”
[^137]: @[12:18]~@[12:20] “메모라는 박스… 메모들이 다”
[^138]: @[12:20]~@[12:42] 조건문 설명.
[^139]: @[12:21]~@[12:32] “할래 말래”
[^140]: @[12:35]~@[12:37] “if… 조건문”
[^141]: @[12:37]~@[12:42] “메모 텍스트가 있으면…”
[^142]: @[12:42]~@[12:58] 반복문 설명.
[^143]: @[12:44]~@[12:49] “반복… 계속”
[^144]: @[12:44]~@[12:47] “for each… 반복문”
[^145]: @[12:49]~@[12:53] “메모 100개… 100번 프린트”
[^146]: @[12:56]~@[13:00] “포문… 많이 쓰이고”
[^147]: @[13:00]~@[13:41] 함수 설명과 예시.
[^148]: @[13:12]~@[13:14] “기능 단위”
[^149]: @[13:14]~@[13:20] 자동차 버튼 비유.
[^150]: @[13:02]~@[13:09] “펑션… 함수”
[^151]: @[13:22]~@[13:27] “여기부터… 함수”
[^152]: @[13:27]~@[13:34] “메모 저장 함수”
[^153]: @[13:34]~@[13:38] “메모 삭제 함수”
[^154]: @[13:27]~@[13:41] 기능별로 존재 설명.
[^155]: @[13:41]~@[13:59] 함수 단위 디버깅 팁.
[^156]: @[13:41]~@[13:49] “저장이 안 되네… 저장 함수 문제”
[^157]: @[13:49]~@[13:52] “카피… 왜… 안 될까 물어보면”
[^158]: @[13:52]~@[13:59] “엄한데 검사할 확률 줄어”
[^159]: @[13:41]~@[13:59] 같은 맥락의 실전 노하우.
[^160]: @[14:00]~@[14:16] 함수 정의 vs 사용(호출).
[^161]: @[14:00]~@[14:04] “정의만… 사용돼야”
[^162]: @[14:00]~@[14:03] “정의만 해 놓은”
[^163]: @[14:03]~@[14:04] “사용이 돼야”
[^164]: @[14:07]~@[14:12] “괄호… 함수 실행”
[^165]: @[14:12]~@[14:16] “뭐든지 괄호… 실행”
[^166]: @[14:16]~@[14:27] “세이브 메모… 여기지만… 다른 데서 쓰임”
[^167]: @[14:31]~@[14:35] “어디서 쓰이고 있는지 확인”
[^168]: @[14:35]~@[14:39] “탑투더… 위에서부터 아래”
[^169]: @[14:39]~@[16:14] 콘솔로 에러 위치 찾기/수정.
[^170]: @[14:43]~@[14:50] “생성이 안 되고… 에러”
[^171]: @[14:54]~@[15:11] 검사→콘솔 흐름.
[^172]: @[14:54]~@[15:02] “오른쪽 클릭… 검사”
[^173]: @[15:05]~@[15:08] “콘솔 탭”
[^174]: @[15:08]~@[15:19] “에러… 위치… script.js 29번째 줄”
[^175]: @[15:11]~@[15:34] 에러 메시지 해석.
[^176]: @[15:12]~@[15:19] “script.js 29번째 줄”
[^177]: @[15:28]~@[15:34] “unexpected token… 기대하지 않았던 값”
[^178]: @[15:38]~@[15:44] “신텍스 에러… 문법”
[^179]: @[15:44]~@[16:14] 질문→수정→적용 흐름.
[^180]: @[15:50]~@[15:57] “여기에서 신텍스 에러… 질문하면… 고쳐”
[^181]: @[16:03]~@[16:06] “하나 더 많네요… 빼면 됩니다”
[^182]: @[16:07]~@[16:14] “적용… 빠지게 되죠”
[^183]: @[14:54]~@[15:25] 콘솔의 위치 정보로 이동하는 과정 전체.
[^184]: @[16:18]~@[17:27] 이미지로 디자인 요청.
[^185]: @[16:21]~@[16:27] “사진이 있으면 좋아… 정확”
[^186]: @[16:24]~@[16:27] “훨씬 더 정확”
[^187]: @[17:04]~@[17:06] “말로 설명… 의미 전달… 이상하게”
[^188]: @[16:30]~@[16:45] 요청 방식 제시.
[^189]: @[16:38]~@[16:45] “이미지를 넣어 주시고… 이미지처럼”
[^190]: @[16:52]~@[17:02] “피그마… 미리… 사진… 잘”
[^191]: @[17:12]~@[17:24] “완전 비슷… 체크박스”
[^192]: @[17:24]~@[17:27] “사진을 주면… 더 정확”
[^193]: @[17:27]~@[19:03] 기능 추가 원칙과 별표 기능 시연.
[^194]: @[17:27]~@[17:35] “기능 추가… 하나씩”
[^195]: @[17:32]~@[17:35] “여러 개 요청… 안 되고요”
[^196]: @[17:35]~@[17:37] “디테일하게… 중요”
[^197]: @[17:37]~@[18:10] 별표 기능 요구사항 예시.
[^198]: @[17:47]~@[17:57] “별 표시… 추가”
[^199]: @[17:57]~@[18:00] “삭제하기 오른쪽”
[^200]: @[18:00]~@[18:10] “핑크색”
[^201]: @[18:15]~@[18:23] “이거… HTML… JS… 컨텍스트”
[^202]: @[18:29]~@[18:50] 컨텍스트 설정 중요.
[^203]: @[18:29]~@[18:37] “다른 페이지… 페이지만 드래그… 범위 제한”
[^204]: @[18:46]~@[18:50] “컨텍스트 설정… 중요”
[^205]: @[18:29]~@[18:50] 범위 제한 취지.
[^206]: @[18:50]~@[19:03] “별표… 핑크색 별”
[^207]: @[19:03]~@[19:08] “기능… 하나하나 추가”
[^208]: @[17:47]~@[18:10] 요구사항을 위치/색까지 구체화한 예시 자체.
[^209]: @[19:08]~@[20:24] accept/체크포인트/되돌리기.
[^210]: @[19:08]~@[19:21] “프로젝트 마음에 들었다… 코드 안착”
[^211]: @[19:14]~@[19:21] “all… 코드… 안착”
[^212]: @[19:24]~@[19:33] “초록색… 허가… 어셉”
[^213]: @[19:33]~@[20:00] “기능 싫던데… 전으로”
[^214]: @[19:47]~@[19:56] “체크포인트… 여기까지만”
[^215]: @[20:00] “별표시… 빠져 있죠”
[^216]: @[20:05]~@[20:17] “가장 마지막 변화… 더블 클릭… 옵션… 적용”
[^217]: @[20:21]~@[20:24] “별이 또 들어가”
[^218]: @[19:14]~@[20:24] 변경 승인/되돌리기 관리 흐름.
[^219]: @[20:24]~@[23:49] Vercel 배포 전체.
[^220]: @[20:24]~@[20:32] “다른 친구… 밖에서도… 배포”
[^221]: @[20:38]~@[21:07] Vercel 소개/가입.
[^222]: @[20:47]~@[20:53] “벌셀… 많이 써요”
[^223]: @[20:53]~@[21:03] “배포… 전문… 회원 가입 추천”
[^224]: @[21:03]~@[21:07] “이미 로그인을”
[^225]: @[21:09]~@[21:32] 터미널과 설치 명령.
[^226]: @[21:09]~@[21:15] “뉴 터미널… 어색한 툴”
[^227]: @[21:15]~@[21:29] “npm… 글로벌… vercel 설치”
[^228]: @[21:32]~@[21:42] “깃허브… 힘드니까… 초보자 입장”
[^229]: @[21:45]~@[21:48] “노드를 설치… 명령어 동작”
[^230]: @[21:51]~@[22:24] 로그인 및 배포 시작.
[^231]: @[21:51]~@[22:00] “로그인… 명령어”
[^232]: @[22:00]~@[22:11] “이메일 로그인… 옵션 선택”
[^233]: @[22:11]~@[22:14] “깃허브로그인”
[^234]: @[22:14]~@[22:19] “석세스… 꺼”
[^235]: @[22:19]~@[22:24] “그냥 입력… 프로젝트 올라가게”
[^236]: @[22:24]~@[23:05] 배포 질문들에 예/엔터/노로 진행.
[^237]: @[22:24]~@[22:26] “set up and deploy… 예스”
[^238]: @[22:32]~@[22:37] “which scope… 엔터”
[^239]: @[22:38]~@[22:43] “기존 프로젝트… 없어요… 노”
[^240]: @[22:46]~@[22:52] “프로젝트 이름… 바이브 코딩 데모”
[^241]: @[22:52]~@[22:56] “여기서부터… 엔터”
[^242]: @[22:59]~@[23:02] “세팅… 노”
[^243]: @[23:05]~@[23:11] “배포 시작… 도메인 주소”
[^244]: @[23:11]~@[23:49] 링크 열기/도메인 확인/공유.
[^245]: @[23:15]~@[23:25] “컨트롤… 링크… 열리게”
[^246]: @[23:25]~@[23:39] “도메인 주소… 딱 누르시면… 끝”
[^247]: @[23:49]~@[23:52] “핸드폰에서 여셔도”
[^248]: @[23:52]~@[23:55] “친구한테 공유”
[^249]: @[23:55]~@[24:28] 마무리/댓글 요청/다음 편 예고.
[^250]: @[23:59]~@[24:05] “처음… 필요한 지식인지… 아리까리”
[^251]: @[24:05]~@[24:15] 댓글로 어려움 요청.
[^252]: @[24:02]~@[24:05] “이런 에러가 있어요”
[^253]: @[24:05]~@[24:08] “잘 모르겠어요”
[^254]: @[24:12]~@[24:15] “댓글… 영상으로 다시 풀”
[^255]: @[24:20]~@[24:26] “반응 좋다면… 백엔드… 알려”
[^256]: @[01:19]~@[23:55] 전반에서 반복되는 원칙들을 관통 정리.
[^257]: @[00:28]~@[00:44], @[14:54]~@[16:14] 실행/에러 확인이 핵심 병목으로 제시됨.
[^258]: @[15:12]~@[15:25] 콘솔의 파일/줄 번호로 이동.
[^259]: @[03:07]~@[05:09] 데이터 저장 여부→백엔드/API로 난이도 상승.
[^260]: @[02:10]~@[03:44] 쉬운 것부터/큰 프로젝트 금지.
[^261]: @[06:49]~@[07:13] “메모 만들어줘” vs “HTML/CSS/JS로”.
[^262]: @[07:06]~@[07:13] 원하는 스펙 명확히.
[^263]: @[17:32]~@[17:37] “여러 개 요청하면 안 되고… 하나씩… 디테일”
[^264]: @[18:50]~@[19:08] 별표 기능 추가 후 확인.
[^265]: @[16:21]~@[17:06] 이미지가 더 정확, 말로 설명은 오해.
[^266]: @[16:52]~@[17:02] 피그마 시안 → 이미지로 전달.
[^267]: @[13:41]~@[13:59], @[18:29]~@[18:50] 함수/파일 범위로 컨텍스트 제한.
[^268]: @[18:29]~@[18:37] “이 파일 내에서만 수정해줘”
[^269]: @[20:24]~@[23:55] 배포까지 완료하면 공유 가능.
[^270]: @[21:15]~@[23:05] 설치→로그인→배포 명령 흐름.
[^271]: @[03:49]~@[23:39] 전문용어 다수 등장(초보자 대상 정의 필요).
[^272]: @[00:44]~@[01:07] “바이브 코딩” 수업/노하우 맥락.
[^273]: @[03:54]~@[04:03] 프런트엔드 정의.
[^274]: @[04:06]~@[04:16] 백엔드 엑셀 비유.
[^275]: @[04:45]~@[04:53] API 통신 정의.
[^276]: @[05:32]~@[05:46] VS Code 설명.
[^277]: @[05:49]~@[06:00] Cursor 설명.
[^278]: @[06:02]~@[06:23] Node.js 설명.
[^279]: @[08:20]~@[08:30] HTML 역할.
[^280]: @[08:30]~@[08:36] CSS 역할.
[^281]: @[08:36]~@[08:48] JS 역할.
[^282]: @[11:52]~@[12:13] 변수 설명.
[^283]: @[12:21]~@[12:37] 조건문 설명.
[^284]: @[12:44]~@[12:58] 반복문 설명.
[^285]: @[13:12]~@[13:27] 함수 설명.
[^286]: @[08:51]~@[09:01], @[15:05]~@[15:11] 검사/콘솔.
[^287]: @[15:28]~@[15:44] 신텍스 에러 해석.
[^288]: @[20:47]~@[20:55] Vercel 소개.
[^289]: @[21:15]~@[21:29] npm 설치 명령 설명.
[^290]: 사용자 제공 메타데이터 및 영상 내용 종합.
[^291]: 사용자 입력 제목.
[^292]: 사용자 입력 채널명.
[^293]: 사용자 입력 길이.
[^294]: 사용자 입력 링크.
[^295]: 사용자 입력 키워드.

← 프로젝트에서 보기