AI랑 같이하는 코딩

1. 버튼 클릭이 먹통처럼 보이는 이유

버튼을 눌렀는데 화면이 조용하면 많은 분이 "코드가 전부 망가졌나?"부터 떠올립니다. 하지만 실제로는 작은 연결 문제인 경우가 더 많습니다. 특히 초보 단계에서는 버튼 자체가 고장 난 것이 아니라, 버튼과 JavaScript 함수가 서로 만나지 못한 상태가 대부분입니다.

예를 들어 클릭 이벤트를 등록했는데 스크립트 파일 경로가 틀렸거나, HTML에서 사용한 id 이름과 JavaScript에서 찾는 id가 다르면 아무 일도 일어나지 않습니다. 또 콘솔에 에러가 떠도 화면에서는 조용해 보이기 때문에 문제를 늦게 발견하기 쉽습니다. 그래서 "왜 안 되지?"라고 오래 고민하기보다, 정해진 점검 순서를 따라가면 훨씬 빨리 해결됩니다.

2. 가장 먼저 보는 체크리스트

아래 순서대로 확인하면 대부분 10분 안에 원인이 보입니다. 핵심은 감으로 추측하지 않고 한 단계씩 검증하는 것입니다.

3. 실전 점검 순서와 수정 예시

1) 콘솔 로그로 클릭 자체를 확인

먼저 버튼 클릭 시 로그가 찍히는지 확인합니다. 로그가 안 찍히면 이벤트가 연결되지 않은 상태입니다. 로그가 찍히면 연결은 성공이고, 그다음 로직에서 문제가 생긴 것입니다. 이 한 줄만으로 점검 범위를 절반 이상 줄일 수 있습니다.

2) DOM 로드 시점 문제 확인

자주 나오는 원인은 스크립트가 너무 빨리 실행되는 경우입니다. HTML 요소가 생성되기 전에 JavaScript가 버튼을 찾으려고 하면 null이 나옵니다. 이때는 script 태그를 body 맨 아래로 이동하거나 DOMContentLoaded 안에서 이벤트를 연결하면 안정적으로 동작합니다.

3) 동일 id 중복 여부 점검

복붙 작업을 하다 보면 id가 중복될 수 있습니다. id는 페이지에서 유일해야 하므로, 중복되면 의도하지 않은 요소가 선택됩니다. 버튼이 여러 개인 상황이라면 class 선택 후 반복문으로 이벤트를 붙이는 방식이 더 안전합니다.

4) CSS로 클릭이 막히는 경우 점검

버튼은 보이는데 클릭이 안 된다면, 투명한 오버레이가 위를 덮고 있을 가능성이 큽니다. 특히 모달, 헤더, 고정 배너 작업 후 자주 발생합니다. 이 경우 요소 경계선을 보면서 누가 위에 올라와 있는지 확인하고 z-index 또는 pointer-events를 조정하면 해결됩니다.

4. 다시 같은 문제를 막는 습관

문제를 한 번 해결한 뒤에는 재발 방지 루틴을 만들어 두는 것이 중요합니다. 첫째, 버튼을 만들면 바로 클릭 로그를 붙여 기본 동작을 검증하세요. 둘째, 파일명을 바꿨다면 script 경로를 함께 수정하는 체크리스트를 유지하세요. 셋째, 큰 레이아웃 변경 후에는 주요 버튼을 한 번씩 수동 테스트하세요.

그리고 AI에게 수정을 요청할 때는 "안 돼요"라고만 쓰기보다, 콘솔 에러 문구와 현재 코드 일부를 함께 전달하면 정확도가 크게 올라갑니다. 즉, 증상 + 재현 조건 + 에러 메시지를 같이 제공하는 습관이 디버깅 속도를 결정합니다.

5. 자주 묻는 질문