본문 바로가기

UX/인터랙션디자인-더나은사용자경험(UX)을위한

06_인터페이스 디자인의 기초_컨트롤과 위젯

대부분의 애플리케이션과 디바이스는 어느정도 시각적인 컨트롤로서 제품 기능을 사용할 수 있다.

컨트롤은 해당 제품이 어떤 기능을 지니는지를 설명하기 위한 어포던스와 이 기능을 구현하기 위한 파워를 갖고있다.


  • 스위치 :
    켜기와 끄기라는 두 가지 상태로 동작하며 바뀌기 전에는 그 상태를 유지한다.
  • 버튼 :
    모든 인터페이스에서 어디에서나 사용되고 있다. 버튼은 기본적으로 누르거나 클릭해서 동작하는 도구를 말한다. 눌린 채로 멈춰 있을 수도 있고, 이를 다시 돌리려면 한 번 더 누를 필요가 있다. 혹은 자동으로 제자리로 돌아오기도 한다. 버튼은 모드를 바꾸는 것에서부터 다양한 행동의 범위에 사용된다.
  • 다이얼 :
    연속적인 수치 중 한 지점을 선택한다거나 다양한 세팅이나 모드 중 하나를 산택하는 등 버튼보다 더 복잡한 컨트롤을 제공한다. 다이얼의 휠을 움직여서 원하는 지점을 자유롭게 선택하거나, 아니면 단순히 정해진 지점에서 다른 정해진 지점을 선택할 수도 있다.
  • 잠금장치 :
    평소에는 곽 잠가뒀던 곳을 열 때 사용한다. 곡 필요할 때가 아니면 안전하게 숨겨둬야 할 필요가 있는 공간에 사용하면 효과적이다. 그냥 쉽게 누르기만 하면 되는 버튼이나 드롭다운 메뉴로 작동되는 것이 좋지 않은 경우가 있다. ex)모바일 기기에서 배터리를 안전하게 고정
  • 슬라이더 :
    다이얼처럼 미세한 조작에 쓰이는데, 스피커 볼륨이나 데이터양 등을 표시하는 데 많이 사용된다. 예를 들어 인터랙티브 지도에서 표시되는 집의 숫자를 보여준다든가 하는 식이다. 슬라이더 내에서 범위를 지정하는 데 여러 개의 핸들이 사용되지도 한다.
  • 핸들 :
    오브젝트를 조작하도록 튀어나온 부분을 말한다. 대부분 디지털 윈도우의 프레임에는 화면 상에서 창을 이동하거나 바꾸기 위한 핸들이 달려있다.

물리적 컨트롤

일반적인 컨트롤 중에는 현실에만 존재하고 화면 속에는 존재하지 않는 것들고 있다

  • 조그다이얼
    • 한 손으로 조작할 수 있는, 일반적으로는 엄지손가락으로 돌리는 형태로서 다이얼처럼 생긴 컨트롤을 말한다.
    • 다이얼과 비슷한 형태일 수도 있고 패드나 버튼 형태를 띤 것도 있는데, 주로 소형 기기에서 커서를 움직이거나 메뉴를 이동하는 데 사용한다.
    • 어린아이나 나이 든 사람이 사용하기에는 조금 어렵다.
  • 조이스틱
    • 물리적 장치 혹은 디지털 오브젝트를 원격에서 조작할 때 쓰이는데, 주로 빠른 동작과 집중적인 조작이 필요한 디지털 게임기나 기타 어플리케이션에서 사용된다.
    • 모든방향으로 움직이는 것과 상하, 또는 좌우로만 옴직이게 제한된 것도 있다.
  • 트랙볼
    • 커서 등 물리적 장치 혹은 디지털 오브젝트를 조작하는 데 사용하는 물리적 디바이스다.
    • 일반적으로 한곳에만 고정되어있지만 볼 자체는 모든 방향으로 움직일 수 있다.

디지털 컨트롤

대부분의 컨트롤이 물리적인 아날로그 세계와 디지털 세계 양쪽에 존재하는데 반해 화면 속에서만 존재하는 컨트롤도 있다.

디지털 컨트롤은 제록스 PARC 연구소가 1970년애 고안한 오리지널 그래픽 유저 인터페이스(GUI)에서 사용된 용어로부터 발전해왔다. 

1980년대의 매킨토시와 PC 운영체제들을 통해 재발견되었으며 1990년대의 웹 규약에 이르러 더욱 추가되고 확장됐다.

  • 체크박스
    • 사용자가 짧은 목록에서 원하는 것을 고를 수 있다.
  • 라디오 버튼
    • 사용자가 주어진 선택지 중에서 하나를 고를 수 있다.
    • 딱 하나의 답을 고르도록 강제되는 경우에 사용된다.
  • 트위스트
    • 열거나 닫을 때마다 패널 안에 들어 있는 메뉴나 내용을 보이거나 감춘다.


  • 스크롤 바
    • 사용자가 특정한 창이나 패널 안의 내용을 움직인다.
    • 가로와 세로 양방향으로 만들어질 수 있다.
    • 커서나 버튼으로 조작할 수도 있다.
  • 드롭다운 메뉴
    • 한 번에 다 보여주는 게 불가능한 내비게이션, 기능, 내용들을 제어할 수 있다.
    • 커서를 위에 갖다 댔을 때 롤오버 되거나 클릭을 해서 연다.
    • 또한 드롭다운 목록 내에서 메뉴 하나를 선택하거나 커서를 이 범위 바깥으로 치웠을때 숨겨지도록(롤아웃) 할 수도 있다.


  • 리스트박스
    • 목록에서 복수의 아이템을 고를 수 있다.



  • 입력창
    • 사용자가 숫자나 글자, 심볼을 쳐 넣을 수 있는 공간이다.
    • 몇 글자만 들어가도록 제한된 경우도 있고 화면 전체를 차지하기도 한다.
  • 스핀박스
    • 입력창에 사용자가 따로 숫자를 쳐넣지 않아도 값을 조절할 수 있는 기능을 조합한 것이다.
    • 빈 입력창만 표시하기에는 좀 불분명한 부분에 대해 기본값을 제시할 때 유용하다.


하나나 여러 개의 컨트롤에 시스템의 반응을 포함 시킨 것을 일러 위젯(widget)이라고 한다.

위젯은 모든 기기와 애플리케이션에 필요한 요소 중 하나다.
MP3 플레이어를 예로 들면음량조절, 음악 파일 목록 재생, 파일 관리, 파일 내보내기 등의 다양한 위젯의 조합으로 만들어져 있다. 각 경우에 사용자는 특정 동작을 지시하는 데 컨트롤을 사용하며 여기에 시스템이 반응한다.

모든 기기와 애플리케이션은 위젯으로 이뤄진다.





출처 : (에이콘 UX 프로페셔널 시리즈 1-01) 인터랙션 디자인: 더 나은 사용자 경험(UX)을 위한