[i-AUD] 포틀릿 레이아웃 컴포넌트 사용 가이드

page no. 137560109

※ 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의 저장 기능으로 보고서를 저장해야 이후 개인화 저장 기능이 정상 동작합니다.

툴바 살펴보기

Edit 모드에서 표시되는 상단 툴바의 각 도구는 다음과 같습니다.
[툴바 구성: 그리드 피커 · 행 추가 · 행 삭제 · 열 추가 · 열 삭제 · 셀 병합 · 셀 분할 · 초기화 · 저장 · 기본 · (우측) 전체 / 배치 / 빈칸 정보]

번호	분류	도구	동작
①	그리드 크기 조정	그리드 피커 (예: `4 × 4`)	클릭하면 격자 미리보기가 열려 행×열을 시각적으로 선택
②		행 추가 / 행 삭제	행 단위로 추가하거나 마지막 행 삭제
③		열 추가 / 열 삭제	열 단위로 추가하거나 마지막 열 삭제
④	셀 조작	셀 병합 / 셀 분할	셀 영역을 합치거나 분할
⑤	개인화	초기화	저장된 개인화를 지우고 원본 보고서의 레이아웃으로 복원
⑥		저장	현재 레이아웃을 사용자 개인화로 저장
⑦		기본	(배지) 현재 원본 레이아웃을 사용 중일 때 표시. 개인화 저장 시 "개인화됨"으로 변경
⑧	상태	(우측 정보 표시)	전체 N칸 · 배치 N개 · 빈칸 N개 — 현재 그리드 상태 요약

--

포틀릿 레이아웃 컴포넌트 내 셀에 보고서 배치
1. 빈 셀 가운데의 + 버튼을 클릭합니다.
2. 보고서 선택 팝업이 열립니다.
  (보고서 선택 팝업에서 보고서 정보는 SC 타입의 사용자 권한을 부여받은 보고서만 보고서 목록에 표시합니다.)
3. 좌측 트리에서 폴더를 펼쳐 원하는 보고서를 선택합니다.
  (상단 검색창으로 빠르게 찾을 수 있습니다)
4. 우측 영역에서 미리보기를 확인한 뒤 우상단 선택 버튼을 클릭합니다.
5. 셀에 선택한 보고서가 표시됩니다.
  
  --
셀 병합 / 분할
1. 툴바의 셀 병합 / 셀 분할 버튼을 사용합니다.
  1. 병합할 셀들을 Ctrl + 클릭으로 다중 선택합니다. 선택한 셀이 사각형 영역을 이루면 툴바의 셀 병합 버튼이 활성화됩니다.
  2. 셀 병합 버튼을 클릭하면 하나의 큰 셀로 합쳐집니다.
  3. 병합된 셀을 선택한 후 셀 분할 버튼을 누르면 원래 셀들로 다시 나뉩니다.
    
    ※ 참고: 이미 병합된 셀은 다른 셀(또는 다른 병합된 셀)과 다시 병합할 수 없습니다. 병합된 셀의 영역을 더 키우고 싶다면 셀 크기 변경(리사이즈) 기능으로 영역을 확장하세요.
셀 이동 / 교체 (드래그 앤 드롭)
1. 셀을 마우스로 끌어 다른 위치에 놓을 수 있습니다.
  1. 옮기려는 셀을 마우스로 누른 채 드래그합니다.
  2. 원하는 위치의 셀에 놓으면 동작이 결정됩니다.
    1. 빈 셀에 놓은 경우: 셀이 그 위치로 이동합니다.
    2. 다른 보고서가 있는 셀에 놓은 경우: 두 셀의 위치가 서로 교체됩니다. 이때 교체 확인 창이 표시되며, 확인을 눌러야 적용됩니다.
셀 크기 변경 (리사이즈)
1. 셀의 오른쪽 하단 모서리를 드래그하여 크기를 변경할 수 있습니다.
  1. 크기를 바꾸려는 셀의 오른쪽 하단 모서리에 마우스를 가져다가 놓고 클릭합니다. 해당 셀의 크기가 오른쪽 하단에 표시되며, 리사이즈를 할 수 있는 상태가 됩니다.
  2. 마우스를 누른 채 원하는 크기까지 드래그합니다 (드래그 중 영역이 미리보기로 표시됨).
  3. 마우스를 놓으면 셀이 드래그한 영역만큼 확장되어 인접 셀들과 자동으로 병합됩니다.
  4. 다시 분할하려면 해당 셀을 선택한 뒤 툴바의 셀 분할 버튼을 누릅니다.

셀 메뉴 (⋮ 버튼)

보고서가 배치된 셀의 우상단에 나타나는 [⋮] 버튼을 클릭하면 액션 메뉴가 표시됩니다. 빈 셀에는 [⋮] 버튼이 표시되지 않으며, 보고서를 먼저 배치해야 사용할 수 있습니다.

