강의 목차에 "웹사이트 해킹하기"라는 항목이 있습니다. 놀랄 것 없습니다. 브라우저에서 F12를 눌러 남의 사이트가 어떤 부품으로 만들어졌는지 들여다보고, 내 화면에서만 잠깐 바꿔보는 것입니다. 서버를 건드리는 게 아니라 내 컴퓨터에 내려받은 사본을 보는 것이라, 새로고침하면 원래대로 돌아옵니다.
이게 왜 중요하냐면, 비전공자가 웹을 배우는 가장 빠른 길이 여기에 있기 때문입니다. 마음에 드는 사이트를 열고 "이 부분은 어떻게 만들었나"를 직접 확인하는 습관은 어떤 교재보다 실전적입니다.
이 편이 다루는 목차 구간
| 위치 | 목차 |
|---|---|
| 24:24 | (1주차) 웹사이트 해킹하기 |
| 26:12 | (1주차) CSS, JavaScript 개념 |
| 28:17 | (1주차) 로또 번호 추첨 웹 사이트 개발 실습 |
(1주차 · 24:24) 웹사이트 해킹하기 — 실은 뜯어보기입니다
브라우저에서 F12를 누르면 화면 옆이나 아래에 개발자 도구가 열립니다. 여기서 할 수 있는 일은 세 가지입니다.
- 구조 보기 — 이 버튼이 어떤 태그로 만들어졌는지 확인합니다.
- 겉모습 확인 — 색과 간격이 어떤 값으로 지정됐는지 봅니다.
- 잠깐 바꿔보기 — 글자를 고치거나 색을 바꿔봅니다. 새로고침하면 사라집니다.
여기서 반드시 짚어야 할 것이 있습니다. 바뀐 것은 내 화면뿐입니다. 남의 서버에는 아무 영향이 없습니다. 반대로 말하면, 이걸로 무언가를 진짜 바꿀 수는 없습니다. 인터넷에 도는 "잔액을 바꿨다"류의 장난 사진이 전부 이 방식입니다.
주의할 점도 하나 있습니다. 남의 사이트를 뜯어보는 것과 그 코드를 그대로 가져다 쓰는 것은 다른 문제입니다. 구조와 아이디어를 참고하는 것은 자유롭지만, 디자인이나 문구를 통째로 복사하면 저작권 문제가 생길 수 있습니다.
(1주차 · 26:12) CSS와 JavaScript — 꾸미기와 움직이기
2편에서 역할만 나눠뒀던 두 가지를 여기서 조금 더 봅니다.
CSS는 "무엇을 어떻게 보이게 할지"를 정합니다. 대상을 고르고, 그 대상의 속성값을 지정하는 구조입니다. "제목은 파란색, 크기는 24" 같은 지시가 줄줄이 쌓인 것이라고 보면 됩니다. 바이브 코딩에서는 이 부분을 직접 쓸 일이 거의 없지만, "여백이 너무 좁다", "모바일에서 글자가 잘린다"처럼 지적할 수 있는 눈은 필요합니다.
JavaScript는 사건에 반응합니다. 버튼을 누르면, 값을 입력하면, 시간이 지나면 무언가를 합니다. 계산하고, 화면을 바꾸고, 값을 저장합니다. 오늘날 웹에서 "움직이는 것"은 거의 다 여기 소관입니다.
(1주차 · 28:17) 로또 번호 추첨 사이트 — 첫 결과물의 조건
첫 실습으로 로또 번호를 뽑는 페이지를 만듭니다. 예제로 이걸 고른 이유가 있습니다.
- 결과가 눈에 보입니다. 버튼을 누르면 숫자가 나옵니다. 됐는지 안 됐는지 바로 압니다.
- 세 가지가 다 들어갑니다. 버튼(HTML), 배치와 색(CSS), 무작위 추첨(JavaScript).
- 짧습니다. 30분 안에 끝납니다.
퇴직 후 무언가를 만들어보려는 독자에게 이 구간이 주는 교훈은 로또가 아닙니다. 첫 결과물은 쓸모가 아니라 완결성으로 고르라는 것입니다. 거창한 아이디어를 첫 작품으로 잡으면 대개 미완성으로 끝납니다. 끝까지 가본 경험이 다음 것을 만들 힘이 됩니다.
첫 작품의 목표는 쓸모가 아니라 "완성"입니다. 쓸모는 세 번째 작품쯤부터 생각해도 늦지 않습니다.
지금 해볼 수 있는 것
- 자주 가는 사이트를 열고 F12를 눌러보세요. 무엇이 보이는지만 확인하면 됩니다.
- 마음에 드는 부분을 발견하면 화면을 캡처해두세요. 나중에 AI에게 "이런 느낌으로"라고 보여줄 때 씁니다.
- AI에게 이렇게 요청해보세요. "버튼을 누르면 1부터 45 사이의 숫자 6개가 겹치지 않게 나오는 웹페이지를 만들어줘. HTML 파일 하나로." 결과가 나오면 그것이 첫 결과물입니다.
다음 편 예고
4편은 31:31부터입니다. 만든 것을 인터넷에 올리는 일, 즉 배포를 다룹니다. 내 컴퓨터에만 있는 파일과 남이 주소로 열 수 있는 사이트 사이에는 생각보다 큰 차이가 있습니다. 이어서 AI 코딩 도구를 본격적으로 쓰기 시작하는 환경 세팅(42:08)도 여기서 나옵니다.
출처
이 글은 유튜브 영상 「이 영상이 당신 인생을 바꿉니다. 바이브 코딩 1인 창업 3시간 통합본」(조코딩 JoCoding)의 목차 가운데 24:24~31:31 구간을 출발점으로 삼아, 퇴직 전후 중장년 독자의 관점에서 다시 구성한 것입니다. 강의의 실제 설명과 실습 화면은 원본 영상에서 직접 확인하시기 바랍니다.
브라우저 개발자 도구는 열람과 임시 수정을 위한 기능입니다. 타인의 서비스에 무단으로 접근하거나 데이터를 변경하는 행위는 법적 책임이 따를 수 있으며, 이 글은 그러한 행위를 안내하지 않습니다.
도움이 되는 공식자료
이 글은 퇴직생활연구소 편집실이 생성형 AI 도구로 초안을 만들고, 공식 출처를 사람이 확인한 뒤 발행했습니다. 편집자 이름은 담당 업무를 가리키는 운영명이며 실존 인물이 아닙니다. 편집실 운영 방식 보기
