웹 개발을 하다 보면 버튼과 링크(앵커 요소 <a>)를 혼용하는 웹사이트를 자주 접하게 됩니다. 사실 이 둘을 올바르게 구분하는 것은 그리 어렵지 않습니다. 아래 기본 가이드라인을 따라가 보겠습니다.
링크(<a>)를 사용해야 하는 경우
사용자를 다음과 같이 이동시키고 싶다면 링크(<a href="/go-here">link</a>)를 사용하세요.
- 같은 페이지 내의 다른 섹션으로 이동할 때
- 웹사이트 내의 다른 페이지로 이동할 때
- 외부 웹사이트(다른 도메인)로 이동할 때
즉, 어딘가로 '이동(navigate)'하는 동작이라면 링크를 사용하는 것이 HTML 시맨틱 관점에서 올바른 선택입니다.
버튼(<button>)을 사용해야 하는 경우
클릭했을 때 JavaScript로 구동되는 특정 동작을 실행하고 싶다면 버튼(<button type="button">button</button>)을 사용하세요. 예를 들면 다음과 같습니다.
- 슬라이드 메뉴 열기/닫기 토글
- 팝업 모달 또는 다이얼로그 열기
<button>을 사용해야 하는 좋은 예로, 이 웹사이트 헤더에 있는 달/태양 아이콘을 들 수 있습니다. 이 아이콘을 클릭하면 색상 테마가 라이트 모드에서 다크 모드로 전환되는데, 이는 페이지 이동이 아니라 UI 상태를 변경하는 동작이기 때문입니다.
참고로 버튼에 명확한 타입을 지정하지 않으면 기본값이 type="submit"이 되어 의도치 않게 폼이 제출될 수 있으므로, 일반적인 클릭 동작용 버튼에는 항상 type="button"을 명시하는 습관을 들이는 것이 좋습니다.
폼 입력 요소는 어떨까?
연락처 폼처럼 사용자가 폼을 제출하도록 하려면 submit 입력 요소를 사용합니다.
<input type="submit" value="Submit" />정리하면, 페이지 간 이동은 링크, JavaScript 기반의 동작 실행은 버튼, 폼 제출은 submit 버튼을 사용하면 됩니다. 이 원칙만 지켜도 접근성과 사용성이 크게 향상되며, 키보드 사용자와 스크린 리더 사용자에게도 더 나은 경험을 제공할 수 있습니다.