모바일 앱 사용성에 대한 정해진 규칙이 있는 것은 아닙니다. 다만 수년간의 앱 개발 경험을 통해 쌓이고 그 경험을 공유하고 있습니다. 이번 장에서 다루는 내용은 모바일 앱을 만들 때 참고할만한 내용을 정리한 것입니다.

화면 구성

사용자에게 제공하는 핵심 콘텐츠에 집중할 수 있도록 도움이 되지 않는 시각적 요소를 최소화합니다. 콘텐츠를 촘촘히 채우기보다는 충분한 여백을 주고 콘텐츠가 많다면 시각적인 계층 구조를 명확히 합니다. 연관된 콘텐츠는 묶어서 표현해 화면의 복잡도를 줄입니다.

• 콘텐츠가 한 화면에 들어가지 않을 때에는 화면에 딱 맞춰 디자인하지 말고 잘려 보이게 해서 좌, 우 혹은 위, 아래로 스크롤 할 수 있음을 사용자에게 인지시킵니다.

• 격자형 보더는 복잡해 보이므로 될 수 있으면 사용하지 않는 것이 좋고 목록의 하위 항목에서는 구분 라인을 사용하지 않는 것이 좋습니다.

• 키보드 입력 작업 시 키보드를 닫지 않고도 작업을 완료할 수 있게 구성합니다.

• 모달 팝업은 가능하면 풀 프레임을 사용합니다.

• 사용자의 노력으로 만들어진 정보는 쉽게 삭제할 수 없게(예를 들어 전체 선택/삭제 등과 같은) 디자인하는 것이 좋습니다.

• 삭제 등과 같이 되돌릴 수 없는 액션의 경우 다시 한번 사용자에게 확인을 요청합니다.

• 주 액션과 되돌릴 수 없는 액션을 수행하는 기능은 같은 위치에 배치하지 않는 것이 좋습니다.

• 닫기, 확인, 취소 등의 버튼 등의 UI 요소는 같은 위치에 배치하여 사용자 인터페이스를 일관성있게 구성합니다.

내비게이션

내비게이션 바는 한 단으로 구성하며 항상 같은 위치에 배치하여 사용자가 쉽게 인식할 수 있게 합니다. 또한 아이콘과 텍스트를 함께 사용하면 복잡해 보이므로 가능한 한 가지만 사용하는 것이 좋습니다.

• 내비게이션과 UI 요소가 콘텐츠보다 튀어보이지 않도록 합니다.

색

앱에서 사용하는 색상의 수는 최소화하고 사용자의 행동을 유도하는 UI 요소 외에는 눈에 띄는 색상을 적용하지 않는 것이 좋습니다.

다음은 예제 앱의 색상 구성을 보여줍니다.

아이콘

아이콘은 사용자가 의미나 액션을 연상시킬 수 있어야 합니다. 따라서 많이 사용되어 이미 사용자에게 익숙한 형태의 아이콘을 사용하는 것이 좋습니다.

일례로 구글의 Material Icon이 있습니다. 아이콘과 그 의미를 정의하여 사용자에게 제공합니다. Material Icon은 18dp, 24dp, 36dp, 48dp 크기로 제공되는데 사용 환경에 맞게 선택해 사용할 수 있습니다.

가상키보드 키 처리

Edit, MaskEdit, TextArea 등의 입력 컴포넌트에서는 usesoftkeyboard 속성을 'true'로 설정하면 가상 키보드를 사용할 수 있습니다. 가상 키보드의 키를 처리하려면 onkeydown 이벤트 함수에서 키코드 값을 체크하여 처리할 수 있습니다.

• Edit 컴포넌트의 onkeydown 이벤트 함수에서 가상 키보드의 Enter 키 입력을 체크하여 가상 키보드를 닫지 않고도 앱의 기능을 수행할 수 있게 합니다.

this.edt_query_onkeydown = function(obj:nexacro.Edit,e:nexacro.KeyEventInfo)
{
	// Enter 키 처리 
	if(e.keycode == "13")
	{
		this.btn_search_onclick();
	}
};

• 입력 필드가 여러 개 존재할 경우 Endter 키 입력을 받으면 다음 입력 필드로 포커스를 이동해줍니다.

Error 혹은 Helper 메시지

입력 필드에서의 에러는 가능하면 사용자 입력시 체크하고 해당 필드의 아래에 표시하여 사용자가 쉽게 식별할 수 있도록 합니다.

입력 내용이나 길이를 고려하여 필요하면 clear 버튼을 배치하여 삭제 동작을 쉽게 합니다.

예제 앱에서의 컴포넌트 설정

Device API 활용 워크북 예제 앱 제작시 사용한 컴포넌트의 설정에 대해 설명합니다. 모바일 장치의 환경에 따라 결과가 달라질 수 있습니다. 따라서 권장사항은 아니며 단순한 참고 자료입니다.

• 화면의 첫 UI 요소는 left 10px, top 20px에 위치시킵니다.

• 각 컴포넌트 간의 거리는 기본적으로 20px로 합니다. 단, Static 컴포넌트는 영역이 넓으므로 -20px로 합니다.

