버튼과 링크의 차이, 정확히 알고 쓰고 계신가요

'div에 onClick 달면 되는 거 아니야?'라고 생각했다면

버튼과 링크의 차이. 너무 당연해서 아무도 안 물어보지만, 막상 정확히 답하라고 하면 머뭇거리게 되는 주제인데요. 이 기본기를 제대로 짚어주는 글이 올라와서 소개해 드리려고 해요. 결론부터 말하면 이래요. 링크는 '이동'이고, 버튼은 '행동'이에요. 이 한 문장만 기억해도 마크업 실수의 절반은 사라져요.

조금 풀어볼게요. 링크, 그러니까 a 태그는 사용자를 다른 URL로 데려가는 요소예요. 목적지 주소(href)가 있고, HTTP로 보면 GET 요청이죠. GET이 뭐냐면 '읽기만 하는 안전한 요청'이에요. 몇 번을 반복해도 서버의 상태가 바뀌지 않아요. 반면 버튼, button 태그는 무언가를 '실행'하는 요소예요. 폼을 제출해서 데이터를 저장하거나, 장바구니에 담거나, 삭제하는 것처럼 상태를 바꾸는 동작이요. HTTP로 보면 주로 POST고요. 그러니까 버튼과 링크의 구분은 취향 문제가 아니라, '이 동작이 상태를 바꾸는가'라는 HTTP의 근본 구분이 UI에 그대로 반영된 거예요.

링크가 공짜로 주는 기능들

진짜 a 태그를 쓰면 브라우저가 공짜로 주는 기능이 한가득이에요. Ctrl(맥은 Cmd)을 누르고 클릭하면 새 탭에서 열리고, 마우스 휠 클릭도 되고, 우클릭해서 주소를 복사해 동료에게 공유할 수 있고, 뒤로 가기와 북마크가 동작하고, 검색엔진이 따라가며 페이지를 수집해요. 그런데 div나 button에 자바스크립트로 페이지 이동을 달아버리면 이 전부가 사라져요. 사용자 입장에서는 '새 탭에서 열기'가 안 되는 순간 뭔가 잘못됐다는 걸 몸으로 느끼죠.

접근성 쪽은 더 심각해요. 키보드로만 웹을 쓰는 사용자는 Tab 키로 요소를 옮겨 다니는데, div는 기본적으로 Tab 포커스 대상이 아니에요. 키보드로는 아예 도달할 수 없는 버튼이 되는 거죠. 관례도 달라요. 링크는 Enter로 실행하고, 버튼은 Enter와 Space 둘 다로 실행해요. 진짜 태그를 쓰면 이게 전부 자동인데, div로 흉내 내려면 tabindex, role, 키보드 이벤트 처리까지 직접 다 구현해야 해요. 스크린리더(화면을 음성으로 읽어주는 보조기기) 사용자는 페이지의 링크 목록만 뽑아서 훑어보기도 하는데, div로 만든 가짜 링크는 그 목록에 잡히지도 않고요.

SPA 시대에 흐려진 경계

이 구분이 유독 자주 무너지는 곳이 React 같은 SPA(싱글 페이지 애플리케이션) 환경이에요. onClick에 navigate() 호출을 넣는 순간, 사실상 링크인 것을 버튼도 아닌 div로 만들어버리기 쉽거든요. Next.js의 Link나 React Router의 Link 컴포넌트가 괜히 있는 게 아니에요. 이 컴포넌트들은 내부적으로 진짜 a 태그를 렌더링해서 링크의 기능을 다 지키면서, 클릭 시에만 클라이언트 라우팅으로 가로채는 방식이에요. 프레임워크가 기본기를 대신 지켜주는 거죠.

헷갈리기 쉬운 포인트 하나 짚을게요. '버튼처럼 생긴 링크'는 아무 문제 없어요. 생김새는 CSS의 소관이고, 의미는 태그의 소관이거든요. 파란 알약 모양의 '가입하기'가 다른 페이지로 이동한다면 a 태그에 버튼 스타일을 입히면 돼요. 문제는 생김새 때문에 태그를 바꾸는 것, 즉 이동하는 요소를 button으로 만들거나, 행동하는 요소를 href가 '#'인 a 태그에 preventDefault를 걸어 만드는 거예요. href가 '#'이고 기본 동작을 막고 있다면, 그건 버튼을 써야 한다는 신호예요.

한국 개발자에게 주는 시사점

한국에서는 이게 교양이 아니라 실무 요건이 되는 경우가 많아요. 공공기관이나 금융권 프로젝트는 한국형 웹 콘텐츠 접근성 지침(KWCAG) 준수를 요구받는데, 버튼과 링크의 올바른 사용은 그 심사의 단골 항목이거든요. 평소 습관 하나만 들이면 돼요. 클릭되는 요소를 만들 때 스스로에게 묻는 거예요. 'URL이 바뀌는 동작인가?' 그러면 a 태그. '상태를 바꾸는 동작인가?' 그러면 button 태그. 그리고 생김새는 전부 CSS로 해결하는 거죠.

정리하면, 링크는 이동이고 버튼은 행동이며, 스타일 때문에 태그를 고르면 안 된다는 이야기예요. 솔직하게 한번 세어볼까요? 지금 여러분 코드베이스에 onClick 달린 div, 몇 개나 있나요?