버튼과 링크 언제 어떻게 사용해야 할까? | 매거진에 참여하세요

1990년대 인터넷 디자인 초창기부터 내려온 유명한 격언이 있습니다.

"버튼은 액션을 위한 것이고, 링크는 이동을 위한 것이다."

이 격언은 좋은 출발점이지만, 항상 그렇게 단순하지는 않습니다.

먼저, 버튼과 링크의 정의를 명확히 해보겠습니다.

• 링크(Link): 클릭 또는 터치할 수 있는 텍스트

• 버튼(Button): 클릭 또는 터치할 수 있는 박스형 영역

버튼은 다양한 스타일을 가질 수 있지만, 버튼의 텍스트뿐만 아니라 주변 영역도 클릭할 수 있다는 점 을 기억하는 것이 중요합니다.

언제 어떤 것을 사용할까?

올바른 요소를 선택하려면, 화면에서 이루어지는 액션의 계층 구조(action hierarchy) 를 고려해야 합니다.

1. 1. 화면에서 사용자가 수행해야 하는 가장 중요한 작업

• 버튼으로 만들어야 합니다.

• 가장 중요한 액션은 Primary Call to Action(주요 실행 버튼) 이 되어야 하며, 한 화면에 하나만 존재 해야 합니다.

2. 2. 보조적인 작업

• 버튼으로 만들 수 있지만, 너무 많은 버튼은 피해야 합니다.

• 3순위 이상의 작업은 링크로 처리하는 것이 좋습니다.

링크는 애플리케이션의 상태를 변경하는 데 사용하면 안 됩니다.

• 데이터를 추가, 변경, 삭제하는 등의 액션은 버튼으로 처리해야 합니다.

• 예를 들어, "삭제(Delete)" 또는 "저장(Save)" 기능은 절대 링크로 만들지 말아야 합니다.

• 가장 중요한 "구매(Buy)" 버튼 은 황금색, 아이콘 포함, 가장 눈에 띄게 배치

• 이후에 등장하는 두 개의 버튼 → 다른 색상으로 처리하여 주요 버튼보다 시각적으로 덜 강조

버튼과 링크의 종류

데스크톱 환경에서의 버튼 상태

• 1)기본(Default, 클릭 전)

• 2)호버(Hover, 마우스 오버 시)

• 3)클릭/선택(Clicked/Selected)

• 4) 비활성화(Disabled)

데스크톱 환경에서의 링크 상태

• 1) 기본(Default, 클릭 전)

• 2)호버(Hover, 마우스 오버 시)

• 3)방문 후(Visited)

• 4) 비활성화(Disabled)

모바일 환경에서의 버튼 상태

• 1)기본(Default)

• 2)터치/선택(Tapped/Selected)

• 3)비활성화(Disabled)

모바일 환경에서의 링크 상태

• 1)기본(Default)

• 2)방문 후(Visited)

• 3)비활성화(Disabled)

🎨 버튼, 링크, 그리고 스타일

버튼의 스타일은 단순한 박스 형태일 수도 있고, 창의적인 디자인이 적용될 수도 있습니다.

버튼과 링크의 올바른 명명법

✔ 우리가 흔히 보는 잘못된 링크 및 버튼 예시

• "여기를 클릭하세요(Click Here)"

• "더보기(Read More)"

• "자세히 알아보기(Learn More)"

이러한 표현은 좋지 않은 이유는
1) 사용자에게 맥락을 제공하지 않음
2) 스크린 리더 사용자(시각장애인)에게 혼란을 줄 수 있음
3) SEO(Search Engine Optimization)에 부정적인 영향

✔ 좋은 버튼 예시

• "장바구니에 추가(Add to Cart)"

• "이메일로 데이터 보내기(Send Data via Email)" → "Send Data"보다 구체적이고 직관적

📂 메뉴(Menus)

메뉴는 버튼 또는 링크를 모아 웹사이트나 앱을 탐색하는 주요 역할 을 합니다.

• 한 개의 버튼 + 여러 개의 링크

• 링크 옆에 아이콘이 배치되어 가독성 향상

⚠ 아이콘만 있는 메뉴는 사용자 이해도와 사용성을 저하시킬 수 있음
아이콘 + 텍스트 조합이 가장 효과적

아래내용은 원문을 번역 및 재가공한 내용입니다. 원문은 아래에서 확인하실 수 있습니다.

https://balsamiq.com/learn/articles/buttons-links/