모바일 UI 디자인 기본용어 - 컨트롤
UI 디자인에서 가장 먼저 이해해야 할 컨트롤에 대하여
이글에서는 UI 디자인에서 가장 기본적인 개념인 UI Control에 대해서 이야기 하고자 한다.
모바일 UI 디자인 시 고려해야 할 가이드라인 모음을 쓰면서 UI 다자인 기본 용어에 대해 정리를 해야 할 필요성을 느꼈다. 그중에서 사용자 인터페이스(UI)의 가장 기본인 컨트롤(Control)에 대해 이야기하고자 한다. 대부분의 UX가이드에서 컨트롤이란 단어가 자주 사용된다.
애플 iOS의 휴먼 인터페이스 가이드라인 (HIG)과 구글의 메터리얼 디자인(Material design)가이드를 읽다 보면 ‘Lists: Controls , Selection controls, Page Controls’ 등 컨트롤이란 단어가 자주 보인다. 애플 iOS 휴먼 인터페이스 가이드라인의 내비게이션 바(Navigation Bars)에 대한 설명 중 “Sometimes, the right side of a navigation bar contains a control, such as an Edit or a Done button, for managing content within the active view” 문장이 있다. "가끔 내비게이션 바의 오른쪽에는 컨트롤을 포함한다. 현재 보고 있는 콘텐츠를 관리하기 위한 편집 또는 확인 버튼처럼" 으로 직역되는 위 문장처럼 컨트롤은 UI 가이드 라인에서 반복적으로 사용되는 단어이다. 위 인용문에서 사용된 컨트롤의 의미를 정확히 이해하는 것이 UI 가이드라인을 이해하고 응용하기 위한 기본이다. 두 모바일 가이드라인은 UI 디자인 개념을 어느 정도 이해하고 실무에 능한 디자이너와 개발자 대상의 글이라 용어 해설에 대해서는 인색하다.- UI 디자인을 처음 접하시는 분의 경우는 해석할 때 이해하기 어려운 부분이다. - 두 모바일 OS의 UI 가이드뿐만 아니라 윈도우 OS의 UI 가이드라인에도 컨트롤이란 단어는 많이 사용되지만 컨트롤에 대해 자세히 설명한 글은 찾아보기 힘들다. 한글로 지배, 통제, 제어 장치 등으로 번역되는 컨트롤은 UI 디자인에서는 조금 다른 의미로 쓰인다. 먼저 컨트롤의 의미는 전 OS에서 거의 동일한 의미로 사용된다. 스텝퍼 Steppers 같이 몇몇 용어는 애플과 구글에서 전혀 다른 의미로 사용되지만 컨트롤은 동일한 의미이다.
그렇다면 UI에서 컨트롤의 정확한 의미는 무엇일까? iOS에서 정의한 "명령을 시작하고 정보를 전달한다. 버튼, 스위치, 텍스트 필드 및 진행률 표시가 컨트롤의 예이다." 가 컨트롤의 모든 것을 정의하지는 않는다. 이는 간단한 개념 정리일 뿐이다. - 읽는 사람이 이미 기본 개념을 이해하고 있다는 전제하에 쓴 글이다. - 그나마 자세한 설명은 앨런 쿠퍼의 책 [About Face 4 인터랙션 디자인의 본질]의 맨 마지막 장에서다. 이 책에서의 정의도 모바일이 아니라 데스크톱의 OS를 기준으로 작성되었다. 또한 이 책과 두 OS의 컨트롤에 대한 정의나 분류가 조금씩 다르다. 따라서 어느 정도 자의적인 해석이 필요하고 모바일을 기준으로 정리할 필요가 있어 보인다.
우선 각각의 OS에서 컨트롤을 어떻게 설명하는지 살펴보자.
마이크로 소프트의 윈도우 OS가이드 라인에서는 컨트롤을 다음과 같이 정의한다.
컨트롤은 사용자가 인터페이스를 조작할 때 명령을 실행시켜 눈에 보이는 결과를 일으키는 그래픽 개체이다.
[About Face 4 인터랙션 디자인의 본질] 책에서는 다음과 같이 정의 내린다.
컨트롤은 사용자가 앱과 소통하기 위해 조작 가능한, 제품에 완비된 화면 요소를 일컫는다. 컨트롤은 그래픽 사용자 인터페이스를 구성하는 가장 기본 단위라고 할 수 있다
윈도우폰 OS가이드라인에서는
컨트롤은 사용자가 앱의 기본 창 영역에서 상호 작용하는 UI 요소(UI elements)이다. 컨트롤은 콘텐츠를 표시하거나 조작을 가능하게 하는 UI 요소이다. 컨트롤은 사용자 인터페이스의 구성 요소이다. 간단한 버튼에서 그리드 보기처럼 강력한 데이터 컨트롤까지 45개 이상의 사용할 수 있는 컨트롤을 제공한다.
라고 설명한다.
위 정의들은 전문적이고 이해하기 어렵다. 여기서 중요한 키워드는 '조작가능' , '명령실행' , '상호작용' , '기본단위' , '그래픽 개체' 등이다. 이러한 키워드를 중심으로 쉽게 풀어서 정리하자면 '컨트롤은 사용자 인터페이스에서 작업을 수행하기 위해 화면에 보이는 사용자가 터치하여 조작 가능한 모든 그래픽 개체이다. 사용자가 옵션을 선택하고 정보를 입력하고 입력한 정보가 정확한지 사용자에게 알려주고 명령을 실행시키고 명령이 제대로 실행되고 있는지 진행 상태를 시각적으로 표현하고 실행된 명령이 제대로 되었는지 확인시켜주는 등의 상호작용과 관련된 사용자 인터페이스의 기본 단위로 시각적인 모든 요소를 포함한다."
모바일 사용자 인터페이스에서 이 글을 읽고 있는 모두가 보고 있는 화면의 터치가 가능한 모든 개체 또는 요소가 UI 컨트롤이다. 즉 버튼 , 라디오 버튼, 체크 박스, 스위치, 뒤로 가기 버튼, 텍스트 필드, 좋아요 토글, 댓글 달기 버튼, 구독하기 버튼, 프로그레스 인디케이터 등이 모두 컨트롤이다.
컨트롤은 시각적인 요소 뿐만 아니라 사용자와 시스템 (모바일 OS) 간의 상호작용에 대해 미리 정의된 특정 기능 목록이라고 할 수 있다. 음악 앱에서 플레이 버튼을 텝하면 음악이 재생되고 버튼의 형태가 멈춤버튼으로 바뀌는 등의 인터렉션을 기본단위로 정의 내린다. 체크박스는 선택항목 중의 여러 항목을 선택할 수 있고 선택되었음을 시각적으로 표시한다. 또한 선택을 해제했을 때 시각적인 형태도 변경된다.
이러한 미리 기능이 정의된 컨트롤들을 조합하여 사용자가 특정 작업을 수행할 수 있도록 디자인하는 것이 UI 디자인의 기본이다. UI 디자인을 하기 위해서는 이러한 컨트롤들이 어떤 의미이고 어떤 기능을 하는지에 대한 이해가 선행되어야 한다.
버튼뿐만 아니라 대부분의 컨트롤은 사용자에게 조작 가능하다는 시간적인 힌트를 주어 행동을 유도해야 한다. 즉 어포던스가 있어야 하고 이런 시각적 표현 방식은 그래픽 유저 인터페이스 GUI가 만들어진 이후 많은 연구가 이루어졌고 어느 정도 관례화가 되었다. 그런 연구의 최적화된 결과가 두 모바일 OS의 UI 가이드라인이라고 생각된다.
[About Face 4 인터랙션 디자인의 본질]에 의하면 컨트롤은 기능별로 크게 4가지로 분류된다.
사용자 목적에 입각해 볼 때, 컨트롤은 각기 네 가지의 기본 기능을 수행한다.
필수 컨트롤Imperative control은 기능을 수행한다. 버튼으로 대변되는 명령을 실행시키는 컨트롤이다. 선택 컨트롤Selection Control을 통해서는 옵션과 데이터 선택이 가능하다.
입력 컨트롤Entry control은 데이터 입력에 사용된다. 텍스트 필드가 대표적인 입력 컨트롤이다.
출력 컨트롤Display control은 사용자가 프로그램을 시각적으로 직접 조작하기 위해 사용된다
이 중에서 가장 복잡한 컨트롤은 선택 컨트롤이다. 선택 컨트롤은 사용자가 데이터를 직접 입력하는 수고를 덜기 위해 고안된 컨트롤이다.
그럼 각 분류별 기능적인 특징에 대해서 알아보자.
색채 Color
텍스트 필드 Textfield
PS. 이글에서 UI와 GUI는 동의어로 사용한다. UI디자인은 GUI디자인에서 G자를 생략했다고 이해하면 된다. 인터넷과 월드와이드웹(www) 이 다름에도 현재는 인터넷을 일반적으로 월드와이드웹으로 이해하는 것과 마찬가지이다. 도스(Dos) 같은 텍스트 기반 OS의 앱을 디자인하지 않는 이상 UI와 GUI를 구분하는 것은 현재로는 의미가 없다.
참고자료
https://docs.microsoft.com/ko-kr/windows/uwp/controls-and-patterns/
https://experience.sap.com/basics/what-is-a-ui-control/
http://gsrealdesign.tistory.com/entry/Controls
책
About Face 4 인터랙션 디자인의 본질 - 목표 지향 디자인부터 스마트기기 환경까지, 시대를 초월하는 UX 방법론 원제 About Face: The Essentials of Interaction Design
앨런 쿠퍼(저자) , 에이콘출판 2015년 6월 30일
