바이브 코딩 입문자를 위한 코딩 용어 정리 1강

Slide 01 terminal

Vibe Coding Lecture 01

바이브 코딩 입문자를 위한
코딩 용어 정리

웹 개발 기초 개념부터 AI 코딩 용어까지 한 번에 이해하기

tips_and_updates

1강 강의자료

Slide 02 route

1강 커리큘럼 요약

코딩 용어는 외우는 것이 아니라, 서비스를 만들어보며 반복적으로 익히는 개념입니다.

웹이 동작하는 기본 구조, 클라이언트와 서버, 프론트엔드와 백엔드의 역할을 한 번에 정리합니다.

라우트, 프레임워크, API, GitHub, 배포 개념을 이해하고 Codex와 협업할 준비를 합니다.

tips_and_updates

용어를 암기하기보다 실제 서비스 구조 안에서 연결해 이해합니다.

Slide 03 원본 보기

OpenAI, Anthropic, Google, xAI의 AI 서비스와 이미지·영상 생성 및 코딩 도구를 정리한 참고 이미지. ChatGPT, Claude, Gemini, Grok과 Codex, Claude Code 등의 이름을 비교합니다.

Slide 04 원본 보기

ChatGPT Chat은 질문, 설명, 아이디어와 짧은 초안을 함께 생각할 때, Work는 자료 조사와 분석을 거쳐 문서와 발표자료 같은 업무 결과물을 만들 때, Codex는 코드를 작성하고 오류를 수정하며 실행을 확인할 때 활용합니다. AI 강의 준비 예시: Chat에는 강의 주제 5개 추천, Work에는 자료로 강의 PPT 제작, Codex에는 강의 신청 웹페이지 제작을 요청합니다. 기능은 서로 겹치며 결과는 직접 확인합니다.

Slide 05 원본 보기

클라이언트가 요청하면 서버가 처리해 응답합니다. 날씨 앱에서 서울 날씨를 요청하고 맑음, 24도라는 결과를 받는 흐름입니다.

Slide 06 원본 보기

프론트엔드는 사용자가 보고 조작하는 화면이고, 백엔드는 서버에서 요청을 처리하고 데이터를 관리하는 시스템입니다. 카페 주문으로 두 역할을 설명합니다.

Slide 07 원본 보기

HTML은 구조와 내용, CSS는 모양과 배치, JavaScript는 동작과 반응을 담당합니다. 좋아요 버튼의 구조, 디자인, 클릭 반응으로 설명합니다.

Slide 08 원본 보기

데이터베이스는 정보를 정리해 저장하고 필요할 때 찾는 보관함입니다. 도서관의 책 제목과 대출 상태를 저장, 검색, 수정, 삭제하는 예시입니다.

Slide 09 원본 보기

도메인은 사람이 기억하기 쉬운 이름, IP 주소는 인터넷 통신에 사용하는 숫자 주소입니다. DNS가 이름에 맞는 IP 주소를 찾아 연결합니다. example.com과 192.0.2.10은 설명용 예시입니다.

Slide 10 원본 보기

API는 프로그램끼리 요청과 결과를 주고받는 정해진 연결 방식입니다. 앱은 손님, API는 주문 창구, 서버는 주방에 비유하며 날씨 API의 요청과 응답을 설명합니다.

Slide 11 원본 보기

호스팅은 웹사이트가 운영될 공간과 환경, 배포는 만든 웹사이트를 그 환경에 적용하는 과정입니다. 제작, 배포, 방문자 이용과 수정 후 재배포의 흐름입니다.

Slide 12 원본 보기

GitHub는 코드와 변경 기록을 온라인에 보관하고 함께 작업하는 공간입니다. Git은 변경 기록을 관리하는 도구, GitHub는 Git 프로젝트를 올리고 협업하는 서비스입니다. 프로젝트 저장소에 코드와 자료를 모으고, 무엇을 바꿨는지 확인하고 이전 코드를 찾으며, 동료의 수정안을 검토해 반영합니다. 강의 신청 사이트 예시: 내 컴퓨터에서 수정, 변경 기록 저장, GitHub에 올리기. 공개와 비공개를 선택할 수 있으며 비밀번호와 API 키는 올리지 않습니다.