[셀 메뉴]

메뉴	동작
확대	포틀릿을 전체화면 모달로 크게 보기
교체	다른 보고서로 교체 (보고서 선택 팝업)
갱신	자동 새로고침 주기 설정 (중지 → 1분 → 5분 → 10분 → 30분 → 1시간 순환)
제거	셀에서 보고서 제거 (셀은 빈 상태로 남음)

--

확대
1. 클릭하면 팝업에 셀 내용을 표시하여 크게 볼 수 있습니다.
교체
1. 다른 보고서로 교체할 때 사용. 클릭 시 보고서 선택 팝업이 열립니다.
2. 좌측 트리에서는 SC 타입 보고서 목록만 표시되며, 보고서를 선택하면 우측 영역에서 미리보기를 확인할 수 있습니다.
3. 선택을 누르면, 기존 셀에 내용이 선택한 셀의 내용으로 교체됩니다.
갱신
1. 자동 새로고침 주기 설정. 클릭할 때마다 다음 주기로 순환합니다. (순환 순서: 중지 → 1분 → 5분 → 10분 → 30분 → 1시간 → 중지 …)
제거
1. 셀에서 보고서를 제거합니다. 셀 자체는 빈 상태로 남고 그리드는 유지됩니다.

보고서 추가 팝업
1. 보고서 추가 팝업은 빈 셀의 [+ 추가] 버튼을 클릭할 때 열리는 팝업으로, 셀에 배치할 보고서를 선택하는 화면입니다.
2. 열린 팝업에서 좌측 SC 보고서를 클릭하면, 우측에 미리보기 영역에 해당 보고서의 내용을 확인할 수 있습니다.
  (보고서 추가 팝업에서도 보고서 목록은 SC 타입의 사용자 권한을 부여받은 보고서만 목록에 표시합니다.)
개인화 - 나만의 레이아웃 저장
1. 본 기능은 초기 화면으로 등록된 대시보드를 사용자 개별로 구성할 수 있는 기능입니다.
  AUD Viewer로 보고서를 여는 일반 사용자를 대상으로 하며, AUD Designer에서는 배지로 저장 이력만 확인되고 화면에는 적용되지 않습니다.
  
  [사전 조건]
  - 개인화 저장은 보고서가 먼저 저장된 상태에서만 가능합니다.
  - 새로 만들어 저장하지 않은 보고서에서는 개인화 저장이 동작하지 않으므로, AUD Designer에서 보고서를 먼저 저장한 후 사용하세요.
  
  [개인화 사용 흐름]
  1. 보고서 초기화면 등록
    관리자 포털에서 메인 화면에 표시할 초기화면 보고서를 등록합니다. **관리자 포털 > 시스템 운영관리 > PORTAL 설정**에서 다음과 같이 설정합니다.
    1. 메인 화면 스타일 : 보고서 사용 선택
    2. 보고서 명 : 포틀릿 레이아웃 컴포넌트 기반 보고서 선택
  2. 보고서 초기화면 등록 확인
    사용자 포털에 로그인하거나 메인 화면으로 접근하면 초기화면으로 등록한 보고서가 표시됩니다. 처음에는 View 모드(보기 전용)로 표시됩니다.
  3. Edit 모드 진입
    화면 하단 회색 바(-----) 에 마우스를 올리면 레이아웃 편집 버튼이 나타납니다. 클릭하면 Edit 모드로 전환됩니다.
  4. 레이아웃 편집
    자유롭게 셀을 이동하고 보고서를 교체하며, 셀의 크기를 변경할 수 있습니다.
  5. 개인화 저장
    툴바의 저장 버튼을 클릭하면 개인화가 DB에 저장됩니다. (사전 조건이 충족되어야 개인화 저장 기능을 이용하실 수 있습니다.)
    - 상단 배지가 ● 개인화됨 (초록 배지)으로 변경됩니다.
    - 페이지를 새로고침하거나 다시 로그인해도 저장한 개인 레이아웃이 자동으로 로드됩니다.
    - 본인 계정에서만 적용되며, 다른 사용자에게는 영향이 없습니다.
  6. 초기화 (원본 복원)
    툴바의 초기화 버튼을 누르면 저장된 개인화가 삭제되고 원본 레이아웃으로 되돌아갑니다.

View 모드 / Edit 모드

일반 사용자가 보고서를 열었을 때는 View 모드(보기 전용)로 표시됩니다. 개인화나 추가 편집이 필요할 때 Edit 모드로 전환하여 사용합니다.

[모드 구분]

모드	진입 방법	동작
View 모드	보고서를 열었을 때 기본 모드	보기 전용. 툴바와 셀 메뉴 등이 숨겨집니다. 화면 하단에 마우스를 올리면 "레이아웃 편집" 버튼이 나타납니다.
Edit 모드	View 모드에서 "레이아웃 편집" 버튼 클릭	편집 가능. 툴바와 셀 메뉴가 표시되어 그리드/셀 조작이 가능합니다.

