page no.
※ AUD Extention 내 External Component가 패키지에 포함된 시점으로부터 제공 가능 예정
- 기능 설명
- 포틀릿 레이아웃은 하나의 보고서 안에 여러 보고서를 격자(그리드) 형태로 배치하여 대시보드를 만드는 컴포넌트입니다.
각 셀에 다른 AUD 보고서를 임베드하여 한 화면에서 여러 정보를 동시에 확인할 수 있습니다. 기본 용어
용어 설명 그리드 행과 열로 나뉜 격자 구조 (예: 4×4 = 4행 4열, 총 16칸) 셀 그리드의 각 칸. (셀 하나에 보고서 하나를 배치) 포틀릿 셀에 배치된 보고서를 가리키는 말. --
주요 기능
분류 기능 그리드 구성 1×1 ~ 4×4 행/열 자유 조정, 셀 간격 조정, 행/열 추가·삭제 셀 조작 셀 병합/분할, 드래그 앤 드롭으로 위치 교체·이동, 셀 모서리 드래그로 크기 변경 보고서 배치 빈 셀의 + 버튼으로 신규 추가, 셀 메뉴의 "교체"로 다른 보고서로 변경 셀 액션 확대(전체화면), 교체(다른 보고서로), 갱신(자동 새로고침 주기), 제거 개인화 사용자별 레이아웃 저장/복원 — 같은 대시보드를 사람마다 다르게 구성 가능 모드 전환 View 모드(보기 전용) / Edit 모드(편집) 토글 자동 갱신 셀별 갱신 주기 설정 (1분 / 5분 / 10분 / 30분 / 1시간) --
- 화면 구성
포틀릿 레이아웃 컴포넌트의 전체 화면은 다음과 같이 구성됩니다.
--번호 영역 설명 ① 툴바 그리드 크기 조정, 셀 병합/분할, 개인화 저장/초기화 등 컴포넌트 전체 조작 ② 그리드 영역 셀들이 격자 형태로 배치되는 본 영역 ③ 셀 그리드의 각 칸. 보고서를 배치하는 단위 ④ 셀 메뉴 (⋮) 보고서가 배치된 셀에서 액션 메뉴(확대/교체/갱신/제거) 호출 ⑤ 드래그 셀의 크기를 리사이즈 ⑥ 개인화 배지 현재 개인화 적용 상태 표시 (개인화됨 / 기본) ⑦ 정보 표시 툴바 우측에 전체/배치/빈칸 개수 요약 --
- 포틀릿 레이아웃은 하나의 보고서 안에 여러 보고서를 격자(그리드) 형태로 배치하여 대시보드를 만드는 컴포넌트입니다.
- 사용 방법
- 포틀릿 레이아웃 컴포넌트 배치
- AUD Designer를 엽니다.
-- - 상단 도구 패널에서 UI Bot > Container > External Component를 클릭하면 화면에 External Component가 배치됩니다.
-- - 배치된 External Component를 오른쪽 클릭하여 Context Menu를 열고 컴포넌트 선택 메뉴를 클릭합니다.
-- 컴포넌트 선택 팝업의 목록에서 포틀릿 레이아웃을 선택합니다.
원하는 레이아웃 형태(행/열 등)로 옵션을 지정한 뒤 확인 버튼을 누르면, 배치된 External Component가 포틀릿 레이아웃 컴포넌트로 전환됩니다.
[포틀릿 레이아웃 - 주요 옵션]옵션 기본 값 설명 Columns 4 초기 그리드 열 수 (1~4) Rows 4 초기 그리드 행 수 (1~4) Gap 10 셀 간격 (px) EditMode true 편집 모드 활성화 ShowToolbar true 상단 툴바 표시 ShowCloseButton true 셀 제거 버튼 표시 AutoSaveDelay 1 자동 저장 지연 (초) ETC Data 그룹 옵션(GridName, CardListName, IdField~ContentField)은 외부 DataGrid 연동용으로, 일반 사용 시에는 기본값 그대로 두면 됩니다. 
--
- AUD Designer 상단의 실행 버튼을 누르면 포틀릿 레이아웃 컴포넌트가 활성화되어 사용할 수 있습니다.
(참고로, 아래 화면에서는 포틀릿 레이아웃 컴포넌트의 Docking 설정이 적용된 상태입니다.)
-- - 보고서를 저장합니다. AUD Designer의 저장 기능으로 보고서를 저장해야 이후 개인화 저장 기능이 정상 동작합니다.
- AUD Designer를 엽니다.
- 툴바 살펴보기
Edit 모드에서 표시되는 상단 툴바의 각 도구는 다음과 같습니다.
[툴바 구성: 그리드 피커 · 행 추가 · 행 삭제 · 열 추가 · 열 삭제 · 셀 병합 · 셀 분할 · 초기화 · 저장 · 기본 · (우측) 전체 / 배치 / 빈칸 정보]
번호 분류 도구 동작 ① 그리드 크기 조정 그리드 피커 (예: 4 × 4)클릭하면 격자 미리보기가 열려 행×열을 시각적으로 선택 ② 행 추가 / 행 삭제 행 단위로 추가하거나 마지막 행 삭제 ③ 열 추가 / 열 삭제 열 단위로 추가하거나 마지막 열 삭제 ④ 셀 조작 셀 병합 / 셀 분할 셀 영역을 합치거나 분할 ⑤ 개인화 초기화 저장된 개인화를 지우고 원본 보고서의 레이아웃으로 복원 ⑥ 저장 현재 레이아웃을 사용자 개인화로 저장 ⑦ 기본 (배지) 현재 원본 레이아웃을 사용 중일 때 표시. 개인화 저장 시 "개인화됨"으로 변경 ⑧ 상태 (우측 정보 표시) 전체 N칸 · 배치 N개 · 빈칸 N개 — 현재 그리드 상태 요약 --
- 포틀릿 레이아웃 컴포넌트 내 셀에 보고서 배치
- 빈 셀 가운데의 + 버튼을 클릭합니다.
- 보고서 선택 팝업이 열립니다.
(보고서 선택 팝업에서 보고서 정보는 SC 타입의 사용자 권한을 부여받은 보고서만 보고서 목록에 표시합니다.) - 좌측 트리에서 폴더를 펼쳐 원하는 보고서를 선택합니다.
(상단 검색창으로 빠르게 찾을 수 있습니다)
-- - 우측 영역에서 미리보기를 확인한 뒤 우상단 선택 버튼을 클릭합니다.
- 셀에 선택한 보고서가 표시됩니다.
--
- 빈 셀 가운데의 + 버튼을 클릭합니다.
- 셀 병합 / 분할
- 툴바의 셀 병합 / 셀 분할 버튼을 사용합니다.
- 병합할 셀들을 Ctrl + 클릭으로 다중 선택합니다. 선택한 셀이 사각형 영역을 이루면 툴바의 셀 병합 버튼이 활성화됩니다.
- 셀 병합 버튼을 클릭하면 하나의 큰 셀로 합쳐집니다.
병합된 셀을 선택한 후 셀 분할 버튼을 누르면 원래 셀들로 다시 나뉩니다.
※ 참고: 이미 병합된 셀은 다른 셀(또는 다른 병합된 셀)과 다시 병합할 수 없습니다. 병합된 셀의 영역을 더 키우고 싶다면 셀 크기 변경(리사이즈) 기능으로 영역을 확장하세요.
- 병합할 셀들을 Ctrl + 클릭으로 다중 선택합니다. 선택한 셀이 사각형 영역을 이루면 툴바의 셀 병합 버튼이 활성화됩니다.
- 툴바의 셀 병합 / 셀 분할 버튼을 사용합니다.
- 셀 이동 / 교체 (드래그 앤 드롭)
- 셀을 마우스로 끌어 다른 위치에 놓을 수 있습니다.
- 옮기려는 셀을 마우스로 누른 채 드래그합니다.
- 원하는 위치의 셀에 놓으면 동작이 결정됩니다.
- 빈 셀에 놓은 경우: 셀이 그 위치로 이동합니다.
- 다른 보고서가 있는 셀에 놓은 경우: 두 셀의 위치가 서로 교체됩니다. 이때 교체 확인 창이 표시되며, 확인을 눌러야 적용됩니다.
- 빈 셀에 놓은 경우: 셀이 그 위치로 이동합니다.
- 옮기려는 셀을 마우스로 누른 채 드래그합니다.
- 셀을 마우스로 끌어 다른 위치에 놓을 수 있습니다.
- 셀 크기 변경 (리사이즈)
셀의 오른쪽 하단 모서리를 드래그하여 크기를 변경할 수 있습니다.
- 크기를 바꾸려는 셀의 오른쪽 하단 모서리에 마우스를 가져다가 놓고 클릭합니다. 해당 셀의 크기가 오른쪽 하단에 표시되며, 리사이즈를 할 수 있는 상태가 됩니다.
- 마우스를 누른 채 원하는 크기까지 드래그합니다 (드래그 중 영역이 미리보기로 표시됨).
- 마우스를 놓으면 셀이 드래그한 영역만큼 확장되어 인접 셀들과 자동으로 병합됩니다.
- 다시 분할하려면 해당 셀을 선택한 뒤 툴바의 셀 분할 버튼을 누릅니다.
- 크기를 바꾸려는 셀의 오른쪽 하단 모서리에 마우스를 가져다가 놓고 클릭합니다. 해당 셀의 크기가 오른쪽 하단에 표시되며, 리사이즈를 할 수 있는 상태가 됩니다.
- 셀 메뉴 (⋮ 버튼)
보고서가 배치된 셀의 우상단에 나타나는 [⋮] 버튼을 클릭하면 액션 메뉴가 표시됩니다. 빈 셀에는 [⋮] 버튼이 표시되지 않으며, 보고서를 먼저 배치해야 사용할 수 있습니다.
[셀 메뉴]메뉴 동작 확대 포틀릿을 전체화면 모달로 크게 보기 교체 다른 보고서로 교체 (보고서 선택 팝업) 갱신 자동 새로고침 주기 설정 (중지 → 1분 → 5분 → 10분 → 30분 → 1시간 순환) 제거 셀에서 보고서 제거 (셀은 빈 상태로 남음) 
--
확대
클릭하면 팝업에 셀 내용을 표시하여 크게 볼 수 있습니다.
교체
- 다른 보고서로 교체할 때 사용. 클릭 시 보고서 선택 팝업이 열립니다.
- 좌측 트리에서는 SC 타입 보고서 목록만 표시되며, 보고서를 선택하면 우측 영역에서 미리보기를 확인할 수 있습니다.
- 선택을 누르면, 기존 셀에 내용이 선택한 셀의 내용으로 교체됩니다.
- 다른 보고서로 교체할 때 사용. 클릭 시 보고서 선택 팝업이 열립니다.
- 갱신
- 자동 새로고침 주기 설정. 클릭할 때마다 다음 주기로 순환합니다. (순환 순서: 중지 → 1분 → 5분 → 10분 → 30분 → 1시간 → 중지 …)
- 자동 새로고침 주기 설정. 클릭할 때마다 다음 주기로 순환합니다. (순환 순서: 중지 → 1분 → 5분 → 10분 → 30분 → 1시간 → 중지 …)
- 제거
- 셀에서 보고서를 제거합니다. 셀 자체는 빈 상태로 남고 그리드는 유지됩니다.
- 셀에서 보고서를 제거합니다. 셀 자체는 빈 상태로 남고 그리드는 유지됩니다.
- 보고서 추가 팝업
보고서 추가 팝업은 빈 셀의 [+ 추가] 버튼을 클릭할 때 열리는 팝업으로, 셀에 배치할 보고서를 선택하는 화면입니다.
열린 팝업에서 좌측 SC 보고서를 클릭하면, 우측에 미리보기 영역에 해당 보고서의 내용을 확인할 수 있습니다.
(보고서 추가 팝업에서도 보고서 목록은 SC 타입의 사용자 권한을 부여받은 보고서만 목록에 표시합니다.)
- 개인화 - 나만의 레이아웃 저장
- 본 기능은 초기 화면으로 등록된 대시보드를 사용자 개별로 구성할 수 있는 기능입니다.
AUD Viewer로 보고서를 여는 일반 사용자를 대상으로 하며, AUD Designer에서는 배지로 저장 이력만 확인되고 화면에는 적용되지 않습니다.
[사전 조건]
- 개인화 저장은 보고서가 먼저 저장된 상태에서만 가능합니다.
- 새로 만들어 저장하지 않은 보고서에서는 개인화 저장이 동작하지 않으므로, AUD Designer에서 보고서를 먼저 저장한 후 사용하세요.
[개인화 사용 흐름]- 보고서 초기화면 등록
관리자 포털에서 메인 화면에 표시할 초기화면 보고서를 등록합니다. **관리자 포털 > 시스템 운영관리 > PORTAL 설정**에서 다음과 같이 설정합니다.- 메인 화면 스타일 : 보고서 사용 선택
- 보고서 명 : 포틀릿 레이아웃 컴포넌트 기반 보고서 선택
- 보고서 초기화면 등록 확인
사용자 포털에 로그인하거나 메인 화면으로 접근하면 초기화면으로 등록한 보고서가 표시됩니다. 처음에는 **View 모드**(보기 전용)로 표시됩니다. - Edit 모드 진입
화면 하단 회색 바(-----) 에 마우스를 올리면 **"레이아웃 편집"** 버튼이 나타납니다. 클릭하면 Edit 모드로 전환됩니다.
레이아웃 편집
자유롭게 셀을 이동하고 보고서를 교체하며, 셀의 크기를 변경할 수 있습니다.- 개인화 저장
툴바의 저장 버튼을 클릭하면 개인화가 DB에 저장됩니다. (사전 조건이 충족되어야 개인화 저장 기능을 이용하실 수 있습니다.)
- 상단 배지가 ● 개인화됨 (초록 배지)으로 변경됩니다.
- 페이지를 새로고침하거나 다시 로그인해도 저장한 개인 레이아웃이 자동으로 로드됩니다.
- 본인 계정에서만 적용되며, 다른 사용자에게는 영향이 없습니다.
- 초기화 (원본 복원)
툴바의 초기화 버튼을 누르면 저장된 개인화가 삭제되고 원본 레이아웃으로 되돌아갑니다.
- 보고서 초기화면 등록
- 본 기능은 초기 화면으로 등록된 대시보드를 사용자 개별로 구성할 수 있는 기능입니다.
- View 모드 / Edit 모드
일반 사용자가 보고서를 열었을 때는 View 모드(보기 전용)로 표시됩니다. 개인화나 추가 편집이 필요할 때 Edit 모드로 전환하여 사용합니다.
[모드 구분]모드 진입 방법 동작 View 모드 보고서를 열었을 때 기본 모드 보기 전용. 툴바와 셀 메뉴 등이 숨겨집니다. 화면 하단에 마우스를 올리면 "레이아웃 편집" 버튼이 나타납니다. Edit 모드 View 모드에서 "레이아웃 편집" 버튼 클릭 편집 가능. 툴바와 셀 메뉴가 표시되어 그리드/셀 조작이 가능합니다.
[View 모드]
[Edit 모드]
- 포틀릿 레이아웃 컴포넌트 배치
|
|
| 기능 정보 |
|
|
|
|
|
|
|
|---|---|---|---|---|---|---|---|
| 시작 버전 정보 |
| ||||||
|
|