화면에서 버튼 만드는 법 3가지

728x90

웹 화면에서 버튼은 사용자와의 상호작용을 위한 중요한 요소입니다. 버튼은 클릭하여 페이지 이동을 하거나 키보드 이벤트를 통해 특정 작업을 하는 등 화면 속 버튼은 개발자의 스타일과 목적에 따라 다양한 방식으로 구현될 수 있습니다.

버튼을 나타내는 방법을 크게 3가지로 나누어지는데, 상황에 부적합한 태그를 사용할 경우 아래와 같은 문제가 생길 수 있어 각 태그의 특징을 알고 사용하는 것이 좋습니다.

버튼에 잘 못된 태그 사용할 경우 문제점

접근성 문제
사용자 경험 저하
SEO 성능 악화

이번 포스팅에서는 화면에서 버튼을 구현하는 데 사용되는 주요 태그들과 각 태그의 특징, 버튼으로 사용될 때 속성 설정 방법을 정리해보았습니다.

화면 버튼으로 쓰이는 태그 별 특징 알아보기

1. a 태그

a 태그는 원래 하이퍼링크를 생성하기 위해 설계된 태그입니다. 클릭 시 다른 페이지로 이동하거나 특정 URL을 호출합니다. 저는 클릭시 링크로 이동되는 버튼일 경우 주로 a태그를 이용해 스타일링을 하여 사용합니다.

특징
- 기본적으로 클릭 이벤트는 href 속성을 통해 URL 이동을 트리거합니다.
- SEO 최적화에 유리하며, 검색 엔진은 a 태그의 링크를 인덱싱 대상으로 간주합니다.
- 링크를 클릭했을 때 새 창을 여는 경우, target="_blank" 속성을 추가할 수 있습니다.
버튼 태그로 사용 시 설정해야하는 속성!
- href: 필수 속성으로, 이동할 URL을 정의합니다. 버튼처럼 사용할 경우에도 의미 있는 링크를 제공해야 합니다.
- role="button": a 태그를 버튼으로 사용하려면 역할(Role)을 명확히 지정해야 접근성이 향상됩니다.
- tabindex: 키보드 탐색을 지원하려면 tabindex를 적절히 설정해야 합니다.

<a href="/submit" role="button" class="btn btn-primary">Submit</a>

2. button 태그

button 태그는 버튼을 생성하기 위해 설계된 태그로, 가장 적합한 선택지입니다. HTML5 명세에서는 사용자와의 상호작용을 위해 기본적으로 제공되는 태그로 정의하고 있습니다.

특징:
- 기본적으로 클릭 시 type 속성에 따라 다른 동작을 수행합니다.
  - type="submit": 폼 데이터를 제출합니다.
  - type="button": 클릭 시 아무 작업도 수행하지 않습니다.
  - type="reset": 폼 데이터를 초기화합니다.
- JavaScript를 활용한 다양한 동작 제어가 가능합니다.
- 접근성과 사용 편의성이 기본적으로 보장됩니다.
버튼 태그로 사용 시 설정해야하는 속성!
- type: 명시적으로 버튼의 동작을 설정해야 의도치 않은 동작을 방지할 수 있습니다.
- aria-* 속성: 스크린 리더 사용자를 위한 접근성 향상을 위해 사용합니다.

<button type="submit" class="btn btn-primary">Submit</button>

3. div 태그 또는 span 태그와 같은 태그들

div나 span 태그는 원래 버튼용으로 설계된 태그가 아니지만, JavaScript와 CSS를 통해 버튼처럼 사용할 수 있습니다. 주로 비표준적인 방법이지만, 특정 디자인 요구사항이나 제약 조건에서 사용되기도 합니다.

특징
- 본래 의미론적 역할이 없어, 추가적인 속성 설정이 필요합니다.
- SEO와 접근성 면에서 불리할 수 있습니다.
- JavaScript 이벤트 리스너를 통해 동작을 구현해야 합니다.
버튼 태그로 사용 시 설정해야하는 속성!
- role="button": 버튼 역할을 명시하여 스크린 리더가 올바르게 인식하도록 설정합니다.
- tabindex="0": 키보드 탐색이 가능하도록 tabindex를 설정합니다.
- JavaScript: onclick 이벤트를 통해 동작을 정의합니다.

<div role="button" tabindex="0" onclick="handleClick()" class="btn btn-primary"> Submit </div>

<script> function handleClick() { alert('Button clicked!'); } </script>

마무리

각각의 태그는 고유한 특징과 사용 사례를 가지고 있어 특징을 알고 버튼의 목적에 맞게 사용해야 합니다. 요즘 SEO 최적화 하는 것에 관심이 많아 이런 태그 하나하나에도 신경쓰게 되네용.

다음에 학습하기

ARIA (Accessible Rich Internet Applications)

참고 자료

MDN a 태그 MDN button 태그 MDN ARIA