teriary link

모바일 화면 텍스트 링크 사용시 고려할점

텍스트링크 버튼은 보통 CTA 버튼을 보조하기위한 Secondary 혹은 Teritiary 버튼을 목적으로 사용됩니다. 텍스트 링크 버튼을 사용할때 데스크탑 화면보다는 모바일 화면에서 사용성 측면에서 좀더 까다로울 수 있습니다. 왜냐하면 모바일의 작은 스크린의 제약으로 일반적으로 버튼을 둘때 좀더 신중하게 계획할 필요가 있기때문입니다.







텍스트 링크 버튼의 단점들

첫번째로 일반 버튼 보다 작은 클릭 영역 사이즈를 가진 텍스트 링크 버튼은 사용자가 버튼을 누를때 아무래도 정확도가 떨어질 수 있습니다.

두번째로 텍스트 링크 버튼은 배경 엘리먼트로가 없어 뚜렷한 경계선을 보여주지 않기에 사용자가 한번에 클릭할 수 있는 직관성이 많이 떨어집니다.

세번째로 텍스트 링크 버튼이 다른 텍스트와 (예를들어 문단)함께 있을때 텍스트 색상으로 구분하지 않는 이상 버튼을 구별하기가 어려워 질수 있습니다.

그외로 영문을 사용할때 텍스트 링크 버튼을 전부 대문자로 만들어버리면 가독성이 떨어지게됩니다. 특히 시각장애가 있는 사용자 (예를들어 난독증)에게 치명적일 수 있습니다. 왜냐하면 그들에겐 글자하나하나의 철자를 구분할 수 있는 능력이 떨어지므로 글자에 대문자와 소문자가 같이 있을때 각각 글자의 구별되는 모양으로 가독성이 올라가게됩니다.









대신 사용할 수 있는 버튼 옵션들

텍스트 링크 버튼 대신 사용할 수 있는 옵션들도 물론 있습니다.


첫번째로 아웃라인을 가진 버튼입니다. 아웃라인으로 명확한 버튼의 경계선을 보여주기때문에 사용자가 시각적으로 버튼을 인지하는데 수월합니다.

두번째로 옅은 배경색을 가진 버튼입니다. 텍스트의 전경색과 옅은 배경색의 명도차이로 버튼의 클릭 정확도가 높아집니다.





언제 텍스트 링크 버튼을 사용해야할까?

텍스트 링크 버튼은 CTA버튼 (메인버튼) 이나 Secondary 버튼 (보조버튼) 용도보다는 좀더 Tertiary 버튼 (두번째 보조버튼) 용도로 적합합니다. CTA버튼이나 Secondary버튼의 역할은 중요하기에 좀더 시각적인 주의를 끌 수 있도록 사용되는것이 맞습니다.

그렇기에 비교적 비주얼적인 부분이 떨어지는 텍스트링크 버튼은 정보의 우선 순위를 계층화시키는 측면에서 보조 정보를 보완해줄 수 있는 최적의 버튼 스타일입니다. 예를들어 텍스트 링크 버튼은 사용자가 메인 정보를 보고 또 다른 도움을 필요로 할때 주로 사용하는 Help나 Support등의 용도로 사용하는것이죠.

SNS 공유하기

Share on facebook
Share on twitter
Share on linkedin

매주 주말마다 새로운 디자인 뉴스레터를 받아보세요 📪

Scroll to Top