버튼 클릭 시 페이지가 새로고침될 때: button type 속성 기본값 확인법

SmartInfoBank 운영자 · 작성 2026-10-24 · 수정 2026-10-24 · 7분

웹 페이지에서 자바스크립트로 팝업을 열거나 특정 계산을 수행하기 위해 버튼을 눌렀는데, 의도와 다르게 화면 전체가 깜빡이며 새로고침되는 현상이 자주 발생합니다. 브라우저 주소창 뒤에 물음표가 붙거나 기존 화면 입력값이 초기화된다면 HTML 버튼 요소의 기본 동작이 원인일 가능성이 높습니다.

버튼 클릭 시 화면이 새로고침되는 원인과 브라우저 기본 동작

MDN button 문서에 따르면 <button> 요소는 별도의 type 속성을 지정하지 않았을 때 기본값이 submit으로 지정됩니다. 이는 버튼이 조상 <form> 태그 내부에 있거나 form 속성으로 특정 양식에 연결된 경우에 동일하게 적용됩니다.

버튼의 기본 동작이 submit으로 처리되면 사용자가 버튼을 누르는 순간 브라우저는 양식 데이터를 서버로 전송하려고 시도합니다. 양식에 별도의 대상 경로가 지정되지 않은 경우 현재 페이지 주소로 데이터를 전송하며 문서를 다시 불러오게 되는데, 이 과정에서 현재 문서 상태가 사라지고 새로고침이 일어납니다.

재현 코드와 기본값 생략 시 발생하는 동작

문제 상황을 검증하기 위해 양식 내부에 두 개의 버튼을 배치하고 type 속성 유무에 따른 차이를 확인합니다. 아래 예시는 양식 내부에서 속성을 생략한 버튼과 명시적인 일반 버튼의 동작 차이를 보여줍니다.

<form id="demo-form"><button id="btn-no-type">생략된 버튼</button><button type="button" id="btn-explicit">일반 버튼</button></form>
기본 타입이 생략된 'btn-no-type'을 클릭하면 양식이 제출(submit)되어 브라우저 탐색이 발생하지만, type="button"을 명시한 'btn-explicit'을 클릭하면 양식 제출 없이 지정된 클릭 이벤트만 실행됩니다.

코드를 실행해 보면 btn-no-type 버튼을 눌렀을 때는 양식 제출 동작이 수행되어 브라우저 탐색(새로고침)이 일어나지만, type="button"을 명시한 btn-explicit 버튼을 눌렀을 때는 양식 제출 없이 요소에 등록된 클릭 동작만 안전하게 수행됩니다.

원치 않는 양식 제출을 막는 점검 및 수정 순서

의도하지 않은 양식 제출과 새로고침을 방지하기 위해 다음 순서로 마크업과 스크립트를 점검합니다.

1. 버튼의 위치 및 연관 양식 확인: 클릭 시 새로고침되는 버튼이 <form> 태그 내부에 있는지, 또는 버튼에 form 속성이 선언되어 특정 양식의 id와 연결되어 있는지 확인합니다.
2. type 속성 명시 여부 점검: 해당 버튼 태그에 type="button" 속성이 명시적으로 적혀 있는지 점검합니다. 속성이 생략되어 있다면 브라우저는 이를 type="submit"으로 처리합니다.
3. 명시적 속성 추가: 데이터를 서버로 전송하는 전송 버튼이 아니라면 반드시 type="button"을 작성합니다. HTML 이스케이프 규칙에 맞추어 태그 속성 따옴표를 정확히 닫았는지도 함께 확인합니다.
4. 동작 확인: 페이지를 다시 불러온 후 버튼을 클릭했을 때 주소창 주소가 변경되거나 새로고침되지 않고 의도한 클릭 이벤트만 실행되는지 브라우저에서 직접 테스트합니다.

<!-- 잘못된 예: form 내부에서 속성 생략 시 submit으로 처리됨 -->
<form id="settings-form">
  <input type="text" name="username">
  <button>중복 확인</button>
</form>

<!-- 올바른 예: type="button"을 명시하여 단순 동작용 버튼으로 분리 -->
<form id="settings-form">
  <input type="text" name="username">
  <button type="button">중복 확인</button>
</form>

빈 값이나 잘못된 값 입력 시 나타나는 실패 사례

속성을 지정하더라도 유효하지 않은 값이 들어가면 예상치 못한 결과가 발생합니다. 브라우저 명세에 따르면 type 속성의 값이 비어 있거나(type=""), 오타로 인해 정의되지 않은 문자열(예: type="btn")이 입력되면 브라우저는 이를 유효하지 않은 값으로 판단하고 기본값인 submit으로 폴백 처리합니다.

따라서 자바스크립트나 템플릿 엔진을 통해 동적으로 속성 문자열을 전달할 때 빈 문자열이 주입되지 않도록 주의해야 합니다. 일반 클릭 동작을 원한다면 유효한 키워드인 button을 정확하게 입력해야 합니다.

속성 지정으로 검증할 수 없는 동작과 한계

버튼에 type="button"을 올바르게 지정하더라도 다음과 같은 브라우저 동작이나 부수 효과까지 자동으로 차단되는 것은 아닙니다.

• 자바스크립트 내부 강제 이동: 버튼에 연결된 클릭 이벤트 핸들러 내부에서 직접 location.reload()나 form.submit()을 호출하는 경우, type="button"을 설정했더라도 스크립트 지시에 따라 페이지 이동이 일어납니다.
• 엔터 키 입력에 따른 양식 제출: 양식 내 텍스트 입력창(<input>)에서 사용자가 엔터 키를 눌렀을 때 발생하는 브라우저의 기본 양식 제출 동작은 type="button" 속성 설정만으로 제어할 수 없습니다.
• 양식 외부 버튼: <form> 요소와 전혀 연관되지 않은 완전히 독립적인 버튼의 경우 type="submit"이라 하더라도 제출할 대상 양식이 없어 아무런 기본 제출 동작을 수행하지 않습니다.