웹 개발을 배우겠다고 마음먹은 사람이 가장 먼저 마주치는 벽은 문법이 아니라 단어입니다. HTML, CSS, JavaScript가 한 번에 쏟아지고, 각각이 뭘 하는 건지 구분되지 않은 채로 실습이 시작됩니다. 그러면 따라 치기는 해도 무엇을 하고 있는지는 모르는 상태가 됩니다.
이 구간은 그 세 단어의 역할을 나누는 자리입니다. 바이브 코딩으로 만들 계획이라면 문법을 외울 필요는 없습니다. 다만 셋의 담당 구역은 알아야 합니다. 그래야 AI에게 "여기가 이상하다"고 정확히 말할 수 있습니다.
이 편이 다루는 목차 구간
| 위치 | 목차 |
|---|---|
| 16:23 | (1주차) 웹 개발 기초 - HTML, CSS, JavaScript |
| 19:12 | (1주차) 개발 환경 세팅 |
| 19:34 | (1주차) HTML 개념 & 웹 개발 실습 기초 |
(1주차 · 16:23) HTML, CSS, JavaScript는 각각 무엇을 맡나
집 짓기에 비유하는 설명이 흔한데, 실제로 이만큼 잘 맞는 비유도 드뭅니다.
| 이름 | 맡는 일 | 없으면 |
|---|---|---|
| HTML | 뼈대. 제목, 문단, 버튼, 표가 어디에 있는지 | 아무것도 없습니다 |
| CSS | 겉모습. 색, 크기, 간격, 배치 | 글씨만 줄줄이 나옵니다 |
| JavaScript | 움직임. 누르면 반응하고, 계산하고, 바뀌는 것 | 보이기만 하고 아무 반응이 없습니다 |
이 구분이 왜 실용적이냐면, 고장 났을 때 어디를 봐야 하는지가 바로 나오기 때문입니다. 버튼이 안 보이면 HTML, 보이는데 못생겼으면 CSS, 눌러도 반응이 없으면 JavaScript입니다. AI에게 물을 때도 "버튼을 눌러도 아무 일이 안 생긴다"처럼 증상을 말하면 훨씬 빨리 고쳐집니다.
(1주차 · 19:12) 개발 환경 세팅 — 지금 당장은 안 해도 됩니다
강의는 여기서 코드를 쓰는 프로그램을 설치합니다. 다만 이 시점에 설치가 막히면 시작도 못 하고 끝나는 경우가 많습니다. 순서를 바꾸는 편을 권합니다.
- 처음에는 브라우저만 있으면 됩니다. 웹에서 바로 편집하고 결과를 보여주는 서비스가 여럿 있습니다. 설치 없이 개념을 먼저 익히세요.
- 손에 익으면 그때 설치합니다. 4편에서 다룰 AI 코딩 도구를 쓰기 시작할 때가 적당한 시점입니다.
- 설치가 막히면 화면을 그대로 AI에게 보여주세요. 오류 메시지를 요약하지 말고 통째로 붙여넣는 것이 핵심입니다.
설치 단계에서 좌절하는 것은 실력 문제가 아닙니다. 컴퓨터마다 상태가 달라서 생기는 일이고, 강의 영상과 내 화면이 다르게 보이는 것이 정상입니다.
(1주차 · 19:34) HTML 실습 — 태그 세 개면 시작됩니다
실습 구간에서 다루는 것은 태그입니다. 꺾쇠 괄호로 감싼 이름표를 붙여 "이건 제목이다, 이건 문단이다"를 표시하는 방식입니다. 종류가 수백 개지만 실제로 처음 쓰는 것은 몇 개뿐입니다.
- 제목 — 큰 제목부터 작은 제목까지 단계가 있습니다. 검색에도 영향을 줍니다.
- 문단 — 본문 한 덩어리.
- 링크 — 다른 주소로 이동합니다.
- 이미지 — 그림을 넣습니다. 설명글을 같이 넣는 습관이 중요합니다.
- 목록 — 지금 읽고 계신 이 부분입니다.
바이브 코딩으로 만들 때도 이 이름들은 알아두는 편이 좋습니다. "제목을 좀 더 크게"보다 "h2 제목의 크기를 키워줘"가 훨씬 정확하게 전달됩니다. AI에게 말을 거는 어휘가 늘어나는 만큼 결과가 좋아집니다.
문법은 몰라도 됩니다. 하지만 부품 이름은 알아야 주문을 할 수 있습니다.
중장년 독자가 여기서 자주 막히는 지점
- 영어 단어가 부담스럽다 — 뜻을 외우지 말고 역할만 기억하세요. 위의 표 한 장이면 충분합니다.
- 강의 화면과 내 화면이 다르다 — 프로그램 버전 차이입니다. 다르다고 잘못된 것이 아닙니다.
- 따라 쳤는데 안 나온다 — 열에 아홉은 꺾쇠나 따옴표 하나가 빠진 것입니다. 전체를 복사해 AI에게 확인시키는 편이 눈으로 찾는 것보다 빠릅니다.
- 다 이해하고 넘어가려 한다 — 이 구간은 1편에서 말한 지도의 첫 칸입니다. 완벽하게 이해하고 넘어갈 필요가 없습니다.
다음 편 예고
3편은 24:24부터입니다. 강의에서 가장 인상적인 대목 가운데 하나인 "웹사이트 해킹하기" 구간이 나옵니다. 이름은 과격하지만 남의 사이트가 어떻게 만들어졌는지 들여다보는 방법이고, 실제로는 가장 좋은 공부법 가운데 하나입니다. CSS와 JavaScript 개념, 그리고 첫 실습 결과물도 여기서 나옵니다.
출처
이 글은 유튜브 영상 「이 영상이 당신 인생을 바꿉니다. 바이브 코딩 1인 창업 3시간 통합본」(조코딩 JoCoding)의 목차 가운데 16:23~24:24 구간을 출발점으로 삼아, 퇴직 전후 중장년 독자의 관점에서 다시 구성한 것입니다. 강의의 실제 설명과 실습 화면은 원본 영상에서 직접 확인하시기 바랍니다.
도구와 서비스의 기능·요금·정책은 수시로 바뀝니다. 이 글은 판단의 틀을 정리한 참고자료이며 특정 도구의 동작이나 수익을 보장하지 않습니다.
도움이 되는 공식자료
이 글은 퇴직생활연구소 편집실이 생성형 AI 도구로 초안을 만들고, 공식 출처를 사람이 확인한 뒤 발행했습니다. 편집자 이름은 담당 업무를 가리키는 운영명이며 실존 인물이 아닙니다. 편집실 운영 방식 보기
