page no. 

i-AUD 모바일/태블릿 UI

개요

1. i-AUD View

   Mode(보고서 조회 화면)에서

   Mode에서 모바일 및 태블릿 디바이스에 최적화된 터치 기반 UI를 제공합니다.

2. 기존 PC 환경의 마우스 인터랙션(우클릭, 호버, 드래그 등)을 터치 제스처로 대체하고, 화면 크기에 맞는 팝업/메뉴 표시 방식을 적용합니다.

3. 디바이스 분류 기준은 다음과 같습니다.

   구분 

   구분	화면 너비	UI 특성
   PC	1200px 이상	마우스 기반, 기존 UI 유지
   태블릿	766px ~ 1199px	터치 기반, 화면 중앙 팝업, 드롭다운 메뉴
   모바일	765px 이하	터치 기반, 하단 슬라이드업 팝업, 풀스크린 메뉴

   
   

4. 공통 터치 제스처는 다음과 같습니다.

   제스처	PC 대응 동작	설명

   탭

   터치 (

   Tap

   Touch)

   마우스 클릭

   항목 선택, 버튼 클릭

   더블탭 (Double Tap)더블클릭Grid 셀 편집 모드 진입

   롱프레스 (Long Press)	우클릭	컨텍스트메뉴 오픈 (약 0.5초 길게 누르기)
   스와이프 (Swipe)	-	달력 넘기기

   ※ 모바일/태블릿에서 팝업, 다이얼로그 등이 열린 상태에서 배경 영역을 터치하면 닫힙니다.

   
   

개선 사항

2.1 ContextMenu

• PC에서 우클릭으로 열리던 컨텍스트메뉴가, 모바일/

• 태블릿에서는 롱프레스(길게 누르기)로 열립니다. 디바이스별로 메뉴의 표시 형태와 출력 메뉴 목록이 다릅니다.

표시 형태는 다음과 같습니다.

DataGrid

2.1.1 DataGrid

1) 공통 메뉴

• 롱프레스 영역에 관계없이 아래 메뉴가 표시됩니다.

데이터 셀 영역을 롱프레스하면 공통 메뉴만 표시됩니다.

2) 컬럼 헤더 영역

• 롱프레스 영역에 관계없이 아래 메뉴가 표시됩니다.

데이터 셀 영역을 롱프레스하면 공통 메뉴만 표시됩니다

컬럼 헤더를 롱프레스하면 공통 메뉴에 추가로 해당 컬럼의 필터/정렬 메뉴가 표시됩니다.

3) 화면 예시

2.1.2 OlapGrid

1) 공통 메뉴

• 롱프레스 영역에 관계없이 아래 메뉴가 표시됩니다.

데이터 셀 영역을 롱프레스하면 공통 메뉴만 표시됩니다.

2) 영역 별 추가 메뉴 (공통 메뉴 외)

• 필드 셀 또는 헤더 셀을 롱프레스하면 공통 메뉴에 추가로 아래 메뉴가 표시됩니다. 

3) 화면 예시

2.1.3 Chart

• 차트 영역을 롱프레스하면 컨텍스트메뉴가 표시됩니다.

화면 예시

2.2 Calendar

• 모바일/태블릿에서는 좌우 스와이프로 넘길 수 있으며, 「확인」 버튼으로 날짜를 확정합니다.

모든 달력 유형(일별, 월별, 연별, 주간)을 지원합니다.

Image Removed

Image Removed

Image Removed

2.3 CalendarFromTo

• 시작일(From)과 종료일(To)을 선택하는 컨트롤로, 디바이스별로 레이아웃이 크게 다릅니다.

• 태블릿 : From/To 달력 2개가 좌우로 나란히 표시, 각 달력 상단에 「시작일」/「종료일」 라벨

• 모바일 
  • 달력 1개로 From↔To를 탭으로 전환하며 선택, 상단에 「시작일」/

변경 사항
Image RemovedImage RemovedImage Removed

• • 「종료일」 표시됩니다.
  • 시작일 영역을 터치하면 시작일 선택 모드로, 종료일 영역을 터치하면 종료일 선택 모드로 전환되어 해당 값을 변경할 수 있습니다.

2.4 MultiComboBox

• 태블릿에서는

• PC와 동일한 2패널(전체/선택)

• 레이아웃을 유지하며, 모바일에서는 단일 리스트 형태로 표시됩니다. 