[View 모드]

[Edit 모드]

참고 사항

보고서 추가 팝업 목록 표시 기준
- 본인 계정에 읽기 권한이 있는 보고서만 표시됩니다.
- 포틀릿에 배치할 수 있는 보고서는 SC 타입으로 저장된 보고서입니다. 일반 보고서는 목록에 나타나지 않으며, 사용하려면 SC 타입으로 저장한 후 다시 시도하세요.
셀 병합 가능 조건
- 선택한 셀이 사각형을 이루어야 병합할 수 있습니다.
  - 예) 1행 1~2열 + 2행 1~2열 → ✅ 가능
  - 예) 1행 1열 + 2행 2열 (대각선) → ❌ 불가
- 다른 셀 사이에 끼인 빈 자리가 있어도 병합되지 않습니다.
- 이미 병합된 셀은 다른 셀과 다시 병합할 수 없습니다. 영역을 더 키우려면 셀 크기 변경(리사이즈) 기능으로 확장하세요.
셀 분할 가능 조건
- 병합된 셀을 단일 선택한 상태에서만 셀 분할 버튼이 활성화됩니다.
셀 이동/교체가 적용되지 않을 때
- 드래그 거리가 너무 짧거나 같은 셀 위에 놓은 경우 동작이 무시됩니다.
- 다른 보고서가 있는 셀에 놓으면 교체 확인 창이 표시됩니다. 여기서 취소를 누르면 적용되지 않습니다.
셀 자동 갱신 제약
- 임베디드된 보고서가 AUD 보고서가 아닌 외부 URL이면 갱신이 동작하지 않을 수 있습니다.
- 셀 메뉴의 갱신 라벨을 확인하세요 (예: "갱신 (1분)" 표시 여부).
- 한 번 더 갱신 메뉴를 눌러 즉시 갱신을 시도해보세요.
셀 크기와 보고서 표시
- 셀 안의 보고서는 항상 100% 원본 크기로 표시됩니다 (자동 축소/확대 없음).
- 보고서가 셀보다 크면 잘려 보일 수 있고, 작으면 여백이 생길 수 있습니다.
- 보다 크게 보고 싶다면 셀 메뉴의 확대(전체화면 모달)를 사용하거나, 셀 병합으로 더 큰 셀을 만들어 배치하세요.
개인화 적용 범위
- 본인 계정 + 해당 보고서에서만 적용됩니다.
- 다른 사용자에게는 영향이 없으며, 같은 보고서를 다른 사용자가 열면 그 사용자의 개인화(또는 원본)가 적용됩니다.
- AUD Designer에서는 배지로 저장 이력만 확인되고 화면에는 적용되지 않습니다 (Viewer에서만 적용).
개인화가 다음 접속에 안 보일 때
- 같은 사용자 계정으로 로그인했는지 확인하세요 (개인화는 사용자별).
- 보고서별로 개인화가 별도 관리되므로, 동일한 보고서로 접속했는지 확인하세요.
- 툴바의 배지가 ● 개인화됨으로 표시되는지 확인하세요.

주의 사항

포틀릿 레이아웃 컴포넌트 부분
- 그리드 크기: 최대 4행 × 4열까지 지원
- 갱신 주기: 중지 / 1분 / 5분 / 10분 / 30분 / 1시간 중에서만 선택 가능 (사용자 지정 불가)
- 여러 개 배치: 한 보고서에 포틀릿 레이아웃을 여러 개 배치할 수 있으며, 각각의 개인화 설정은 독립적으로 저장됩니다.
- 외부 보고서 임베드: 셀에 다른 시스템의 URL을 임베드한 경우, 자동 갱신 등 일부 기능이 제한될 수 있습니다.
- 사용 가능한 보고서: 포틀릿 레이아웃의 셀에 배치할 수 있는 보고서는 SC 타입으로 저장된 보고서입니다. 일반 보고서는 SC 타입으로 저장한 후 사용해야 합니다.
보고서 저장 부분
- 개인화 저장은 보고서가 저장된 상태로 개인화 저장을 할 수 있습니다.
- 보고서가 저장되어 있지 않으면, 개인화 저장이 불가합니다.
변경 전 변경 후 릴리즈 번호
포틀릿 레이아웃 컴포넌트 기능 미제공 포틀릿 레이아웃 컴포넌트 기능 제공

기능 정보	API Open	UI Open	Read Only	Not Use	Hidden	Not Recommend	해당 없음
시작 버전 정보

샘플 정보

샘플 URL :
샘플 파일

	파일	변경됨

공유된 파일이 아직 없습니다.

공간 바로가기

페이지 트리