[비개발자 사고법 03강] 자바스크립트가 뭐냐고요? 멈춘 웹페이지에 '생명' 넣기입니다

"예쁜데 왜 안 눌려요?" — 고장이 아니라 죽어 있는 페이지

바이브 코딩을 처음 하면 거의 다 이 벽에 부딪힙니다. 글도 다 쓰고 디자인도 다 했는데, 확인 버튼을 누르니까 다음 페이지로 넘어가질 않아요. 좋아요 버튼을 눌러도 숫자가 그대로고요. "뼈대도 만들고 디자인까지 했는데 왜 안 되지? 고장난 거 아냐?" 싶어 토큰만 날리고 이상한 데 손대다 꼬여서 "역시 나는 바이브 코딩이랑 안 맞나 봐"라며 포기하기 딱 좋은 순간이죠.

그런데 김지백 강사는 단호하게 말합니다. 그건 고장이 아니라 '죽어 있는' 거라고요. 음식으로 치면, 레시피대로 다 만들었는데 맛이 삼삼한 상태예요. 엄마가 "간장 좀 더 쳐라" 하면 맛이 확 사는 것처럼, 웹페이지에도 '움직임'이라는 간장을 한 숟갈 넣어 줘야 살아납니다. 그 간장이 바로 자바스크립트고, 안 넣었으니 버튼이 가만히 있는 게 당연한 겁니다.

자바스크립트 = 멈춘 페이지에 넣는 '생명의 전기'

이 시리즈를 한 줄로 꿰면 이렇습니다 — 1강 HTML은 뼈대, 2강 CSS는 옷, 그리고 3강 자바스크립트는 그 몸을 실제로 움직이게 하는 근육이자 전기입니다. 뼈대를 세우고 옷을 입혀도, 전기가 안 들어오면 그냥 서 있기만 하죠.

김지백 강사가 가장 강조하는 비유가 백화점 마네킹입니다. 마네킹은 머리도 팔도 있고 옷도 잘 입었어요. 멀리서 보면 사람 같습니다(=HTML 뼈대 + CSS 옷). 그런데 다가가 악수를 청하면? 아무 반응이 없습니다. 사람 모양이지 사람이 아니니까요. AI에게 "예쁜 화면 만들어 줘"라고만 하면 딱 이 마네킹이 나옵니다. 여기에 생명의 숨을 불어넣어 손을 내밀면 악수를 받아 주게 만드는 일, 그게 자바스크립트예요.

비개발자가 외울 단어는 딱 4개 — 변수·함수·DOM·이벤트

자바스크립트가 하는 일은 거창해 보이지만, 사실 우리가 매일 누르는 것들입니다. 김지백 강사는 이걸 네 가지 비유로 정리했어요. 코드는 몰라도 됩니다. AI가 알아서 짜 주니까요. 다만 이 단어가 무슨 뜻인지 '알아듣기 용'으로만 챙기면 됩니다.

AI가 이렇게 말하면 이런 뜻 — '알아듣기' 대응표

여기가 이 영상의 진짜 핵심입니다. 김지백 강사는 "자바스크립트는 내가 직접 시키는 게 아니라, AI가 답한 말을 알아듣는 게 핵심"이라고 못 박습니다. 좋아요 버튼 하나만 만들어도 AI는 알아서 변수·함수·이벤트를 다 세팅해 줘요. 우리가 만드는 건 세상에 하나뿐인 프로젝트가 아니라 대부분 비슷한 웹페이지라, AI가 거의 다 알아서 합니다. 그러니 우리가 할 일은 AI의 답을 알아듣고 받아치는 것뿐이에요. 아래 표를 책상 옆에 붙여 두세요.

"클릭 이벤트"라는 말에 "이벤트? 무슨 행사 떴나?" 하고 멈추면 작업이 안 됩니다. 반대로 뜻을 알면 "그래, 두 번 연속은 못 누르게 막아 줘"처럼 곧장 받아칠 수 있죠. 이렇게 받아쳐야 AI와 대화가 되고, 내가 주도권을 쥐고 끌고 갈 수 있습니다.

나쁜 지시 vs 좋은 지시 — "버튼 만들어 줘"는 큰일 납니다

같은 좋아요 버튼을 만들어도 결과가 갈리는 건 실력이 아니라 지시의 구체성 때문입니다. 이제 이 영상을 본 분들은 "좋아요 버튼 하나 만들어 줘" 식으로 던지면 안 됩니다. 운 좋으면 AI가 알아서 해 주지만, 반응이 없을 때 "아, 이벤트 효과를 안 넣었구나"라고 짚어낼 수 있어야 진짜 바이브 코더예요.