• 입력 컴포넌트가 있는 경우에는 첫 번째 컴포넌트에 포커스를 줍니다.

Button

• 부정적 액션은 왼쪽에, 긍적적 액션은 오른쪽에 배치합니다. 예를 들면, 확인 버튼은 오른쪽에 취소 버튼은 왼쪽에 배치합니다.

• 입력을 완료하지 않은 상태에서 완료 혹은 액션 버튼은 비 활성화하여 사용자의 오류 가능성을 최소화합니다.

• 버튼의 스타일은 중요도에 맞게 설정합니다. 예를 들어, 로그인에서 가장 중요한 버튼은 로그인 버튼이므로 그 외의 버튼은 로그인과 같은 형태로 디자인하지 않는 것이 좋습니다.

• 링크와 버튼은 구분하지 않고 버튼으로 표현합니다. 링크는 네비게이션으로 버튼은 액션 실행으로 이해하고 디자인 하는 것이 좋습니다.

Edit, MaskEdit, TextArea

• 가능하면 입력 필드의 텍스트를 모두 지울 수 있는 clear 버튼을 제공합니다.

• 필드 명을 따로 두지말고 입력 필드 내에 표시하면 공간을 효율적으로 관리할 수 있습니다.

• 입력 에러나 필수 입력 항목 표시는 컴포넌트 하단에 표시합니다.

• 반드시 입력이 필요한 항목은 "필드명*"와 같이 *을 붙여 표기하고 하단에 "*Required"라고 문자열을 붙여줍니다.

Grid

• 기본 Grid의 경우 모바일에서는 보기에 편하지 않으므로 컬럼 혹은 로우간 충분한 공간을 줍니다.

• 격자형 보더는 가급적 사용하지 않고 필요한 경우 가로 보더만 설정합니다.

Static

GroupBox

CheckBox

• 디폴트 값이 선택되어 있어야 합니다.

• 선택할 수 있는 옵션이 두 개만 있는 경우에는 하나의 체크박스 혹은 토글 스위치를 사용합니다.

Calendar

모바일 환경에서는 OS에서 제공하는 시스템의 달력을 사용합니다. Calendar 컴포넌트의 기본 동작이므로 별도의 설정(popuptype 속성)이 필요치 않습니다.

• popuptype은 default(system)를 사용합니다.

• type을 monthonly로 설정할 경우에는 day 및 요일 폰트 크기를 테마에서 설정해야합니다.(.DatePickerControl .body .dayitem 등)

Combo

모바일 환경에서는 확장 Combo를 사용합니다. 확장 Combo는 기본 Combo 컴포넌트를 모바일 환경에 맞도록 아이템 리스트를 보여주는 기능을 변경한 사용자 컴포넌트입니다. 따라서 개발 단계에서 모듈과 오브젝트를 등록해야 합니다.

기본 Combo를 꼭 사용해야 할 경우에는 다음과 같이 사용합니다.

• 선택 메뉴에서는 언제나 디폴트 값이 선택되어 있어야 합니다.

• 선택 옵션이 5개 이하일 경우에는 드롭다운 형식의 메뉴보다는 그냥 선택 옵션을 모두 노출해서 사용자가 한눈에 보고 선택할 수 있게 하는것이 좋습니다. 드롭다운은 일반적으로 7개 이상일 때 사용합니다.

Radio

• 디폴트 값이 선택되어 있어야 합니다.

• 컴포넌트의 높이와 넓이는 아이템 개수에 맞게 충분히 크게 만들어 줍니다.

Spin

• 디폴트 값이 선택되어 있어야 합니다.

ListBox

모바일에서 사용성이 좋지 않으므로 가급적 사용하지 않습니다. 다중 선택이 필요한 경우 체크 박스 등을 이용합니다.

• 디폴트 값이 선택되어 있어야 합니다.

• 리스트에서 선택 또는 실행 버튼은 불필요합니다. 항목 선택시 바로 실행할 수 있도록 하고 부수적인 액션(수정, 옵션 설정 등)이 필요할 경우 항목 오른쪽에 배치합니다.

Tab

모바일에서 사용성 및 뷰가 좋지 않으므로 가급적 사용하지 않고 Button과 Div 등을 이용하여 Tab 기능을 제작합니다. 꼭 사용해야 할 경우에는 다음과 같이 설정하여 사용합니다.

• 탭은 가능한 1단으로 만들고 화면 크기보다 넓어질 경우 좌우 스크롤이 가능하도록 만듭니다.

• 탭 항목은 한 단에 최대 3개 이하로 구성하고 탭 버튼 아이템 텍스트를 짧게하여 prev, next 버튼이 생기지 않게 합니다.

• 탭 버튼 텍스트 크기는 테마에서 설정합니다.

.Tab .tabbuttonitem .tabbuttonitemtext
{
	font : bold 20pt "NanumGothic";
}

Menu

모바일에서 사용성이 좋지 않으므로 가능하면 사용하지 않는다. 꼭 사용해야 할 경우에는 다음과 같이 설정하여 사용합니다.

• 가능한 서브 메뉴를 만들지 않고 1단으로 사용합니다.