검색, 정렬,

전체 선택/

전체 해제 기능은 동일하게 제공됩니다.

변경 사항

2.5 PickList

1. 모바일/태블릿에서 동일한 텍스트 입력 영역 + 파일 업로드 기능을 제공합니다.

• 모바일: 화면 하단에서 슬라이드업
• 태블릿: 화면 중앙 다이얼로그

Image Removed

Image Removed

Image Removed

2.6 DialogBox, FormDialogBox

• 모바일에서는 화면 하단에서 슬라이드업으로 전체 화면 표시되며, 태블릿에서는 화면 중앙 다이얼로그로 표시됩니다.

• 모바일에서는 크기 조절 및 이동이 불가하며, 가로 모드 전환 시 "세로 모드로 전환해 주세요" 안내 메시지가 표시됩니다.

2.7 MessageBox

• MessageBox는 DialogBox와 달리 모든 디바이스에서 화면 중앙에 표시됩니다. 
• 모바일에서도 하단 슬라이드업이 아닌 화면 중앙에 출력됩니다.
• 타입에 따라 아이콘과 색상이 다르게 표시되며, 이는 PC와 동일합니다.

2.8 iMessage

• 일시적으로 표시되는 알림 메시지입니다. 일정 시간이 지나면 자동으로 사라지며, 닫기 버튼으로 즉시 닫을 수도 있습니다.

• 모바일/태블릿에서는 표시 위치와 애니메이션이 PC와 다릅니다.

2.9 DataGrid, OlapGrid 필터

• 모바일/태블릿에서 ContextMenu의 필터 [{컬럼명/필드명}]을 선택하면 모바일 전용 필터 화면이 열립니다.

• DataGrid와 OlapGrid 모두 동일한 필터 화면을 사용하며, 데이터 유형에 따라 Dimension 필터 또는 Measure 필터가 표시됩니다.

2.9.1  Dimension 필터

1. • 값 목록에서 필터할 항목을 선택/해제하는 방식의 필터입니다.
   • 데이터 전체 검색 기능은 DataGrid에서만 표시됩니다.
   • 여러 항목 검색 기능은 OlapGrid의 PC 버전에서만 표시 됩니다.

2.9.2  Measure 필터

• • 숫자 데이터의 경우 조건 입력 방식의 필터 화면이 표시됩니다.

• • 필터 연산자 : =, >, >=, <, <=, <>
  • 조건 2개까지 설정 가능 (None 선택 시 두 번째 조건 비활성)

모바일 포탈 개선

모바일 포탈 i-AUD 보고서 뒤로가기 개선

1.1 기능 설명

1. 1. 1. 모바일 포탈에서 i-AUD 보고서를 열람할 때, 뒤로가기를 통해 이전 화면으로 단계 별로 돌아갈 수 있습니다.

      2. 팝업(DialogBox, MessageBox, ContextMenu 등)이 열려 있는 경우, 뒤로가기 시 열린 팝업이 모두 닫힌 후 뒤로가기가 실행됩니다.

      3. 뒤로가기는 두 가지 방법으로 사용할 수 있습니다.

         방법	설명
         헤더의 뒤로가기 아이콘(Image Added)	화면 상단 헤더 오른쪽의 Image Added버튼을 누르면 이전 화면으로 돌아갑니다.
         브라우저 뒤로가기	모바일 브라우저의 뒤로가기 버튼(또는 스와이프)을 사용합니다.

         
         

      4. 로그아웃 후 다시 로그인하면 이전 이력은 초기화됩니다.

1.2 단계별 복귀 흐름

뒤로가기를 누를 때마다 아래 순서에 따라 한 단계씩 이전 화면으로 돌아갑니다.

※ 예시

사용자가 아래와 같이 보고서를 열람했다고 가정합니다.

1. 1. 1. 1. 메뉴 목록에서 보고서A를 엽니다.
         2. 보고서A 안에서 Form2 시트로 이동합니다.
         3. 메뉴 목록에서 보고서B를 엽니다.

이 상태에서 뒤로가기를 반복하면 아래와 같이 동작합니다.

모바일 포탈 기본 폰트 변경

1. 1. 1. 기본 폰트를 나눔고딕(NanumGothic)에서 맑은 고딕(Malgun Gothic)으로 변경하였습니다.