5.3 GUI 가이드 라인 – 컨트롤 -최적의 UI 설계 가이드


컨트롤(control)은 위젯(widget)이라고도 하며 그래픽 오프젝트로 다른 오브젝트의 속성이나 동작을 표시한다. 컨트롤은 값을 표시하거나 입력하게 하고, 명령을 수행하게 한다.
따라서 화면을 설계할 때는 데이터의 표현이나 사용자 행동을 컨트롤하기 위해 각 컨트롤의 특징과 차이를 잘 이해해 용도별로 적절히 사용할 수 있어야 한다. 일반적으로 많이 사용되는 컨트롤의 특징과 적절한 사용 방법에 대해 알아보도록 하겠다.
 

버튼

 

명령버튼

5.3 GUI 가이드 라인 - 컨트롤 -최적의 UI 설계 가이드
자주 사용되는 또는 모든 명령어를 수행하기 위한 액세스 기능을 제공한다. 가능한 표준 레이블의 버튼을 사용하며 버튼이 수행할 액션을 의미하는 레이블을 제공한다.
한 윈도우에서 적절한 버튼의 수는 6개 이하이며, 추가 입력이 있을 경우 레이블에 “…”를 사용한다.
 

버튼바/툴바

5.3 GUI 가이드 라인 - 컨트롤 -최적의 UI 설계 가이드
 
가장 자주 사용되는 명령이나 옵션을 쉽게 액세스할 수 있도록 한다. 버튼의 배열 순서는 왼쪽에서 오른쪽, 위에서 아래로 하고, 가장 자주 사용되는 버튼을 왼쪽이나 위쪽에 둔다.  관련된 버튼은 그룹핑을 한다.
버튼의 구성을 사용자가 커스트마이징 할 수 있는 기능을 제공하는 것도 좋다.

텍스트 입력

 

텍스트 박스

5.3 GUI 가이드 라인 - 컨트롤 -최적의 UI 설계 가이드
텍스트 입력이나 수정시 이를 표시한다. 처음 표시할 때, 공백 또는 디폴트값을 제공하며 읽기 전용 텍스트 표시이다.
 

텍스트 영역/메모

5.3 GUI 가이드 라인 - 컨트롤 -최적의 UI 설계 가이드
여러 줄의 텍스트 입력하거나  표시한다.
 
 

선택

라디오버튼(옵션버튼)

5.3 GUI 가이드 라인 - 컨트롤 -최적의 UI 설계 가이드
서 로 배타적인 항목 중 한 개만 선택한다. 항목이 고정적이고 항목 수는 2~8개가 적당하다. 항목이름 중 한 문자를 입력해 해당 항목으로 이동할 수 있게 한다.
항목 중 하나를 기본으로 제공하며 레벨은 가능한 한 줄로 한다. 수평 정렬보다는 수직 정렬이 좋다.
 

체크박스

5.3 GUI 가이드 라인 - 컨트롤 -최적의 UI 설계 가이드
항목을 On./Off시킬 때 사용하며 선택 항목이 On/Off 2가지 상태일 때 주로 사용한다.
항목의 수는 2~8개가 적당하며 키보드를 통해 항목간의 이동 및 선택이 가능해야 한다.
 

팔레트

5.3 GUI 가이드 라인 - 컨트롤 -최적의 UI 설계 가이드
그래픽 표현 요소를 상호 배타적인 옵션 중 한 개를 선택하게 할 때 사용한다. 선택시에 다른 항목과 비교가 쉽고 오직 한 개만 선택이 가능하도록 한다. 적당한 공간이 필요하며 이미지보다 컬러 단어가 더 명확할 때는 사용하지 않는 것이 좋다.
 

리스트박스

5.3 GUI 가이드 라인 - 컨트롤 -최적의 UI 설계 가이드
많은 수의 항목을 사용자에게 보여주고 선택하게 할 때 사용한다. 상하 또는 좌,우 스크롤을 통해서 나머지 정보를 볼 수 있게 한다.
떨어진 항목들을 선택하려면 Ctrl키를 누르고 항목 클릭하고, 연속적으로 있는 항목을 한꺼번에 선택하려면 첫 번째 항목을 Shift키를 누른 채 클릭하고, 마지막 항목을 Shift키를 누른 채 클릭하게 한다.
 

단일 선택 리스트 박스

5.3 GUI 가이드 라인 - 컨트롤 -최적의 UI 설계 가이드
리스트에서 오직 한 개의 항목만을 선택하게 한다. 항목의 캡션이 영문일 때는 대소문자를 혼용하고 6개 이상의 항목, 시간이나 상태에 따라 변하는 항목에 대해 사용한다.
가능한 수평 스크롤은 사용하지 말고 항목 중 가장 긴 항목에 전체 길이를 맞추는 것이 좋다. 더블 클릭을 하거나 항목을 선택한 후에 명령 버튼을 클릭하도록 하게 한다.
 

다중 선택 리스트 박스

