버튼과 링크를 누가 헷갈려해? 싶지만, 사실 명확히 구분해 보려고 하면 우물쭈물해지는 사람들이 많을 것이다. 너무 익숙한 용어기도 하고 시각적으로 대부분 구분되기도 하기 때문이다. 하지만 업무하다보면 혼용해서 쓰이는 경우도 많고, 오늘도 그렇듯이 내가 한 번 정리를 해보고자 여러 문서들을 참조하였다.
사실 버튼과 링크의 대한 정의를 찾아보면 좀 더 명확하다.
링크
우선 링크의 정의는 다음과 같다.
인터넷 홈페이지에서, 지정하는 파일이나 문자열로 이동할 수 있도록 걸어 놓은 홈페이지 간의 관련. - 표준국어대사전
HIG나 머터리얼 디자인엔 링크에 대한 내용이 없다. 아마도 링크는 "연결"이라는 동작 그 자체를 의미할 뿐만 아니라 웹페이지 자체가 모두 연결을 기초로? 기반으로? 구조화되어 있기 때문에 별도의 컴포넌트로 만들지 않았던게 아닐까 라는 생각이 든다. 그도 그럴 것이 웹의 가장 기본인 HTML은 Hyper Text Markup Language인데 여기서 Hyper Text는 "참조를 통해 독자가 한 문서에서 다른 문서로 접근할 수 있는 텍스트"를 의미한다.참조는 고려대한국어대사전(네이버에서 참고)에서 "관련된 사항을 더불어 살펴봄."라고 정의하였는데 이게 조금 더 링크를 표현하는 정확한 의미인 것 같다.
버튼
반면 버튼에 대한 정의를 찾아보면 다음과 같다.
전기 장치에 전류를 끊거나 이어 주거나 하며 기기를 조작하는 장치. - 표준국어대사전
A button initiates an instantaneous action. - Human Interface Guideline
(버튼은 즉각적인 행동을 유발한다.)
Buttons help people take action, such as sending an email, sharing a document, or liking a comment - Material Design
(버튼을 통해 이메일 전송, 문서 공유, 의견 표시와 같은 행동을 할 수 있다.)
즉, 버튼을 조작함으로써 어떤 행동(action) 취할 수 있다. 다시 말하면 어떤 행동을 수행하기 위해서 조작하는 장치라고 할 수 있다.
버튼은 이렇게, 예약취소 / 장바구니 추가 / 다음 등의 행동으로 이어진다. 이 때 화면이 전환되기도 하지만, 예약 취소, 장바구니 추가, 결제, 양식 제출 등의 각각의 역할을 수행하고 있다. 특히나 bing의 로그인 화면의 경우, 아이디의 유효성 검사도 수행한다.
버튼과 링크의 구분
이제 뭔가 구분이 될듯 말듯 한데, 갑자기 이런 생각이 든다.
버튼을 눌러서 페이지를 이동하는 건 "행동"이 아닌건가?
결론적으로는 아니다. 여기서 말하는 행동은 웹사이트의 프론트(화면)과 백엔드(컴퓨터)간 영향을 미치는 상호작용을 의미한다. 하지만 우리는 웹사이트나 앱을 사용하다보면 링크와 같이 생긴 버튼을 마주할 때도 있고, 버튼과 같이 생긴 링크를 마주할 때도 있다. 그렇다면 이런 것들은 어떻게 구분해야 할까?
이에 대해서 Airbnb, LinkedIn, Twitter, Google, Dropbox가 버튼과 링크의 사용법에 대해서 몇가지 기준을 제시했다.
| 링크 | 버튼 |
| ✔ 텍스트가 링크의 앞 또는 뒤에 있다(예: Don’t have an account? Sign up) ✔ 링크가 외부 사이트 또는 문서로 리다이렉트 된다. ✔ 라벨 텍스트는 길 수 있다.(예: About the new look) |
✔ 양식 제출 등의 액션을 수행해야 한다. ✔ 버튼을 누르면 팝업 또는 모달 또는 웹사이트의 요소가 변경되어야 한다. ✔ 버튼의 라벨 텍스트는 짧아야 한다(예: Log in) |
또한 마크업 시에도 다르게 구현되는 것이 좋다.
링크는 <a> 태그를 통해 구현하고, 버튼은 <button> 태그를 통해 구현되는데 스크린리더에서 다른 용도로 인식할 뿐만 아니라 동작이 다르게 구분된다.
<a> 태그에 있는 링크로 이동하기 위해서는 키보드의 스페이스 또는 엔터를 선택해야 하는데, <button> 태그에 있는 행동을 수행하기 위해서는엔터를 선택해야 한다.
또한 웹브라우저라면 마우스 우클릭을 실행했을 때 나오는 창에 페이지 이동과 관련된 옵션들이 노출되는 걸 볼 수 있다.
반면에 버튼에 우클릭하면 나오는 옵션에는 페이지 이동과 관련된 옵션은 노출되지 않는다.
이렇게 정리해도, 계속 헷갈리는건 어쩔 수 없나 보다. 디자인 작업을 하다보면 텍스트 형태의 버튼을 만들게 되는 경우도 있고, 나는 버튼이라고 기획했는데, 프론트엔드 개발자가 <a>링크를 걸어뒀을 수도 있으니까.
오늘도 chatGPT에게 물어봤다.
🧐 Q. 버튼과 링크의 차이
🤖 A:
버튼과 링크는 웹 디자인에서 사용되는 두 가지 다른 요소입니다.
버튼(Button): 버튼은 웹 페이지에서 클릭, 탭 또는 클릭과 같은 사용자 동작에 응답하는 그래픽 요소입니다. 버튼은 사용자에게 어떤 작업을 수행할 수 있는 선택지를 제공하고, 사용자가 버튼을 누르면 해당 작업이 실행됩니다. 버튼은 보통 텍스트, 아이콘 또는 이미지로 표시되며, 사용자에게 명확한 힌트를 제공하여 원하는 작업을 수행할 수 있도록 도와줍니다. 버튼은 주로 폼 제출, 페이지 이동, 액션 실행 등의 기능을 수행하기 위해 사용됩니다.
링크(Link): 링크는 웹 페이지에서 다른 웹 페이지로 연결되는 참조(Reference)를 제공하는 요소입니다. 링크는 사용자가 클릭하면 해당 링크가 연결된 웹 페이지로 이동하게 됩니다. 링크는 텍스트, 이미지 또는 아이콘으로 표시되며, 사용자에게 다른 웹 페이지로 이동할 수 있는 링크를 제공합니다. 링크는 주로 다른 웹 페이지, 파일, 이메일 주소 등과 같이 다양한 URL(Uniform Resource Locator)을 참조하는데 사용됩니다.
요약하면, 버튼은 웹 페이지에서 사용자 동작에 응답하여 작업을 수행하는 그래픽 요소이고, 링크는 다른 웹 페이지로 연결되는 참조를 제공하는 요소입니다. 둘 다 웹 페이지에서 사용자에게 상호작용과 네비게이션을 제공하는 데 사용되지만, 버튼은 일반적으로 사용자가 명시적으로 클릭하여 작업을 수행하고, 링크는 클릭하여 다른 웹 페이지로 이동하는 참조를 제공하는 것이 주요한 차이점입니다.
🧐 Q. 버튼을 통해서 링크를 이동하는 건 어떻게 이해하면 좋을까?
🤖 A:
버튼을 통해 링크를 이동하는 것은 일반적으로 JavaScript를 사용하여 구현되는 방식입니다. 웹 페이지에서 버튼을 클릭하면, 버튼에 연결된 JavaScript 코드가 실행되어 특정 동작을 수행하게 되고, 이 동작 중에 JavaScript를 사용하여 새로운 URL로 페이지를 이동시키는 링크를 호출합니다. 이로써 버튼을 클릭한 사용자는 새로운 URL로 이동하게 됩니다.
버튼을 통해 링크를 이동하는 과정은 다음과 같이 요약할 수 있습니다:
버튼 클릭: 사용자가 웹 페이지에서 버튼을 클릭합니다.
JavaScript 실행: 버튼에 연결된 JavaScript 코드가 실행됩니다.
링크 호출: JavaScript 코드가 새로운 URL로 페이지를 이동시키는 링크를 호출합니다.
페이지 이동: 링크가 호출된 결과, 웹 브라우저는 새로운 URL로 페이지를 이동시킵니다.
이러한 방식으로 버튼을 통해 링크를 이동하면, 사용자가 버튼을 클릭하여 원하는 작업을 수행하고, 그에 따라 새로운 웹 페이지로 이동할 수 있습니다. 이를 통해 웹 페이지 내에서 사용자가 특정 동작을 수행하고 다른 페이지로 이동하는 기능을 구현할 수 있습니다.
마치며
하지만 그럼에도 불구하고 우리는 링크와 버튼을 구별해야 한다. 미국의 청각 장애인 수는 한국의 인터넷 사용자와 비슷한 수준으로 많다고 한다.(참고) 스크린 리더를 사용하는 사용자들을 위해서, 그리고 스크린 리더가 아니더라도 앞으로 음성 인터페이스를 고려한다면 더더욱 우리는 이동에 대해서 명확히 전달할 수 있어야 하기 때문이다.
그리고 꼭 스크린리더, 접근성 떄문이 아니더라도 제대로 알고 쓰면 좋지 아니하겠는가
참고자료
- WCAG 2.1 항공사 WAI-ARIA 적용사례 https://aoa.gitbook.io/skymimo/compliance
- Buttons & Links: The Basics - UX Office https://ux.iu.edu/writings/buttons-vs-links-basic/
- Guidelines for Visualizing Links https://www.nngroup.com/articles/guidelines-for-visualizing-links/
- Human Interface Guidelines - https://developer.apple.com/design/human-interface-guidelines/components/menus-and-actions/buttons
- Material Design 3 - https://m3.material.io/components/buttons/overview
'기획 N년차' 카테고리의 다른 글
| 인공지능 챗봇 테스트:: chatGPT vs ClovaX vs Bing Chat vs bard vs Cue: (0) | 2023.10.06 |
|---|---|
| [설계를 해보자] CI와 DI (3) | 2023.07.19 |
| PPT 편하게 사용하는 숨은 꿀팁 (2) | 2023.05.04 |
| 들어는 봤니? CTA: Call to action(feat. chatGPT) (0) | 2023.04.14 |
| [설계를 해보자] 초보 기획자가 설계서 작성할 때 고려해야 할 5가지 (0) | 2023.04.05 |
| [설계를 해보자] 02. 회원 마인드맵 (0) | 2023.03.28 |
| 기획자는 이런 것까지 알아야 하나요? - 블랙리스트/화이트리스트 (0) | 2023.02.27 |
| [설계를 해보자] 01. 회원가입 (0) | 2023.01.19 |