아이콘 버튼Icon Button
한 줄 정의
아이콘 버튼은 글자 없이 돋보기 · 장바구니 · 닫기(×) 같은 그림 하나만으로 무슨 일을 하는지 나타내는 버튼이에요.
쉽게 말하면
화면 구석의 돋보기 그림을 누르면 검색창이 열리고, × 그림을 누르면 창이 닫혀요. 이렇게 글자 없이 그림만 있는 버튼이 아이콘 버튼이에요. 글자가 들어가지 않아서 헤더처럼 좁은 자리에도 여러 개를 놓을 수 있어요.
잘 쓰려면
- 뜻이 널리 알려진 그림을 써요. 방문자는 처음 보는 그림이면 눌러 보기 전까지 무슨 버튼인지 알 수 없어요. 뜻이 분명하지 않은 그림이라면 옆에 글자를 함께 두면 헷갈리지 않아요
- 화면에 보이지 않는 이름을 달아요. 화면 읽기 프로그램(화면 내용을 소리로 읽어 주는 프로그램)은 버튼 안의 글자를 읽어 버튼 이름으로 알려 줘요. 아이콘 버튼에는 글자가 없으니, 코드에 이름(aria-label 등)을 따로 넣어야 '검색 버튼'처럼 읽어 줄 수 있어요(W3C)
- 손가락으로 누를 만큼 크게 만들어요. W3C 웹 접근성 지침(WCAG 2.2)은 누르는 대상을 가로세로 24 CSS 픽셀 이상으로 만들도록 정하고, 주변 버튼과 간격이 충분한 경우 같은 몇 가지 예외를 둬요(W3C)
큐샵에서는
클래식 에디터와 스튜디오 에디터 모두 아이콘 블록과 버튼 블록이 있어요.
헷갈리는 말
| 헷갈리는 말 | 뜻 | 아이콘 버튼과 다른 점 |
|---|---|---|
| 아이콘 | 뜻을 나타내는 작은 그림 | 아이콘은 그림 자체이고, 아이콘 버튼은 그 그림을 눌러 무언가를 실행하는 버튼이에요 |
| 햄버거 메뉴 | 가로줄 세 개 버튼을 눌러 메뉴를 펼치는 방식 | 햄버거 메뉴의 세 줄 버튼도 아이콘 버튼의 한 종류예요 |
같은 말
아래 이름으로도 불러요. 모두 같은 뜻이에요.
Icon Button
