바이브 코딩이란? — 말로 웹사이트 만들기
코드 한 줄 없이 대화만으로 웹사이트를 만드는 새로운 방식을 소개해요.
이 챕터를 끝내면 '바이브 코딩'이 무엇인지, 그리고 이 트랙에서 무엇을 만들게 되는지 한눈에 파악할 수 있어요.
시작 전 준비물
- Mac 또는 Linux 컴퓨터 (Windows는 Codex 데스크탑 앱이 experimental 상태예요)
- ChatGPT 계정 — Plus($20/월)에 Codex 포함, 무료 티어에서도 한정 기간 일부 사용 가능
- 인터넷 연결
- 30분~1시간 정도의 여유 시간
위가 다 준비됐으면 다음 챕터에서 바로 셋업으로 넘어가요. (이 트랙에서는 GitHub 계정·터미널·코딩 지식 모두 필요 없어요. 인터넷에 올려서 친구한테 링크 공유하는 단계는 별도 GitHub 트랙으로 따로 다뤄요.)
코드 대신 의도를 전달한다
기존 웹사이트 제작은 HTML·CSS·JavaScript를 직접 작성하거나, 개발자를 고용하거나, 노코드 툴의 드래그앤드롭 UI를 익혀야 했어요. 바이브 코딩은 다른 출발점을 택해요. 원하는 결과를 말로 설명하면 AI가 코드를 대신 써줍니다.
예를 들어 이렇게 말하는 거예요:
"포트폴리오 페이지 만들어줘. 상단에 내 이름과 한 줄 소개, 아래에 프로젝트 카드 3개. 배경은 다크 톤으로."
AI는 이 의도를 받아 파일을 생성하고, 브라우저에서 바로 확인할 수 있는 상태로 만들어줘요. 여러분이 외워야 할 명령어나 문법은 없어요.
이 트랙에서 만드는 것
6개 챕터를 거치면서 자기 컴퓨터에서 바로 열어볼 수 있는 정적 웹페이지 하나를 처음부터 끝까지 완성해요.
- 챕터 2–3: 환경 셋업 + 첫 페이지 생성
- 챕터 4: 디자인 톤·레이아웃·문구 다듬기
- 챕터 5: 이미지·아이콘·새 섹션(프로젝트 카드·FAQ) 채우기
- 챕터 6: 탭 제목·favicon·OG 메타로 작품처럼 마무리
코드를 읽거나 외울 필요 없이, Codex 앱에 말을 걸면서 단계마다 결과물이 쌓여요. 마지막 챕터 끝에서 GitHub Pages로 인터넷에 올리고 싶다면 별도 GitHub 트랙으로 자연스럽게 넘어갈 수 있어요.
다음 챕터에서 바로 시작해요
마인드셋 설명은 여기까지예요. 다음 챕터에서는 Codex 데스크탑 앱을 설치하고 ChatGPT 계정으로 로그인한 뒤, 첫 번째 웹페이지 파일을 실제로 만들어봐요.