아웃라인 버튼Outline Button
한 줄 정의
아웃라인 버튼은 버튼 안쪽은 비워 두고 테두리 선과 글자만 색으로 그린 버튼으로, 솔리드 버튼보다 덜 눈에 띄게 만들어 두 번째로 중요한 행동에 쓰는 버튼이에요.
쉽게 말하면
속이 빈 테두리 안에 글자가 들어 있는 버튼이에요. 버튼이라는 건 분명히 보이지만 색이 칠해진 면적이 작아요. 그래서 같은 화면에 솔리드 버튼이 함께 있으면 방문자의 눈은 솔리드 버튼에 먼저 가요.
언제 쓰나요
솔리드 버튼과 짝을 지어 두 행동의 무게를 나눌 때 써요. '결제하기'는 솔리드 버튼, '장바구니 담기'는 아웃라인 버튼으로 두면 방문자는 생김새만 보고도 주된 행동을 알 수 있어요. 구글의 머티리얼 디자인도 외곽선 버튼을 중요하지만 주된 행동은 아닌 곳에 쓰고, 다른 버튼과 짝지어 '취소' · '뒤로' 같은 대안 행동을 보여 주라고 안내해요(안드로이드 개발자 문서).
테두리 색이 너무 연하면 버튼을 알아보기 어려워요. W3C 웹 접근성 지침(WCAG 2.2)은 화면 요소가 누를 수 있는 것임을 알아보게 해 주는 시각 정보가 주변 색과 3:1 이상 대비를 이루도록 정하고 있어요(W3C).
헷갈리는 말
| 헷갈리는 말 | 뜻 | 아웃라인 버튼과 다른 점 |
|---|---|---|
| 글 개요(아웃라인) | 글의 큰 제목과 소제목을 순서대로 적은 뼈대 | 영어로는 같은 outline이지만, 글 개요는 글의 구성을 말하고 아웃라인 버튼은 테두리만 그린 버튼을 말해요 |
| 솔리드 버튼 | 배경을 진한 색으로 꽉 채운 버튼 | 솔리드 버튼은 면 전체가 칠해져 있고, 아웃라인 버튼은 테두리만 칠해져 있어요 |
| 고스트 버튼 | 평소에는 배경과 테두리가 보이지 않는 버튼 | 아웃라인 버튼은 테두리가 늘 보이고, 고스트 버튼은 평소에 테두리도 보이지 않아요 |
| 링크 버튼 | 글자색이나 밑줄만으로 링크처럼 보이게 만든 버튼 | 링크 버튼에는 테두리가 없어요 |
같은 말
아래 이름으로도 불러요. 모두 같은 뜻이에요.
Outline ButtonOutlined Button라인 버튼