Workshop 레이아웃 구성
모듈의 레이아웃은 header, 페이지, 섹션과 overlay로 구성합니다. 왼쪽 Layout 패널에서 요소를 선택하거나 모듈 화면에서 직접 선택하여 편집합니다. 위젯은 이 영역에 배치하고 변수와 이벤트를 연결합니다.
모듈 header
Header는 모든 페이지에서 유지하는 제목, 탭과 버튼의 도구 모음입니다. 새 모듈을 만들면 화면 위에 표시합니다.
Header를 선택한 뒤 +로 Tabs나 Button Group 같은 위젯을 추가합니다. 숨겨 놓았다면 Layout 패널 목록 위의 Header를 선택하여 다시 설정할 수 있습니다.
| 설정 | 동작 |
|---|---|
| 가시성 | Header를 표시하거나 숨깁니다. |
| 제목 | 모듈 header와 브라우저 탭 또는 Carbon 탭 이름에 사용합니다. 지정하지 않으면 모듈 자원 이름을 사용합니다. |
| 제목 색 | 제목 텍스트의 색을 지정합니다. |
| 앱 로고 | 색을 지정한 아이콘 또는 이미지를 사용합니다. 이미지는 Palantir 자원에서 선택하거나 컴퓨터에서 업로드합니다. |
| 이미지 크기와 위치 | 높이를 바꾸고 가로 header에서는 왼쪽/가운데/오른쪽, 세로 header에서는 위/아래 위치를 정합니다. |
| 즐겨찾기 | 보기 모드에서 사용자가 모듈을 즐겨찾기에 넣을 수 있는지 정합니다. |
| 배경색 | Header의 배경을 지정합니다. |
| 방향 | 위쪽 가로 header 또는 왼쪽 세로 header를 선택합니다. |
| 가로 header 높이 | 가로 방향에서 높이를 정합니다. |
세로 header와 접힌 상태
세로 방향에서는 너비를 정하고 접기 기능 및 처음부터 접힌 상태를 설정할 수 있습니다. 접었을 때 사용할 이미지를 따로 지정하려면 먼저 기본 header 이미지가 있어야 합니다. 기본 로고가 아이콘이면 접힌 상태에도 그 아이콘을 표시합니다.
접힌 header에서 Button Group과 Tabs는 아이콘만 표시하고 텍스트를 숨깁니다. 그 외 위젯은 숨깁니다.
페이지
페이지는 모듈 안의 개별 화면입니다. 페이지마다 필요한 위젯을 배치하고 공통 모듈 header로 화면 사이를 이동하게 할 수 있습니다.
Layout 패널 위의 +에서 New page를 선택합니다. 새 페이지가 자동 선택되며 내용을 구성할 수 있습니다.
기본 새 페이지는 공통 header 아래 좌우 두 섹션으로 시작합니다.
아래쪽 레이아웃 템플릿 아이콘에 포인터를 올리면 배치를 미리 볼 수 있고 선택하면 페이지 배치를 바꿉니다.
편집 화면의 페이지 목록은 만든 순서로 표시합니다. 이 순서 자체가 모듈 동작을 정하지는 않습니다. 사용자 이동은 Button Group이나 Tabs에 연결한 Layout 이벤트로 구성합니다.
섹션과 내부 배치
섹션은 페이지나 overlay의 영역입니다. 하나 이상의 위젯을 넣거나 더 작은 섹션을 가진 레이아웃을 넣을 수 있습니다. 편집 모드에서 포인터를 올리면 Add widget과 Set layout이 나타납니다.
| 레이아웃 | 배치 방식 |
|---|---|
| Columns | 세로 경계로 나누어 열을 만듭니다. |
| Rows | 가로 경계로 나누어 행을 만듭니다. Enable scrolling을 사용할 수 있습니다. |
| Tabs | 섹션 위에 탭을 두고 탭마다 다른 위젯 구성을 표시합니다. |
| Flow | 표시 영역보다 긴 내용을 담는 세로 스크롤 컨테이너를 만듭니다. |
| Toolbar | Button Group, Metric Card와 단일 입력처럼 작은 위젯에 맞는 가로 도구 모음을 만듭니다. |
| Loop | 객체 집합의 객체 또는 배열의 원소마다 삽입 모듈을 반복하여 표시합니다. |
수신 영역과 조건부 표시
섹션의 Drop Handling을 켜면 다른 Workshop 구성 요소나 외부 앱에서 객체를 끌어 놓는 영역으로 사용할 수 있습니다. 드래그앤드롭 설정에서 출력 변수와 수신 후 이벤트를 구성합니다.
변수에 따라 섹션을 보이거나 숨길 수도 있습니다. Layout 패널의 아이콘과 tooltip은 조건부 표시가 설정된 섹션을 알려 주므로 화면에서 숨겨진 섹션도 찾아 관리할 수 있습니다.
잘라내기, 복사와 붙여넣기
섹션 전체와 개별 위젯을 잘라내거나 복사할 수 있습니다. 붙여넣기에서는 입력 변수를 어떻게 사용할지 정합니다.
- Paste with same input variable은 원래 입력 변수를 그대로 참조합니다.
- Paste with duplicate input variables는 원래 입력과 일치하는 새 입력 변수를 만들어 사용합니다.
Overlay
Overlay는 현재 페이지 위에 필요할 때 표시하는 화면입니다. Layout 패널의 +에서 New overlay를 추가합니다.
| 설정 | 동작 |
|---|---|
| Overlay name | 편집기와 해당 overlay의 이벤트에서 참조할 이름입니다. |
| Show overlay header | 기본 닫기 버튼이 있는 header를 표시합니다. Title과 왼쪽 Icon을 추가로 지정할 수 있습니다. |
| Variable based visibility | Boolean 변수로 가시성을 제어합니다. 모듈을 처음 열었을 때 표시하는 구성도 가능합니다. |
| On close | 닫힐 때 실행할 이벤트입니다. 가시성이 객체 속성이나 변수 변환에서 계산된다면 열린 조건을 초기화하는 데 사용할 수 있습니다. |
| Close overlay on backdrop click | Overlay 바깥을 선택했을 때 닫을지 정합니다. |
| Add background behind overlay | 뒤에 불투명한 배경을 추가합니다. 기본적으로 켜져 있습니다. |
가시성 변수는 부모 모듈과 삽입 모듈 사이에서 공유하여 Set variable value 이벤트로 바꿀 수 있습니다. Overlay를 여닫는 레이아웃 이벤트도 이 가시성 변수의 값을 갱신합니다. 페이지 선택이나 섹션 접기의 변수와 이벤트 동기화 규칙은 이벤트별로 다릅니다.
Drawer는 화면의 왼쪽이나 오른쪽에서 나옵니다. Position으로 방향, Size로 너비를 정합니다. Modal은 중앙에 표시하며 해당 유형의 추가 크기 설정은 Size입니다. 사용자가 배경을 참고하며 작업해야 하는 경우에는 overlay 디자인 원칙을 적용합니다.
섹션 제목의 모양
섹션 header를 켜면 세 가지 표현을 선택할 수 있습니다.
- Block은 본문 위의 별도 컨테이너에 제목을 둡니다.
- Contained는 제목이 본문 안에 포함된 것처럼 보이게 합니다.
- Floating은 본문 위에서 부모 섹션의 배경에 제목을 표시합니다.
배경색
페이지, 섹션과 위젯에 배경색을 지정할 수 있습니다. 밝은 모드와 어두운 모드 각각에 다섯 가지 기본 음영, Blueprint 색과 투명 옵션이 있습니다.
페이지와 섹션에는 사용자 정의 hex 색도 적용할 수 있습니다. 사용자 색 타일에서 코드를 입력하거나 Blueprint 색을 고르고, 모듈의 Saved colors를 사용할 수도 있습니다.
섹션에 사용자 배경색을 적용하면 그 안의 위젯은 배경 밝기에 따라 밝은 모드 또는 어두운 모드로 자동 전환합니다.
테두리
섹션과 위젯에 다음 네 가지 스타일을 지정할 수 있습니다.
| 스타일 | 모양 |
|---|---|
| Bordered | 한 줄 테두리를 표시합니다. |
| Outer drop shadow | 테두리 밖에 그림자를 두어 높이감을 줍니다. |
| Inner shadow | 테두리 안에 그림자를 두어 들어간 영역처럼 표현합니다. |
| Borderless | 테두리 없이 배경과 이어지게 합니다. |
Padding controls
페이지와 섹션의 모든 자식 구성 요소 주위에 일정한 여백을 정합니다.
| 선택 | 여백 |
|---|---|
| No padding | 자식 주위에 추가 여백을 두지 않습니다. |
| Compact | 네 방향에 16px를 둡니다. |
| Regular | 위/아래 24px, 왼쪽/오른쪽 48px를 둡니다. |
| Large | 위/아래 40px, 왼쪽/오른쪽 62px를 둡니다. |
| Custom | 필요한 방향별 여백을 직접 정합니다. |
Inner section style로 모든 자식 섹션에 적용할 사전 정의 스타일을 선택할 수도 있습니다.
같은 모듈의 상태와 권한을 구성할 때는 변수, 이벤트, 온톨로지 인터페이스와 권한을 함께 연결합니다.