page no. 

i-AUD 모바일/태블릿 UI

1. 개요

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

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

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

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

     
     

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

     제스처	PC 대응 동작	설명
     터치 (Touch)	마우스 클릭	항목 선택, 버튼 클릭
     롱프레스 (Long Press)	우클릭	컨텍스트메뉴 오픈 (약 0.5초 길게 누르기)
     스와이프 (Swipe)	-	달력 넘기기

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

     
     

2. 개선 사항

   2.1 ContextMenu

   • PC에서 우클릭으로 열리던 컨텍스트메뉴가, 모바일/태블릿에서는 롱프레스(길게 누르기)로 열립니다. 디바이스별로 메뉴의 표시 형태와 출력 메뉴 목록이 다릅니다.

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

     	모바일	태블릿
     오픈 방식	롱프레스	롱프레스
     표시 형태	하단 슬라이드업 (풀스크린)	터치 위치 근처 드롭다운
     서브메뉴	터치 시 서브메뉴로 전환, 「< 뒤로가기」로 복귀	옆으로 펼침
     닫기	배경 영역 터치 / × 버튼	메뉴 바깥 영역 터치

     
     

   2.1.1 DataGrid

   1) 공통 메뉴

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

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

   메뉴	설명	조건
   내보내기	서브메뉴 : 엑셀로 내보내기, CSV로 내보내기, 텍스트로 내보내기, PPT로 내보내기	각 내보내기 옵션 활성 시
   필터 초기화	적용된 필터 전체 제거	필터가 적용된 상태인 경우

   
   

   2) 컬럼 헤더 영역

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

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

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

   메뉴	설명	조건
   필터 [{컬럼명}]	해당 컬럼의 필터 팝업 오픈	컬럼의 Filterable 속성이 true인 경우
   정렬 [{컬럼명}]	서브메뉴 : 오름차순 정렬, 내림차순 정렬	컬럼의 Sortable 속성이 true인 경우

   
   

   3) 화면 예시

   PC	태블릿	모바일

   
   

   2.1.2 OlapGrid

   1) 공통 메뉴

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

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

   메뉴	설명	조건
   내보내기	서브메뉴 : 엑셀로 내보내기, CSV로 내보내기, 텍스트로 내보내기	각 내보내기 옵션 활성 시
   전체 확장 / 전체 축소	노드 전체 펼침/접기	확장 버튼 표시 옵션 활성 시
   합계 표시	서브메뉴 : Row 소계, Row 합계, Column 소계, Column 합계 원하는 합계 표시를 선택 후 적용을 터치해야 적용됩니다.	합계 표시 옵션 활성 시
   빈 값 행 숨기기 / 빈 값 열 숨기기	빈 데이터 행/열 숨김
   필터 해제	적용된 필터 제거	필터가 적용된 상태인 경우
   축 변경(행/렬)	행 ↔ 열 배치 전환	멀티헤더 미사용 시
   캐시 정보 / 새로 고침	데이터 캐시 정보 확인 및 갱신	캐시 데이터 존재 시

   
   

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

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

   메뉴	설명
   필터 [{필드명}]	해당 필드의 필터 팝업 오픈
   정렬 [{필드명}]	서브메뉴 : 오름차순, 내림차순
   [{필드명}] 소계	해당 필드의 소계 표시/숨김
   Drill Up	계층 그룹의 상위 레벨로 이동
   Drill Down	계층 그룹의 하위 레벨로 이동
   필드 선택	필드 그룹(FieldGroup) 내 다른 필드로 전환

   
   

   3) 화면 예시

   PC	태블릿	모바일

   2.1.3 Chart

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

   메뉴	설명
   내보내기	서브메뉴 : 엑셀로 내보내기, 한글로 내보내기, PPT로 내보내기, Doc로 내보내기
   차트 유형	Bar, Column, Line, Area 등 차트 유형별 서브메뉴 (UseChartTypeMenu 활성 시)
   차트 색상 팔레트	Default, Standard, Office 등 23종 팔레트 서브메뉴 (UseChartPaletteMenu 활성 시)

   
   

   화면 예시

   PC	태블릿	모바일

   2.2 Calendar

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

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

   	PC	태블릿	모바일
   화면
   팝업 형태	팝업	중앙 다이얼로그	하단 슬라이드업
   네비게이션	화살표 버튼	화살표 버튼 + 스와이프	화살표 버튼 + 스와이프
   값 확정	날짜 클릭 시 즉시	「확인」 버튼	「확인」 버튼

   2.3 CalendarFromTo

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

     • 태블릿 : From/To 달력 2개가 좌우로 나란히 표시, 각 달력 상단에 「시작일」/「종료일」 라벨
     • 모바일 
       • 달력 1개로 From↔To를 탭으로 전환하며 선택, 상단에 「시작일」/「종료일」 표시됩니다.
       • 시작일 영역을 터치하면 시작일 선택 모드로, 종료일 영역을 터치하면 종료일 선택 모드로 전환되어 해당 값을 변경할 수 있습니다.

   	PC	태블릿	모바일
   화면
   팝업 형태	팝업	중앙 다이얼로그	하단 슬라이드업
   레이아웃	From/To 달력 나란히	From/To 달력 나란히	달력 1개 + From↔To 터치 전환
   네비게이션	화살표 버튼	화살표 버튼 + 스와이프	화살표 버튼 + 스와이프
   값 확정	From 날짜 선택 후 To 날짜 클릭 시 즉시	「확인」 버튼	「확인」 버튼

   2.4 MultiComboBox

   • 태블릿에서는 PC와 동일한 2패널(전체/선택) 레이아웃을 유지하며, 모바일에서는 단일 리스트 형태로 표시됩니다. 

   • 검색, 정렬, 전체 선택/전체 해제 기능은 동일하게 제공됩니다.

   	PC	태블릿	모바일
   화면
   팝업 형태	팝업	중앙 다이얼로그	하단 슬라이드업
   레이아웃	2패널 (전체 목록/선택된 목록)	2패널 (전체 목록/선택된 목록)	단일 리스트 (선택 항목은 체크로 표시)
   데이터 전체 검색
   단일 값 확정	항목 클릭 시 즉시	「확인」 버튼	「확인」 버튼
   다중 값 확정		「확인(N개)」 버튼	「확인(N개)」 버튼

   
   

   	PC	태블릿	모바일
   화면
   팝업 형태	팝업	중앙 다이얼로그	하단 슬라이드업
   레이아웃	단일 리스트	단일 리스트 (Breadcrumb + 현재 depth 항목)	단일 리스트 (Breadcrumb + 현재 depth 항목)
   depth 탐색	트리 노드 펼침/접힘	Breadcrumb 경로 표시 항목 터치로 하위 이동 경로 클릭으로 상위 이동
   단일 값 확정	항목 클릭 시 즉시	「확인」 버튼	「확인」 버튼
   다중 값 확정		「확인」 버튼	「확인」 버튼

   
   

   Breadcrumb(경로) 탐색 현재 위치를 "전체 > 케이블/어댑터" 형태로 목록 상단에 표시합니다. 하위 항목이 있는 노드 터치 시 해당 depth로 진입하며, Breadcrumb의 상위 경로를 터치하면 해당 depth로 되돌아갑니다.

   
   

   2.5 PickList

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

2.6 DialogBox, FormDialogBox

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

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

2.7 MessageBox

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

2.8 iMessage

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

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

2.9 DataGrid, OlapGrid 필터

1. • 모바일/태블릿에서 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. 모바일 포탈에서 i-AUD 보고서를 열람할 때, 뒤로가기를 통해 이전 화면으로 단계 별로 돌아갈 수 있습니다.

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

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

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

      
      

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

1.2 단계별 복귀 흐름

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

예시

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

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

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

모바일 포탈 기본 폰트 변경

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