Slide 13 원본 보기

커밋은 선택한 코드 변경을 설명과 함께 Git 기록에 남기는 것입니다. 게임의 저장 지점처럼 이전 기록을 찾아 비교하거나 복구할 수 있습니다. 수정하고 파일을 저장한 뒤, 변경 선택, 커밋, 푸시 순으로 진행합니다. 파일 저장은 작업 파일 갱신, 커밋은 내 Git 기록 저장, 푸시는 GitHub 등 원격 저장소에 기록 올리기입니다.

Slide 14 원본 보기

토큰은 AI가 글을 읽고 만드는 작은 단위입니다. 한 글자나 한 단어와 항상 같지는 않으며 언어와 모델에 따라 달라집니다. 컨텍스트 윈도우는 한 번의 응답에서 다룰 수 있는 정보량의 범위로, 작업 책상에 비유할 수 있습니다. 대화와 자료, 도구 결과와 새 답변이 공간을 사용합니다. 긴 작업에서는 목표와 결정 사항을 요약하고 필요한 자료를 제공합니다.

Slide 15 원본 보기

AI 에이전트는 목표에 맞춰 다음 행동을 정하고 도구를 사용하며 결과를 확인하는 시스템입니다. 강의 신청 페이지 만들기 예시에서 계획, 코드 작성과 도구 실행, 결과 확인, 필요시 수정의 흐름을 반복합니다. 사람이 목표와 기준을 정하고 권한과 중요한 실행을 확인하며 최종 결과를 검토합니다.

Slide 16 원본 보기

MCP는 Model Context Protocol의 약자로 AI 앱이 외부 데이터와 도구를 연결해 사용하는 표준 규약입니다. USB-C처럼 공통 연결 방식을 정한다는 비유이며 실제 케이블은 아닙니다. AI 앱은 MCP 서버를 통해 허용된 파일, GitHub, 데이터베이스 등의 도구와 정보를 사용할 수 있습니다. 연결을 지원하는 앱과 서버의 설정 및 권한이 필요합니다.

Slide 17 checklist

처음부터 완벽히 이해하려고 하지 않아도 됩니다

대충 만들고 반복하면서 익히는 것이 바이브 코딩에 더 잘 맞습니다.

작은 기능부터 만든다

자주 저장한다

자주 테스트한다

에러 메시지를 버리지 않는다

AI에게 충분한 맥락을 준다

필요할 때만 구조를 고도화한다

tips_and_updates

반복과 확인이 실력을 만듭니다.

Slide 18 flag

모든 용어를 완벽히 외울 필요는 없습니다

핵심 개념을 반복적으로 접하면서 AI에게 더 정확히 요청할 수 있게 되는 것이 목표입니다.

클라이언트, 서버, 프론트엔드, 백엔드, API, 배포, GitHub는 계속 반복해서 만납니다

프롬프트와 컨텍스트를 이해하면 AI 코딩 결과물이 빨리 좋아집니다

용어는 암기가 아니라 실전에서 익히는 언어입니다

tips_and_updates

개념이 잡히면 AI에게 더 정확히 요청할 수 있고, 결과물도 더 빠르게 개선할 수 있습니다.

Slide 19 play_circle

play_circle

Next Slide

PHP MVC 웹 프로젝트 환경 세팅

다음 자료에서 PHP, MySQL, jQuery, Tailwind CSS 기반 MVC 프로젝트 세팅 흐름을 이어서 확인합니다.

자료 열기 arrow_forward

Slide 20 prompt_suggestion

Next Material

바이브코딩 프롬프트 모음

PHP MVC 프로젝트를 AI와 함께 만들 때 바로 사용할 수 있는 환경 점검, 프로젝트 생성, MVC 구조, DB 연결, 오류 해결 프롬프트를 모았습니다.

환경 세팅과 프로젝트 구조 생성

MVC, PDO, Tailwind/jQuery 구성

오류 해결과 문서화 프롬프트

프롬프트 모음 열기 arrow_forward