열림 L01 · 입문 01 / 08 20–25분

바이브코딩이란 무엇인가

오늘은 설치가 없습니다. 코드를 직접 쓰는 일과 무엇이 다른지만 보고, 프롬프트 한 장을 그대로 붙여 한 페이지를 엽니다.

1. 코드를 쓰는 일과 무엇이 다른가

코드를 쓰는 일은 문법과 파일을 내가 적는 일입니다. 화면은 그 다음에 나옵니다. 틀린 줄이 있으면 내가 고칩니다.

바이브코딩은 순서가 반대입니다. 내가 먼저 이 화면에 무엇이 보여야 하는지를 적습니다. AI가 파일을 만들고, 나는 열린 화면을 보고, 한 가지씩 다시 시킵니다.

• 시작점은 문법 책이 아닙니다. “이 페이지에 뭐가 보여야 하는가”입니다.
• 내가 적는 글은 코드가 아닙니다. AI에게 주는 지시, 곧 프롬프트입니다.
• 끝난 기준은 파일 개수가 아닙니다. 그 화면이 브라우저에서 실제로 열리는지입니다.

바이브코딩은 코드를 몰라도 된다는 말이 아닙니다. 오늘은 코드를 안 씁니다. 대신 결과 화면을 기준으로 지시를 쓰는 버릇을 먼저 붙입니다. 수료나 수익을 약속하지 않습니다. 한 페이지가 열리면 오늘은 충분합니다.

2. 태계랩이 이미 올린 화면으로 보면

가상 회사 이야기는 쓰지 않습니다. 태계랩이 지금 공개해 둔 세 화면이면 충분합니다. 매출 숫자를 만들지 않습니다. 여기서 볼 것은 형태입니다.

랜딩

태계랩 첫 화면

스튜디오가 무엇을 만드는지 한 장에 적힌 페이지입니다. 큰 제목이 있고, 한 줄 소개가 있고, 제품으로 가는 버튼이 실제로 움직입니다. 주소는 taegye.com 입니다.

저널

바이브 코딩, 첫 배포까지

제목이 본문에 보입니다. 이 글이 무엇을 정리하는지 한 문장이 바로 아래 있습니다. 다음 글로 가는 링크가 있습니다. 배포 강의가 아니라, 이미 올라가 있는 기록입니다.

계산기

운하명리 — 사주 계산 칸

생년월일을 넣으면 사주 기둥을 계산하는 화면입니다. 저널 「명리 제품의 범위」에서 적었듯, 계산과 운세 문장은 한 덩어리가 아닙니다. 숫자를 넣는 칸과 결과가 보이면 계산기입니다. 오늘은 그 제품 전체를 만들지 않습니다.

세 화면의 공통점은 작습니다. 제목이 보이고, 이 페이지가 왜 있는지 한 문장이 보이고, 다음으로 가는 링크나 버튼이 실제로 동작합니다. 오늘 만들 한 페이지의 기준도 이것뿐입니다.

3. 지금 쓰는 프롬프트

아래 글을 그대로 복사해 Claude, ChatGPT, Cursor 중 하나에 넣으세요. 도구는 하나만 고르면 됩니다. AI가 HTML 파일 하나를 주면, 받아서 브라우저로 엽니다. 여러 파일을 만들라고 하지 마세요.

하나의 HTML 파일만 만들어 주세요. 다른 파일은 만들지 마세요.

이 페이지는 태계랩 저널 글 「바이브 코딩, 첫 배포까지」를 소개하는 한 장입니다.

반드시 지킬 것:
1. 본문 맨 위에 보이는 제목: 바이브 코딩, 첫 배포까지
2. 제목 바로 아래 목적 문장 한 줄: 머릿속의 화면을 산 페이지에 맞추기 전에, 닫아야 하는 순서를 적는 글입니다.
3. 그 아래 실제로 이동하는 링크 하나. 텍스트는 「글 읽기」, 주소는 https://taegye.com/journal/vibe-coding-first-deploy/
4. 배경은 어두운 남색(#04060f), 강조는 금색(#c9a24b). 글꼴은 시스템 기본이어도 됩니다.
5. 광고, 결제, 가격, 회원가입, 언어 전환, 두 번째 페이지는 넣지 마세요.
6. 완성본은 HTML 한 파일로 주세요. 받아서 브라우저로 바로 열리게 해주세요.

파일이 오면 바탕화면이든 다운로드 폴더든 상관없습니다. 더블클릭해서 브라우저가 열리면 됩니다. 배포는 다음 레슨 일입니다.

4. 다 되면 이런 화면이어야 한다

브라우저에서 그 파일을 엽니다. 아래 세 가지가 보이면 통과입니다. 예쁘기는 보지 않습니다.

세 개가 있으면 오늘은 끝입니다. 메뉴를 더 달거나, 두 번째 페이지를 만들거나, 가격표를 붙이지 마세요.

5. 자주 깨지는 곳, 한 가지만 고친다

한 번에 다 고치라고 하면 처음 화면이 사라지는 경우가 많습니다. 깨진 것 하나를 고릅니다. 아래 문장은 그 하나만 말합니다.

• 제목이 브라우저 탭에만 있고 화면에는 큰 글자가 없다.
• 링크처럼 보이는데 눌러도 그 자리거나 주소가 # 이다.
• 시키지 않은 회원가입, 가격, 두 번째 페이지를 붙인다.
• 한 번에 색과 문장과 버튼을 같이 고치려다 목적 문장이 사라진다.

다른 부분은 바꾸지 마세요. 지금 파일에서 한 가지만 고칩니다.

페이지를 열었을 때 본문에 제목이 안 보이면, 보이는 제목만 추가하세요. 문구는 「바이브 코딩, 첫 배포까지」입니다.
제목은 있는데 목적 문장이 없으면, 제목 바로 아래에 이 문장만 넣으세요. 「머릿속의 화면을 산 페이지에 맞추기 전에, 닫아야 하는 순서를 적는 글입니다.」
둘 다 있는데 링크가 안 움직이면, 「글 읽기」를 https://taegye.com/journal/vibe-coding-first-deploy/ 로 가는 링크로만 고치세요.

색, 레이아웃, 새 섹션은 손대지 마세요.

고친 파일을 다시 엽니다. 세 가지 확인만 다시 봅니다. 통과하면 더 시키지 않습니다.