고스트 버튼Ghost Button
한 줄 정의
고스트 버튼은 평소에는 배경색과 테두리가 보이지 않고 글자나 아이콘만 보이는 버튼으로, 화면에서 가장 덜 눈에 띄게 만든 보조 행동용 버튼이에요.
쉽게 말하면
고스트(ghost)는 유령이라는 뜻이에요. 이름처럼 버튼의 몸체가 투명해서 글자만 화면에 떠 있는 것처럼 보이는 버튼이에요. 마우스를 올렸을 때 옅은 배경이 나타나게 만들어, 그때 버튼이라는 걸 드러내기도 해요.
언제 쓰나요
IBM의 카본 디자인 시스템은 고스트 버튼을 가장 덜 눈에 띄는 버튼으로 두고, 눈에 띄지 않아도 되는 보조 행동에 쓰라고 안내해요. 카본은 여러 단계로 진행하는 화면의 '취소' 버튼을 예로 드는데, 고스트 버튼으로 두면 방문자가 일부러 찾아서 눌러야 하니 실수로 취소하는 일이 줄어든다는 이유예요(카본 디자인 시스템).
고스트 버튼은 몸체가 보이지 않아서, 키보드로 버튼을 골랐을 때 지금 어느 버튼을 골랐는지 보여 주는 표시(포커스 표시)가 특히 중요해요. W3C 웹 접근성 지침(WCAG 2.2)은 눈에 보이는 경계가 없는 버튼도 포커스를 받았을 때는 주변 배경과 충분히 대비되는 포커스 표시가 있어야 한다고 설명해요(W3C).
헷갈리는 말
| 헷갈리는 말 | 뜻 | 고스트 버튼과 다른 점 |
|---|---|---|
| 솔리드 버튼 | 배경을 진한 색으로 꽉 채운 버튼 | 가장 눈에 띄는 버튼이에요. 고스트 버튼은 반대로 가장 덜 눈에 띄어요 |
| 아웃라인 버튼 | 배경은 비우고 테두리만 그린 버튼 | 아웃라인 버튼은 테두리가 늘 보이고, 고스트 버튼은 평소에 테두리도 보이지 않아요 |
| 링크 버튼 | 글자색이나 밑줄만으로 링크처럼 보이게 만든 버튼 | 둘 다 버튼 몸체가 없지만, 링크 버튼은 밑줄이나 링크 색으로 글 속 링크처럼 보이게 만들어요 |
같은 말
아래 이름으로도 불러요. 모두 같은 뜻이에요.
Ghost Button