JavaScript 오류도 없는데 버튼이 안 눌린다? 바이브코딩 초보가 놓치는 원인 10가지
“콘솔을 확인했는데 JavaScript 오류가 하나도 없습니다. 그런데 버튼을 눌러도 아무 일도 일어나지 않아요.”
바이브코딩으로 웹사이트를 만들다 보면 꽤 답답한 상황입니다.
오류 메시지가 있다면 AI에게 보여 주고 원인을 찾을 수 있지만, 아무런 오류도 나오지 않으면 어디부터 확인해야 할지 막막해집니다.
하지만 오류가 없다는 것은 코드가 원하는 대로 작동한다는 뜻이 아닙니다.
JavaScript 문법에는 문제가 없어도 버튼과 함수가 연결되지 않았거나, 조건문 때문에 실행되지 않거나, 다른 요소가 버튼을 가리고 있을 수 있습니다.
JavaScript 오류가 없어도 버튼이 작동하지 않는 이유를 이해하면 AI에게 전체 코드를 다시 작성시키지 않고 문제 범위를 빠르게 좁힐 수 있습니다.
버튼과 JavaScript 함수가 연결되지 않았을 수 있습니다
가장 먼저 확인할 부분입니다.
버튼은 화면에 정상적으로 표시되지만 클릭했을 때 실행할 함수가 연결되지 않았다면 아무 일도 일어나지 않습니다.
예를 들어 HTML에는 saveButton이라는 버튼이 있는데 JavaScript에서는 submitButton을 찾고 있을 수 있습니다.
사람 눈에는 둘 다 저장 버튼처럼 보이지만 프로그램에서는 전혀 다른 이름입니다.
버튼이 보인다는 것과 JavaScript에 연결되어 있다는 것은 별개의 문제입니다.
먼저 버튼의 id나 class와 JavaScript에서 찾는 이름이 정확히 일치하는지 확인하세요.
이벤트 리스너가 등록되지 않았을 수 있습니다
버튼을 눌렀을 때 특정 함수를 실행하려면 클릭 이벤트가 연결되어 있어야 합니다.
바이브코딩 과정에서 HTML을 수정하거나 JavaScript 파일을 나누다 보면 이벤트 연결 코드가 빠질 수 있습니다.
이때 버튼 자체에는 문제가 없습니다.
실행할 함수에도 문제가 없을 수 있습니다.
단지 둘 사이를 연결해 주는 과정이 없는 것입니다.
버튼 → 클릭 이벤트 → 함수 실행
이 세 단계가 모두 이어져 있는지 확인해야 합니다.
JavaScript가 버튼보다 너무 일찍 실행될 수 있습니다
웹페이지는 HTML 요소가 만들어지는 순서와 JavaScript가 실행되는 시점이 중요합니다.
JavaScript가 실행될 당시 버튼이 아직 만들어지지 않았다면 원하는 요소를 제대로 연결하지 못할 수 있습니다.
그래서 스크립트 위치나 실행 시점을 확인해야 합니다.
AI에게 코드를 수정시키면서 < script > 위치가 바뀌었다면 이 부분도 살펴보세요.
단순히 JavaScript 문법만 검사해서는 발견하지 못할 수 있는 문제입니다.
코드가 맞더라도 실행되는 시간이 맞지 않으면 기능은 작동하지 않을 수 있습니다.
클릭은 되지만 조건문에서 바로 막힐 수 있습니다
버튼을 누르면 함수가 실행되지만 사용자 눈에는 아무 일도 일어나지 않는 경우도 있습니다.
예를 들어 함수 안에
입력값이 없으면 종료
로그인하지 않았으면 종료
데이터가 없으면 종료
같은 조건이 있을 수 있습니다.
조건을 만족하지 못하면 함수가 중간에서 끝납니다.
오류가 발생한 것이 아니므로 콘솔에도 특별한 오류가 표시되지 않을 수 있습니다.
이런 경우 버튼이 안 되는 것이 아니라 버튼 이후의 코드가 의도적으로 실행을 멈춘 것입니다.
버튼 위에 투명한 요소가 올라가 있을 수 있습니다
이 문제는 JavaScript만 보고 있으면 찾기 어렵습니다.
화면에서는 버튼이 정상적으로 보이는데 실제로는 투명한 레이어나 다른 HTML 요소가 버튼 위를 덮고 있을 수 있습니다.
사용자가 버튼을 클릭했다고 생각하지만 실제 클릭은 위에 있는 다른 요소가 받고 있는 것입니다.
팝업
모달 배경
투명한 div
잘못 설정된 위치 요소
등을 확인해 볼 필요가 있습니다.
CSS의 z-index, position, pointer-events 같은 설정도 클릭 가능 여부에 영향을 줄 수 있습니다.
버튼 문제처럼 보여도 실제 원인은 CSS일 수 있습니다.
버튼이 disabled 상태인지 확인하세요
HTML 버튼에는 사용자가 누르지 못하도록 비활성화하는 상태를 설정할 수 있습니다.
회원가입 화면을 예로 들면 모든 항목을 입력하기 전까지 가입 버튼을 비활성화할 수 있습니다.
문제는 AI가 조건에 따라 버튼을 활성화하는 코드를 수정하면서 계속 비활성화 상태로 남게 만드는 경우입니다.
화면 디자인에 따라 비활성화된 버튼도 일반 버튼과 비슷하게 보일 수 있습니다.
그래서 클릭이 전혀 되지 않는다면 버튼의 disabled 상태부터 확인하는 것도 좋은 방법입니다.
버튼을 눌렀지만 페이지가 바로 새로고침될 수 있습니다
폼 안에 있는 버튼에서 자주 발생하는 문제입니다.
사용자는 버튼을 누르면 JavaScript 함수가 실행되어 화면이 바뀔 것으로 예상합니다.
하지만 버튼이 폼 제출 동작을 하면서 페이지가 바로 새로고침될 수 있습니다.
함수가 잠깐 실행됐더라도 화면이 즉시 초기화되기 때문에 아무 일도 일어나지 않은 것처럼 느껴집니다.
이런 경우에는 버튼의 역할과 폼 제출 동작을 함께 확인해야 합니다.
클릭 자체가 실패한 것인지, 클릭 직후 다른 동작이 발생한 것인지 구분하는 것이 중요합니다.
같은 id를 여러 요소에서 사용하고 있을 수 있습니다
AI에게 HTML을 여러 차례 수정시키거나 코드를 복붙하다 보면 같은 id를 두 개 이상의 요소에 사용하는 실수가 생길 수 있습니다.
예를 들어 PC용 저장 버튼과 모바일용 저장 버튼을 따로 만들면서 둘 다 같은 id를 사용하는 경우입니다.
JavaScript는 개발자가 예상했던 버튼이 아닌 다른 요소와 연결될 수 있습니다.
그 결과 한쪽 버튼만 작동하거나 특정 화면 크기에서만 문제가 발생할 수 있습니다.
id는 한 페이지에서 하나의 요소를 식별하는 용도로 사용하는 것이 기본입니다.
비슷한 버튼이 여러 개 필요하다면 구조에 맞게 class나 다른 선택 방법을 검토하는 편이 좋습니다.
버튼을 새로 만들면서 기존 이벤트 연결이 사라졌을 수 있습니다
이 부분은 바이브코딩에서 자주 놓칩니다.
처음 페이지가 열릴 때 JavaScript가 버튼에 클릭 이벤트를 연결했습니다.
그런데 이후 코드에서 해당 영역의 HTML을 통째로 다시 만들었다고 생각해 보겠습니다.
화면에는 똑같은 버튼이 다시 나타납니다.
하지만 JavaScript 입장에서는 처음 이벤트를 연결했던 버튼과 새로 생성된 버튼이 서로 다른 요소일 수 있습니다.
그래서 디자인도 같고 id도 같은데 클릭이 작동하지 않는 이상한 상황이 발생합니다.
동적으로 HTML을 다시 만드는 프로젝트라면 버튼 생성 시점과 이벤트 연결 방식을 함께 확인해야 합니다.
클릭 함수가 실제로 실행되는지부터 확인하세요
버튼이 작동하지 않을 때 가장 빠른 방법은 문제를 단계별로 나누는 것입니다.
처음부터 함수 전체를 분석하지 마세요.
먼저 확인해야 할 것은 하나입니다.
“클릭했을 때 함수 입구까지 들어오는가?”
개발자 도구의 디버거를 이용하거나 임시 로그를 넣어 클릭 이벤트가 실제로 발생하는지 확인할 수 있습니다.
함수 자체가 호출되지 않는다면 버튼과 이벤트 연결 쪽부터 확인합니다.
함수는 호출되는데 결과가 없다면 조건문, 데이터 처리, 화면 변경 부분으로 범위를 좁힙니다.
이렇게 하면 수백 줄의 JavaScript 전체를 수정할 필요가 없습니다.
오류 없는 버튼 문제, 이 순서로 확인하세요
- HTML에 버튼이 실제로 존재하는가?
- 버튼의 id와 JavaScript 선택자가 일치하는가?
- 클릭 이벤트가 제대로 등록되어 있는가?
- JavaScript가 실행되는 시점은 적절한가?
- 버튼이 disabled 상태는 아닌가?
- 다른 HTML 요소가 버튼을 덮고 있지 않은가?
- 클릭 후 폼 제출이나 새로고침이 발생하지 않는가?
- 같은 id가 여러 곳에 존재하지 않는가?
- HTML을 다시 만들면서 기존 이벤트가 사라지지 않았는가?
- 클릭 함수가 실제로 호출되는가?
버튼 → 이벤트 → 함수 → 조건 → 결과
순서대로 따라가면 원인을 훨씬 빠르게 찾을 수 있습니다.
AI에게 버튼 문제를 물어볼 때 사용하는 프롬프트
아래 문장을 그대로 활용해도 좋습니다.
“JavaScript 콘솔에는 현재 오류가 표시되지 않지만 버튼을 클릭해도 원하는 기능이 실행되지 않습니다. 전체 코드를 다시 작성하지 마세요. 먼저 버튼의 HTML id와 JavaScript 선택자가 일치하는지, 클릭 이벤트가 등록되어 있는지, disabled 상태인지, 폼 제출로 페이지가 새로고침되는지, 다른 요소가 버튼을 덮고 있는지 순서대로 확인해 주세요. 그다음 클릭 함수가 실제 호출되는지 확인하고, 함수가 실행된다면 어느 조건에서 중단되는지 추적해 주세요. 기존에 정상 작동하는 기능은 변경하지 말고 원인이 확인된 부분만 최소한으로 수정해 주세요.”
이런 방식으로 요청하면 AI가 무작정 버튼 코드를 새로 만드는 대신 클릭 흐름을 따라가며 원인을 찾도록 유도할 수 있습니다.
오류 메시지가 없을수록 실행 흐름을 추적하세요
JavaScript 오류가 없는데 버튼이 작동하지 않는다면 코드를 전부 다시 만들 필요는 없습니다.
버튼과 함수가 연결되지 않았거나, 실행 조건을 만족하지 못하거나, 폼 제출이 발생하거나, CSS 요소가 클릭을 막고 있을 가능성을 하나씩 확인하면 됩니다.
가장 중요한 것은 “오류가 없다 = 정상이다”라고 생각하지 않는 것입니다.
프로그램은 문법적으로 완벽하면서도 개발자가 원하는 행동을 하지 않을 수 있습니다.
버튼이 멈췄다면 다음 순서를 기억하세요.
버튼 확인 → 이벤트 확인 → 함수 호출 확인 → 조건문 확인 → 화면 변화 확인
그리고 AI에게도 곧바로 새로운 코드를 작성하게 하지 말고 어느 단계까지 정상적으로 실행되는지 먼저 찾게 하세요.
바이브코딩에서 디버깅 실력이 늘어난다는 것은 모든 오류를 외운다는 뜻이 아닙니다.
문제가 발생했을 때 실행 흐름을 작은 단계로 나누고, 어디에서 멈췄는지 찾아낼 수 있게 되는 것에 가깝습니다.