부록 A.모바일 앱 만들 때 참고하세요

Edit

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

A.1화면 구성

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

A.2내비게이션

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

A.3

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

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

그림 A-1샘플 앱의 색상 배치

A.4아이콘

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

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

그림 A-2material_icon

Material Icon은 다음의 링크에서 무료로 내려받을 수 있습니다.

https://material.io/tools/icons/?style=baseline

https://www.flaticon.com/packs/material-design

A.5가상키보드 키 처리

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

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

A.6Error 혹은 Helper 메시지

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

그림 A-3input_field_example

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

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

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

A.7.1Button

설정 항목

설정 값

기타

ID Prefix

btn_


사이즈

넓이: 가변

높이: 60


폰트

font-size: 16~18pt

필요한 경우 font-weight를 bold(700)로 설정

A.7.2Edit, MaskEdit, TextArea

설정 항목

설정 값

기타

ID Prefix

edt_


사이즈

넓이: 가변

높이: 60


폰트

font-size: 18pt


그림 A-4input_field_example

A.7.3Grid

설정 항목

설정 값

기타

ID Prefix

grd_


사이즈

넓이: 가변

높이: 가변


폰트

Head Column font-size: 16pt

Body Column font-size: 16pt


Cell padding

5px

설정하지 않으면 글자가 보더에 너무 붙어 나옴.

wordWrap

english


A.7.4Static

설정 항목

설정 값

기타

ID Prefix

stt_


사이즈

넓이: 가변

높이: 60


폰트

font-size: 16~18pt


A.7.5GroupBox

설정 항목

설정 값

기타

ID Prefix

grp_


사이즈

넓이: 가변

높이: 가변


폰트

font-size: 16~18pt


A.7.6CheckBox

그림 A-5tab1

설정 항목

설정 값

기타

ID Prefix

chk_


사이즈

넓이: 가변

높이: 60


폰트

font-size: 16~18pt


A.7.7Calendar

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

그림 A-6tab2

그림 A-7tab2_calendar

설정 항목

설정 값

기타

ID Prefix

cal_


사이즈

넓이: 가변

높이: 60

type이 monthonly일 경우

daysize: 40px, 40px

headheight: 80

폰트

font-size: 16~18pt


그림 A-8tab2

A.7.8Combo

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

그림 A-9tab3

그림 A-10tab3_combopopup

설정 항목

설정 값

기타

ID Prefix

extcmb_


사이즈

넓이: 가변

높이: 60


폰트

font-size: 16~18pt

아이템 리스트의 글자 크기는 pExtCombo.xfdl의 grid의 font를 14~16pt로 설정

속성

usetype: "popup"

popupurl: "Base::pExtCombo.xfdl"

innerdataset


pExtCombo.xfdl은 Combo 리스트를 보여줄 폼 파일

dataset 설정 필수

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

설정 항목

설정 값

기타

ID Prefix

cmb_


사이즈

넓이: 가변

높이: 60

itemheight: 40


폰트

font-size: 16~18pt

아이템 리스트의 글자 크기는 테마에서 설정 필요(listboxitem의 font를 18pt로 설정)

속성

popuptype: "center"


A.7.9Radio

그림 A-11tab1

설정 항목

설정 값

기타

ID Prefix

rdo_


사이즈

넓이: 가변

높이: 가변


폰트

font-size: 16~18pt


A.7.10Spin

그림 A-12tab1

설정 항목

설정 값

기타

ID Prefix

spn_


사이즈

넓이: 가변

높이: 80


폰트

font-size: 16~18pt


A.7.11ListBox

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

설정 항목

설정 값

기타

ID Prefix

lst_


사이즈

넓이: 가변

높이: 가변

itemheight: 40


폰트

리스트박스 아이템의 텍스트 크기는 테마에서 설정해야 함. (.ListBox .listboxitem,.ListBoxControl .listboxitem의 font를 18pt로 설정)

A.7.12Tab

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

설정 항목

설정 값

기타

ID Prefix

tab_


사이즈

넓이: 가변

높이: 가변

tabjustify: true

showextrabutton: false


폰트


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

A.7.13Menu

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

설정 항목

설정 값

기타

ID Prefix

mnu_


사이즈

넓이: 100%

높이: 60

popupitemheight: 40


폰트

font-size: 16~18pt

서브 메뉴 글자 크기는 테마에서 설정(.popupmenuitemtext)

속성

popuptype: center