부분적으로 가능합니다. draw.io는 파일 수준 플레이스홀더로 이름을 공유하고 데이터에서 색상을 가져올 수 있지만, 문서에는 서로 다른 페이지에 복사된 도형의 이름, 색상, 링크를 자동으로 양방향 동기화하는 기능이 명시되어 있지 않습니다.
Mac 데스크톱 작업에서 핵심은 다이어그램 하나의 배치만 바꾸면 되는지, 아니면 각자 독립적으로 배치된 여러 버전을 유지해야 하는지입니다. 레이아웃을 적용하면 기존 도형의 배치가 바뀌고, 별도의 페이지를 유지하면 관리해야 할 값과 설정이 각각 생깁니다. 아래 작업 흐름에서는 예시용 노드와 문서에 설명된 편집기 기능만 사용합니다. 레이아웃을 적용해 다이어그램 재배치하기
어떤 종류의 동기화가 필요한가요?
직사각형 세 개, Node A, Node B, Node C가 가로 배치와 세로 배치로 표시된다고 가정해 보겠습니다. 위치는 달라도 각 노드의 이름, 채우기 색상, 이동 대상 링크는 일치하기를 원합니다. 이 요청에는 서로 다른 작업이 포함되어 있습니다.
| 요구 사항 | 문서에 설명된 방법 | 한계 |
|---|---|---|
| 기존 도형의 배치 변경 | 현재 다이어그램에 레이아웃 적용 | 기존 객체를 재배치하는 기능이며, 여러 개의 병렬 보기를 유지하지는 않습니다 |
| 여러 페이지에서 이름 재사용 | 레이블에서 파일 수준 사용자 지정 속성 참조 | 공유 속성을 편집해야 하며, 레이블을 직접 편집하는 것은 별도의 작업입니다 |
| 데이터에 따라 도형 색상 지정 | 페이지 수준 스타일 규칙 또는 지원되는 스타일 플레이스홀더 사용 | 데이터 일치 여부와 적용 가능한 규칙을 관리해야 합니다 |
| 반복되는 도형에 동일한 이동 대상 지정 | 링크를 명시적으로 설정 | 레이블이 같다고 이동 대상도 같아지는 것은 아닙니다 |
| 어느 복사본에서든 편집해 세 속성을 모두 전파 | 인용된 문서에는 이를 완전히 지원하는 작업 흐름이 명시되어 있지 않습니다 | 페이지 복제를 자동 동기화 시스템으로 간주하지 마세요 |
이 차이는 문서에 설명된 적용 범위에서 비롯됩니다. 파일 속성은 모든 페이지에서 공유되고, 스타일 규칙은 각 페이지에 속하며, 링크는 도형 메타데이터로 저장됩니다. 이 기능들은 통제된 유지 관리 작업 흐름을 지원하지만, 별도의 복사본이 하나의 편집 가능한 객체가 된다는 뜻은 아닙니다. 전역 사용자 지정 속성, 스타일 규칙으로 도형 스타일 변경하기, 도형 메타데이터 편집하기
배치만 바꾸면 된다면 도형 세트를 하나만 사용하세요
한 번에 한 가지 배치만 사용하면 된다면 편집 가능한 다이어그램 하나를 유지하세요. 이렇게 하면 서로 대응하는 복사본을 관리하는 실무상 문제가 없습니다. draw.io 데스크톱 앱은 macOS에서 실행되므로 이 작업을 브라우저로 옮길 필요도 없습니다. 오프라인에서 draw.io 실행하기
직사각형 세 개를 만들고 Node A를 Node B에, Node B를 Node C에 연결하세요. 배치를 조정하기 전에 원하는 레이블, 색상, 링크를 설정합니다. 그런 다음 문서에 설명된 레이아웃 명령을 사용하세요.
Arrange > Layout을 엽니다.- 가로 또는 세로 흐름 레이아웃 등 적절한 레이아웃을 선택합니다.
- 옵션을 조정하고
Apply를 클릭합니다. - 결과를 확인합니다. 적절하지 않은 배치는
Cmd+Z를 눌러 실행 취소합니다.
레이아웃은 기존 도형을 대상으로 연결 관계를 사용해 위치를 계산합니다. 현재 레이아웃 문서에서는 연결선만 경로를 조정하는 기능과 도형을 이동하는 레이아웃을 구분합니다. 따라서 속성을 별도로 맞춰야 하는 도형 세트를 만들지 않고 표현 방식을 바꾸려면 같은 객체를 재배치하는 것이 지원되는 방법입니다. 레이아웃을 적용해 다이어그램을 빠르게 정리하기
한 가지 중요한 제한이 있습니다. 레이아웃을 차례로 적용하는 것은 저장된 보기 사이를 전환하는 기능이 아닙니다. 문서에 따르면 레이아웃은 다이어그램의 현재 상태를 기준으로 계산되므로 다른 레이아웃을 적용해도 이전 구조가 일관되게 재현되지는 않습니다. 정확한 위치를 각각 편집 가능한 상태로 보존해야 한다면 별도의 페이지를 사용하고 아래의 유지 관리 방법을 따르세요. 레이아웃을 적용해 다이어그램 재배치하기
독립적으로 배치된 페이지에서 노드 이름 공유하기
가로 버전과 세로 버전을 동시에 사용하려면 두 페이지를 하나의 파일에 보관하세요. 먼저 Wide라는 페이지를 만들고, 나중에 복제한 뒤 복사본의 이름을 Tall로 지정합니다. 문서에 설명된 페이지 메뉴에는 Duplicate Page와 Rename Page가 있습니다. 복제는 시작 배치를 제공하므로 공유 레이블은 명시적으로 설정하세요. 다이어그램에 여러 페이지 추가하기
파일 수준에서 이름 정의하기
File > Properties를 열고 Edit Data를 클릭한 다음 다음과 같은 예시 속성을 추가합니다.
| 속성 | 값 |
|---|---|
nodeAName |
Node A |
nodeBName |
Node B |
nodeCName |
Node C |
각 항목마다 Add Property를 사용한 다음 Apply를 클릭합니다. 파일 속성은 모든 페이지에서 사용할 수 있습니다. 반면 아무것도 선택하지 않은 상태에서 Edit Data를 클릭하면 현재 페이지에 속성이 정의됩니다. 이 차이에 따라 이름을 레이아웃 간에 공유할 수 있는지가 결정됩니다. 전역 사용자 지정 속성
레이블에서 해당 이름 참조하기
첫 번째 직사각형을 선택하고 Cmd+M을 누른 다음 Placeholders를 활성화하고 Apply를 클릭합니다. 레이블을 %nodeAName%으로 설정합니다. 나머지 직사각형에는 각각 %nodeBName%과 %nodeCName%을 설정합니다. 플레이스홀더를 활성화하고 속성 이름을 퍼센트 기호로 감싸는 것이 문서에 설명된 레이블 설정 방법입니다. 레이블과 툴팁에서 플레이스홀더 사용하기
이제 페이지를 복제하고 복사본의 배치를 조정합니다. 나중에 논리적 노드의 이름을 바꾸려면 파일 속성을 변경하세요. 도형, 컨테이너, 페이지에 같은 이름의 속성을 추가하지 마세요. 더 구체적인 속성이 파일 값을 덮어씁니다. 전역 사용자 지정 속성
레이블을 공유 이름에 대한 참조로 생각하세요. 이 작업 흐름에서는 표시되는 레이블을 리터럴 텍스트로 바꾸는 대신 파일 속성에서 이름을 변경하세요.
복사본이 연결되어 있다고 가정하지 않고 색상 일치시키기
작은 다이어그램이라면 스타일을 명시적으로 업데이트하는 것으로 충분할 때가 많습니다. 직사각형 하나의 스타일을 지정하고 Style 탭에서 Copy Style을 클릭한 다음 다른 페이지에서 대응하는 직사각형을 선택해 Paste Style을 클릭합니다. 이 명령을 실행하는 시점에 서식이 적용됩니다. 이후 변경 사항이 있으면 다시 적용하세요. 도형과 연결선의 스타일은 각각 별도로 복사해야 합니다. 도형과 연결선의 스타일 복사 및 붙여넣기
채우기 색상만 바꾸려면 대상 도형에서 Fill 색상 컨트롤을 사용하세요. 전체 스타일을 복사하면 의도한 색상 변경보다 더 많은 서식이 적용될 수 있습니다. 도형 스타일 변경하기
반복 가능한 색상 규칙에 페이지별 규칙 사용하기
반복되는 노드가 여러 개라면 예시 규칙을 정합니다. Node A의 모든 표현에 파란색을 사용합니다. Cmd+M을 누르고 Add Property를 사용해 각 대응 도형에 nodeKey이라는 사용자 지정 속성과 A 값을 지정합니다. 사용자 지정 속성은 도형과 연결선에서 지원됩니다. 도형 메타데이터 편집하기
각 레이아웃 페이지에서 규칙을 설정합니다.
File > Page Setup을 연 다음Advanced를 선택합니다.Style Rules옆의Edit를 클릭한 다음Add Rule을 클릭합니다.nodeKey속성을 비교 연산자=과 값A으로 일치시킵니다.Fill Color를 선택하고 파란색을 지정한 다음OK로 확인합니다.
규칙은 해당 페이지에서 조건에 맞는 도형의 스타일을 지정합니다. 각 페이지마다 규칙을 따로 관리하며, 도형을 복사할 때 대상 페이지의 규칙이 적용됩니다. Tall 페이지에서도 같은 규칙을 설정하세요. 나중에 규칙을 바꾸려면 두 페이지의 규칙을 모두 업데이트해야 합니다. 규칙으로 제어되는 스타일은 해당 규칙이 적용되는 동안 일반 서식 컨트롤로 변경할 수 없습니다. 스타일 규칙으로 도형 스타일 변경하기
현재 문서에서는 스타일 조각 fillColor=%color%;stylePlaceholders=1;을 포함한 stylePlaceholders=1을 통해 동적 색상 값을 지정하는 방법도 설명합니다. 이는 색상이 데이터를 따를 수 있다는 점을 보여주지만, 링크를 포함해 복사된 도형 전체가 동기화된다는 뜻은 아닙니다. 명시적 채우기 색상이나 페이지별 규칙의 고급 대안으로 활용하세요. AI 다이어그램 생성을 위한 스타일 참조
링크는 별도로 설정하고 이동 대상을 확인하세요
Details라는 세 번째 페이지를 추가합니다. 각 레이아웃의 Node A 직사각형을 마우스 오른쪽 버튼으로 클릭하고 Edit Link를 선택합니다. 페이지 목록에서 Details를 선택한 다음 Apply를 클릭합니다. 이렇게 하면 두 직사각형에 동일한 이동 대상을 명시적으로 지정할 수 있습니다. 페이지 문서에는 대상 페이지의 이름을 바꾸면 연결된 페이지 이름도 자동으로 업데이트된다고 설명되어 있습니다. 다이어그램에 여러 페이지 추가하기
이름이 같다는 사실만으로 이동 대상도 같다고 판단할 수는 없습니다. 문서에 설명된 link 속성은 도형의 메타데이터에 속하므로 이동 대상을 변경할 때 두 직사각형을 모두 확인하세요. 도형 메타데이터 편집하기
사용자 지정 작업 링크의 경우 draw.io에서는 작업 목록 복사 또는 모든 셀 메타데이터 복사를 설명합니다. 후자는 Style 탭에서 Edit > Copy Data와 Edit > Paste Data를 사용하며 태그, 툴팁, 플레이스홀더 같은 다른 메타데이터도 복사합니다. 동일한 메타데이터 묶음을 적용해야 하는 대상에만 이 작업을 사용하세요. 사용자 지정 링크와 셀 메타데이터 복사하기
레이아웃을 더 추가하기 전에 결과 확인하기
예시 다이어그램에 대해 간단한 확인 절차를 수행하세요. 이를 통해 공유되는 값과 의도적으로 유지 관리해야 하는 속성을 구분할 수 있습니다.
| 확인 항목 | 기대 결과 |
|---|---|
파일 속성 nodeAName을 Node A Revised로 변경 |
두 플레이스홀더 레이블에 수정된 이름이 표시됨 |
Tall 페이지의 직사각형 이동 |
원하는 독립 배치를 계속 사용할 수 있음 |
| 두 페이지에 파란색 규칙 적용 | 대응하는 두 직사각형에 지정한 채우기 색상이 표시됨 |
| 각 직사각형의 링크 확인 | 둘 다 Details로 이동함 |
| 의도한 이동 대상 변경 | 영향을 받는 각 링크를 명시적으로 업데이트하고 확인함 |
레이블에 %nodeAName%이 그대로 표시되면 Placeholders가 활성화되어 있는지, 속성 이름이 올바른지 확인하세요. 한 레이블에만 예상과 다른 값이 표시되면 도형, 상위 요소, 페이지의 속성 중 덮어쓰는 값이 있는지 확인합니다. 이는 문서에 설명된 플레이스홀더 및 적용 범위 문제 해결 방법입니다. 레이블과 툴팁에서 플레이스홀더 사용하기, 전역 사용자 지정 속성
이 Mac 데스크톱 작업에 스프레드시트 새로고침 작업 흐름을 대신 사용하지 마세요. 현재 데이터 소스 문서에는 draw.io 데스크톱 앱에서 데이터 소스를 불러올 수 없다고 명시되어 있습니다. 또한 새로고침은 수동으로 해야 하며 템플릿의 # link 지시문으로 제공한 링크는 사용되지 않는다고 설명합니다. 따라서 이 기능으로는 요청한 데스크톱 동기화를 구현할 수 없습니다. Google Sheets와 CSV 파일에서 도형 채우기 및 생성하기
한 번에 하나의 배치만 사용한다면 도형 세트 하나를 유지하고 재배치하세요. 여러 레이아웃을 계속 보존하려면 공유 이름 속성, 명시적인 색상 규칙, 별도로 관리하는 링크를 사용하세요. 이렇게 하면 검토 가능한 실용적인 결과를 얻으면서 문서에 명시된 한계도 분명히 유지할 수 있습니다. 복사된 도형이 세 속성 모두를 어디서든 편집할 수 있는 자동 시스템이 된다고 확인된 것은 아닙니다.
출처
- 레이아웃을 적용해 다이어그램 재배치하기 — draw.io
- 레이아웃을 적용해 다이어그램을 빠르게 정리하기 — draw.io
- 오프라인에서 draw.io 실행하기 — draw.io
- 다이어그램에 여러 페이지 추가하기 — draw.io
- 전역 사용자 지정 속성 — draw.io
- 레이블과 툴팁에서 플레이스홀더 사용하기 — draw.io
- 도형 메타데이터 편집하기 — draw.io
- 도형과 연결선의 스타일 복사 및 붙여넣기 — draw.io
- 도형 스타일 변경하기 — draw.io
- 스타일 규칙으로 도형 스타일 변경하기 — draw.io
- AI 다이어그램 생성을 위한 스타일 참조 — draw.io
- 사용자 지정 링크와 셀 메타데이터 복사하기 — draw.io
- Google Sheets와 CSV 파일에서 도형 채우기 및 생성하기 — draw.io