처음 만드는 사람을 위한 다섯 편
AI로 무언가 만들고 싶다면,
먼저 볼 콘텐츠 5편
첫 요청은 어떻게 할까? 무엇부터 만들고, 막히면 어디를 봐야 할까? 바이브코딩을 시작할 때 필요한 다섯 가지 질문을 실제 화면과 크리에이터의 설명으로 살펴봅니다.
AI로 처음 웹페이지를 만든다면 조코딩의 로또 페이지 제작 구간(28:17–31:31)부터 보세요. 요청하고, 실행하고, 결과를 확인한 뒤 다시 고치는 흐름을 볼 수 있어요.
주제를 못 정했다면 김왼손, 입력할 곳을 못 찾았다면 코딩알려주는누나의 설명부터 보세요. HTML·CSS·JavaScript의 역할은 한입 IT, 변경 이력을 남기는 이유는 얄코의 영상으로 이어갈 수 있어요.
1. AI에게 부탁하면, 실제로 어떻게 만들어질까?
이 영상에서 볼 것: 첫 결과를 보고 다음 요청을 정하는 과정.
조코딩의 영상에는 버튼을 누르면 로또 번호가 나오는 웹페이지를 만드는 과정이 나옵니다. AI에게 받은 코드를 파일에 저장해 브라우저에서 열고, 버튼을 눌러 번호 한 묶음이 나오는지 확인해요.
조코딩은 결과를 보고 한 번에 다섯 묶음이 나오면 좋겠다는 다음 요청을 정합니다. 기존 대화를 다시 열어 이렇게 입력해요.
30:40–30:46 대본 발췌버튼을 누르면 로또 번호가 한 번에 다섯 개씩 나오도록 수정해 줘
고친 코드를 다시 저장하고 버튼을 누르자 다섯 묶음이 나타나요.
내 프로젝트에서도 동작 하나 요청 → 직접 실행 → 바꿀 점 전달 순서로 확인해보세요.
28:17–31:31 · 전체 영상 중 추천 구간추천 구간 보기 이 콘텐츠를 만든 사람조코딩파이썬 첫 실행부터 AI로 웹서비스를 만드는 과정까지 실제 제작 흐름을 보여줘요.새로운 AI 도구도 이미지 생성처럼 구체적인 활용 예시로 소개합니다. 도구를 고르는 데서 한 걸음 더 나아가, 내 아이디어를 실제 화면과 기능으로 연결하고 싶은 사람에게 잘 맞아요.크리에이터 소개 보기 2. 만들고 싶은 게 너무 많다면, 무엇부터 시작할까?
이 글에서 얻을 기준: 나에게 중요하면서, 이번 주에 해볼 수 있는 일.
김왼손은 우아한형제들의 AI 교육에서 첫 작업을 고르는 기준을 설명해요.
원문 발췌이 문제가 나에게 정말 중요한가?
이번 주 안에 해낼 수 있는가?
김왼손은 우아한형제들의 AI 교육 사례를 소개하며 두 답이 모두 높게 나오는 문제를 고르도록 했다고 설명해요. 중요하지만 해내기 어렵다면 작업을 더 나누고, 쉽게 할 수 있어도 중요하지 않다면 주제부터 다시 골랐습니다.
예시도 구체적입니다. 디자이너는 이미지 하나의 이름과 태그를 AI에게 제안받는 일부터, 마케터는 사이트 하나의 데이터를 가져오는 스크립트부터 시작하도록 했어요.
개인 프로젝트라면 독서 기록 서비스 전체 대신 책 제목과 한 줄 메모를 목록에 남기는 일부터 정해보세요. 로그인과 추천 기능은 그다음에 정할 수 있어요.
‘진짜 문제를 가져오게 했습니다’ · ‘목표는 작게 쪼갰습니다’원문 읽기 이 콘텐츠를 만든 사람김왼손 (김사랑)비전공자의 코딩 학습과 AI 업무 활용을 다루는 교육자예요.짧은 파이썬 실습, 챗GPT로 만드는 작은 자동화, 실제 업무를 잘게 나눠 해결한 코칭 사례를 연결해 설명합니다. 코딩을 배우다 멈췄거나, 반복되는 일 하나부터 직접 바꿔보고 싶은 사람에게 잘 맞아요.크리에이터 소개 보기 3. 도구는 켰는데, 어디에 요청을 입력해야 할까?
이 구간에서 익힐 것: 작업 파일이 모일 곳과 AI에게 요청할 곳.
Claude Code를 써보기로 했다면, 코딩알려주는누나의 영상에서 첫 작업 공간을 만드는 부분을 보세요. 폴더를 고르고 요청을 입력하는 위치를 차례로 짚어줍니다.
먼저 작업 내용을 담을 폴더를 만듭니다. 영상에서는 VS Code의 File → Open Folder를 열고 새 폴더를 선택해요. 폴더를 연 뒤에는 그 공간이 무엇을 위한 것인지 설명합니다.
09:01–09:05 대본 발췌우리가 하는 모든 작업 내용이 이제 이 폴더 안에 저장이 되고
다음에는 터미널에서 claude를 입력해 실행하고 열린 입력창에 할 일을 적습니다. 터미널은 명령을 입력하는 창이에요. 영상은 창이 오른쪽에 있든 아래에 있든 같은 역할이라는 점도 알려줍니다.
설치와 로그인까지 마쳤다면 내 화면에서 프로젝트 폴더와 요청 입력창을 찾아보세요. 추천 구간은 시작할 위치를 익히는 부분이에요.
08:14–09:55 · 폴더와 요청 입력 위치추천 구간 보기 이 콘텐츠를 만든 사람코딩알려주는누나 (김빛나)Claude Code의 설치·설정부터 반복 업무 자동화와 웹 개발 입문을 다뤄요.폴더·규칙·스킬의 역할을 나눠 설명하고, PPT 양식처럼 반복하는 작업을 재사용하는 사례로 연결합니다. 도구를 켠 뒤 어디서 시작하고 어떻게 작업을 맡길지 막막한 사람에게 잘 맞아요.크리에이터 소개 보기 4. AI가 HTML과 CSS를 고쳤다는데, 무슨 뜻일까?
이 영상에서 잡을 개념: 화면의 구조, 디자인, 동작은 맡은 일이 다릅니다.
한입 IT는 익숙한 유튜브 화면으로 HTML·CSS·JavaScript의 역할을 설명해요.
06:21–06:28 대본 발췌HTML은 요소의 배치와 구조를 표현하는 언어입니다.
이어지는 설명에서는 CSS로 배경색과 글꼴 같은 모양을 정하고 JavaScript로 검색창의 추천어처럼 사용자의 행동에 따른 기능을 만든다고 짚어줘요.
내 화면에서도 HTML은 버튼 같은 요소의 구조, CSS는 색·크기·간격, JavaScript는 눌렀을 때의 동작으로 나눠 살펴보세요. 세 역할의 코드가 항상 다른 파일에 들어가는 것은 아니에요.
04:49–07:56 · 웹페이지와 코드의 역할추천 구간 보기 이 콘텐츠를 만든 사람한입 IT (이정환)React·TypeScript를 가르치는 웹 개발 교육자로, AI 코딩에 필요한 기초 개념도 작은 설명과 예제로 풀어요.웹페이지·버전 관리·데이터베이스·배포가 이어지는 흐름과 AI 작업에 문서를 활용하는 방법을 다룹니다. AI가 만든 결과를 이해하고, 막힌 지점에서 무엇을 더 배울지 알고 싶은 사람에게 잘 맞아요.크리에이터 소개 보기 5. 잘되던 화면이 망가지면, 어떻게 돌아갈까?
이 영상에서 이해할 것: 잘 작동하는 순간을 기록으로 남기는 이유.
얄코는 수정 뒤 잘되던 기능이 멈췄을 때를 예로 Git의 필요성을 설명해요.
03:27–03:31 대본 발췌중요한 시점마다 이와 같은 세이브 포인트들을 만들어 주는 거예요.
Git은 파일의 변경 이력을 관리하는 도구입니다. 영상은 중간 상태를 남겨두면 새 버전에 문제가 생겼을 때 이전 시점으로 돌아갈 수 있다고 설명해요. 파일 여러 개가 함께 바뀌는 작업을 손으로 되돌리기 어려운 이유도 짚습니다.
다음 수정 전에는 잘 작동하는 상태를 직접 확인하고 기록하는 방법을 배워보세요. 추천 구간은 Git의 필요성에 관한 설명이며, 실제 저장·복구는 뒤의 실습으로 이어져요.
02:32–05:20 · 변경 기록이 필요한 이유추천 구간 보기 이 콘텐츠를 만든 사람얄코 (고현민)낯선 개발 개념을 익숙한 비유로 설명한 뒤 단계별 실습으로 연결하는 교육자예요.객체지향은 성을 짓는 사람들의 역할로, Git은 게임의 세이브 포인트로 풀고, 영상과 함께 볼 명령어·실습 자료도 제공합니다. 명령을 그대로 따라 치기보다 왜 필요한지 이해하며 직접 써보고 싶은 사람에게 잘 맞아요.크리에이터 소개 보기 AI 도구를 써본 뒤 직접 코드를 시작하고 싶다면 코딩 입문 유튜브 3편에서 첫 파일과 출력 결과를 살펴보세요.
이 글에서 만난 크리에이터 5명
어떤 설명이 나에게 잘 맞았나요? 관심이 가는 사람의 소개에서 다루는 주제와 활동 채널을 더 살펴보세요.