맨위로가기

버튼 (컴퓨팅)

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
목차

1. 개요

버튼(컴퓨팅)은 사용자가 상호 작용을 할 수 있도록 설계된 그래픽 사용자 인터페이스(GUI) 요소이다. 버튼은 푸시 버튼, 라디오 버튼, 토글 버튼 등 여러 종류가 있으며, 각 버튼은 특정 동작을 수행하도록 설계되었다. 운영체제별로 버튼의 디자인이 다르며, macOS는 둥근 직사각형, Windows는 사각형, Linux 및 기타 Unix 계열 시스템은 위젯 툴킷에 따라 모양이 달라진다. HTML에서는 `

버튼 (컴퓨팅)
버튼 (컴퓨팅)
일반 정보
종류그래픽 사용자 인터페이스 요소
용도사용자 상호 작용 시작 또는 명령 실행
특징
시각적 표현일반적으로 사각형 또는 둥근 모양
텍스트 또는 아이콘버튼의 기능을 나타내는 텍스트 또는 아이콘 포함
상호 작용 방식클릭, 탭, 키보드 입력 등으로 활성화
디자인 요소
레이블버튼의 목적을 설명하는 명확하고 간결한 텍스트
아이콘레이블과 함께 또는 레이블 대신 사용될 수 있음
크기사용 편의성을 고려하여 적절한 크기로 디자인
색상 및 스타일사용자 인터페이스의 전체적인 디자인과 일관성을 유지
상태 표시
기본 상태사용자가 버튼과 상호 작용하기 전의 상태
호버 상태마우스 커서가 버튼 위에 올라갔을 때의 상태 (시각적 피드백 제공)
활성 상태버튼이 클릭 또는 탭되었을 때의 상태
비활성 상태버튼이 현재 사용할 수 없는 상태 (회색 처리 등)
사용 예시
폼 제출웹 페이지 또는 애플리케이션에서 폼 데이터를 제출하는 버튼
작업 확인사용자에게 작업을 확인하는 데 사용되는 버튼 (예: "확인", "취소")
탐색다른 페이지 또는 섹션으로 이동하는 버튼
기능 실행특정 기능을 실행하는 버튼 (예: "인쇄", "저장")
접근성 고려 사항
키보드 접근성키보드만으로도 버튼을 활성화할 수 있어야 함 (Tab 키, Enter 키)
스크린 리더 지원스크린 리더가 버튼의 레이블과 상태를 정확하게 읽을 수 있어야 함
충분한 대비버튼의 텍스트와 배경색 간에 충분한 대비를 제공하여 시각 장애가 있는 사용자도 쉽게 인식할 수 있도록 함

2. 종류

버튼은 기능에 따라 다양한 종류로 나뉜다. 일반적인 버튼의 형태와 작동 방식 외에도, 특수한 기능을 가진 버튼들이 존재한다.


  • 푸시 버튼: 가장 일반적인 버튼으로, 한 번 클릭할 때마다 정해진 동작을 실행한다.
  • 라디오 버튼: 여러 선택지 중 하나를 선택할 때 사용되며, 오래된 라디오의 채널 선택 방식과 유사하다.
  • 토글 버튼: 누를 때마다 켜짐/꺼짐 상태가 전환되는 버튼으로, 체크 상자와 유사하게 작동한다.


이 외에도 스핀 버튼이나 길게 누르면 메뉴가 표시되는 버튼 등 다양한 형태의 버튼이 존재한다. 체크박스나 메뉴는 일반적으로 버튼으로 불리지 않지만, 동작 방식은 버튼과 유사한 점이 많다.

마이크로소프트 윈도우의 Win32 공통 컨트롤에서는 스타일 속성을 통해 라디오 버튼이나 체크박스를 푸시 버튼처럼 보이게 할 수 있다.[7][8] WPF나 WinUI에서는 `ToggleButton` 클래스를 제공하며,[9][10] VBA 사용자 폼에도 `ToggleButton` 컨트롤이 있다.[11]

안드로이드의 표준 위젯에서는 `CompoundButton`를 통해 `CheckBox`, `RadioButton`, `Switch`, `ToggleButton`을 구현할 수 있다.[12]

버튼의 레이블이나 아이콘은 현재 상태를 나타내거나 버튼을 눌렀을 때의 결과를 나타낼 수 있어 혼란을 야기할 수 있다.[14][15] 마이크로소프트는 Windows 사용자 경험 가이드라인에서 명령 버튼을 상태 설정이 아닌 조작 시작에만 사용할 것을 권장한다.[16]

Bluetooth, Wi-Fi, 비행기 모드 등의 ON/OFF UI는 토글 버튼이나 토글 스위치를 사용하며, 색각 다양성을 고려하여 디자인해야 한다.[18][19][20] 토글 스위치는 ON/OFF 설정에만 사용해야 하며, 다른 양자택일 설정에는 사용하지 않아야 한다.[22]

2. 1. 푸시 버튼

가장 일반적인 버튼으로, 한 번 클릭할 때마다 지정된 동작을 실행한다.[2] 이 버튼은 한 번만 눌러 명령을 실행하도록 구성할 수 있으며, 즉각적인 피드백을 받기 위해 여러 번 클릭해야 할 수도 있다.

2. 2. 라디오 버튼

라디오 버튼은 여러 선택지 중에서 하나를 선택하는 데 사용된다. 이는 오래된 라디오의 채널 선택 방식과 유사한 동작을 보이기 때문에 붙여진 이름이다.[2]

2. 3. 토글 버튼

누를 때마다 상태(켜짐/꺼짐)가 전환되는 버튼이다.[26] 체크 상자처럼 동작을 켜고 끄는 방식으로 설계되었다.[3] 토글 버튼은 옵션의 상태를 나타내기 위해 그래픽 단서(예: 마우스를 놓은 후에도 눌린 상태 유지)를 표시하며, 래치 버튼 또는 래칭 스위치라고도 부른다.

일반적인 푸시 버튼은 누르고 있는 동안만 외관이 변하고 떼면 원래 상태로 돌아가지만, 토글 버튼은 눌린 채로 유지된다.

토글 버튼은 버튼 위에 동적으로 변화하는 레이블(캡션)이나 아이콘을 배치하여 상태를 표시하기도 한다. 예를 들어 미디어 플레이어 계열의 애플리케이션에서 재생/일시 정지 버튼 전환에 자주 사용된다.[13]

Bluetooth나 Wi-Fi, 비행기 모드 등 유효/무효(ON/OFF)를 변경하는 UI에서는 무효(OFF)일 때는 회색, 유효(ON)일 때는 색상이 있는 것으로 표시하여 ON/OFF를 표현하는 토글 버튼을 사용하기도 한다.[18][19][20]

2. 4. 기타 버튼

이 외에도 여러 버튼으로 구성된 컨트롤(스핀 버튼)이나, 길게 누르면 메뉴를 표시하는 버튼 등이 있다.[2]

라디오 버튼과 유사한 체크박스나, 윈도우의 메뉴는 일반적으로 버튼이라고 불리지 않는다.[3] 하지만, 체크박스와 라디오 버튼, 토글 버튼은 모두 클릭하거나 탭하면 상태가 바뀌는 등 동작적인 공통점이 많아, 구현상으로는 큰 차이가 없는 경우도 많다.

3. 동작 방식

GUI 버튼은 물리적 스위치와 달리 마우스 버튼을 눌렀을 때가 아니라 뗐을 때 동작이 실행된다.[5][6] 이는 실수로 클릭한 경우, 커서를 버튼 밖으로 이동하여 동작을 취소할 수 있도록 하기 위함이다. 키보드 포커스를 사용하여 리턴 키(엔터 키)나 스페이스 키로 버튼 클릭을 대체할 수도 있다.[5][6]

4. 운영체제별 디자인

버튼의 디자인은 OS별로 다르며, 각 OS의 디자인 가이드라인을 따른다.

물리적 스위치와 달리 GUI 버튼의 동작은 마우스 버튼을 눌렀을 때가 아니라 뗄 때 판정된다. 이는 실수로 클릭한 버튼이 작동하지 않도록 마우스 커서를 판정 범위 밖으로 이동시킨 후 뗄 수 있도록 하기 위한 조치이다. 버튼에 키보드 포커스가 설정되어 있는 경우 키보드의 리턴 키(엔터 키) 또는 스페이스 키 등으로 클릭 동작을 대체할 수 있다. 버튼에 포커스가 설정되어 있지 않더라도 엔터 키에 의해 눌려지는 버튼은 "기본 버튼"이라고 불린다[5][6]。

리눅스 및 기타 유닉스 계열 운영 체제에서 버튼의 모양과 동작은 GTK, Qt 등 어떤 위젯 툴킷이 사용되는지에 따라 정의되지만, 다른 툴킷도 사용된다. 여러 툴킷을 사용하면 애플리케이션 간에 통일성이 떨어지는 모양과 느낌을 유발할 수 있다. 대부분의 위젯 툴킷은 테마 기능도 갖추고 있어서 Mac OS 및 윈도우와 같은 단일 표준 모양은 없다.

4. 1. macOS

macOS의 Aqua 인터페이스에서 버튼은 주로 결정화된 유리 형태의 둥근 직사각형으로 묘사된다. 이 버튼들은 보통 밝은 회색이며, 누르면 파란색으로 바뀐다.[1] 키보드 포커스가 있는 버튼(스페이스바로 선택 가능)은 파란색 후광이 나타난다.[1] 활성 창의 기본 버튼(Return 키로 선택 가능)은 밝은 파란색과 더 어두운 파란색(눌린 버튼과 동일한 색상) 사이에서 애니메이션된다.[1]

또한, 주로 응용 프로그램 도구 모음 내에서 밝은 회색 금속 모양의 약간 둥근 직사각형 버튼도 사용된다.[1] 이 버튼들은 누르면 더 어둡게 보이고 "안으로 밀려 들어간" 것처럼 보인다.[1]

창 관리 컨트롤은 각 창의 왼쪽 상단 모서리에 나타난다.[1] 이 버튼들은 표준 아쿠아 버튼과 스타일이 유사하지만, 기억을 돕기 위해 색상으로 구분되어 있다.[1] 왼쪽에서 오른쪽으로 "창 닫기"는 빨간색, "창 최소화"는 노란색, "확대"는 녹색으로 표시되어 창의 크기를 내용에 가장 잘 맞게 조정한다.[1]

4. 2. Windows

마이크로소프트 윈도우의 버튼은 일반적으로 사각형이며, 윈도우 XP, 비스타, 7에서는 약간 둥근 모서리를 가지고 있고, 윈도우 11에서는 더욱 둥근 모서리를 가진다. 윈도우 8에서는 버튼이 날카로운 모서리를 가진 사각형이다. 활성화된 포커스가 있는 버튼은 버튼 테두리 안쪽에 검은색 점선으로 표시된다. 또한, 최신 버전에서는 기본 버튼이 파란색 테두리로 표시된다. 윈도우 비스타 및 윈도우 7에서 기본 버튼은 일반적인 모습과 파란색 테두리 사이를 천천히 페이드 효과로 전환된다. 창 관리 컨트롤은 응용 프로그램 창의 오른쪽 상단 모서리에 있으며, 왼쪽에서 오른쪽 순서로 창을 "최소화" (화면 하단의 작업 표시줄로 사라짐), 창을 ''최대화''(전체 화면을 덮도록 확장, 창이 이미 최대화된 경우 버튼은 이전 크기와 위치로 복원), 창을 닫는 버튼이 있다.

4. 3. Linux 및 기타 Unix 계열 시스템

리눅스 및 기타 유닉스 계열 운영 체제에서 버튼의 모양과 동작은 주로 GTK, Qt 등 어떤 위젯 툴킷이 사용되는지에 따라 정의되지만, 다른 툴킷도 사용된다. 여러 툴킷을 사용하면 애플리케이션 간에 통일성이 떨어지는 모양과 느낌을 유발할 수 있다. 대부분의 위젯 툴킷은 테마 기능도 갖추고 있어서 Mac OS 및 윈도우와 같은 단일 표준 모양은 없다.

5. HTML에서의 활용

HTML에서는 `<button>` 요소를 사용하여 버튼을 만들 수 있다. 웹 브라우저는 운영 체제의 기본 버튼 모양을 사용하거나, 브라우저 자체의 버튼 정의를 따를 수 있다. 계단식 스타일 시트를 사용하여 버튼의 스타일을 지정할 수도 있다.[2]

버튼은 사용자 입력을 지우거나 양식 내용을 서버로 전송하는 등의 작업을 수행하기 위해 HTML 양식의 요소로 나타난다. HTML 앵커는 때때로 버튼과 매우 유사한 그래픽으로 표현되기도 한다.[2]

6. 혼란을 야기하는 디자인

버튼 위에 레이블(캡션)이나 아이콘을 배치하여 동적으로 상태를 표시하는 경우가 있다. 예를 들어 미디어 플레이어의 재생/일시 정지 버튼 전환에 자주 사용된다.[13] 하지만 이 경우, 버튼의 레이블이나 아이콘이 현재 상태를 나타내는지, 아니면 버튼을 눌렀을 때의 상태를 나타내는 것인지 명확한 규칙이 없어 혼란을 야기할 수 있다.[14][15] 마이크로소프트는 Windows 사용자 경험 가이드라인에서, 명령 버튼은 상태 설정이 아닌 조작 시작에만 사용할 것을 권장한다.[16]

Bluetooth, Wi-Fi, 비행기 모드 등의 ON/OFF 토글 버튼은 색상만으로 상태를 표시하면 색각 이상이 있는 사용자는 구별하기 어려울 수 있다. 따라서 글자 굵기나 채도·명도를 함께 변경하는 등의 배려가 필요하다.[17] ON/OFF 설정 UI에서는 체크박스나 토글 버튼 대신 토글 스위치가 사용되기도 한다.[21] 토글 스위치는 ON/OFF 설정에만 사용해야 하며, 다른 양자택일 설정에는 사용해선 안 된다.[22] 토글 스위치도 부적절하게 디자인하면 토글 버튼처럼 혼란을 야기하여 사용성을 해칠 수 있다.[23]

참조

[1] FOLDOC button http://foldoc.org/bu[...]
[2] 웹사이트 Mozilla button description https://web.archive.[...] 2009-09-18
[3] Mozilla checkState button attribute https://developer.mo[...]
[4] Microsoft Docs Command Buttons in Windows 7 - Win32 apps https://docs.microso[...]
[5] 웹사이트 デフォルトボタンの設定 - ボタンの作成(JButtonクラス) - Swing https://www.javadriv[...] 2016-01-16
[6] 웹사이트 Button.IsDefault Property (System.Windows.Controls) https://docs.microso[...] マイクロソフト 2022-02-06
[7] Microsoft Docs Button Styles (Winuser.h) - Win32 apps https://docs.microso[...]
[8] Microsoft Docs Styles Used by MFC https://docs.microso[...]
[9] Microsoft Docs ToggleButton Class (System.Windows.Controls.Primitives) https://docs.microso[...]
[10] Microsoft Docs ToggleButton Class (Windows.UI.Xaml.Controls.Primitives) - Windows UWP applications https://docs.microso[...]
[11] 엑셀 VBA トグルボタンのプロパティ - Excel VBA https://www.239-prog[...]
[12] Android Developers CompoundButton https://developer.an[...]
[13] IT 용어 사전 トグルボタン（トグルスイッチ）とは - IT用語辞典 e-Words https://e-words.jp/w[...]
[14] 게임UI넷 状態を切り替えるボタンのデザイン | ゲームUIネット https://game-ui.net/[...]
[15] IT 용어 사전 トグルボタン (toggle button)とは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 https://wa3.i-3-i.in[...]
[16] 웹사이트 Windows ユーザーエクスペリエンス ガイドライン > ガイドライン > コントロール > コマンド ボタン https://docs.microso[...] Microsoft 2016-01-16
[17] UX MILK トグルボタンが混乱を招く理由 | UX MILK https://uxmilk.jp/83[...]
[18] Apple 지원 iPhoneのコントロールセンターを使用する/カスタマイズする - Apple サポート (日本) https://support.appl[...]
[19] Android 도움말 Android スマートフォンで設定をすばやく変更する - Android ヘルプ https://support.goog[...]
[20] Sony JP '[Windows 10] Bluetooth機能をオン／オフにする方法 | Sony JP' https://knowledge.su[...]
[21] U-Site トグルスイッチのガイドライン – U-Site https://u-site.jp/al[...]
[22] UX MILK トグルスイッチの誤用をやめよう | UX MILK https://uxmilk.jp/83[...]
[23] UX MILK その機能はオンかオフか？ トグルスイッチが招く混乱とは | UX MILK https://uxmilk.jp/83[...]
[24] 자유 온라인 컴퓨팅 사전 button http://foldoc.org/bu[...]
[25] 웹인용 Mozilla button description https://developer.mo[...] 2019-02-07
[26] 웹인용 checkState button attribute in 모질라's XUL https://developer.mo[...] 2019-02-07


본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com