디자인 시스템 구축, Link Button의 설계 원칙
link button의 올바른 사용 가이드
Link Button의 설계 원칙https://brunch.co.kr/@uxui-neo/10
앞에서 우리는 Common button에 대한 설계와 원칙에 대해서 알아보았다.
앞서 말했듯이 버튼의 type은 Common button 하나 뿐만아니라, 아래 이미지와 같이 크게 4가지 type으로 나누어진다.
오늘은 같은 버튼이지만 그 쓰임새가 전혀 다른 버튼인 "Link button"에 대해서 알아볼것이다.(재밌지않은가?)
1. Link Button
"Link Button는 사용자가 다른 위치로 이동할 수 있도록 도와준다. Link는 문단 내에 포함되거나 단독 텍스트로 표시될 수 있다."
숙련된 UI디자이너라면 위의 문구에서도 Common button과 다른 점을 찾아 낼수 있어야 한다.
그렇다. "Link Button는 사용자가 다른 위치로 이동할 수 있도록 도와준다" 라는 대목이다. Common button 같은 경우 버튼 클릭시, 이벤트나 작업을 트리거 액션을 도와주는 컴포넌트인 반면에,
Link Button은 다른 위치, 다른 페이지로 이동을 도와준다. 이는 각각의 버튼 Usage에서도 명확히 할 부분임을 인지하자.
2. Link Button Anatomy
링크 버튼 구성은 위와같다.
1. Label
2. Trailing icon
3. Type
Link button은 사용되는 Usage에 따라서 type이 크게 2가지로 나누어진다.
대부분의 신입 디자이너들은 Link button이 한가지 type만 사용되어진다고 알고 있다. (물론 내 경험이다.)
3-1.lnline link
Standalone link와 동일하게 작동하지만, lnline link는 문단이나 단락내에 포함되어있다. 글안에 포함되어있으므로 아이콘과 같이 사용하지 않는다.
참고 Usage
링크가 강조하는 정보에 따라 명사형 또는 동사형을 권장한다. 그 예시는 아래와 같다.
- 정보 제공이 목적이라면 → 명사형 사용 (설문 피드백, 가이드라인)
- 행동 유도(CTA)가 목적이라면 → 동사형 사용 (피드백 보내기, 가이드 확인하기)
예: 설문 피드백 (정보 제공) / 피드백 보내기 (행동 유도)
다만, 링크 텍스트의 길이나 가독성 등 여러 요소들을 고려해서 유도리있게 위 가이드를 참고하는것을 권장한다.
4.Usage
- 일반적인 언어의 사용은 피해라.
"더 보기", "여기 클릭하세요", "더 많은 정보"과 같은 지나치게 일반적인 Link text는 사용하지 않는 것이 좋다. Link text를 탐색 대상이나 기능을 구체적으로 그리고 다른 맥락 없이도 설명할수록 사용자의 접근성이 더 높아진다.
- Link button과 Common Button의 사용을 혼용하지 마라.
위에서도 언급했드시 링크 버튼과 일반 버튼은 Usage(사용법)이 다르다. Link는 내비게이션(페이지 이동)을 위해 사용해야 하며, Button은 작업 실행(액션 트리거)에 사용해야 합니다.
5. Accessibility
- 세로로 나열된(목록 형태의) Link는 터치 영역이 24px 이상이어야 한다.
미세 운동 조절이 어려운 사용자를 위해 터치 대상 간 최소 거리를 확보해야한다. 이를 가장 쉽게 충족하는 방법은 기본 본문 스타일(폰트 크기 16px, 줄 간격 24px 이상)을 사용하는 것이다.
만약 링크가 작은 크기(12px)로 설정되거나 사용자 정의 글꼴을 사용하더라도 줄 간격을 최소 24px 이상으로 유지해야 해야한다.
Inline 링크는 예외지만, 기본 본문 스타일(16px 이상)을 유지하는 것이 권장된다.
- 최소 폰트 사이즈 : 12px
- 줄간격(Touch area) : 24px
link button이 하나의 유형만 있는 신입 디자이너들이 많을것이다. 이 버튼의 type은 그 Usage에 따라 크게 두가지 Inline link와 Standalone link로 나누어진다. 또한 WCAG관점에서 배경색에 따라 기존의 Blue color를 채도를 변경해서 우리 프로덕트를 활용하는데 있어 시각적인 어려움이 없도록 가이드 해주어야한다.
많은 플랫폼에서 Link Button의 워딩을 "자세히 보기", "더보기" 등 문맥과 상관없는 표현으로 일괄적으로 사용하는 경우가 많다. 그것이 나쁘다는것이 아니다(문맥이 맞다면) 아니다 나쁘다.
디자인은 "Detail"이다.
이러한 디테일을 반영해, 우리 플랫폼을 이용하는 사용자들에게 더 친절하게 안내해야 한다. 디자이너와 개발자가 조금 더 신경 쓰면, 사용자는 훨씬 편리하게 경험할 수 있다. 기억하라. 친절함이 곧 우리 서비스에 대한 사용자의 인상을 결정한다.