5.3 GUI 가이드 라인 - 컨트롤 -최적의 UI 설계 가이드
리스트에서 여러 개의 항목을 선택하게 한다. 항목 왼쪽에 체크박스 표시를 하고 항목 모두 선택(select all), 항목 모두 취소 등의 버튼을 제공한다.
 

드롭다운/팝업리스트박스/콤보박스

5.3 GUI 가이드 라인 - 컨트롤 -최적의 UI 설계 가이드
 
리스트 박스를 통해 선택하게 해야 할 경우인데, 주로 공간이 부족할 때 사용한다. 항목수가 많지 않아야 한다.
 
 

표시

 

툴팁

5.3 GUI 가이드 라인 - 컨트롤 -최적의 UI 설계 가이드
 
툴바 버튼 등에 마우스를 올려놓으면 해당 툴바 버튼의 기능을 몇 초 동안 보여준다. 이는 아이콘이나 컨트롤로 설명이 모두 안되는 경우 사용자에게 설명하기 위해서 사용한다.
 

텍스트 필드 (레이블)

5.3 GUI 가이드 라인 - 컨트롤 -최적의 UI 설계 가이드
읽기 전용으로 텍스트를 표시한다. 컨트롤의 캡션을 표시하거나 정보 표시에 이용한다.
 

그룹박스

5.3 GUI 가이드 라인 - 컨트롤 -최적의 UI 설계 가이드
관련 있는 컨트롤을 시각적으로 분류한다. 라디오 버튼이나 체크 박스 컨트롤들을 테두리로 사용하여 분류를 명확히 할 때 사용한다.
 

작업진행 바

5.3 GUI 가이드 라인 - 컨트롤 -최적의 UI 설계 가이드
시스템 동작에 대한 진행 상태를 사용자에게 피드백을 주기 위해 사용한다.
 
 

기타

스핀박스

5.3 GUI 가이드 라인 - 컨트롤 -최적의 UI 설계 가이드
텍스트 박스에 업/다운 컨트롤을 조합한 것으로 직접 값을 입력하거나 버튼을 눌러 값을 입력할 수 있게 한다.
 

슬라이더/트래커 바

5.3 GUI 가이드 라인 - 컨트롤 -최적의 UI 설계 가이드
한정된 연속적인 값에서 한 값을 지정할 때 유용하게 사용된다. 가능한 범위에서 현재의 값을 보는데 편리하다.
 

노트북 (탭)

5.3 GUI 가이드 라인 - 컨트롤 -최적의 UI 설계 가이드
같은 윈도우에 논리적으로 페이지나 섹션으로 구성된 정보를 표시하기에 적당하다. 종이 서류철과 비슷한 모양이며 오브젝트의 속성을 지정하는데 주로 쓰이는데, 옵션 등을 설정할 때 특히 유용하다.
설계시 페이지의 순서는 왼쪽에서 오른쪽으로, 위에서 아래로 순서를 가져야 하며, 각 페이지의 크기는 같아야 한다. 탭의 텍스트는 탭 중앙에 정렬하고 한 줄로 표시한다.
 

스크롤 바

5.3 GUI 가이드 라인 - 컨트롤 -최적의 UI 설계 가이드
표시한 윈도우 영역보다 더 많은 정보를 표시할 때 사용한다. 주어진 영역에서 무제한의 데이터를 보여줄 수 있으며 좌,우 또는 상,하 스크롤 바가 있다.
 

풀다운 메뉴

5.3 GUI 가이드 라인 - 컨트롤 -최적의 UI 설계 가이드
주로 메인 메뉴 설계에 사용한다. 설계시 항목은 마우스나 키보드로 선택할 수 있어야 하고 항목을 직접 선택해 실행할 수 있는 핫 키를 제공하고 키는 표준을 따르도록 해야 한다.
또한 키의 조합으로 메뉴를 선택할 수 있어야 하고 메뉴 항목 배열이나 이름은 표준을 따르고 메뉴에서 유일해야 한다. 예를 들면 파일, 편집, 보기, 열기, 닫기 등이다.
작업의 흐름에 따라 메뉴를 구성해야 하며 자주 사용하거나 중요한 메뉴는 위쪽에 배열한다. 메뉴 항목은 한 화면에서 보일 수 있도록 해야 하며, 추가 입력이 필요한 메뉴 항목은 항목 이름 뒤에 ‘…’을 표시한다(예: 다른 이름으로 저장…)
 
 







제휴 링크로 구매 시 제휴마케팅 활동의 일환으로 일정액의 수수료를 지급받아 콘텐츠를 제작하는데 큰 도움이 됩니다.



도움이 되셨다면, 댓글이나 소중한 커피 한 잔 부탁드려도 될까요?

커피 사주기
























당신이 좋아할 만한 글







북트리: 도서관리 & 독서노트
4.5 • 231개의 평가
바코드만 스캔하면 책 정보가 쏙,독서달력,독서통계,독서목표관리,독서노트 등 독서기록 어플









Add a Comment

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다