반응형 UI를 설정하여 디스플레이 크기 별 UI 요소의 크기 및 배치를 조정할 수 있습니다.
모바일에서 보고서 조회 시 보고서 레이아웃의 최적화를 위해 반응형 UI를 설정합니다.
1. 모바일 화면
AUD플랫폼은 모바일 환경에서 App이 아닌 Web 형태로 보고서를 조회할 수 있습니다.
크롬, 엣지, 사파리 등의 브라우저를 통해 포털에 접속하여 모바일 기기로 보고서를 조회할 수 있습니다.
모바일 포털 접속 주소 예시: edu.bimatrix.co.kr/mobile
(자세한 주소는 관리자에게 문의)
네이버 웨일의 모바일 창을 활용하면 PC에서 확인할 수 있습니다.
- 로그인 화면
- 보고서 목록 화면
- 뷰 화면
2. Admin 페이지 설정
반응형 UI를 설정하기 위해 Admin 페이지에서 해당 기능 활성화 및 폴더 및 보고서의 경로를 지정해야 합니다.
| 구분 | 상세 구분 | 내용 |
|---|---|---|
| 자원관리 | 범주관리 | 모바일 포털에서 조회할 폴더 생성 및 보고서를 이동합니다.
참고 : 범주관리란? 모바일 메뉴의 ROOT는 [범주관리]에 있는 폴더만 설정이 가능하며 [범주관리]의 경우 기존에 만든 보고서를 추가하는 개념입니다. |
| 시스템 관리 | 반응형 설정 | Designer에서 설정할 디스플레이 크기의 종류를 설정합니다. 사용할 화면의 최소 최대 가로폭을 설정하여 화면 크기의 추가 및 삭제가 가능합니다.
|
| 시스템 운영관리 | 관리자메뉴 설정 | "시스템 관리 - 반응형 설정" 메뉴를 활성화합니다.
|
| PORTAL 설정 | 모바일 메뉴 ROOT 경로를 설정합니다.
찾기 버튼을 클릭하여 모바일 메뉴의 ROOT를 설정합니다.
참고 : 권한 관리 계정별 설정이 불가하기 때문에 계정별 폴더 및 보고서 권한 관리를 활용합니다. |
3. i-AUD Designer 설정
보고서 제작 시 반응형 UI를 디스플레이 크기 별로 UI 요소를 조정합니다.
- 설정 - 반응형 UI 활성화
빈 화면 우 클릭 - Device 화면 크기 선택
참고 : Device 선택
관리자 페이지 시스템관리 - 반응형 설정에서 설정한 화면 타입으로 선택할 수 있습니다.
화면 크기 별 UI 배치 조정
참고 : 반응형 설정 Tip 1
큰 화면부터 화면에 컨트롤의 Docking 기능을 활용하여 배치합니다.
이후 점점 작은 화면으로 설정합니다.
참고 : 반응형 설정 Tip 2
반응형 설정 가능한 부분은 컨트롤의 크기, 위치입니다.
텍스트, 데이터, 디자인 등은 따로 설정 불가합니다.
- Device - Default로 변경 후 보고서 저장
Default가 아닌 경우엔 저장이 불가합니다.